@extends('frontEnd.layouts.master')
@section('title', 'Customer Checkout')
@push('css')
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .active-area {
            background-color: white !important;
            color: black !important;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            border: 1px solid #e5e7eb;
        }

        .payment-selected {
            border-color: black !important;
            background-color: #f9fafb;
        }
    </style>
@endpush
@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-x-16 gap-y-12">

            <!-- Right Column: Order Summary -->
            <div class="lg:col-span-5 md:order-2">
                <div class="bg-gray-50 p-6 md:p-8 rounded-3xl sticky top-[137px] border border-gray-100">
                    <h2 class="text-xl font-bold mb-6">Order Summary</h2>
                    <div class="chekout_main">
                        @include('frontEnd.layouts.ajax.checkout_body')
                    </div>
                    <p class="mt-8 text-[10px] text-gray-400 text-center uppercase tracking-widest">
                        🔒 Secure SSL Encryption &bull; Fast Delivery
                    </p>
                </div>
            </div>

            <!-- Left Column: Checkout Details -->
            <div class="lg:col-span-7 ">
                <form id="checkout-form" action="{{ route('customer.ordersave') }}" method="POST" data-parsley-validate="" class="space-y-10">
                    @csrf
                    <!-- 1. Delivery Location Switch -->
                    <section>
                        <h2 class="text-xs font-bold uppercase tracking-widest mb-6 border-b pb-2 w-max">01. Delivery Method
                        </h2>

                        <div class="flex border border-black p-1 bg-gray-50">
                            @foreach ($shippingcharge as $value)
                                <button type="button"
                                    class="area-btn flex-1 py-3 text-xs font-bold uppercase tracking-widest transition-all {{ $value->id == 1 ? 'active-area' : 'text-gray-400' }}"
                                    data-id="{{ $value->id }}">
                                    {{ $value->name }}
                                </button>
                            @endforeach
                        </div>
                        <input type="hidden" name="area" id="area_id"
                            value="{{ $shippingcharge->firstWhere('id', 1)->id ?? '' }}" required>
                    </section>

                    <!-- 2. Shipping Address -->
                    <section>
                        <h2 class="text-xs font-bold uppercase tracking-widest mb-6 border-b pb-2 w-max">02. Shipping
                            Address</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <input type="text" name="fname" placeholder="First Name"
                                class="w-full border-gray-200 rounded-lg p-3.5 border focus:ring-1 focus:ring-black outline-none transition-all">
                            <input type="text" name="lname" placeholder="Last Name"
                                class="w-full border-gray-200 rounded-lg p-3.5 border focus:ring-1 focus:ring-black outline-none transition-all">
                            <input type="tel" name="phone" placeholder="Phone Number (e.g. 017XXXXXXXX)"
                                class="md:col-span-2 w-full border-gray-200 rounded-lg p-3.5 border focus:ring-1 focus:ring-black outline-none">
                            <textarea name="address" placeholder="Full Address (House, Road, Area)" rows="2"
                                class="md:col-span-2 w-full border-gray-200 rounded-lg p-3.5 border focus:ring-1 focus:ring-black outline-none"></textarea>
                            <div class="md:col-span-2 relative">
                                <input type="text" name="zip" placeholder="Zip Code"
                                    class="w-full border-gray-200 rounded-lg p-3.5 border focus:ring-1 focus:ring-black outline-none">
                                <span
                                    class="absolute right-4 top-4 text-[10px] text-gray-400 uppercase font-medium">Optional</span>
                            </div>
                        </div>
                    </section>

                    <!-- 3. Payment Method -->
                    <section>
                        <h2 class="text-xs font-bold uppercase tracking-widest mb-6 border-b pb-2 w-max ">03. Payment Method
                        </h2>
                        <div class="space-y-3">
                            <!-- SSLCommerz -->
                            <label
                                class="payment-label flex items-center justify-between border-2 border-transparent rounded-xl p-5 cursor-pointer bg-gray-50 transition-all payment-selected">
                                <div class="flex items-center">
                                    <input type="radio" name="payment_method" value="sslcommerz" checked
                                        class="h-4 w-4 accent-black">
                                    <div class="ml-4">
                                        <span class="block text-sm font-bold">SSLCommerz (Online Payment)</span>
                                        <span class="block text-xs text-gray-500">Pay via bKash, Nagad, or Cards</span>
                                    </div>
                                </div>
                                <div class="flex space-x-2">
                                  <img src="{{ asset('sslcommers.png') }}" alt=""
                                     class="h-8 w-8 sm:h-10 sm:w-10 md:h-16 md:w-16 object-contain">
                                </div>
                            </label>

                            <!-- COD -->
                            <label
                                class="payment-label flex items-center border border-gray-200 rounded-xl p-5 cursor-pointer hover:bg-gray-50 transition-all">
                                <input type="radio" name="payment_method" value="Cash On Delivery " checked class="h-4 w-4 accent-black" >
                                <div class="ml-4">
                                    <span class="block text-sm font-bold" >Cash on Delivery</span>
                                    <span class="block text-xs text-gray-500">Handover cash to the delivery man</span>
                                </div>
                            </label>
                        </div>
                    </section>

                    <button type="submit"
                        class="w-full bg-black text-white py-[20px] rounded-xl font-bold hover:bg-zinc-800 transition duration-300 uppercase tracking-widest text-sm shadow-xl shadow-black/10">
                        Confirm Order
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function () {

            $('.area-btn').on('click', function () {
                var id = $(this).data('id');
                var btn = $(this);

                $('.area-btn').removeClass('active-area').addClass('text-gray-400');
                btn.addClass('active-area').removeClass('text-gray-400');

                $('#area_id').val(id);

                // $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');

                $.ajax({
                    type: "GET",
                    data: { id: id },
                    url: "{{ route('shipping.charge') }}",
                    dataType: "html",
                    success: function (response) {
                        if (typeof loadCheckoutBody === "function") {
                            loadCheckoutBody();
                        } else {
                            $(".chekout_main").html(response);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Error updating shipping charge: " + error);
                        alert("Something went wrong. Please try again.");
                    }
                });
            });

        });

        /******************/
        $(document).on("click", ".cart_incrementt", function (e) {
            // $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
            var id = $(this).data("id");
            if (id) {
                $.ajax({
                    type: "GET",
                    data: {
                        id: id
                    },
                    url: "{{route('cart.increment')}}",
                    success: function (res) {
                        $(".cart_count").text(res.cart_count);
                        if ($('.cart_count').length) {
                            $('.cart_count').text(res.cart_count);
                        }

                        $(".cart_subtotal").text(res.subtotal);
                        if ($('.cart_subtotal').length) {
                            $('.cart_subtotal').text(res.subtotal);
                        }

                        // reload cart body
                        loadCheckoutBody();
                    },
                });
            }
        });

        $(document).on("click", ".cart_decrementt", function (e) {
            // $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
            var id = $(this).data("id");
            if (id) {
                $.ajax({
                    type: "GET",
                    data: {
                        id: id
                    },
                    url: "{{route('cart.decrement')}}",
                    success: function (res) {
                        $(".cart_count").text(res.cart_count);
                        if ($('.cart_count').length) {
                            $('.cart_count').text(res.cart_count);
                        }

                        $(".cart_subtotal").text(res.subtotal);
                        if ($('.cart_subtotal').length) {
                            $('.cart_subtotal').text(res.subtotal);
                        }

                        // reload cart body
                        loadCheckoutBody();
                    },
                });
            }
        });

        //cart remove
        $(document).on("click", ".cart_removee", function (e) {
            e.preventDefault();
            // $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');

            let rowId = $(this).data("id");

            $.ajax({
                url: "{{ route('cart.remove') }}",
                type: "GET",
                data: {
                    rowId: rowId
                },
                success: function (res) {
                    // update cart count
                    // console.log(res);
                    $(".cart_count").text(res.cart_count);
                    if ($('.cart_count').length) {
                        $('.cart_count').text(res.cart_count);
                    }

                    $(".cart_subtotal").text(res.subtotal);
                    if ($('.cart_subtotal').length) {
                        $('.cart_subtotal').text(res.subtotal);
                    }

                    // reload cart body
                    loadCheckoutBody();

                    toastr.success('Item removed');
                },
                error: function () {
                    toastr.error('Something went wrong');
                }
            });
        });

        // $("#area").on("change", function () {
        //     var id = $(this).val();
        //     // $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
        //     $.ajax({
        //         type: "GET",
        //         data: { id: id },
        //         url: "{{ route('shipping.charge') }}",
        //         dataType: "html",
        //         success: function (response) {
        //             loadCheckoutBody();
        //         },
        //     });
        // });

        //checkout body
        function loadCheckoutBody() {
            $.ajax({
                url: "{{ route('customer.checkout.body') }}",
                type: "GET",
                cache: false,
                success: function (res) {
                    $(".chekout_main").html(res);
                }
            });
        }
    </script>
