@extends('layouts.landing', ['title' => 'Checkout'])

@section('content')
    <x-layout.header-grocery />

    <!-- Page content -->
    <main class="content-wrapper">
        <div class="container py-5">
            <div class="row pt-1 pt-sm-3 pt-lg-4 pb-2 pb-md-3 pb-lg-4 pb-xl-5">

                {{-- show error message --}}
                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <!-- Delivery info (Step 1) -->
                <div class="col-lg-8 col-xl-7 mb-5 mb-lg-0">
                    <div class="d-flex flex-column gap-5 pe-lg-4 pe-xl-0">
                        <div class="d-flex align-items-start">
                            <div class="d-flex align-items-center justify-content-center bg-primary text-white rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
                                style="width: 2rem; height: 2rem; margin-top: -.125rem">1</div>
                            <div class="w-100 ps-3 ps-md-4">
                                <h1 class="h5 mb-md-4">{{ __('checkout.delivery_method') }}</h1>
                                <div class="ms-n5 ms-sm-0">
                                    <p class="fs-sm mb-md-4">{{ __('checkout.choose_delivery_method') }}</p>

                                    <!-- Delivery Method Selection -->
                                    <div class="delivery-method-selection mb-4">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="deliveryMethod"
                                                        id="deliveryOption" value="delivery" checked>
                                                    <label class="form-check-label d-flex align-items-center"
                                                        for="deliveryOption">

                                                        <div>
                                                            <div class="fw-medium">


                                                                {{ __('checkout.delivery') }}</div>
                                                            <div class="text-muted small">
                                                                {{ __('checkout.delivery_description') }}</div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="deliveryMethod"
                                                        id="pickupOption" value="pickup" disabled>
                                                    <label class="form-check-label d-flex align-items-center"
                                                        for="pickupOption">

                                                        <div>
                                                            <div class="fw-medium">{{ __('checkout.store_pickup') }}</div>
                                                            <div class="text-muted small">
                                                                {{ __('checkout.pickup_not_available') }}</div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Delivery Options -->
                                    <div id="deliveryOptions" class="delivery-options">

                                        {{-- dropdown address --}}
                                        @if ($address_list->count() > 0)
                                            <div class="mb-4">
                                                <label for="addressSelect"
                                                    class="form-label">{{ __('checkout.select_saved_address') }}</label>
                                                <select class="form-select form-select-lg" id="addressSelect">
                                                    @foreach ($address_list as $key => $address)
                                                        <option value="{{ $address->id }}"
                                                            data-first-name="{{ $address->name }}" data-last-name=""
                                                            data-address="{{ $address->address }}"
                                                            data-city="{{ $address->city->name }}"
                                                            data-district="{{ $address->district->name }}"
                                                            data-subdistrict="{{ $address->subdistrict->name }}"
                                                            data-state="{{ $address->province->name }}"
                                                            data-postcode="{{ $address->postal_code }}"
                                                            data-phone="{{ $address->phone }}"
                                                            data-latitude="{{ $address->latitude }}"
                                                            data-longitude="{{ $address->longitude }}"
                                                            {{ $address->is_primary || $key === 0 ? 'selected' : '' }}>
                                                            {{ $address->label }} - {{ $address->name }},
                                                            {{ $address->address }}
                                                            @if ($address->is_primary)
                                                                <span
                                                                    class="badge bg-primary ms-2">({{ __('checkout.primary') }})</span>
                                                            @endif
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endif

                                        <!-- Shipping Address (shown automatically) -->
                                        <div id="shippingAddress" class="shipping-address mt-4" style="display: block;">
                                            <div class="d-flex justify-content-between">

                                                <h6 class="mb-3">{{ __('checkout.shipping_address') }}</h6>
                                                <a type="button" href="{{ route('addresses') }}"
                                                    class="btn btn-outline-primary btn-sm">Edit</a>
                                            </div>
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label for="firstName"
                                                        class="form-label">{{ __('checkout.first_name') }}</label>
                                                    <input type="text" class="form-control" id="firstName" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                {{-- <div class="col-md-6">
                                                    <label for="lastName"
                                                        class="form-label">{{ __('checkout.last_name') }}</label>
                                                    <input type="text" class="form-control" id="lastName" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div> --}}
                                                <div class="col-12">
                                                    <label for="phone"
                                                        class="form-label">{{ __('checkout.phone') }}</label>
                                                    <input type="tel" class="form-control" id="phone" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                <div class="col-12">
                                                    <label for="address"
                                                        class="form-label">{{ __('checkout.address') }}</label>
                                                    <input type="text" class="form-control" id="address" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="city"
                                                        class="form-label">{{ __('checkout.city') }}</label>
                                                    <input type="text" class="form-control" id="city" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="state"
                                                        class="form-label">{{ __('checkout.state') }}</label>
                                                    <input type="text" class="form-control" id="state" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="zip"
                                                        class="form-label">{{ __('checkout.zip') }}</label>
                                                    <input type="text" class="form-control" id="zip" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="latitude"
                                                        class="form-label">Latitude</label>
                                                    <input type="text" class="form-control" id="latitude" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="longitude"
                                                        class="form-label">Longitude</label>
                                                    <input type="text" class="form-control" id="longitude" readonly
                                                        style="border: none; background-color: #f8f9fa;">
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Pickup Options -->
                                    <div id="pickupOptions" class="pickup-options" style="display: none;">
                                        <div class="store-list">
                                            <div class="form-check mb-3">
                                                <input type="hidden" name="store" value="{{ $store->id }}">
                                                <label class="form-check-label" style="margin-left: 0px;" for="store1">
                                                    <div class="fw-medium">{{ $store->display_name }}</div>
                                                    <div class="text-muted small">
                                                        {{ __('checkout.store_address') }}: {{ $store->address }}<br>
                                                        {{ __('checkout.phone') }}: {{ $store->phone }}<br>
                                                        {{ __('checkout.hours') }}: {{ $store->hours }}
                                                    </div>
                                                </label>
                                            </div>

                                        </div>
                                    </div>

                                    <!-- Continue Button -->
                                    <div class="mt-4">
                                        <form action="{{ route('checkout.delivery.process') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="delivery_method" id="deliveryMethodInput"
                                                value="shipping">
                                            <input type="hidden" name="address_id" id="addressIdInput"
                                                value="{{ $address_list->first()->id }}">
                                            <button type="submit" class="btn btn-lg btn-primary w-100"
                                                id="continueButton">
                                                <span
                                                    id="continueButtonText">{{ __('checkout.continue_to_shipping') }}</span>
                                                <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
                                            </button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-start" id="shippingAddressStep">
                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-body-secondary rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
                                style="width: 2rem; height: 2rem; margin-top: -.125rem">2</div>
                            <h2 class="h5 text-body-secondary ps-3 ps-md-4 mb-0">{{ __('checkout.choose_shipping') }}
                            </h2>
                        </div>
                        <div class="d-flex align-items-start">
                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-body-secondary rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
                                style="width: 2rem; height: 2rem; margin-top: -.125rem">3</div>
                            <h2 class="h5 text-body-secondary ps-3 ps-md-4 mb-0">{{ __('checkout.payment') }}</h2>
                        </div>
                    </div>
                </div>


                <!-- Order summary (sticky sidebar) -->
                <aside class="col-lg-4 offset-xl-1" style="margin-top: -100px">
                    <div class="position-sticky top-0" style="padding-top: 100px">
                        <x-checkout.order-summary :subtotal="$subtotal" :total="$total" :savings="0" :tax="0"
                            :showEdit="true" :editUrl="route('cart.index')" />
                    </div>
                </aside>
            </div>
        </div>
    </main>

    @include('layouts.partials/footer2')
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Delivery method selection
            const deliveryOption = document.getElementById('deliveryOption');
            const pickupOption = document.getElementById('pickupOption');
            const deliveryOptions = document.getElementById('deliveryOptions');
            const pickupOptions = document.getElementById('pickupOptions');
            const shippingAddress = document.getElementById('shippingAddress');
            const continueButton = document.getElementById('continueButton');

            // Handle delivery method change
            deliveryOption.addEventListener('change', function() {
                if (this.checked) {
                    deliveryOptions.style.display = 'block';
                    pickupOptions.style.display = 'none';
                    resetPickupSelection();
                    // Update button text for delivery
                    document.getElementById('continueButtonText').textContent =
                        '{{ __('checkout.continue_to_shipping') }}';
                    // Update hidden input values
                    document.getElementById('deliveryMethodInput').value = 'delivery';
                    // Update address ID from selected address
                    const addressSelect = document.getElementById('addressSelect');
                    if (addressSelect && addressSelect.value) {
                        document.getElementById('addressIdInput').value = addressSelect.value;
                    }
                    // Show shipping address step and shipping row
                    const shippingAddressStep = document.getElementById('shippingAddressStep');
                    const shippingRow = document.getElementById('shipping-row');
                    if (shippingAddressStep) {
                        console.log("Showing shipping address step");
                        shippingAddressStep.style.visibility = 'visible';
                        shippingAddressStep.style.height = 'auto';
                        shippingAddressStep.style.overflow = 'visible';
                        shippingAddressStep.style.margin = '';
                        shippingAddressStep.style.padding = '';
                    }
                    if (shippingRow) {
                        console.log("Showing shipping row");
                        shippingRow.style.visibility = 'visible';
                        shippingRow.style.height = 'auto';
                        shippingRow.style.overflow = 'visible';
                        shippingRow.style.margin = '';
                        shippingRow.style.padding = '';
                    } else {
                        console.log("Shipping row not found");
                    }
                }
            });

            pickupOption.addEventListener('change', function() {
                if (this.checked) {
                    deliveryOptions.style.display = 'none';
                    pickupOptions.style.display = 'block';
                    resetDeliverySelection();
                    // Update button text for pickup
                    document.getElementById('continueButtonText').textContent =
                        '{{ __('checkout.continue_to_payment') }}';
                    // Update hidden input values
                    document.getElementById('deliveryMethodInput').value = 'pickup';
                    document.getElementById('addressIdInput').value = '';
                    // Hide shipping address step and shipping row
                    const shippingAddressStep = document.getElementById('shippingAddressStep');
                    const shippingRow = document.getElementById('shipping-row');
                    console.log("Elements found:", shippingAddressStep, shippingRow);
                    if (shippingAddressStep) {
                        console.log("Hiding shipping address step");
                        shippingAddressStep.style.visibility = 'hidden';
                        shippingAddressStep.style.height = '0';
                        shippingAddressStep.style.overflow = 'hidden';
                        shippingAddressStep.style.margin = '0';
                        shippingAddressStep.style.padding = '0';
                    }
                    if (shippingRow) {
                        console.log("Hiding shipping row");
                        shippingRow.style.visibility = 'hidden';
                        shippingRow.style.height = '0';
                        shippingRow.style.overflow = 'hidden';
                        shippingRow.style.margin = '0';
                        shippingRow.style.padding = '0';
                    } else {
                        console.log("Shipping row not found");
                    }
                }
            });

            // Address selection handler
            const addressSelect = document.getElementById('addressSelect');
            if (addressSelect) {
                // Auto-populate form with first selected address on page load
                function populateAddressForm() {
                    const selectedOption = addressSelect.options[addressSelect.selectedIndex];

                    if (selectedOption && selectedOption.value) {
                        // Populate all shipping address form fields
                        document.getElementById('firstName').value = selectedOption.dataset.firstName || '';
                        // document.getElementById('lastName').value = selectedOption.dataset.lastName || '';
                        document.getElementById('address').value = selectedOption.dataset.address || '';
                        document.getElementById('city').value = selectedOption.dataset.city || '';
                        document.getElementById('state').value = selectedOption.dataset.state || '';
                        document.getElementById('zip').value = selectedOption.dataset.postcode || '';
                        document.getElementById('phone').value = selectedOption.dataset.phone || '';
                        document.getElementById('latitude').value = selectedOption.dataset.latitude || '';
                        document.getElementById('longitude').value = selectedOption.dataset.longitude || '';

                        // Update order summary with postcode
                        if (selectedOption.dataset.postcode) {
                            updateOrderSummaryWithShipping();
                        }
                    }
                }

                // Populate on page load
                populateAddressForm();
                // Set initial address ID
                if (addressSelect.value) {
                    document.getElementById('addressIdInput').value = addressSelect.value;
                }

                addressSelect.addEventListener('change', function() {
                    const selectedOption = this.options[this.selectedIndex];

                    if (this.value === 'new' || this.value === '') {
                        // Clear form fields for new address
                        document.getElementById('firstName').value = '';
                        // document.getElementById('lastName').value = '';
                        document.getElementById('address').value = '';
                        document.getElementById('city').value = '';
                        document.getElementById('state').value = '';
                        document.getElementById('zip').value = '';
                        document.getElementById('phone').value = '';
                        document.getElementById('latitude').value = '';
                        document.getElementById('longitude').value = '';
                        document.getElementById('zip').value = '';
                        // Clear address ID input
                        document.getElementById('addressIdInput').value = '';
                    } else {
                        // Populate form fields with selected address
                        document.getElementById('firstName').value = selectedOption.dataset.firstName || '';
                        // document.getElementById('lastName').value = selectedOption.dataset.lastName || '';
                        document.getElementById('address').value = selectedOption.dataset.address || '';
                        document.getElementById('city').value = selectedOption.dataset.city || '';
                        document.getElementById('state').value = selectedOption.dataset.state || '';
                        document.getElementById('zip').value = selectedOption.dataset.postcode || '';
                        document.getElementById('phone').value = selectedOption.dataset.phone || '';
                        document.getElementById('latitude').value = selectedOption.dataset.latitude || '';
                        document.getElementById('longitude').value = selectedOption.dataset.longitude || '';
                        document.getElementById('zip').value = selectedOption.dataset.postcode || '';
                        // Update address ID input
                        document.getElementById('addressIdInput').value = this.value;

                        // Update order summary with postcode
                        if (selectedOption.dataset.postcode) {
                            updateOrderSummaryWithShipping();
                        }
                    }
                });
            }

            // Auto-update order summary when postcode changes
            document.getElementById('zip').addEventListener('input', function() {
                if (this.value) {
                    updateOrderSummaryWithShipping();
                }
            });

            // Store selection for pickup
            const storeRadios = document.querySelectorAll('input[name="store"]');
            storeRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.checked) {
                        updateOrderSummaryForPickup();
                    }
                });
            });

            // Form validation before continue
            continueButton.addEventListener('click', function(e) {
                const selectedMethod = document.querySelector('input[name="deliveryMethod"]:checked').value;

                if (selectedMethod === 'delivery') {
                    if (!validateDeliveryForm()) {
                        e.preventDefault();
                        return;
                    }
                } else if (selectedMethod === 'pickup') {
                    if (!validatePickupForm()) {
                        e.preventDefault();
                        return;
                    }
                }
            });

            function resetDeliverySelection() {
                resetShippingCalculation();
            }

            function resetPickupSelection() {
                document.querySelectorAll('input[name="store"]').forEach(radio => {
                    radio.checked = false;
                });
                resetShippingCalculation();
            }

            function resetShippingCalculation() {
                // Reset order summary to original state
                const shippingElement = document.querySelector('[data-shipping-cost]');
                if (shippingElement) {
                    shippingElement.style.display = 'none';
                }

                const totalElement = document.getElementById('cart-estimated-total');
                if (totalElement && window.originalTotal) {
                    totalElement.textContent = `Rp ${window.originalTotal}`;
                }
            }

            function updateOrderSummaryWithShipping() {
                // Simulate shipping cost calculation based on postcode
                const shippingCost = calculateShippingCost(document.getElementById('zip').value);

                // Update order summary
                const subtotalElement = document.getElementById('cart-subtotal');
                const currentSubtotal = parseFloat(subtotalElement.textContent.replace(/[^\d]/g, ''));
                const newTotal = currentSubtotal + shippingCost;

                // Store original total
                if (!window.originalTotal) {
                    window.originalTotal = subtotalElement.textContent;
                }

                // Update total
                const totalElement = document.getElementById('cart-estimated-total');
                totalElement.textContent = `Rp ${number_format(newTotal, 0, ',', '.')}`;

                // Show shipping cost in summary
                showShippingCost(shippingCost);
            }

            function updateOrderSummaryForPickup() {
                // Pickup is usually free
                const subtotalElement = document.getElementById('cart-subtotal');
                const currentSubtotal = parseFloat(subtotalElement.textContent.replace(/[^\d]/g, ''));

                // Store original total
                if (!window.originalTotal) {
                    window.originalTotal = subtotalElement.textContent;
                }

                // Update total (same as subtotal for pickup)
                const totalElement = document.getElementById('cart-estimated-total');
                totalElement.textContent = subtotalElement.textContent;

                // Show free shipping
                showShippingCost(0, true);
            }

            function calculateShippingCost(postcode) {
                // Simple shipping cost calculation based on postcode
                // In real implementation, this would call an API
                const jakartaPostcodes = ['10000', '10110', '10220', '10310', '10410'];
                const bandungPostcodes = ['40111', '40112', '40113', '40114', '40115'];

                if (jakartaPostcodes.includes(postcode)) {
                    return 15000; // Jakarta: Rp 15,000
                } else if (bandungPostcodes.includes(postcode)) {
                    return 25000; // Bandung: Rp 25,000
                } else {
                    return 35000; // Other areas: Rp 35,000
                }
            }

            function showShippingCost(cost, isFree = false) {
                // Find or create shipping cost element in order summary
                let shippingElement = document.querySelector('[data-shipping-cost]');

                if (!shippingElement) {
                    const orderSummary = document.querySelector('.list-unstyled');
                    const shippingLi = document.createElement('li');
                    shippingLi.className = 'd-flex justify-content-between';
                    shippingLi.setAttribute('data-shipping-cost', '');
                    shippingLi.innerHTML = `
                <span>{{ __('checkout.shipping') }}:</span>
                <span class="text-dark-emphasis fw-medium" id="shipping-cost">Rp 0</span>
            `;
                    orderSummary.appendChild(shippingLi);
                    shippingElement = shippingLi;
                }

                const costElement = document.getElementById('shipping-cost');
                if (isFree) {
                    costElement.textContent = '{{ __('checkout.free') }}';
                    costElement.className = 'text-success fw-medium';
                } else {
                    costElement.textContent = `Rp ${number_format(cost, 0, ',', '.')}`;
                    costElement.className = 'text-dark-emphasis fw-medium';
                }

                shippingElement.style.display = 'flex';
            }

            function validateDeliveryForm() {
                const postcode = document.getElementById('zip').value;
                const firstName = document.getElementById('firstName').value;
                const address = document.getElementById('address').value;
                const city = document.getElementById('city').value;
                const phone = document.getElementById('phone').value;

                if (!postcode) {
                    alert('{{ __('checkout.enter_postcode') }}');
                    return false;
                }

                if (!firstName || !address || !city || !phone) {
                    alert('{{ __('checkout.fill_required_fields') }}');
                    return false;
                }

                return true;
            }

            function validatePickupForm() {
                const selectedStore = document.querySelector('input[name="store"]:checked');

                if (!selectedStore) {
                    alert('{{ __('checkout.select_store') }}');
                    return false;
                }

                return true;
            }

            // Number formatting helper
            function number_format(number, decimals, dec_point, thousands_sep) {
                number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
                var n = !isFinite(+number) ? 0 : +number;
                var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
                var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;
                var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;

                var s = '';
                var toFixedFix = function(n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.round(n * k) / k;
                };

                s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
                if (thousands_sep) {
                    var re = /(-?\d+)(\d{3})/;
                    while (re.test(s[0])) {
                        s[0] = s[0].replace(re, '$1' + sep + '$2');
                    }
                }

                if ((s[1] || '').length < prec) {
                    s[1] = s[1] || '';
                    s[1] += new Array(prec - s[1].length + 1).join('0');
                }

                return s.join(dec);
            }
        });
    </script>
@endsection