@extends('front.layout.app')
@section('content')
    <style>
        .payment-icon {
            border: 2px solid #ddd;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .payment-icon.selected {
            border-color: #5e2ced; /* highlight color */
            background-color: #f4f0ff;
        }

        .is-invalid {
            border: 2px solid #ee1243 !important;
            background: #fff6f8;
        }

        .checkout-loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .checkout-loader img {
            width: 155px;
            height: 133px;
            margin-bottom: 19px;
            margin-left: 76px;
        }

        .checkout-loader p {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

    </style>
    @php
        $auth = Auth::user();
    @endphp

    <section class="gs-breadcrumb-section bg-class"
             data-background="{{asset('assets/images/1724480495Imagexxxxxpng.png')}}">
        <div class="container">
            <div class="row justify-content-center content-wrapper">
                <div class="col-12">
                    <h2 class="breadcrumb-title">Checkout</h2>
                    <ul class="bread-menu">
                        <li><a href="{{route('front.home')}}">Home</a></li>
                        <li><a href="{{route('checkout.front')}}">Checkout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>



    <div class="gs-checkout-wrapper">
        <div class="container">

            <form class="address-wrapper" action="{{route('checkout.form.front')}}"
                  method="POST">
                @csrf
                <div class="row gy-4">
                    <div class="col-lg-7 col-xl-8 wow fadeInUp" data-wow-delay=".2s">
                        <!-- personal information -->
                        <div class="mb-40">
                            <h4 class="form-title">Personal Information</h4>
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="name">Name</label>

                                        <input
                                            class="input-cls"
                                            id="name"
                                            name="full_name"
                                            value="{{ $auth->name ?? old('full_name') }}"
                                            type="text"
                                            placeholder="Enter Your Name"
                                            @if($auth) readonly @endif
                                        >

                                        @error('full_name')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="email">Email</label>
                                        <input class="input-cls" id="email" type="email" name="email"
                                               placeholder="Enter Your Email"
                                               value="{{$auth->email ?? old('email') }}" @if($auth) readonly @endif>
                                        @error('email')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                @if(!$auth)
                                    <div class="col-lg-12">
                                        <div class="gs-checkbox-wrapper">
                                            <input type="checkbox" id="makeAccount" name="makeAccount" value="1"
                                                {{ old('makeAccount') ? 'checked' : '' }}>
                                            <label class="icon-label" for="makeAccount">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                                     viewBox="0 0 12 12" fill="none">
                                                    <path d="M10 3L4.5 8.5L2 6" stroke="#EE1243" stroke-width="1.6666"
                                                          stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                            </label>
                                            <label for="makeAccount">Create an account ?</label>
                                        </div>
                                    </div>

                                    <div class="col-12 collapse" id="show_passwords">
                                        <div class="row gy-4">
                                            <div class="col-lg-6">
                                                <div class="input-wrapper">
                                                    <label class="label-cls" for="crpass">Create Password</label>
                                                    <input class="input-cls" id="crpass" type="password" name="password"
                                                           placeholder="Create Your Password">
                                                    @error('password')
                                                    <label class="text-danger">{{$message}}</label>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="input-wrapper">
                                                    <label class="label-cls" for="conpass">Confirm Password</label>
                                                    <input class="input-cls" id="conpass" type="password"
                                                           name="confirm_password"
                                                           placeholder="Confirm Password">
                                                    @error('confirm_password')
                                                    <label class="text-danger">{{$message}}</label>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                            </div>
                        </div>

                        <!-- Billing Details -->
                        <div class="mb-40">
                            <h4 class="form-title">Billing Details</h4>
                            <div class="row g-4">
                                <div class="col-lg-6 ">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="Shipping">Shipping</label>
                                        <select class="input-cls nice-select" id="shipop" name="shipping" required="">
                                            <option value="shipto">Ship To Address</option>
                                            <option value="pickup">Pick Up</option>
                                        </select>
                                        @error('shipping')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="phone">
                                            Phone Number </label>
                                        <input class="input-cls" id="phone" type="tel" placeholder="Phone Number"
                                               name="phone" value="{{ $auth->phone ?? old('phone') }}"
                                               @if($auth) readonly @endif>

                                        @error('phone')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="address">
                                            Address </label>
                                        <textarea class="input-cls" id="address" placeholder="Address"
                                                  name="address"
                                                  rows="3"
                                                  @if($auth) readonly @endif>{{$auth->address ??  old('address') }}</textarea>

                                        @error('address')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>


                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="zip">
                                            Postal Code </label>
                                        <input class="input-cls" id="zip" type="text" placeholder="Postal Code"
                                               name="zip" value="{{ old('zip') }}">

                                        @error('zip')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>


                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls">Select Country</label>
                                        <select class="nice-select" id="select_country" name="country">
                                            <option value="" disabled {{ old('country') ? '' : 'selected' }}>Select
                                                Country
                                            </option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->country_name }}"
                                                    {{ old('country') == $country->country_name ? 'selected' : '' }}>
                                                    {{ $country->country_name }}
                                                </option>
                                            @endforeach
                                        </select>


                                        @error('country')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-6 d-none select_state">
                                    <div class="input-wrapper">
                                        <label class="label-cls">Enter State</label>
                                        <input type="text" id="input_state" name="state" class="input-cls"
                                               value="{{ old('state') }}">

                                        @error('state')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>

                                </div>

                                <div class="col-lg-6 d-none select_city">
                                    <div class="input-wrapper">
                                        <label class="label-cls">Enter City</label>
                                        <input type="text" id="input_city" name="city" class="input-cls"
                                               value="{{ old('city') }}">
                                        @error('city')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-12 mt-3">
                                    <label class="label-cls">Select Payment Method</label>
                                    <div class="payment-methods d-flex gap-3">
                                        <div class="payment-icon" data-value="stripe">
                                            <img src="{{ asset('assets/images/stripe.png') }}" alt="Stripe" width="80px"
                                                 class="img-fluid"/>
                                        </div>
                                        <div class="payment-icon" data-value="paypal">
                                            <img src="{{ asset('assets/images/paypal.png') }}" alt="PayPal" width="80px"
                                                 class="img-fluid"/>
                                        </div>
                                    </div>
                                    <input type="hidden" name="payment_method" id="payment_method"
                                           value="{{ old('payment_method') }}" required>


                                    @error('payment_method')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                </div>


                                <!-- chekbox -->
                                <div class="col-lg-12  " id="ship_deff">
                                    <div class="gs-checkbox-wrapper" data-bs-toggle="collapse"
                                         data-bs-target="#show_shipping_address" role="region" aria-expanded="false"
                                         aria-controls="show_shipping_address">
                                        <input type="checkbox" id="shpto" name="is_shipping" value="1"
                                            {{ old('is_shipping') ? 'checked' : '' }}>

                                        <label class="icon-label" for="shpto">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                                 viewBox="0 0 12 12" fill="none">
                                                <path d="M10 3L4.5 8.5L2 6" stroke="#EE1243" stroke-width="1.6666"
                                                      stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </label>
                                        <label for="shpto">Ship to a Different Address?</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Shipping Address -->
                        <div class="collapse" id="show_shipping_address">
                            <h4 class="form-title">Shipping Address</h4>
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="shipping_name">
                                            Name </label>
                                        <input class="input-cls" id="shipping_name" type="text" placeholder="Full Name"
                                               name="shipping_name" value="{{ old('shipping_name') }}">

                                        @error('shipping_name')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="shipping_phone">
                                            Phone Number </label>
                                        <input class="input-cls" id="shipping_phone" type="tel"
                                               placeholder="Phone Number"
                                               name="shipping_phone" value="{{ old('shipping_phone') }}">

                                        @error('shipping_phone')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="shipping_address">
                                            Address </label>
                                        <input class="input-cls" id="shipping_address" type="text" placeholder="Address"
                                               name="shipping_address" value="{{ old('shipping_address') }}">

                                        @error('shipping_address')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="shipping_zip">
                                            Postal Code </label>
                                        <input class="input-cls" id="shipping_zip" type="text" placeholder="Postal Code"
                                               name="shipping_zip" value="{{ old('shipping_zip') }}">
                                        @error('shipping_zip')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input-wrapper">
                                        <label class="label-cls">Select Country</label>
                                        <select class="nice-select" id="diff_select_country"
                                                name="diff_customer_country">
                                            <option value=""
                                                    disabled {{ old('diff_customer_country') ? '' : 'selected' }}>Select
                                                Country
                                            </option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->country_name }}"
                                                    {{ old('diff_customer_country') == $country->country_name ? 'selected' : '' }}>
                                                    {{ $country->country_name }}
                                                </option>
                                            @endforeach
                                        </select>

                                        @error('diff_customer_country')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-6 d-none diff_select_state">
                                    <div class="input-wrapper">
                                        <label class="label-cls">Enter State</label>
                                        <input type="text" id="diff_input_state" name="diff_customer_state"
                                               class="input-cls"
                                               value="{{ old('diff_customer_state') }}">
                                        @error('diff_customer_state')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-6 d-none diff_select_city">
                                    <div class="input-wrapper">
                                        <label class="label-cls">Enter City</label>
                                        <input type="text" id="diff_input_city" name="diff_customer_city"
                                               class="input-cls"
                                               value="{{ old('diff_customer_city') }}">
                                        @error('diff_customer_city')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="input-wrapper">
                                        <label class="label-cls" for="Order-Note">
                                            Order Note </label>
                                        <input class="input-cls" id="Order-Note" name="order_notes" type="text"
                                               placeholder="Order note (Optional)" value="{{ old('order_notes') }}">

                                        @error('order_notes')
                                        <label class="text-danger">{{$message}}</label>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-xl-4 wow fadeInUp" data-wow-delay=".2s">
                        <div class="summary-box">
                            <h4 class="form-title">Summery</h4>


                            <!-- Price Details -->
                            <div class="summary-inner-box">
                                <h6 class="summary-title">Price Details</h6>
                                <div class="details-wrapper">
                                    @php
                                        $cart = Session::get('cart', []);
                                        $subTotal = array_sum(array_map(fn($c) => $c['price'] * $c['quantity'], $cart));

                                        $gameDiscount = session('game_discount');
                                        $discountAmount = 0;

                                        if($gameDiscount) {
                                            foreach ($cart as $item) {
                                                if ($item['product_id'] == $gameDiscount['product_id']) {
                                                    $discountAmount = $gameDiscount['discounted_price'];
                                                    break;
                                                }
                                            }
                                        }

                                        $shippingCost = 0;
                                        $packingCost = 0;
                                        $tax = 0;

                                        $grandTotal = $subTotal - $discountAmount + $shippingCost + $packingCost + $tax;
                                    @endphp

                                    <div class="price-details">
                                        <span>Total MRP</span>
                                        <span class="right-side cart-total">${{ number_format($subTotal, 2) }}</span>
                                    </div>

                                    @if($discountAmount > 0)
                                        <div class="price-details">
                                            <span>Puzzle Discount</span>
                                            <span class="right-side">- ${{ number_format($discountAmount, 2) }}</span>
                                        </div>
                                    @endif

                                    @if($tax > 0)
                                        <div class="price-details">
                                            <span>Tax</span>
                                            <span class="right-side">${{ number_format($tax, 2) }}</span>
                                        </div>
                                    @endif

                                    <div class="price-details">
                                        <span>Shipping Cost</span>
                                        <span
                                            class="right-side shipping_cost_view">${{ number_format($shippingCost, 2) }}</span>
                                    </div>

                                    <div class="price-details">
                                        <span>Packaging Cost</span>
                                        <span
                                            class="right-side packing_cost_view">${{ number_format($packingCost, 2) }}</span>
                                    </div>
                                </div>

                                <hr>

                                <div class="final-price">
                                    <span>Final Price</span>
                                    <span class="total-amount"
                                          id="final-cost">${{ number_format($grandTotal, 2) }}</span>
                                </div>
                            </div>

                            <input type="hidden"
                                   value="{{ array_sum(array_map(fn($c) => $c['price'] * $c['quantity'], Session::get('cart'))) }}"
                                   name="total">
                            <!-- btn wrapper -->
                            <div class="summary-inner-box">
                                <div class="btn-wrappers">
                                    <button type="submit" class="template-btn w-100">
                                        Continue
                                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24"
                                             viewBox="0 0 25 24" fill="none">
                                            <g clip-path="url(#clip0_489_34176)">
                                                <path
                                                    d="M23.62 9.9099L19.75 5.9999C19.657 5.90617 19.5464 5.83178 19.4246 5.78101C19.3027 5.73024 19.172 5.7041 19.04 5.7041C18.908 5.7041 18.7773 5.73024 18.6554 5.78101C18.5336 5.83178 18.423 5.90617 18.33 5.9999C18.1437 6.18726 18.0392 6.44071 18.0392 6.7049C18.0392 6.96909 18.1437 7.22254 18.33 7.4099L21.89 10.9999H1.5C1.23478 10.9999 0.98043 11.1053 0.792893 11.2928C0.605357 11.4803 0.5 11.7347 0.5 11.9999H0.5C0.5 12.2651 0.605357 12.5195 0.792893 12.707C0.98043 12.8945 1.23478 12.9999 1.5 12.9999H21.95L18.33 16.6099C18.2363 16.7029 18.1619 16.8135 18.1111 16.9353C18.0603 17.0572 18.0342 17.1879 18.0342 17.3199C18.0342 17.4519 18.0603 17.5826 18.1111 17.7045C18.1619 17.8263 18.2363 17.9369 18.33 18.0299C18.423 18.1236 18.5336 18.198 18.6554 18.2488C18.7773 18.2996 18.908 18.3257 19.04 18.3257C19.172 18.3257 19.3027 18.2996 19.4246 18.2488C19.5464 18.198 19.657 18.1236 19.75 18.0299L23.62 14.1499C24.1818 13.5874 24.4974 12.8249 24.4974 12.0299C24.4974 11.2349 24.1818 10.4724 23.62 9.9099Z"
                                                    fill="white"/>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_489_34176">
                                                    <rect width="24" height="24" fill="white"
                                                          transform="translate(0.5)"/>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </form>
        </div>
    </div>


    <!-- Loader Overlay -->
    <div id="checkout-loader" class="checkout-loader-overlay d-none">
        <div class="checkout-loader">
            <img src="{{ asset('assets/images/loader.gif') }}" alt="Loading...">
            <p>Processing your payment, please wait...</p>
        </div>
    </div>

    <!--  checkout wrapper end-->
