@extends('frontend.app')
@section('content')

    <style>
        html {
            overflow: hidden;
            overflow-y: auto;
            margin: 0;
            padding: 0;
        }

        .stripe-button-el {
            display: none;
        }

        input[type='text'],
        input[type='number'],
        input[type='email'],
        #selectCourier {
            border: 1px solid oklch(0.62 0.18 355);
        }

        .form-group label {
            font-family: 'Hind Siliguri', sans-serif;
        }
        .label-font-size{
            font-size: 20px;
        }

        @media (max-width: 767px) {
            .table>:not(caption)>*>* {
                font-size: 12px;
            }

            .pro-qty input {
                font-size: 12px;
                width: 32px;
                margin: 0;
            }

            .checkout_details * {
                font-size: 13px;
            }

            .product-quanity {
                width: 50px;
            }
        }

        .hind {
            font-family: 'Hind Siliguri', sans-serif;
        }

        /* ===== Shipping radios - centered card layout ===== */
        .ship-radio-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }

        .ship-option {
            position: relative;
            display: inline-block;
        }

        .ship-option input[type="radio"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }

        .ship-card {
            min-width: 220px;
            padding: 12px 16px;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            text-align: center;
            transition: all .15s ease-in-out;
            box-shadow: 0 6px 16px rgba(2, 6, 23, .05);
        }

        .ship-title {
            font-family: 'Hind Siliguri', sans-serif;
            font-weight: 700;
            color: #111827;
            margin-bottom: 4px;
            font-size: 16px;
        }

        .ship-amount {
            font-weight: 600;
            color: oklch(0.62 0.18 355);
            font-size: 14px;
        }

        .ship-option input[type="radio"]:checked+.ship-card {
            border-color: oklch(0.62 0.18 355);
            box-shadow: 0 0 0 3px oklch(0.62 0.18 355 / 15%);
            transform: translateY(-1px);
        }

        .ship-option:hover .ship-card {
            border-color: #93c5fd;
        }

        @media (max-width: 576px) {
            .ship-card {
                min-width: 46vw;
            }
        }
    </style>

    @php
        use App\Models\Information;
        use App\Models\BanglaText;
        $info = Information::first();
        $bangla_text = BanglaText::first();
        $coupon_visibility = $info->coupon_visibility;
        $cart = session()->get('cart', []);

        $is_free = 0;
        foreach ($cart as $key => $item) {
            if (!empty($item['is_free_shipping']) && $item['is_free_shipping'] == 1) {
                $is_free = 1;
                break;
            }
        }
    @endphp

    <main class="main-wrapper">
        <section class="section-content py-5" style="margin-top:60px; background: #f5f6fa;">
            <div class="container">
                <form action="{{ route('front.checkouts.store') }}" method="POST" id="checkout_form">
                    @csrf
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <aside class="card border-0 shadow-sm rounded-4 p-4">
                                <h4 class="mb-4 fw-bold"
                                    style="font-family: 'Hind Siliguri', sans-serif; text-align: justify;">
                                    {{ $bangla_text->checkout_form_top_text }}
                                </h4>

                                <div class="mb-3">
                                    <label class="form-label label-font-size text-dark hind">{{ $bangla_text->name_text }}</label>
                                    <input type="text" name="first_name" id="name" class="form-control rounded-3"
                                        placeholder="Enter Your Name">
                                </div>

                                <div class="mb-3">
                                    <label class="form-label label-font-size text-dark hind">{{ $bangla_text->mobile_text }}</label>
                                    <input type="text" maxlength="11" name="mobile" id="mobile"
                                        class="form-control rounded-3" placeholder="01*********">
                                </div>
                                 <div class="mb-3">
                                    <label class="form-label fs-2 text-dark hind">
                                        ইমেইল <span style="font-size:12px;color:#999;">(ঐচ্ছিক)</span>
                                    </label>
                                    <input type="email" name="email" id="email" class="form-control rounded-3"
                                        placeholder="example@gmail.com">
                                     </div>


                                <div class="mb-3">
                                    <label class="form-label label-font-size text-dark hind">{{ $bangla_text->address_text }}</label>
                                    <input type="text" name="shipping_address" id="address"
                                        class="form-control rounded-3" placeholder="Enter full Address">
                                </div>


                                <input type="hidden" name="ip_address" id="ip_address" value="">

                                @php
                                    $shipping_value = [];
                                    foreach ($cart as $citem) {
                                        $shipping_value[] = $citem['is_free_shipping'];
                                    }
                                    $hasPaidShipping = in_array(null, $shipping_value) || $is_free != 1;
                                @endphp

                                <div class="mb-3">
                                    <label
                                        class="form-label label-font-size text-dark hind d-block text-center">{{ $bangla_text->delivery_text }}</label>

                                    @if ($hasPaidShipping)
                                        {{-- Visible Radio Options --}}
                                        <div class="ship-radio-wrap">
                                            @foreach ($charges as $charge)
                                                <label class="ship-option">
                                                    <input type="radio" name="delivery_charge_id_radio"
                                                        class="charge_radio_radioui" value="{{ $charge->id }}"
                                                        data-charge="{{ $charge->amount }}">
                                                    <div class="ship-card">
                                                        <div class="ship-title">{{ $charge->title }}</div>
                                                        <div class="ship-amount">{{ number_format($charge->amount, 2) }} ৳
                                                        </div>
                                                    </div>
                                                </label>
                                            @endforeach
                                        </div>

                                        {{-- Hidden select (keeps old JS working: calculate_total() / #selectCourier handlers) --}}
                                        <select required name="delivery_charge_id" id="selectCourier"
                                            class="form-select rounded-3 label-font-size d-none">
                                            @foreach ($charges as $charge)
                                                <option value="{{ $charge->id }}" data-charge="{{ $charge->amount }}">
                                                    {{ $charge->title }}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        {{-- Free shipping --}}
                                        <div class="ship-radio-wrap">
                                            <label class="ship-option">
                                                <input type="radio" name="delivery_charge_id_radio"
                                                    class="charge_radio_radioui" value="0" data-charge="0" checked>
                                                <div class="ship-card">
                                                    <div class="ship-title">ফ্রী শিপিং</div>
                                                    <div class="ship-amount">0.00 ৳</div>
                                                </div>
                                            </label>
                                        </div>

                                        {{-- Hidden select for old logic --}}
                                        <select name="delivery_charge_id" id="selectCourier"
                                            class="form-select rounded-3 label-font-size d-none">
                                            <option value="0" data-charge="0" selected>ফ্রী শিপিং</option>
                                        </select>
                                    @endif
                                </div>

                                <style>
                                    input[type=checkbox],
                                    input[type=radio] {
                                        opacity: 1;
                                        font-size: 18px;
                                        position: static;
                                        height: 30px;
                                        width: 20px;
                                    }
                                </style>

                                <div class="d-grid mt-4">
                                    <button type="submit" id="chk_btn"
                                        class="btn btn-lg fw-bold hero-bg label-font-size text-white rounded-3 hind py-3">
                                        {{ $bangla_text->order_confirm_text }}
                                    </button>
                                </div>
                            </aside>
                        </div>

                        <div class="col-lg-6">
                            <div class="card border-0 shadow-sm rounded-4 p-4 orderDetails bg-white sticky-top"
                                style="top: 100px;">
                                @include('frontend.cart.details')
                            </div>
                        </div>

                        @foreach ($cart as $item)
                            <div class="cart-item-data" data-product-id="{{ $item['product_id'] }}"
                                data-product-name="{{ $item['name'] }}" data-category-name="{{ $item['category_name'] }}"
                                data-price="{{ $item['price'] }}" data-quantity="{{ $item['quantity'] }}">
                                <input type="hidden" name="payment_method" value="cash">
                            </div>
                        @endforeach
                        <input type="hidden" name="total_cart_price" value="{{ $totalPrice }}">
                    </div>
                </form>
            </div>
        </section>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // localStorage fields
                const inputFields = ['name', 'mobile', 'address', 'email'];


                // Load saved values for inputs
                inputFields.forEach(function(field) {
                    const el = document.getElementById(field);
                    if (el && localStorage.getItem(field)) {
                        el.value = localStorage.getItem(field);
                    }
                });

                // Save on input change
                inputFields.forEach(function(field) {
                    const el = document.getElementById(field);
                    if (el) {
                        el.addEventListener('input', function() {
                            localStorage.setItem(field, el.value);
                        });
                    }
                });

                // On form submit, clear localStorage
                document.getElementById('checkout_form').addEventListener('submit', function() {
                    inputFields.forEach(function(field) {
                        localStorage.removeItem(field);
                    });
                });
            });
        </script>

    </main>

@endsection

@push('js')
    <script src="{{ asset('frontend/js/checkout.js') }}"></script>

    <script>
        // Fetch user's IP address
        fetch('https://api.ipify.org?format=json', {
                headers: {
                    'Accept': 'application/json'
                }
            })
            .then(r => r.json()).then(data => {
                document.getElementById('ip_address').value = data.ip;
            })
            .catch(console.error);

        // Save incomplete on mobile change
        $(document).on('change', '#mobile', function(e) {
            e.preventDefault();
            let mobile = $(this).val();
            let name = $('#name').val();
            let address = $('#address').val();
            let url = "{{ route('incompleteStore') }}";
            if (!mobile || mobile.length !== 11) return;

            $.ajax({
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mobile,
                    name,
                    address
                },
                success: function(res) {
                    console.log(res.message);
                },
                error: function(xhr) {
                    var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message :
                        'An error occurred';
                    console.log(msg);
                }
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {

            // ==== RADIO → HIDDEN SELECT SYNC + TOTAL RECALC (core) ====
            $(document).on('change', 'input[name="delivery_charge_id_radio"]', function() {
                var val = $(this).val();
                // sync to hidden select (old logic depends on #selectCourier)
                $('#selectCourier').val(val).trigger('change');

                // force total refresh immediately
                if (typeof calculate_total === 'function') {
                    calculate_total();
                } else if (typeof getCharge === 'function') {
                    getCharge();
                }

                // optional: visual highlight handled by CSS :checked + .ship-card
            });

            // First-time init (pick checked or highest)
            (function initShippingRadio() {
                var $radios = $('input[name="delivery_charge_id_radio"]');
                if (!$radios.length) return;

                var $checked = $radios.filter(':checked');
                if ($checked.length) {
                    $checked.trigger('change');
                    return;
                }
                var $pick = null,
                    max = -1;
                $radios.each(function() {
                    var c = parseFloat($(this).data('charge')) || 0;
                    if (c > max) {
                        max = c;
                        $pick = $(this);
                    }
                });
                ($pick || $radios.first()).prop('checked', true).trigger('change');
            })();

            // remove item ajax (unchanged)
            $(document).on('click', 'a.remove_item', function(e) {
                e.preventDefault();
                let url = $(this).attr('data-href');
                let method = "DELETE";
                let segment = "checkouts";
                if (confirm('Are you sure?')) {
                    $.ajax({
                        url,
                        method,
                        data: {
                            segment
                        },
                        success: function(res) {
                            if (res.success) {
                                toastr.success(res.msg);
                                $('div#cart-dropdown').html(res.html);
                                $(document).find('div.orderDetails').empty().html(res.html2);
                                $(document).find('div.cart_other_details').html(res.html3);
                                if (res.item <= 0) {
                                    document.location.href = res.url;
                                }
                            } else {
                                toastr.error('অপ্রত্যাশিত ত্রুটি হয়েছে”');
                            }

                            if (typeof calculate_total === 'function') calculate_total();
                            else if (typeof getCharge === 'function') getCharge();
                        }
                    });
                }
            });

            // Analytics: begin_checkout
            (function generateDataLayers() {
                var items = [];
                $('.cart-item-data').each(function() {
                    items.push({
                        item_id: $(this).data('product-id'),
                        item_name: $(this).data('product-name'),
                        item_category: $(this).data('category-name'),
                        price: $(this).data('price'),
                        quantity: $(this).data('quantity')
                    });
                });
                let total = $('input[name="total_cart_price"]').val();

                window.dataLayer = window.dataLayer || [];
                window.dataLayer.push({
                    event: 'begin_checkout',
                    ecommerce: {
                        currency: "BDT",
                        value: total,
                        items: items
                    }
                });

                if (typeof fbq === 'function') {
                    const eventID = "IC_{{ now()->format('Ymdhi') }}";
                    fbq('track', 'InitiateCheckout', {
                        value: total,
                        currency: 'BDT',
                        contents: items.map(i => ({
                            id: i.item_id,
                            quantity: i.quantity,
                            item_price: i.price
                        })),
                        content_type: 'product',
                        content_ids: items.map(i => i.item_id)
                    }, {
                        eventID
                    });

                }
            })();
        });
    </script>

    <script>
        $(document).on('submit', 'form#checkout_form', function(e) {
            e.preventDefault();

            // বাটন ডিসেবল করা যাতে বারবার ক্লিক না হয়
            let submitBtn = $('#chk_btn');
            submitBtn.prop('disabled', true).text('প্রসেসিং হচ্ছে...');

            $('span.textdanger').remove(); // আগের এরর মেসেজ রিমুভ করা

            // --- অতিরিক্ত ভ্যালিডেশন চেক ---
            let name = $('#name').val();
            let mobile = $('#mobile').val();
            let address = $('#address').val();
            let email = $('#email').val();
            let error = false;

            if (!name) {
                $('#name').after('<span class="textdanger" style="color:red; display:block;">আপনার নাম দিন</span>');
                error = true;
            }
            if (!mobile) {
                $('#mobile').after(
                    '<span class="textdanger" style="color:red; display:block;">মোবাইল নম্বর দিন</span>');
                error = true;
            }
            if (!address) {
                $('#address').after(
                    '<span class="textdanger" style="color:red; display:block;">পূর্ণ ঠিকানা দিন</span>');
                error = true;
            }
          

            if (error) {
                submitBtn.prop('disabled', false).text('অর্ডার কনফার্ম করুন');
                toastr.error('দয়া করে সব ঘর পূরণ করুন।');
                return false;
            }
            // --- ভ্যালিডেশন শেষ ---

            let ele = $(this);
            var url = ele.attr('action');
            var method = ele.attr('method');
            var formData = ele.serialize();

            $.ajax({
                type: method,
                url: url,
                data: formData,
                success: function(res) {
                    if (res.success == true) {
                        toastr.success(res.msg);
                        // ডাটা লেয়ার জেনারেট করা
                        if (typeof generateDataLayer === "function") {
                            generateDataLayer(res.invoice_no);
                        }

                        if (res.url) {
                            window.location.href = res.url;
                        } else {
                            window.location.reload();
                        }
                    } else {
                        toastr.error(res.msg);
                        submitBtn.prop('disabled', false).text('অর্ডার কনফার্ম করুন');
                    }
                },
                error: function(response) {
                    submitBtn.prop('disabled', false).text('অর্ডার কনফার্ম করুন');
                    if (response.status === 422) { // ভ্যালিডেশন এরর
                        $.each(response.responseJSON.errors, function(field_name, error) {
                            $(document).find('[name=' + field_name + ']').after(
                                '<span class="textdanger" style="color:red; display:block;">' +
                                error + '</span>');
                        });
                        toastr.error('দয়া করে সঠিক তথ্য দিন।');
                    } else {
                        toastr.error('একটি সমস্যা হয়েছে, আবার চেষ্টা করুন।');

                    }
                }
            });
        });

        function paymentInput(type) {
            // এলিমেন্টগুলো ভেরিয়েবলে নেওয়া
            let payInput = document.getElementById('payment_input');
            let paypalBtn = document.getElementById('paypal-button-container');
            let chkBtn = document.getElementById('chk_btn');
            let stripeBtn = document.getElementsByClassName('stripe-button-el')[0];

            // ডিফল্টভাবে সব হাইড করা (এরর এড়াতে চেক করে নেওয়া হচ্ছে এলিমেন্টটি আছে কি না)
            if (payInput) payInput.style.display = 'none';
            if (paypalBtn) paypalBtn.style.display = 'none';
            if (chkBtn) chkBtn.style.display = 'none';
            if (stripeBtn) {
                stripeBtn.style.display = 'none';
                stripeBtn.disabled = true;
            }

            // টাইপ অনুযায়ী শো করা
            if (type === 'cash') {
                if (chkBtn) chkBtn.style.display = 'block';
            } else if (type === 'bkash' || type === 'rocket' || type === 'nogod') {
                if (payInput) payInput.style.display = 'block';
                if (chkBtn) chkBtn.style.display = 'block';
            } else if (type === 'stripe') {
                if (stripeBtn) {
                    stripeBtn.style.display = 'block';
                    stripeBtn.disabled = false;
                }
            } else if (type === 'paypal') {
                if (paypalBtn) paypalBtn.style.display = 'block';
            }
        }
    </script>
@endpush