@extends('front.include.app')

@section('content')


    <div class="container">

        @if (session()->has('shipping_rates') && count(session('shipping_rates')) > 0)
            <h3 class="primary-heading text-center mt-5">Available Shipping Rates</h3>

            @foreach (session('shipping_rates') as $index => $rate)
                <label
                    class="rate-option d-block p-3 border mb-2 rounded original {{ session('selected_shipping_rate') == $index ? '' : '' }}">
                    <input type="radio" name="selected_rate" value="{{ $index }}" class="me-2 shipping-radio"
                        data-cost="{{ $rate['total'] }}" {{ session('selected_shipping_rate') == $index ? 'checked' : '' }}
                        required>
                    <div><strong>Shipping Method:</strong> {{ $rate['postage_type'] }}</div>
                    <div><strong>Total Cost:</strong> {{ $rate['currency'] }} ${{ number_format($rate['total'], 2) }}</div>
                    <div><strong>Estimated Delivery:</strong> {{ $rate['delivery_days'] }}</div>
                </label>
            @endforeach
        @else
            <div class="alert alert-info mt-3">No shipping rates available.</div>
        @endif

        @php
            $cart = session()->get('cart', []);
            $cartTotal = 0;
            $grandTotal = 0;
            $shippingTotal = 0;
            foreach ($cart as $item) {
                $cartTotal += $item['price'] * $item['quantity'];
            }

            if ($cartTotal < 100) {
                $grandTotal = $cartTotal + $shippingTotal;
                session(['grand_total' => $grandTotal]);
                $shippingTotal = session('selected_shipping_cost', 0);
            } else {
                $grandTotal = $cartTotal;
                session(['grand_total' => $grandTotal]);
            }

            $shippingCharge = $shippingTotal;

            $finalAmount = session('total_after_discount')
                ? session('total_after_discount') + $shippingCharge
                : $cartTotal + $shippingCharge;

        @endphp

        <div class="order-summery">
            <h2 class="primary-heading text-center">Order Summary</h2>
            <div class="row bb-1">
                <div class="col-md-6">
                    <span>Subtotal ({{ count($cart) }})</span>
                </div>
                <div class="col-md-6 text-right">
                    @if(session('total_after_discount'))
                        CAD $<span id="subtotal">{{ session('total_after_discount') }}</span>
                    @else
                        CAD $<span id="subtotal">{{ number_format($cartTotal, 2) }}</span>
                    @endif
                </div>
            </div>

            <div class="row bb-1">
                <div class="col-md-6">Shipping</div>
                <div class="col-md-6 text-right">
                    <span
                        id="shipping-cost">{{ isset($shippingTotal) && $shippingTotal != 0 ? 'CAD $' . number_format($shippingTotal, 2) : 'Free Shipping' }}</span>
                </div>
            </div>

            <div class="row bb-1">
                <div class="col-md-6"><strong>Total</strong></div>
                <div class="col-md-6 text-right">
                    <strong>CAD $<span id="total">{{ number_format($finalAmount, 2) }}</span></strong>
                </div>
            </div>
            <form action="{{ route('checkout.submit') }}" method="POST">
                @csrf
                <div class="col-md-12 mt-4 p-0">
                    <button type="submit" class="themeBtn w-100 mb-3">proceed to checkout</button>
                </div>
            </form>
        </div>
    </div>
    @php
        $countryCode = session('countryCode');
        $orders = \App\Models\Order::all();
        $orderCount =  $orders->count();
    @endphp
    <input type="hidden" id="countryCode" value="{{ $countryCode }}">
    <input type="hidden" id="orderCount" value="{{ $orderCount }}">

@endsection
@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const radios = document.querySelectorAll('.shipping-radio');

            radios.forEach(radio => {
                radio.addEventListener('change', function() {
                    // Reset all labels
                    document.querySelectorAll('.rate-option').forEach(label => {
                        label.classList.remove('bg-light');
                        label.style.color = '';
                        label.style.border = '';
                    });

                    // Style selected label
                    if (this.checked) {
                        const label = this.closest('.rate-option');
                        label.classList.add('bg-light');
                        label.style.color = 'var(--primary)';
                        label.style.border = '1px solid var(--primary)';
                    }
                });
            });
        });


        document.querySelectorAll('.shipping-radio').forEach(radio => {
            radio.addEventListener('change', function() {
                let shippingCost = parseFloat(this.dataset.cost);

                let countryCode = document.getElementById('countryCode').value;
                let orderCount = document.getElementById('orderCount').value;

                let subtotal = parseFloat(document.getElementById('subtotal').innerText);
                // if (subtotal > 100 && (countryCode === 'CA' || countryCode === 'US')) {
                //     shippingCost = 0;
                // }

                if (orderCount <= 250) {
                    shippingCost = 0;
                }

                let total = subtotal + shippingCost;
                let postageType = this.closest('.rate-option').querySelector('div').innerText.split(':')[
                    1].trim();
                    console.log("Postage Type", postageType);

                // Update DOM
                shippingCostValue = document.getElementById('shipping-cost').innerText = shippingCost.toFixed(2);
                if (shippingCost === 0 || shippingCost === '0.00') {
                    document.getElementById('shipping-cost').innerText = 'Free Shipping';
                }
                document.getElementById('total').innerText = total.toFixed(2);

                // Send to session via AJAX
                fetch('{{ route('shipping.update.session') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            selected_rate_index: this.value,
                            selected_shipping_cost: shippingCost,
                            calculated_total: total,
                            postage_type: postageType

                        })
                    }).then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            console.log('Shipping and total updated in session');
                        }
                    });
            });
        });
    </script>
@endsection