@endsection
@push('script')

    <script>
        $(document).ready(function () {
            // Show state input after selecting country
            $('#select_country').on('change', function () {
                $('.select_state').removeClass('d-none');
                $('#input_state').val(''); // clear previous value
                $('.select_city').addClass('d-none'); // hide city until state entered
            });

            // Show city input after entering state
            $('#input_state').on('input', function () {
                let stateVal = $(this).val();
                if (stateVal.length > 0) {
                    $('.select_city').removeClass('d-none');
                    $('#input_city').val(''); // clear previous value
                } else {
                    $('.select_city').addClass('d-none'); // hide city if state cleared
                }
            });


            $('#diff_select_country').on('change', function () {
                $('.diff_select_state').removeClass('d-none');
                $('#diff_input_state').val(''); // clear previous value
                $('.diff_select_city').addClass('d-none'); // hide city until state entered
            });

            // Show city input after entering state
            $('#diff_input_state').on('input', function () {
                let stateVal = $(this).val();
                if (stateVal.length > 0) {
                    $('.diff_select_city').removeClass('d-none');
                    $('#diff_input_city').val(''); // clear previous value
                } else {
                    $('.diff_select_city').addClass('d-none'); // hide city if state cleared
                }
            });


            $('.payment-icon').on('click', function () {
                // Remove selected class from all
                $('.payment-icon').removeClass('selected');

                // Add selected class to clicked one
                $(this).addClass('selected');

                // Set value to hidden input
                $('#payment_method').val($(this).data('value'));
            });

            $('form.address-wrapper').on('submit', function (e) {
                let isValid = true;
                let firstInvalid = null;

                $(this).find('[required]').each(function () {
                    if (!$(this).val()) {
                        isValid = false;
                        $(this).addClass('is-invalid');

                        if (!firstInvalid) firstInvalid = this;
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                if (!$('#payment_method').val()) {
                    isValid = false;
                    $('.payment-methods').addClass('border border-danger rounded');
                } else {
                    $('.payment-methods').removeClass('border border-danger');
                }

                if (!isValid) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: $(firstInvalid).offset().top - 100
                    }, 500);
                }
            });

            $('#makeAccount').on('change', function () {
                if ($(this).is(':checked')) {
                    $('#show_passwords').collapse('show');
                } else {
                    $('#show_passwords').collapse('hide');
                }
            });
        });

        $(document).on("submit", ".address-wrapper", function () {
            $("#checkout-loader").removeClass("d-none");
        });

    </script>
@endpush