@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">
                                @if (session('app_language', 'en') == 'en')
                                    Checkout
                                @else
                                    الدفع
                                @endif
                            </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">
                        <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 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="row">
                                        <div class="col-md-6 my-lg-4 my-2">
                                            <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 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" name="sender_email" id="sender_email" class="form-control"
                                                placeholder="Enter email">
                                            <p class="text-danger"></p>
                                        </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>
                                    <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-6 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 class="mb-3 g-count-btn row d-flex justify-content-between align-items-center">
                                        <div class="col-lg-4 col-md-4 pe-lg-0 px-md-0 my-2 my-lg-0">
                                            <div class="cart_button ">
                                                <a href="#">
                                                    Continue
                                                </a>
                                            </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>{{ $item->name }}</h4>
                                                <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>
                                                    <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>
                                                    <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>
                                                    <li>
                                                        <span class="pro-label">
                                                            @if (session('app_language', 'en') == 'en')
                                                                Personal Message:
                                                            @else
                                                                الرسالة الشخصية:
                                                            @endif
                                                        </span>
                                                        <span>{{ $item->options->message ?? 'N/A' }}</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        @endforeach
                                    @else
                                        <p>
                                            @if (session('app_language', 'en') == 'en')
                                                Your cart is empty.
                                            @else
                                                عربة التسوق الخاصة بك فارغة.
                                            @endif
                                        </p>
                                    @endif
                                    <div
                                        class="product-title d-flex justify-content-between align-items-center py-2 my-3 border-top border-bottom">
                                        <h6 class="mb-0">
                                            @if (session('app_language', 'en') == 'en')
                                                Gift Card
                                            @else
                                                بطاقة هدية
                                            @endif
                                        </h6>
                                        <span class="price">{{ display_price(0) }}</span>
                                    </div>
                                    <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 90 mins
                                                @else
                                                    تسليم سريع خلال 90 دقيقة
                                                @endif
                                                ({{ display_price(100) }})
                                            </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(50) }})
                                            </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(50) }})</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>
                                            <span class="float-end">{{ display_price(Cart::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="cod" />
                                        <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')
                                                Stripe Payment
                                            @else
                                                الدفع الشريطي
                                            @endif
                                        </label>
                                    </div> --}}
                                    {{-- <div class="credit-card  my-3 position-relative" id="card-payment-form">
                                        <label class="card-label">Card number</label>
                                        <input type="text" class="form-control " placeholder="1234 1234 1234 1234">
                                        <img src="assets/images/visa-card.png" alt="" class="cc-img img-fluid">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="card-label"> Expiration date</label>
                                                <input type="text" class="form-control" placeholder="MM/YY">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="card-label"> Security code</label>
                                                <input type="text" class="form-control" placeholder="CVV">
                                            </div>
                                        </div>
                                    </div> --}}
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="payment_method"
                                            id="payment_method_three" 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="{{ Cart::subtotal(2, '.', '') }}">
                        <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() {
            $('#toggleAddress1').change(function() {
                if ($(this).is(':checked')) {
                    $('#toggleAddress2').prop('checked', false);
                }
            });

            $('#toggleAddress2').change(function() {
                if ($(this).is(':checked')) {
                    $('#toggleAddress1').prop('checked', false);
                }
            });
            $("#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();
             $("button[type=submit]").prop('disabled', true);
            var paymentResult = initiatePayment();
            // if(paymentResult==true){
                
            // }else{
            //     alert('payment failed');
            //     return false;
            // }
        });
    </script>

<script>
    function initiatePayment() {
        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) {
        //window.location.href = `/payment/success?orderId=${data.orderId}&reference=${data.reference}`;
        //return true;
        //var data = new FormData(this);
        var data = $("#checkOut-Process").serialize();
        console.log(data);
        $.ajax({
            url: '{{ route('website.shipping.process') }}',
            type: 'post',
            data: data,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.status === true) {
                    $(".error").removeClass('invalid-feedback').html('');
                    $("input, select").removeClass('is-invalid');
                    toastr.success(response.message, "Success");
                    $('#checkOut-Process')[0].reset();
                    // 🔁 Redirect after 2 seconds
                    setTimeout(function() {
                        window.location.href = response.redirect_url;
                    }, 2000); // 2000 milliseconds = 2 seconds
                    $("button[type=submit]").prop('disabled', false);
                } else {
                    let errors = response['errors'];
                    $("button[type=submit]").prop('disabled', false);
                    $(".error").removeClass('invalid-feedback').html('');
                    $("input, select").removeClass('is-invalid');
                    $.each(errors, function(key, value) {
                        $(`#${key}`).addClass('is-invalid')
                            .siblings('p')
                            .addClass('invalid-feedback')
                            .html(value);
                    });
                    toastr.error(response.message, "Required");
                }
            },
            error: function(jqXHR, exception) {
                toastr.error("Please Try Again...", "Error");
                $("button[type=submit]").prop('disabled', false);
            }
        });
    }

    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