@endpush

@push('datalayerScripts')
    <script>
        window.dataLayer = window.dataLayer || [];

        // 1. Google Standard: Helper function to grab current input values
        function getCustomerData() {
            return {
                'email': $('input[name="email"]').val() || '', // Optional: Add if email field exists
                'phone_number': $('input[name="phone"]').val() || '',
                'first_name': $('input[name="fname"]').val() || '',
                'last_name': $('input[name="lname"]').val() || '',
                'address': {
                    'street': $('textarea[name="address"]').val() || '',
                    'city': 'Dhaka',
                    'postal_code': $('input[name="zip"]').val() || '',
                    'country': 'Bangladesh'
                }
            };
        }

        // 2. Google Standard: Items Array
        function getCheckoutItems() {
            return [
                @foreach(Cart::instance('shopping')->content() as $item)
                    @php 
                        $product = App\Models\Product::find($item->id);
                        $brandName = $product && $product->brand ? $product->brand->name : 'Premium Collection';
                    @endphp
                    {
                        'item_id': "{{ $item->id }}",
                        'item_name': "{{ $item->name }}",
                        'item_brand': "{{ $brandName }}",
                        'item_variant': "{{ $item->options->size ?? '' }} {{ $item->options->color ?? '' }}",
                        'price': {{ (float) str_replace(',', '', $item->price) }},
                        'quantity': {{ (int) $item->qty }}
                    }@if(!$loop->last),@endif
                @endforeach
            ];
        }

        $(document).ready(function () {
            // Initial Page Load - begin_checkout (Items only, standard)
            window.dataLayer.push({ ecommerce: null }); 
            window.dataLayer.push({
                'event': "begin_checkout",
                'ecommerce': {
                    'currency': "BDT",
                    'value': {{ (float) str_replace(',', '', Cart::instance('shopping')->total()) }},
                    'items': getCheckoutItems()
                }
            });

            // 3. IMPORTANT: Update DataLayer when user fills information
            // We trigger 'add_shipping_info' when the user finishes entering their phone/name
            $(document).on('blur', 'input[name="phone"], input[name="fname"]', function() {
                var customer = getCustomerData();
                
                // Only push if there's actual data to avoid blank arrays
                if(customer.phone_number || customer.first_name) {
                    window.dataLayer.push({
                        'event': "add_shipping_info",
                        'customer_data': customer, // PII Data for GTM Enhanced Conversions
                        'ecommerce': {
                            'currency': "BDT",
                            'value': {{ (float) str_replace(',', '', Cart::instance('shopping')->total()) }},
                            'shipping_tier': $('#area_id').val() == 1 ? "Inside Dhaka" : "Outside Dhaka",
                            'items': getCheckoutItems()
                        }
                    });
                }
            });

            // 4. Update DataLayer on Payment Selection
            $(document).on('change', 'input[name="payment_method"]', function () {
                window.dataLayer.push({
                    'event': "add_payment_info",
                    'customer_data': getCustomerData(), 
                    'ecommerce': {
                        'currency': "BDT",
                        'value': {{ (float) str_replace(',', '', Cart::instance('shopping')->total()) }},
                        'payment_type': $(this).val(),
                        'items': getCheckoutItems()
                    }
                });
            });
        });
    </script>
@endpush