@extends('front.layouts.master')
@section('content')
    @php
        $breadcrumbOption = getThemeOption('breadcrumb') ?? [];
        $breadcrumbImg = $breadcrumbOption['breadcrumb_img'] ?? null;
        $breadcrumbColor = $breadcrumbOption['breadcrumb_color'] ?? '#f1f1f1';
    @endphp
    <div class="breadcrumb-section mb-120">
        <div class="breadcrumb-wrap"
            style="
            @if ($breadcrumbImg) background-image: url('{{ asset('storage/theme-options/' . $breadcrumbImg) }}'); @endif
            background-color: {{ $breadcrumbColor }};
            background-size: cover;
            background-position: center;
         ">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="breadcrumb-content">
                            <ul>
                                <li>
                                    <a href="{{ url('/') }}">{{ translate('Home') }}</a>
                                </li>
                                <li>{{ translate('Checkout') }}</li>
                            </ul>
                            <h1>{{ translate('Checkout') }}</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pricing-plan-area mb-120">
        <div class="container">
            <div class="row g-4 mb-70 justify-content-center align-items-center form-wrapper">

                <div class="error"></div>

                <form action="{{ route('company.payment') }}" class="payment-form" method="post">
                    @csrf
                    <input type="hidden" name="id" value="{{ authCheck() ? authCheck()->id : '' }}">
                    <div class="row">

                        <div class="col-sm-7">
                            <div class="row">
                                <div class="col-sm-12 mb-25 mt-5">
                                    <div class="section-title1">
                                        <h2> <span> {{ translate('Billing') }} </span> {{ translate('Information') }} </h2>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-inner mb-25">
                                        <label for="firstname"> {{ translate('First Name') }} <span>*</span></label>
                                        <div class="input-area">
                                            <input type="text" id="first_name" readonly name="first_name"
                                                value="{{ authCheck() ? authCheck()->first_name : '' }}">
                                        </div>
                                        <span class="text-danger error-text first_name_err"></span>
                                        @if ($errors->has('first_name'))
                                            <div class="text-danger">{{ $errors->first('first_name') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-inner mb-25">
                                        <label for="lastname">{{ translate('Last Name') }}<span>*</span></label>
                                        <div class="input-area">
                                            <input type="text" id="last_name" name="last_name"
                                                value="{{ authCheck() ? authCheck()->last_name : '' }}">
                                        </div>
                                        <span class="text-danger error-text last_name_err"></span>
                                        @if ($errors->has('last_name'))
                                            <div class="text-danger">{{ $errors->first('last_name') }}</div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-inner mb-25">
                                        <label for="email"> {{ translate('Email') }}<span>*</span></label>
                                        <div class="input-area">
                                            <input type="email" id="email" readonly name="email"
                                                value="{{ authCheck() ? authCheck()->email : '' }}">
                                        </div>
                                        <span class="text-danger error-text email_err"></span>
                                        @if ($errors->has('email'))
                                            <div class="text-danger">{{ $errors->first('email') }}</div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-inner mb-25">
                                        <label for="phone"> {{ translate('Phone') }}<span>*</span></label>
                                        <div class="input-area">
                                            <input type="phone" id="phone" name="phone"
                                                value="{{ authCheck() ? authCheck()->phone : '' }}">
                                        </div>
                                        <span class="text-danger error-text phone_err"></span>
                                        @if ($errors->has('phone'))
                                            <div class="text-danger">{{ $errors->first('phone') }}</div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-inner mb-25">
                                        <label for="company_name"> {{ translate('Company Name') }}<span>*</span></label>
                                        <div class="input-area">
                                            <input type="text" id="company_name" name="company_name"
                                                value="{{ authCheck() ? authCheck()->company?->company_name : '' }}">
                                        </div>
                                        <span class="text-danger error-text company_name_err"></span>
                                        @if ($errors->has('company_name'))
                                            <div class="text-danger">{{ $errors->first('company_name') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-inner mb-25">
                                        <label for="note"> {{ translate('Note') }}</label>
                                        <div class="input-area">
                                            <input type="text" name="order_note">
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-inner mb-25">
                                        <label for="email">{{ translate('Company Location') }}<span>*</span></label>
                                        <div class="input-area">
                                            <input type="text" id="company_location" name="company_location"
                                                value="{{ authCheck() ? authCheck()->company?->company_location : '' }}">
                                        </div>
                                        <div class="text-danger error-text company_location_err"></div>
                                        @if ($errors->has('company_location'))
                                            <div class="text-danger">{{ $errors->first('company_location') }}</div>
                                        @endif
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-5 col-md-6">
                            <div class="pricing-plan-card3">
                                @csrf
                                <h4>{{ translate('Order Summary') }}</h4>
                                <table id="invoice-card">
                                    <tbody>
                                        @if (Session::has('package'))
                                            @php
                                                $vat = 0;
                                                $subtotal = 0;
                                            @endphp
                                            @foreach (Session::get('package') as $key => $package)
                                                @php
                                                    $subtotal += $package['total_price'];
                                                @endphp
                                                <tr>
                                                    <td>
                                                        @if ($key == 'cv_bank')
                                                            {{ $package['name'] }} (<span
                                                                class="package-item">{{ $package['select_qty'] }}</span>
                                                            {{ translate('CV For') }} $<span
                                                                class="unit-price">{{ $package['price'] }}</span>)
                                                        @else
                                                            {{ isset($package['package_name']) ? $package['package_name'] : $package['name'] }}
                                                            (<span class="package-item">{{ $package['select_qty'] }}</span>
                                                            x
                                                            {{ isset(getThemeOption('backend_general')['default_currency']) ? getThemeOption('backend_general')['default_currency'] : "$" }}<span
                                                                class="unit-price">{{ $package['price'] }}</span>)
                                                        @endif

                                                    </td>
                                                    <td> {{ isset(getThemeOption('backend_general')['default_currency']) ? getThemeOption('backend_general')['default_currency'] : "$" }}<span
                                                            class="package-item-price price">
                                                            {{ number_format($package['total_price'], 2) }} </span></td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        <tr>
                                            <td>{{ translate('Sub Total') }}</td>
                                            <td> {{ isset(getThemeOption('backend_general')['default_currency']) ? getThemeOption('backend_general')['default_currency'] : "$" }}<span
                                                    id="sub-total">{{ number_format($subtotal, 2) }}</span> </td>
                                        </tr>
                                        <tr>

                                            @php
                                                $vatPrice = isset(getThemeOption('backend_general')['tax_rate'])
                                                    ? getThemeOption('backend_general')['tax_rate']
                                                    : 0;
                                                $vat = ($subtotal * $vatPrice) / 100;
                                                number_format($vat, 2);
                                            @endphp
                                            <td>{{ translate('Tax') }}({{ $vatPrice }}%)</td>
                                            <td> {{ isset(getThemeOption('backend_general')['default_currency']) ? getThemeOption('backend_general')['default_currency'] : "$" }}<span
                                                    id="vat-price">{{ number_format($vat, 2) }}</span></td>
                                        </tr>
                                        <tr>
                                            <td>{{ translate('Total') }}</td>
                                            <td>=
                                                {{ isset(getThemeOption('backend_general')['default_currency']) ? getThemeOption('backend_general')['default_currency'] : "$" }}<span
                                                    class="pay-price">{{ number_format($subtotal + $vat, 2) }}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="details-form mt-4">
                                    <div class="details-form-title">
                                        <h5>{{ translate('Select Payment Method') }}</h5>
                                    </div>
                                    <ul class="payment-options">
                                        <li class="paypal" data-method="paypal">
                                            <img src="{{ asset('frontend/assets/images/paypal-logo.svg') }}"
                                                alt="paypal-logo">
                                            <div class="checked">
                                                <svg width="7" height="6" viewBox="0 0 7 6"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M5.9119 0.191292C6.03287 0.0672398 6.19384 -0.00134136 6.36085 1.98831e-05C6.52786 0.00138113 6.68785 0.0725785 6.80705 0.198588C6.92626 0.324598 6.99536 0.495564 6.99977 0.675411C7.00419 0.855259 6.94357 1.02992 6.83071 1.16254L3.4045 5.77827C3.34558 5.84663 3.27448 5.90148 3.19543 5.93956C3.11639 5.97764 3.03102 5.99815 2.94445 5.99988C2.85788 6.00161 2.77187 5.98451 2.69157 5.94961C2.61127 5.91471 2.53832 5.86273 2.4771 5.79677L0.204979 3.34923C0.141704 3.28572 0.0909531 3.20913 0.0557533 3.12403C0.0205534 3.03893 0.00162595 2.94707 0.000100227 2.85392C-0.0014255 2.76077 0.0144818 2.66824 0.0468729 2.58186C0.0792639 2.49547 0.127475 2.417 0.188631 2.35112C0.249787 2.28525 0.322633 2.23331 0.402826 2.19842C0.483018 2.16353 0.568913 2.14639 0.655387 2.14804C0.741861 2.14968 0.827141 2.17007 0.906141 2.20799C0.985141 2.24591 1.05624 2.30057 1.1152 2.36873L2.91332 4.30475L5.89559 0.211642C5.90096 0.204521 5.90583 0.197726 5.9119 0.191292Z" />
                                                </svg>
                                            </div>
                                        </li>
                                        <li class="card-payment" data-method="stripe">
                                            {{ translate('Stripe') }}
                                            <div class="checked">
                                                <svg width="7" height="6" viewBox="0 0 7 6"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M5.9119 0.191292C6.03287 0.0672398 6.19384 -0.00134136 6.36085 1.98831e-05C6.52786 0.00138113 6.68785 0.0725785 6.80705 0.198588C6.92626 0.324598 6.99536 0.495564 6.99977 0.675411C7.00419 0.855259 6.94357 1.02992 6.83071 1.16254L3.4045 5.77827C3.34558 5.84663 3.27448 5.90148 3.19543 5.93956C3.11639 5.97764 3.03102 5.99815 2.94445 5.99988C2.85788 6.00161 2.77187 5.98451 2.69157 5.94961C2.61127 5.91471 2.53832 5.86273 2.4771 5.79677L0.204979 3.34923C0.141704 3.28572 0.0909531 3.20913 0.0557533 3.12403C0.0205534 3.03893 0.00162595 2.94707 0.000100227 2.85392C-0.0014255 2.76077 0.0144818 2.66824 0.0468729 2.58186C0.0792639 2.49547 0.127475 2.417 0.188631 2.35112C0.249787 2.28525 0.322633 2.23331 0.402826 2.19842C0.483018 2.16353 0.568913 2.14639 0.655387 2.14804C0.741861 2.14968 0.827141 2.17007 0.906141 2.20799C0.985141 2.24591 1.05624 2.30057 1.1152 2.36873L2.91332 4.30475L5.89559 0.211642C5.90096 0.204521 5.90583 0.197726 5.9119 0.191292Z" />
                                                </svg>
                                            </div>
                                        </li>
                                        <li class="cash-on-delivery" data-method="bank_on_deposit">
                                            {{ translate('Ofline Payment') }}
                                            <div class="checked">
                                                <svg width="7" height="6" viewBox="0 0 7 6"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M5.9119 0.191292C6.03287 0.0672398 6.19384 -0.00134136 6.36085 1.98831e-05C6.52786 0.00138113 6.68785 0.0725785 6.80705 0.198588C6.92626 0.324598 6.99536 0.495564 6.99977 0.675411C7.00419 0.855259 6.94357 1.02992 6.83071 1.16254L3.4045 5.77827C3.34558 5.84663 3.27448 5.90148 3.19543 5.93956C3.11639 5.97764 3.03102 5.99815 2.94445 5.99988C2.85788 6.00161 2.77187 5.98451 2.69157 5.94961C2.61127 5.91471 2.53832 5.86273 2.4771 5.79677L0.204979 3.34923C0.141704 3.28572 0.0909531 3.20913 0.0557533 3.12403C0.0205534 3.03893 0.00162595 2.94707 0.000100227 2.85392C-0.0014255 2.76077 0.0144818 2.66824 0.0468729 2.58186C0.0792639 2.49547 0.127475 2.417 0.188631 2.35112C0.249787 2.28525 0.322633 2.23331 0.402826 2.19842C0.483018 2.16353 0.568913 2.14639 0.655387 2.14804C0.741861 2.14968 0.827141 2.17007 0.906141 2.20799C0.985141 2.24591 1.05624 2.30057 1.1152 2.36873L2.91332 4.30475L5.89559 0.211642C5.90096 0.204521 5.90583 0.197726 5.9119 0.191292Z" />
                                                </svg>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="text-danger error-text method_err"></div>
                                    @if ($errors->has('method'))
                                        <div class="text-danger">{{ $errors->first('method') }}</div>
                                    @endif

                                    <div class="payment-form" id="card-payment">
                                    </div>
                                    <div class="form-inner mb-50">
                                        <div class="form-agreement form-inner d-flex justify-content-between">
                                            <div class="form-group two">
                                                <input type="checkbox" id="html" name="terms_condition"> <label
                                                    for="html"> {{ translate('I read & agree to The') }} <a
                                                        href="{{ isset(getThemeOption('page_setting')['terms_condition_url']) ? getThemeOption('page_setting')['terms_condition_url'] . '?style=list-view' : 'javascript:void(0)' }}">{{ translate('Terms & Conditions') }}</a>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="text-danger error-text terms_condition_err"></div>
                                        @if ($errors->has('terms_condition'))
                                            <div class="text-danger">{{ $errors->first('terms_condition') }}</div>
                                        @endif
                                    </div>
                                </div>
                                @php
                                    session()->put('total', round($subtotal + $vat, 2));
                                @endphp
                                <h3 class="total-price">
                                    {{ isset(getThemeOption('backend_general')['default_currency']) ? getThemeOption('backend_general')['default_currency'] : "$" }}<span
                                        class="pay-price">{{ number_format($subtotal + $vat, 2) }}</span></h3>


                                <div class="pay-btn">
                                    <button type="button" class="btn primry-btn-2 lg-btn pay-now-button" id="button"
                                        data-spinning-button>{{ translate('Pay Now') }} </button>
                                </div>

                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm" style="width:600px; margin:auto">
                    <div class="modal-content">

                        <div class="modal-body">
                            <div class="form-wrapper">
                                <div class="form-title">
                                    <h3>{{ translate('Log In Here') }}!</h3>
                                    <span></span>
                                </div>
                                <div class="errors"></div>
                                <form method="post" action="{{ route('user.login.success') }}" id="loginForm">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-inner mb-25">
                                                <label for="email">{{ translate('Email') }}*</label>
                                                <div class="input-area">
                                                    <img src="http://127.0.0.1:8000/frontend/assets/images/icon/email-2.svg"
                                                        alt="email-icon">
                                                    <input type="email" id="email" name="email">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-inner">
                                                <label for="password">{{ translate('Password') }}*</label>
                                                <input type="password" name="password" id="password"
                                                    placeholder="Password">
                                                <i class="bi bi-eye-slash" id="togglePassword"></i>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div
                                                class="form-agreement form-inner d-flex justify-content-between flex-wrap">
                                                <div class="form-group">
                                                    <input type="checkbox" id="html" name="remember">
                                                    <label for="html">{{ translate('Remember Me') }}</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <button type="button" class="btn btn-danger btn-sm m-3"
                                                data-bs-dismiss="modal">{{ translate('Close') }}</button>
                                            <button type="submit"
                                                class="primry-btn-2 btn-sm m-3">{{ translate('Log In') }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('post_scripts')
    @include('js.front.checkout-js')
@endpush