@extends('layouts.landing', ['title' => 'Checkout v.1 - Delivery Info Step 1'])

@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">

                <!-- 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-body-secondary text-body-secondary 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">
                                <h2 class="h5 text-body-secondary mb-md-4">{{ __('checkout.delivery_method') }}</h2>

                                @if ($delivery_method == 'shipping')
                                    <p>{{ __('checkout.delivery') }}</p>
                                    @if ($address)
                                        <p>{{ $address->location }}</p>
                                    @endif
                                @else
                                    <p>{{ __('checkout.pickup') }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="d-flex align-items-start" id="shippingAddressStep">
                            <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">2</div>


                            <div class="w-100 ps-3 ps-md-4">
                                <h1 class="h5 mb-12">{{ __('checkout.choose_shipping') }}
                                </h1>
                                <form action="{{ route('checkout.shipping.process') }}" method="post">
                                    @csrf
                          
                                    @if ($delivery_method == 'shipping')
                                        @foreach ($shipping_list as $shipping)
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="radio" name="shipping_option"
                                                    id="shipping_{{ $loop->index }}"
                                                    value="{{ $shipping['courier'] }}|{{ $shipping['service'] }}|{{ $shipping['cost'] }}"
                                                    {{ $loop->first ? 'checked' : '' }}>
                                                <label
                                                    class="form-check-label d-flex justify-content-between align-items-center"
                                                    for="shipping_{{ $loop->index }}">
                                                    <div>
                                                        <strong>{{ $shipping['title'] }}</strong>
                                                        <div class="text-muted small">{{ $shipping['description'] }}</div>
                                                    </div>
                                                    <div class="text-primary fw-bold">
                                                        Rp {{ number_format($shipping['cost'], 0, ',', '.') }}
                                                    </div>
                                                </label>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="alert alert-info">
                                            <i class="ci-store me-2"></i>
                                            {{ __('checkout.pickup_ready') }}
                                        </div>
                                    @endif

                                    <button type="submit" class="btn btn-lg btn-primary w-100 mt-4">
                                        <span>{{ __('checkout.continue_to_payment') }}</span>
                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
                                    </button>
                                </form>
                            </div>
                        </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/footer')
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Shipping option selection handler
            const shippingRadios = document.querySelectorAll('input[name="shipping_option"]');
            console.log('Found shipping radios:', shippingRadios.length);

            shippingRadios.forEach((radio, index) => {
                console.log(`Radio ${index}:`, radio.value, radio.checked);
                radio.addEventListener('change', function() {
                    console.log('Shipping option changed:', this.value, this.checked);
                    if (this.checked) {
                        updateOrderSummaryWithShippingCost(this.value);
                    }
                });
            });

            function updateOrderSummaryWithShippingCost(shippingValue) {
                console.log('updateOrderSummaryWithShippingCost called with:', shippingValue);

                // Parse the shipping value: courier|service|cost
                const parts = shippingValue.split('|');
                console.log('Parsed parts:', parts);
                if (parts.length !== 3) {
                    console.log('Invalid shipping value format');
                    return;
                }

                const courier = parts[0];
                const service = parts[1];
                const cost = parseInt(parts[2]);
                console.log('Extracted cost:', cost);

                // Update order summary
                const subtotalElement = document.getElementById('cart-subtotal');
                console.log('Subtotal element:', subtotalElement);
                if (!subtotalElement) {
                    console.log('Subtotal element not found');
                    return;
                }

                const currentSubtotal = parseFloat(subtotalElement.textContent.replace(/[^\d]/g, ''));
                console.log('Current subtotal:', currentSubtotal);
                const newTotal = currentSubtotal + cost;
                console.log('New total:', newTotal);

                // Store original total
                if (!window.originalTotal) {
                    window.originalTotal = subtotalElement.textContent;
                    console.log('Stored original total:', window.originalTotal);
                }

                // Update total
                const totalElement = document.getElementById('cart-estimated-total');
                console.log('Total element:', totalElement);
                if (totalElement) {
                    totalElement.textContent = `Rp ${number_format(newTotal, 0, ',', '.')}`;
                    console.log('Updated total to:', totalElement.textContent);
                }

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

            function showShippingCost(cost, isFree = false) {
                console.log('showShippingCost called with:', cost, isFree);

                // Use existing shipping row in order summary
                const shippingRow = document.getElementById('shipping-row');
                console.log('Shipping row element:', shippingRow);
                if (!shippingRow) {
                    console.log('Shipping row not found');
                    return;
                }

                const costElement = shippingRow.querySelector('span:last-child');
                console.log('Cost element:', costElement);
                if (!costElement) {
                    console.log('Cost element not found');
                    return;
                }

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

                // Ensure the shipping row is visible
                shippingRow.style.display = 'flex';
                console.log('Made shipping row visible');
            }

            // Initialize shipping cost on page load for checked option
            const checkedShippingRadio = document.querySelector('input[name="shipping_option"]:checked');
            console.log('Checked shipping radio on load:', checkedShippingRadio);
            if (checkedShippingRadio) {
                console.log('Initializing with value:', checkedShippingRadio.value);
                updateOrderSummaryWithShippingCost(checkedShippingRadio.value);
            }

        // 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