@extends('front.layouts.app')

@section('content')
    @include('front.layouts.app-header')

    <section class="checkout_sec off_bg" id="checkout_sec">
        <div class="container">
            <div class="row">
                <div class="col col-12">
                    <div class="cards">
                        <!-- <div class="card_title">
                                    <h3>Checkout Details</h3>
                                </div> -->
                        <div class="card_content">
                            <div class="checkout_multi_step_wrap">
                                <div class="form_step_indicator_wrap">
                                    <ul>
                                        <li class="step_indicator_item"><span>1</span></li>
                                        <li class="step_indicator_item"><span>2</span></li>
                                        <li class="step_indicator_item"><span>3</span></li>
                                        <li class="step_indicator_item"><span>4</span></li>
                                    </ul>
                                </div>
                                <form action="" name="checkout_name" id="checkout_name" data-parsley-validate="">

                                    <!-- STEP : 1 -->

                                    <div class="form_step step_1">
                                        <div class="row">
                                            <div class="col col-8 mx-auto">
                                                <div class="card">
                                                    <div class="card_title">
                                                        <h3>Billing address</h3>
                                                    </div>
                                                    <div class="card_content">
                                                        <div class="row">
                                                            <input type="hidden" name="billingAddress_id"
                                                                value="{{ old('billingAddress_id', $billingAddress->id) }}"
                                                                id="billingAddress_id" required="">
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="billing_first_name">First name*</label>
                                                                    <input type="text" name="name"
                                                                        value="{{ old('name', $billingAddress->name) }}"
                                                                        id="billing_first_name"
                                                                        placeholder="Enter First name" required="">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="billing_last_name">Last name*</label>
                                                                    <input type="text" name="last_name"
                                                                        value="{{ old('last_name', $billingAddress->last_name) }}"
                                                                        id="billing_last_name" placeholder="Enter Last name"
                                                                        required="">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="billing_email">Email*</label>
                                                                    <input type="email" name="email"
                                                                        value="{{ old('email', $billingAddress->email) }}"
                                                                        id="billing_email" placeholder="Enter Email"
                                                                        required data-parsley-trigger="keyup"
                                                                        data-parsley-required-message="Email is required">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="">Telephone*</label>
                                                                    <input type="tel" id="PhoneNumber_1"
                                                                        name="phone_number"
                                                                        value="{{ old('phone_number', $billingAddress->phone_number) }}"
                                                                        placeholder="Enter Phone number"
                                                                        class="PhoneNumber">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="">Street name*</label>
                                                                    <input type="text" placeholder="Enter Street name"
                                                                        name="street_name"
                                                                        value="{{ old('street_name', $billingAddress->street_name) }}">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="gui-form-billing_address_zipcode">ZIP/Postal
                                                                        Code*</label>
                                                                    <select id="gui-form-billing_address_zipcode"
                                                                        name="zipcode_id"
                                                                        class="gui-form-country gui-validate">
                                                                        <option disabled value="" selected>Please
                                                                            select zipcode</option>
                                                                        @foreach ($zipcodes as $zipcode)
                                                                            <option value="{{ $zipcode->id }}"
                                                                                {{ $billingAddress->zipcode_id == $zipcode->id ? 'selected' : '' }}>
                                                                                {{ $zipcode->code }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label
                                                                        for="gui-form-billing_address-country">Country*</label>
                                                                    <select disabled name="country"
                                                                        id="gui-form-billing_address-country"
                                                                        class="gui-form-country gui-validate">
                                                                        <option selected value="" disabled>Please
                                                                            select country</option>
                                                                        @foreach ($countries as $country)
                                                                            <option value="{{ $country->id }}"
                                                                                {{ $billingAddress->zipcode->country->id == $country->id ? 'selected' : '' }}>
                                                                                {{ $country->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="gui-form-billing_address-state">State /
                                                                        Province*</label>
                                                                    <select disabled name="state"
                                                                        id="gui-form-billing_address-state"
                                                                        class="gui-form-country gui-validate">
                                                                        <option selected value="" disabled>Please
                                                                            select state</option>
                                                                        @foreach ($billingState as $state)
                                                                            <option value="{{ $state->id }}"
                                                                                {{ $billingAddress->zipcode->state->id == $state->id ? 'selected' : '' }}>
                                                                                {{ $state->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="gui-form-billing_address-city">City
                                                                        *</label>
                                                                    <select disabled name="city"
                                                                        id="gui-form-billing_address-city"
                                                                        class="gui-form-country gui-validate">
                                                                        <option selected value="" disabled>Please
                                                                            select city</option>
                                                                        @foreach ($billingCities as $cities)
                                                                            <option value="{{ $cities->id }}"
                                                                                {{ $billingAddress->zipcode->city->id == $cities->id ? 'selected' : '' }}>
                                                                                {{ $cities->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- STEP : 2 -->

                                    <div class="form_step step_3">
                                        <div class="row">
                                            <div class="col col-8 mx-auto">
                                                <div class="card">
                                                    <div class="card_title">
                                                        <h3>Shipping address</h3>
                                                    </div>
                                                    <div class="card_content">
                                                        <div class="row">
                                                            <input type="hidden" name="shippingAddress_id"
                                                                value="{{ isset($shippingAddress->id) ? old('shippingAddress_id', $shippingAddress->id) : 'null' }}"
                                                                id="shippingAddress_id">
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="shipping_first_name">First name*</label>
                                                                    <input type="text" name="shipping_name"
                                                                        value="{{ old('name', $shippingAddress->name) }}"
                                                                        id="shipping_first_name"
                                                                        placeholder="Enter First name" required="">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="shipping_last_name">Last name*</label>
                                                                    <input type="text" name="shipping_last_name"
                                                                        value="{{ old('last_name', $shippingAddress->last_name) }}"
                                                                        id="shipping_last_name"
                                                                        placeholder="Enter Last name" required="">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="shipping_email">Email*</label>
                                                                    <input type="email" name="shipping_email"
                                                                        value="{{ old('email', $shippingAddress->email) }}"
                                                                        id="shipping_email" placeholder="Enter Email"
                                                                        required data-parsley-trigger="keyup"
                                                                        data-parsley-required-message="Email is required">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="PhoneNumber_2">Telephone*</label>
                                                                    <input type="tel" id="PhoneNumber_2"
                                                                        name="shipping_phone_number"
                                                                        value="{{ old('phone_number', $shippingAddress->phone_number) }}"
                                                                        placeholder="Enter Phone number"
                                                                        class="PhoneNumber">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="shipping_street_name">Street name*</label>
                                                                    <input type="text" id="shipping_street_name"
                                                                        placeholder="Enter Street name"
                                                                        name="shipping_street_name"
                                                                        value="{{ old('street_name', $shippingAddress->street_name) }}">
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label
                                                                        for="gui-form-shipping_address_zipcode">ZIP/Postal
                                                                        Code*</label>
                                                                    <select id="gui-form-shipping_address_zipcode"
                                                                        name="shipping_zipcode_id"
                                                                        class="gui-form-country gui-validate">
                                                                        <option disabled value="" selected>Please
                                                                            select zipcode</option>
                                                                        @foreach ($zipcodes as $zipcode)
                                                                            <option value="{{ $zipcode->id }}"
                                                                                {{ $shippingAddress->zipcode_id == $zipcode->id ? 'selected' : '' }}>
                                                                                {{ $zipcode->code }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label
                                                                        for="gui-form-shipping_address-country">Country*</label>
                                                                    <select disabled name="shipping_country"
                                                                        id="gui-form-shipping_address-country"
                                                                        class="gui-form-country gui-validate">
                                                                        <option selected value="" disabled>Please
                                                                            select country</option>
                                                                        @foreach ($countries as $country)
                                                                            <option value="{{ $country->id }}"
                                                                                {{ isset($shippingAddress->zipcode) && $shippingAddress->zipcode->country->id == $country->id ? 'selected' : '' }}>
                                                                                {{ $country->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="gui-form-shipping_address-state">State /
                                                                        Province*</label>
                                                                    <select disabled name="shipping_state"
                                                                        id="gui-form-shipping_address-state"
                                                                        class="gui-form-country gui-validate">
                                                                        <option selected value="" disabled>Please
                                                                            select city</option>
                                                                        @foreach ($shippingState as $state)
                                                                            <option value="{{ $state->name }}"
                                                                                {{ $shippingAddress->zipcode->state->id == $state->id ? 'selected' : '' }}>
                                                                                {{ $state->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col col-6">
                                                                <div class="c_filed">
                                                                    <label for="gui-form-shipping_address-city">City
                                                                        *</label>
                                                                    <select disabled name="shipping_city"
                                                                        id="gui-form-shipping_address-city"
                                                                        class="gui-form-country gui-validate">
                                                                        <option selected value="" disabled>Please
                                                                            select city</option>
                                                                        @foreach ($shippingCities as $cities)
                                                                            <option value="{{ $cities->name }}"
                                                                                {{ $shippingAddress->zipcode->city->id == $cities->id ? 'selected' : '' }}>
                                                                                {{ $cities->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- </div> -->

                                    <!-- STEP : 3 -->

                                    <div class="form_step step_2">
                                        <div class="row">
                                            <div class="col col-10 mx-auto">
                                                <div class="row">

                                                    {{-- <div class="col col-6">
                                            <div class="card">
                                                <div class="card_title">
                                                    <h3>Select Shipping methods</h3>
                                                </div>
                                                <div class="card_content">
                                                    <div class="row">
                                                        <div class="col col-12">
                                                            <div class="c_radio">
                                                                <input type="radio" class="fedex payment_method_input shipping" value="fedex" name="shipping_method">
                                                                <label for=""><img src="{{asset('images/fedex_logo.svg')}}" alt=""></label>
                                                            </div>
                                                            <div class="payment_feature" id="fedex_payment_feature" style="display:none">

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}
                                                    <div class="col col-6">
                                                        <div class="card">
                                                            <div class="card_title">
                                                                <h3>Pick-up in Store</h3>
                                                                <a href="#!" class="card_link">FREE</a>
                                                            </div>
                                                            <div class="card_content">
                                                                <div class="row">
                                                                    <div class="col col-12">
                                                                        <div class="c_radio">
                                                                            <input type="radio" checked class="shipping"
                                                                                value="store" name="shipping_method">
                                                                            <label for=""><img
                                                                                    src="{{ asset('images/shop_icon.svg') }}"
                                                                                    alt=""> <span>Store
                                                                                    Pickup</span></label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- STEP : 4 -->

                                    <div class="form_step step_4">
                                        <div class="row">
                                            <div class="col col-9">
                                                <div class="card">
                                                    <div class="card_title">
                                                        <h3>Review your order</h3>
                                                    </div>
                                                    <div class="card_content">
                                                        <div class="checkout_order_item_header">
                                                            <div class="checkout_product_img_content">
                                                                <p>Product</p>
                                                            </div>
                                                            <div class="checkout_product_qnty">
                                                                <p>Quantity</p>
                                                            </div>
                                                            <div class="checkout_product_total">
                                                                <p>Subtotal</p>
                                                            </div>
                                                        </div>
                                                        <div class="checkout_order_item_wrapper">

                                                            @foreach ($cartContents as $cart)
                                                                <div class="checkout_order_item">
                                                                    <div class="checkout_product_img_content">
                                                                        <div class="checkout_image_wrap">
                                                                            @if (
                                                                                !empty($cart->product->productsImageFirst->filename) &&
                                                                                    \Illuminate\Support\Facades\Storage::exists($cart->product->productsImageFirst->filename))
                                                                                <img
                                                                                    src="{{ url('storage') . '/' . $cart->product->productsImageFirst->filename }}">
                                                                            @else
                                                                                <img
                                                                                    src="{{ url('storage') . '/no_image.png' }}">
                                                                            @endif
                                                                        </div>
                                                                        <div class="checkout_content_wrap">
                                                                            <h4>{{ $cart->name }}</h4>
                                                                            <p> {{ $cart->options->details['product_desc'] }}
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="checkout_product_qnty">
                                                                        <p>{{ $cart->qty }}</p>
                                                                    </div>
                                                                    <div class="checkout_product_total">
                                                                        <p>{{ config('constant.CURRENCY_SIGN') }}
                                                                            {{ $cart->priceTotal }}</p>
                                                                    </div>
                                                                </div>
                                                                <input type="hidden" name="discount"
                                                                    value="@if (isset($deal) && isset($cart->options->details['discount'])) {{ $cart->options->details['discount'] }} @else 0 @endif"
                                                                    id="discount" required="">
                                                            @endforeach

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col col-3">
                                                <div class="card">
                                                    <div class="card_title">
                                                        <h3>Proceed to checkout</h3>
                                                    </div>
                                                    <div class="card_content">
                                                        <div class="ord_smry_list_wrap ocheckout_list_wrap">
                                                            <ul>
                                                                <li><label for="">Items <em>
                                                                            @if (isset($deal))
                                                                                {{ Cart::instance('deal')->count() }}
                                                                            @else
                                                                                {{ Cart::count() }}
                                                                            @endif
                                                                        </em></label><span>{{ config('constant.CURRENCY_SIGN') }}{{ Cart::total() }}</span>
                                                                </li>
                                                                <li><label for="">Shipping Charges</label><span>
                                                                        {{ config('constant.CURRENCY_SIGN') }} <span
                                                                            id="checkout_shipping_charge"> 0.00<span>
                                                                            </span></li>
                                                            </ul>
                                                            <input type="hidden" name="shipping_charge"
                                                                id="shipping_charge">
                                                            <input type="hidden" name="shipping_type"
                                                                id="shipping_type">
                                                            <input type="hidden" name="is_deal"
                                                                value="@if (isset($deal)) 1 @else 0 @endif"
                                                                id="is_deal" required="">

                                                        </div>
                                                        <div class="ord_smry_final_price checkout_final_price">
                                                            <ul>
                                                                <li><label
                                                                        for="">Total</label><span>{{ config('constant.CURRENCY_SIGN') }}
                                                                        <span id="checkout_cart_total">
                                                                            {{ Cart::total() }}</span></span></li>
                                                            </ul>
                                                            <div
                                                                class="c_filed
                                                            " style="margin-bottom: 10px">
                                                                
                                                                <input type="text" placeholder="Note.." name="note">
                                                            </div>

                                                            <div class="c_btn c_btn_red">
                                                                <a href="#!" id="payNow">
                                                                    Place Order
                                                                    {{-- <style>
                                                                        .st0 {
                                                                            fill-rule: evenodd;
                                                                            clip-rule: evenodd
                                                                        }
                                                                    </style> --}}
                                                                    {{-- <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 222.5">
                                                            <g id="Stripe">
                                                                <path class="st0" d="M414 113.4c0-25.6-12.4-45.8-36.1-45.8-23.8 0-38.2 20.2-38.2 45.6 0 30.1 17 45.3 41.4 45.3 11.9 0 20.9-2.7 27.7-6.5v-20c-6.8 3.4-14.6 5.5-24.5 5.5-9.7 0-18.3-3.4-19.4-15.2h48.9c0-1.3.2-6.5.2-8.9zm-49.4-9.5c0-11.3 6.9-16 13.2-16 6.1 0 12.6 4.7 12.6 16h-25.8zM301.1 67.6c-9.8 0-16.1 4.6-19.6 7.8l-1.3-6.2h-22v116.6l25-5.3.1-28.3c3.6 2.6 8.9 6.3 17.7 6.3 17.9 0 34.2-14.4 34.2-46.1-.1-29-16.6-44.8-34.1-44.8zm-6 68.9c-5.9 0-9.4-2.1-11.8-4.7l-.1-37.1c2.6-2.9 6.2-4.9 11.9-4.9 9.1 0 15.4 10.2 15.4 23.3 0 13.4-6.2 23.4-15.4 23.4zM223.8 61.7l25.1-5.4V36l-25.1 5.3zM223.8 69.3h25.1v87.5h-25.1zM196.9 76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7 15.9-6.3 19-5.2v-23c-3.2-1.2-14.9-3.4-20.8 7.4zM146.9 47.6l-24.4 5.2-.1 80.1c0 14.8 11.1 25.7 25.9 25.7 8.2 0 14.2-1.5 17.5-3.3V135c-3.2 1.3-19 5.9-19-8.9V90.6h19V69.3h-19l.1-21.7zM79.3 94.7c0-3.9 3.2-5.4 8.5-5.4 7.6 0 17.2 2.3 24.8 6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6C67.5 67.6 54 78.2 54 95.9c0 27.6 38 23.2 38 35.1 0 4.6-4 6.1-9.6 6.1-8.3 0-18.9-3.4-27.3-8v23.8c9.3 4 18.7 5.7 27.3 5.7 20.8 0 35.1-10.3 35.1-28.2-.1-29.8-38.2-24.5-38.2-35.7z"></path>
                                                            </g>
                                                        </svg>
                                                        Pay
                                                    </a> --}}
                                                            </div>
                                                            <div id="loader-custom" style="display: none;">Your order is under process, Please wait a while.</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form_step_btns d-flex">
                                        <div class="c_btn c_btn_border">
                                            <input type="button" value="Previous" id="prevBtn"
                                                onclick="nextPrev(-1)">
                                            <!-- <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> -->
                                        </div>
                                        <div class="c_btn c_btn_red">
                                            <!-- <button type="button" id="nextBtn" onclick="nextPrev(1)">Continue</button> -->
                                            <input type="button" value="Continue" id="nextBtn" onclick="nextPrev(1)">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('front.layouts.app-footer', ['title' => 'Checkout'])
@endsection
@section('custom-js')
    <script>
        const loader = document.getElementById('loader-custom');
        const placeOrderUrl = "{{ route('place-order') }}";
        const shippingDetailUrl = "{{ route('shipping-details') }}";
        //const stripe = Stripe("{{ env('STRIPE_KE') }}");
        function getCartTotal() {
            return "{{ Cart::total() }}";
        }

        function getShippingCartTotal(cartTotal, ship_amt) {
            const total = parseFloat(cartTotal.replace(",", ""));
            return total + ship_amt;
        }
    </script>
    <script src="{{ asset('js/front/checkout.js') }}"></script>
@endsection