@extends('website.layouts.app')
@section('content')
    <section id="breadcrumb">
        <div class="container-fluid">
            <div class="row d-flex justify-content-lg-center justify-content-center align-item-center ">
                <div class="col-md-10 d-flex justify-content-lg-center justify-content-center align-item-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-lg-3 pt-3 pt-lg-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('website.cart') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Cart
                                    @else
                                        عربة
                                    @endif
                                </a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="{{ route('website.shipping.details') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Checkout
                                    @else
                                        الدفع
                                    @endif
                                </a>

                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <section id="billing-detail">
        <div class="container-fluid my-lg-5 my-4">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-xl-10  col-lg-10 col-md-12 col-12 ">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-xl-12  col-lg-12 col-md-12 col-12">
                            <div class="top-title  mb-4 mb-md-2 ">
                                <h3 class="{{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Shipping Details
                                    @else
                                        تفاصيل الشحن
                                    @endif
                                </h3>
                            </div>
                        </div>
                    </div>
                    <form id="checkOut-Process" class="shipping-detail">
                        @csrf
                        <div class="row d-flex justify-content-center align-items-start g-lg-5">
                            <!-- Billing Details -->
                            <div class="col-md-7 pt-lg-4 pt-md-4 pt-0">
                                <!-- Toggle 1 -->
                                <div class="form-check form-switch mb-2 d-flex align-items-center">
                                    <input class="form-check-input me-2" type="checkbox" name="toggleAddress1"
                                        id="toggleAddress1" checked>
                                    <label class="form-check-label text-ask1" for="toggleAddress1">
                                        @if (session('app_language', 'en') == 'en')
                                            Ask the recipient for the address
                                        @else
                                            اطلب من المستلم العنوان
                                        @endif
                                    </label>
                                </div>
                                <p class=" my-lg-4 my-2">
                                    @if (session('app_language', 'en') == 'en')
                                        If you don’t know the address, don’t worry. We will collect the address from the
                                        recipient. Delivery time maybe impacted if recipient is unreachable
                                    @else
                                        إذا كنت لا تعرف العنوان، فلا تقلق. سنأخذ العنوان من المستلم. قد يتأثر وقت التسليم في
                                        حال تعذر الوصول إلى المستلم.
                                    @endif
                                </p>
                                <div class="row g-3">
                                    <div id="addressSection">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label class="form-label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Recipient's Name
                                                    @else
                                                        اسم المستلم
                                                    @endif
                                                    <span>*</span>
                                                </label>
                                                <input type="text" class="form-control" name="sender_name"
                                                    id="sender_name">
                                                <p class="text-danger"></p>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label for="sender_country_number" class="form-label">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Phone Number
                                                        @else
                                                            رقم التليفون
                                                        @endif
                                                    </label>
                                                    <div class="form-select-container_2">
                                                        <select class="form-select" id="sender_country_code"
                                                            name="sender_country_code">
                                                            {{-- <option value="+1">US (+1)</option>
                                                            <option value="+971">UAE (+971)</option> --}}
                                                            <option value="+966">Saudi Arabia (+966)</option>
                                                            {{-- <option value="+91">India (+91)</option> --}}
                                                            {{-- <option value="+44">UK (+44)</option> --}}
                                                        </select>

                                                        <input type="tel" class="form-control"
                                                            name="sender_country_number" id="sender_country_number"
                                                            placeholder="">
                                                    </div>
                                                    <p class="text-danger"></p>
                                                </div>
                                            </div>

                                            {{-- <div class="col-md-6">
                                                <label class="form-label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Recipient's Email
                                                    @else
                                                        البريد الإلكتروني للمستلم
                                                    @endif
                                                    <span>*</span>
                                                </label>
                                                <input type="email" name="sender_email" id="sender_email"
                                                    class="form-control" placeholder="Enter email">
                                                <p class="text-danger"></p>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <!-- Toggle 2 -->
                                    <div class="form-check form-switch mb-2 d-flex align-items-center">
                                        <input class="form-check-input me-2" type="checkbox" name="toggleAddress2"
                                            id="toggleAddress2">
                                        <label class="form-check-label text-ask2" for="toggleAddress2">
                                            @if (session('app_language', 'en') == 'en')
                                                Add recipient address
                                            @else
                                                اطلب من المستلم العنوان
                                            @endif
                                        </label>
                                    </div>
                                    <div id="addressSection2" style="display: none;">
                                        <div class="row">
                                            <p class="my-lg-4 my-2">
                                                @if (session('app_language', 'en') == 'en')
                                                    If you don’t know the address, don’t worry. We will collect the address
                                                    from
                                                    the
                                                    recipient. Delivery time maybe impacted if recipient is unreachable
                                                @else
                                                    إذا كنت لا تعرف العنوان، فلا تقلق. سنأخذ العنوان من المستلم. قد يتأثر
                                                    وقت
                                                    التسليم في حال تعذر الوصول إلى المستلم.
                                                @endif
                                            </p>
                                            <div class="col-md-12 mt-0">
                                                <label class="form-label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Recipient’s Name
                                                    @else
                                                        اسم المستلم
                                                    @endif
                                                    <span>*</span>
                                                </label>
                                                <input type="text" class="form-control" name="recipient_name"
                                                    id="recipient_name">
                                                <p class="text-danger"></p>
                                            </div>
                                            {{-- <div class="row"> --}}
                                            <div class="col-md-12 my-lg-4 my-2">
                                                <div class="mb-3">
                                                    <label for="countryCode" class="form-label">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Phone Number
                                                        @else
                                                            رقم التليفون
                                                        @endif
                                                    </label>
                                                    <div class="form-select-container_2">
                                                        <select class="form-select" id="recipient_country_code"
                                                            name="recipient_country_code">
                                                            {{-- <option value="+1">US (+1)</option> --}}
                                                            {{-- <option value="+971">UAE (+971)</option> --}}
                                                            <option value="+966">Saudi Arabia (+966)</option>
                                                            {{-- <option value="+91">India (+91)</option> --}}
                                                            {{-- <option value="+44">UK (+44)</option> --}}
                                                        </select>

                                                        <input type="tel" class="form-control"
                                                            name="recipient_country_number" id="recipient_country_number"
                                                            placeholder="">
                                                    </div>
                                                    <p class="text-danger"></p>
                                                </div>
                                            </div>
                                            {{-- <div class="col-md-6 my-lg-4 my-2">
                                                <label class="form-label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Recipient’s Email
                                                    @else
                                                        البريد الإلكتروني للمستلم
                                                    @endif
                                                    <span>*</span>
                                                </label>
                                                <input type="email" class="form-control" placeholder="Enter email"
                                                    name="recipient_email" id="recipient_email">
                                                <p class="text-danger"></p>
                                            </div> --}}
                                            {{-- </div> --}}
                                            <!-- Map Container with Overlay -->
                                            <div class="container ">
                                                <div class="position-relative">
                                                    <!-- Search Bar Overlay -->
                                                    <div class="position-absolute top-0 start-0 m-3 shadow-sm"
                                                        style="z-index: 10; max-width: 300px; width: 100%;">
                                                        <div class="input-group">
                                                            <span class="input-group-text bg-white border-0">
                                                                <i class="bi bi-search"></i>
                                                            </span>
                                                            <input type="text" class="form-control border-0"
                                                                placeholder="Search">
                                                        </div>
                                                    </div>
                                                    <!-- Embedded Google Map -->
                                                    <div id="map" class="w-100 h-100">
                                                        <iframe
                                                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.2251606404873!2d-122.41941508437499!3d37.77492927975933!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c065554c9%3A0x9f2a4f32c1b1f487!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1617323499817!5m2!1sen!2sus"
                                                            width="100%" height="100%" style="border:0;"
                                                            allowfullscreen="" loading="lazy">
                                                        </iframe>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Recipient’s Area
                                                    @else
                                                        منطقة المستلم
                                                    @endif
                                                    <span>*</span>
                                                </label>
                                                <input type="text" name="recipient_area" id="recipient_area"
                                                    class="form-control mb-3">
                                                <p class="text-danger"></p>
                                            </div>
                                            <div class="col-12 mb-3 mt-0">
                                                <label class="form-label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Recipient’s Address
                                                    @else
                                                        عنوان المستلم
                                                    @endif
                                                    <span>*</span>
                                                </label>
                                                <textarea class="form-control" name="recipient_address" id="recipient_address" placeholder=""
                                                    id="floatingTextarea"></textarea>
                                                <p class="text-danger"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Order Summary -->
                            <div class="col-md-5">
                                <div class="order-summary rounded-4 p-lg-4 p-3">
                                    <div class="order-title">
                                        <h5>
                                            @if (session('app_language', 'en') == 'en')
                                                Your Order
                                            @else
                                                طلبك
                                            @endif
                                        </h5>
                                    </div>
                                    <div class="product-title">
                                        <h6>
                                            @if (session('app_language', 'en') == 'en')
                                                Product
                                            @else
                                                منتج
                                            @endif
                                        </h6>
                                    </div>
                                    @if (Cart::count() > 0)
                                        @foreach (Cart::content() as $item)
                                            <div class="product-item d-flex justify-content-between align-item-start">
                                                {{-- <h4>
                                                    Delivery Date: {{ $item->options->delivery_date }} <br>
                                                    Delivery Time: {{ $item->options->delivery_time }} <br>
                                                </h4> --}}
                                                {{ $item->name }}
                                                <span class="item-price">{{ display_price($item->price) }}</span>
                                            </div>
                                            <div class="pro-list">
                                                <ul>
                                                    <li>
                                                        {{-- <span class="pro-label">
                                                            @if (session('app_language', 'en') == 'en')
                                                                Select size:
                                                            @else
                                                                اختر الحجم:
                                                            @endif
                                                        </span>
                                                        <span>-</span> --}}
                                                    </li>
                                                    <li>
                                                        {{-- <span class="pro-label">
                                                            @if (session('app_language', 'en') == 'en')
                                                                In-store Pickup:
                                                            @else
                                                                الاستلام من المتجر:
                                                            @endif
                                                        </span>
                                                        <span>
                                                            @if (session('app_language', 'en') == 'en')
                                                                New York
                                                            @else
                                                                نيويورك
                                                            @endif
                                                        </span> --}}
                                                    </li>
                                                    @if ($item->options->delivery_date != '')
                                                        <li>
                                                            <span class="pro-label">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Delivery Date:
                                                                @else
                                                                    تاريخ التسليم او الوصول:
                                                                @endif
                                                            </span>
                                                            <span>
                                                                {{ $item->options->delivery_date ?? 'N/A' }}
                                                            </span>
                                                        </li>
                                                    @endif
                                                    @if ($item->options->delivery_time != '')
                                                        <li>
                                                            <span class="pro-label">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Delivery Time:
                                                                @else
                                                                    موعد التسليم:
                                                                @endif
                                                            </span>
                                                            <span>{{ $item->options->delivery_time ?? 'N/A' }}</span>
                                                        </li>
                                                    @endif
                                                    @if ($item->options->personal_message != '')
                                                        <li>
                                                            <span class="pro-label">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Personal Message:
                                                                @else
                                                                    الرسالة الشخصية:
                                                                @endif
                                                            </span>
                                                            <span>{{ $item->options->personal_message ?? 'N/A' }}</span>
                                                        </li>
                                                    @endif
                                                    @if ($item->options->note != '')
                                                        <li>
                                                            <span class="pro-label">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Note:
                                                                @else
                                                                    ملحوظة:
                                                                @endif
                                                            </span>
                                                            <span>{{ $item->options->note ?? 'N/A' }}</span>
                                                        </li>
                                                    @endif
                                                    @if ($item->options->file != '')
                                                        <span class="pro-label">
                                                            @if (session('app_language', 'en') == 'en')
                                                                File:
                                                            @else
                                                                ملف:
                                                            @endif
                                                        </span>
                                                        <a href="{{ $item->options->file }}">
                                                            @if (session('app_language', 'en') == 'en')
                                                                View
                                                            @else
                                                                منظر
                                                            @endif
                                                        </a>
                                                    @endif
                                                    <br>
                                                </ul>
                                            </div>
                                        @endforeach
                                    @else
                                        <p>
                                            @if (session('app_language', 'en') == 'en')
                                                Your cart is empty.
                                            @else
                                                عربة التسوق الخاصة بك فارغة.
                                            @endif
                                        </p>
                                    @endif
                                    @php
                                        $giftOrder = session('gift_order');
                                    @endphp

                                    @if ($giftOrder)
                                        <div
                                            class="product-title d-flex justify-content-between align-items-center py-2 my-3 border-top border-bottom">
                                            <div>
                                                <h6 class="mb-0">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $giftOrder['product_name'] ?? 'Gift Card' }}
                                                        {{-- ({{ $giftOrder['recipient_name'] }} to {{ $giftOrder['recipient_email'] }}) --}}
                                                    @else
                                                        {{ $giftOrder['product_name'] ?? 'بطاقة هدية' }}
                                                        {{-- ({{ $giftOrder['recipient_name'] }} إلى {{ $giftOrder['recipient_email'] }}) --}}
                                                    @endif
                                                </h6>
                                            </div>
                                            <span class="price">{{ display_price($giftOrder['selected_amount']) }}</span>
                                        </div>
                                    @endif


                                    <div class="shiping">
                                        <div class="ship-label">
                                            <h6>
                                                @if (session('app_language', 'en') == 'en')
                                                    Shipping
                                                @else
                                                    شحن
                                                @endif
                                            </h6>
                                        </div>
                                        <div class="form-check ps-0">
                                            <input type="radio" id="flat-rate" name="shipping" checked>
                                            <label for="flat-rate" class="free-info">
                                                @if (session('app_language', 'en') == 'en')
                                                    Free Shipping will available for 2,3 days
                                                @else
                                                    الشحن المجاني سيكون متاحًا لمدة 2 أو 3 أيام
                                                @endif
                                            </label>
                                        </div>
                                        <div class="form-check ps-0">
                                            <input type="radio" id="free-shipping" name="shipping">
                                            <label for="free-shipping" class="free-info">
                                                @if (session('app_language', 'en') == 'en')
                                                    Fast delivery within 0 mins
                                                @else
                                                    تسليم سريع خلال 0 دقيقة
                                                @endif
                                                ({{ display_price(0) }})
                                            </label>
                                        </div>
                                        <div class="form-check ps-0">
                                            <input type="radio" id="local-pickup" name="shipping">
                                            <label for="local-pickup" class="free-info">
                                                @if (session('app_language', 'en') == 'en')
                                                    Same day delivery
                                                @else
                                                    التسليم في نفس اليوم
                                                @endif
                                                ({{ display_price(0) }})
                                            </label>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center border-bottom">
                                            <h6>
                                                @if (session('app_language', 'en') == 'en')
                                                    Shipping
                                                @else
                                                    شحن
                                                @endif
                                            </h6>
                                            <span class="float-end shiping-price">({{ display_price(0) }})</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center border-bottom my-2">
                                            <h6>
                                                @if (session('app_language', 'en') == 'en')
                                                    Coupon Discount
                                                @else
                                                    خصم القسيمة
                                                @endif
                                            </h6>
                                            <span class="float-end shiping-price">({{ display_price(0) }})</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center border-bottom">
                                            <h6>
                                                @if (session('app_language', 'en') == 'en')
                                                    VAT
                                                @else
                                                    ضريبة القيمة المضافة
                                                @endif
                                            </h6>
                                            <span class="float-end vat-price">({{ display_price(0) }})</span>
                                        </div>
                                    </div>
                                    <div class="total-price mt-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h6>
                                                @if (session('app_language', 'en') == 'en')
                                                    Total
                                                @else
                                                    المجموع
                                                @endif
                                            </h6>
                                            @php
                                                $subTotal = floatval(str_replace(',', '', Cart::subtotal()));
                                            @endphp
                                            <span class="float-end">{{ display_price($subTotal) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-detail mt-4 rounded-4 p-lg-4 p-3">
                                    <h4>
                                        @if (session('app_language', 'en') == 'en')
                                            Payment Method
                                        @else
                                            طريقة الدفع
                                        @endif
                                    </h4>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="payment_method"
                                            id="payment_method_one" value="Cash on Delivery" />
                                        <label class="form-check-label" for="">
                                            @if (session('app_language', 'en') == 'en')
                                                Cash on Delivery
                                            @else
                                                الدفع عند التسليم
                                            @endif
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="payment_method"
                                            id="payment_method_two" value="GeIdea" />
                                        <label class="form-check-label" for="">
                                            @if (session('app_language', 'en') == 'en')
                                                GeIdea Payment
                                            @else
                                                دفع GeIdea
                                            @endif
                                        </label>
                                    </div>


                                    <input type="submit" value="Pay Now" class="btn btn-primary mt-2">
                                </div>

                            </div>
                        </div>
                    </form>
                    <form id="paymentForm">
                        @csrf
                        {{-- <input type="hidden" id="geidea_amount" name="amount"
                            value="{{ display_price(Cart::subtotal(2, '.', ''), false) }}"> --}}
                            <input type="hidden" id="geidea_amount" name="amount"
                            value="{{ display_price($subTotal, false) }}">
                        <input type="hidden" id="geidea_order_id" name="order_id" value="{{ $order_id }}">
                        <input type="hidden" id="geidea_email" name="email"
                            value="{{ auth()->user()->email ?? 'guest@example.com' }}">
                        {{-- <button type="button" class="btn btn-primary" onclick="initiatePayment()">Pay with Geidea</button> --}}
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section id="footer-delivery">
        <div class="container-fluid fd-bg py-4">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-11">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="assets/images/l1.svg" alt="" class="img-fluid me-2">
                                <h5 class="mt-3"> Express Delivery </h5>

                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start  align-items-center">
                                <img src="assets/images/l3.svg" alt="" class="img-fluid me-2">
                                <h5 class="mt-3"> No Address Hassle </h5>

                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start  align-items-center">
                                <img src="assets/images/l2.svg" alt="" class="img-fluid me-2">
                                <h5 class="mt-3"> Premium Flowers &amp; Gifts </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scriptJs')
    <script>
        $(document).ready(function() {
            function toggleSections() {
                const isAddress1Checked = $('#toggleAddress1').is(':checked');
                const isAddress2Checked = $('#toggleAddress2').is(':checked');

                // Ensure only one can be checked at a time
                if (isAddress1Checked && isAddress2Checked) {
                    $('#toggleAddress2').prop('checked', false);
                }

                // Show/hide sections based on checked state
                if ($('#toggleAddress1').is(':checked')) {
                    $('#addressSection').show();
                    $('#addressSection2').hide();
                } else if ($('#toggleAddress2').is(':checked')) {
                    $('#addressSection2').show();
                    $('#addressSection').hide();
                } else {
                    // Default to showing addressSection if both are unchecked
                    $('#toggleAddress1').prop('checked', true);
                    $('#addressSection').show();
                    $('#addressSection2').hide();
                }
            }

            // Initial setup
            toggleSections();

            // Bind change events
            $('#toggleAddress1').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#toggleAddress2').prop('checked', false);
                }
                toggleSections();
            });

            $('#toggleAddress2').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#toggleAddress1').prop('checked', false);
                }
                toggleSections();
            });
        });

        $(document).ready(function() {
            // Initial check
            $("#card-payment-form").addClass('d-none');
            $("#payment_method_one").click(function() {
                if ($(this).is(":checked") == true) {
                    $("#card-payment-form").addClass('d-none');
                }
            });

            $("#payment_method_two").click(function() {
                if ($(this).is(":checked") == true) {
                    $("#card-payment-form").removeClass('d-none');
                }
            });

            // $(document).on("submit", "#checkOut-Process", function(event) {
            //     event.preventDefault();
            //     alert("HI");
            // });
            $(document).on("submit", "#checkOut-Process", function(event) {
                event.preventDefault();

                var isChecked = $("#toggleAddress1").is(":checked");

                if (isChecked) {
                    // Validate sender fields
                    let isValid = true;

                    // Recipient's Name validation
                    const senderName = $("#sender_name").val().trim();
                    if (senderName === "") {
                        $("#sender_name").next(".text-danger").text("Recipient's Name is required");
                        isValid = false;
                    } else {
                        $("#sender_name").next(".text-danger").text("");
                    }

                    const senderPhone = $("#sender_country_number").val().trim();
                    if (senderPhone === "") {
                        $("#sender_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("Phone Number is required");
                        isValid = false;
                    } else if (!/^[\d\+\-\s]+$/.test(senderPhone)) {
                        $("#sender_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("Phone number must contain only digits, +, or -");
                        isValid = false;
                    } else if (senderPhone.replace(/[^0-9]/g, "").length < 8) {
                        $("#sender_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("Phone number must be at least 8 digits");
                        isValid = false;
                    } else {
                        $("#sender_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("");
                    }

                    // Email validation
                    // const senderEmail = $("#sender_email").val().trim();
                    // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    // if (senderEmail === "") {
                    //     $("#sender_email").next(".text-danger").text("Recipient's Email is required");
                    //     isValid = false;
                    // } else if (!emailRegex.test(senderEmail)) {
                    //     $("#sender_email").next(".text-danger").text("Please enter a valid email address");
                    //     isValid = false;
                    // } else {
                    //     $("#sender_email").next(".text-danger").text("");
                    // }

                    // if (!isValid) {
                    //     $("button[type=submit]").prop('disabled', false);
                    //     return false;
                    // }
                } else {
                    // Validate recipient fields
                    let isValid = true;

                    // Recipient's Name validation
                    const recipientName = $("#recipient_name").val().trim();
                    if (recipientName === "") {
                        $("#recipient_name").next(".text-danger").text("Recipient's Name is required");
                        isValid = false;
                    } else {
                        $("#recipient_name").next(".text-danger").text("");
                    }

                    // Phone validation
                    const recipientPhone = $("#recipient_country_number").val().trim();
                    if (recipientPhone === "") {
                        $("#recipient_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("Phone Number is required");
                        isValid = false;
                    } else if (!/^[\d\+\-\s]+$/.test(recipientPhone)) {
                        $("#recipient_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("Phone number must contain only digits, +, or -");
                        isValid = false;
                    } else if (recipientPhone.replace(/[^0-9]/g, "").length < 8) {
                        $("#recipient_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("Phone number must be at least 8 digits");
                        isValid = false;
                    } else {
                        $("#recipient_country_number")
                            .closest(".form-select-container_2")
                            .next(".text-danger")
                            .text("");
                    }

                    // Email validation
                    // const recipientEmail = $("#recipient_email").val().trim();
                    // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    // if (recipientEmail === "") {
                    //     $("#recipient_email").next(".text-danger").text("Recipient's Email is required");
                    //     isValid = false;
                    // } else if (!emailRegex.test(recipientEmail)) {
                    //     $("#recipient_email").next(".text-danger").text(
                    //         "Please enter a valid email address");
                    //     isValid = false;
                    // } else {
                    //     $("#recipient_email").next(".text-danger").text("");
                    // }

                    // Recipient's Area validation
                    const recipientArea = $("#recipient_area").val().trim();
                    if (recipientArea === "") {
                        $("#recipient_area").next(".text-danger").text("Recipient's Area is required");
                        isValid = false;
                    } else {
                        $("#recipient_area").next(".text-danger").text("");
                    }

                    // Recipient's Address validation
                    const recipientAddress = $("#recipient_address").val().trim();
                    if (recipientAddress === "") {
                        $("#recipient_address").next(".text-danger").text(
                            "Recipient's Address is required");
                        isValid = false;
                    } else {
                        $("#recipient_address").next(".text-danger").text("");
                    }

                    if (!isValid) {
                        $("button[type=submit]").prop('disabled', false);
                        return false;
                    }
                }
                // Disable submit button to prevent multiple submissions
                $("button[type=submit]").prop('disabled', true);

                // 1. Validate Payment Method
                if (!$('#payment_method_one').is(':checked') && !$('#payment_method_two').is(':checked')) {
                    toastr.error('Please select a payment method', "Required");
                    $("button[type=submit]").prop('disabled', false);
                    return false;
                }

                // 2. Validate Cart Contents
                let cartItems = @json(Cart::content());
                let cartCount = @json(Cart::count());
                if (cartCount === 0) {
                    toastr.error("Your cart is empty. Please add products before checkout.", "Error");
                    $("button[type=submit]").prop('disabled', false);
                    return false;
                }

                // 3. Validate Product Types (if needed)
                let validateProduct = false;
                let invalidItems = Object.values(cartItems).filter(item => {
                    if (item.options.type == 'Product') {
                        validateProduct = true;
                    }
                });

                if (validateProduct == false) {
                    toastr.error("Minimum One Product is Required", "Required");
                    $("button[type=submit]").prop('disabled', false);
                    return false;
                }
                // 4. Process Payment Based on Selection
                if ($('#payment_method_one').is(':checked')) {
                    var data = $("#checkOut-Process").serialize();
                    $.ajax({
                        url: '{{ route('website.shipping.process') }}',
                        type: 'post',
                        data: data,
                        success: function(response) {
                            $("button[type=submit]").prop('disabled', false);
                            if (response.status === true) {
                                toastr.success(response.message, "Success");
                                $('#checkOut-Process')[0].reset();
                                setTimeout(function() {
                                    window.location.href = response.redirect_url;
                                }, 2000);
                            } else {
                                toastr.error("Please Try Again", "Required");
                            }
                        },
                        error: function() {
                            $("button[type=submit]").prop('disabled', false);
                            toastr.error("Please try again", "Error");
                        }
                    });
                } else if ($('#payment_method_two').is(':checked')) {
                    var paymentResult = initiatePayment();
                    // Make sure to handle the payment result and re-enable the button if needed
                }
            });
            // $(document).on("submit", "#checkOut-Process", function(event) {
            //     event.preventDefault();
            // alert("HI");
            // var isChecked = $("#toggleAddress1").is(":checked");

            // if (isChecked) {
            //     alert("True - Checkbox is checked");
            // } else {
            //     alert("False - Checkbox is not checked");
            // }
            // $("button[type=submit]").prop('disabled', true);
            // if (!$('#payment_method_one').is(':checked') && !$('#payment_method_two').is(':checked')) {
            //     toastr.error('Please select a payment method', "Required");
            //     $("button[type=submit]").prop('disabled', false);
            //     return false;
            // }
            // 2. Validate Cart Contents (using server-side data passed to JS)
            // let cartItems = @json(Cart::content());
            // let cartCount = @json(Cart::count());
            // if (cartCount === 0) {
            //     toastr.error("Your cart is empty. Please add products before checkout.", "Error");
            //     $("button[type=submit]").prop('disabled', false);
            //     return false;
            // }
            // let validateProduct = false;
            // 3. Validate Product Types (if needed)
            // let invalidItems = Object.values(cartItems).filter(item => {
            //     if (item.options.type == 'Product') {
            //         validateProduct = true;
            //     }
            // });

            // if (validateProduct == false) {
            //     toastr.error("Minimum One Product is Required", "Required");
            //     $("button[type=submit]").prop('disabled', false);
            //     return false;
            // }
            // 4. Process Payment Based on Selection
            // if ($('#payment_method_one').is(':checked')) {
            //     var data = $("#checkOut-Process").serialize();
            //     $.ajax({
            //         url: '{{ route('website.shipping.process') }}',
            //         type: 'post',
            //         data: data,
            //         success: function(response) {
            //             $("button[type=submit]").prop('disabled', false);
            //             if (response.status === true) {
            //                 toastr.success(response.message, "Success");
            //                 $('#checkOut-Process')[0].reset();
            //                 setTimeout(function() {
            //                     window.location.href = response.redirect_url;
            //                 }, 2000);
            //             } else {
            //                 toastr.error("Please Try Again", "Required");
            //             }
            //         },
            //         error: function() {
            //             $("button[type=submit]").prop('disabled', false);
            //             toastr.error("Please try again", "Error");
            //         }
            //     });
            // } else if ($('#payment_method_two').is(':checked')) {
            //     var paymentResult = initiatePayment();
            // }
            // });
        });
    </script>

    <script>
        function initiatePayment() {
            //alert($('input[name=payment_method]').attr('checked'));
            if (!$('#payment_method_one').is(':checked') && !$('#payment_method_two').is(':checked')) {
                alert(" Please check payment method");
                $("button[type=submit]").prop('disabled', false);
                return false;
            } else {

                if (!$("#checkOut-Process").validate()) {
                    alert("validation");
                    $("button[type=submit]").prop('disabled', false);
                    return false;
                } else {
                    const form = document.getElementById('paymentForm');
                    const formData = new FormData(form);

                    fetch('/geidea/create-session', {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: formData
                        })
                        .then(response => {
                            const contentType = response.headers.get('content-type');
                            if (!contentType || !contentType.includes('application/json')) {
                                return response.text().then(text => {
                                    throw new Error(`Invalid response: ${text.substring(0, 100)}...`);
                                });
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.sessionId) {
                                startPayment(data.sessionId);
                            } else {
                                throw new Error(data.message || 'Payment session creation failed');
                            }
                        })
                        .catch(error => {
                            console.error('Payment error:', error);
                            //alert('Payment Error: ' + error.message);
                        });
                }
            }

        }

        function startPayment(sessionId) {
            const payment = new GeideaCheckout(
                onSuccess,
                onError,
                onCancel
            );
            payment.startPayment(sessionId);
        }

        function onSuccess(data) {
            // Serialize form data
            var data = $("#checkOut-Process").serialize();

            $.ajax({
                url: '{{ route('website.shipping.process') }}',
                type: 'post',
                data: data,
                success: function(response) {
                    if (response.status === true) {
                        toastr.success(response.message, "Success");
                        $('#checkOut-Process')[0].reset();
                        setTimeout(function() {
                            window.location.href = response.redirect_url;
                        }, 2000);
                    } else {
                        handleFormErrors(response.errors, response.message);
                    }
                },
                error: function() {
                    toastr.error("Please Try Again...", "Error");
                }
            });
        }

        function onError(data) {
            console.error('Payment failed:', data);
            //alert('Payment failed: ' + (data.responseMessage || 'Unknown error'));
            //return false;
        }

        function onCancel(data) {
            window.location.href = '/payment/cancelled';
            return false;
        }
    </script>
@endsection