@extends('frontend.layouts.app')

@section('title', 'Checkout - ShopNow')

@section('content')
<div class="container py-5">
    <h2 class="fw-bold mb-4"><i class="bi bi-credit-card me-2"></i>Checkout</h2>

    <form action="{{ route('checkout.place') }}" method="POST" id="checkoutForm">
        @csrf
        <div class="row g-4">
            <!-- Shipping Information -->
            <div class="col-lg-7">
                <!-- Saved Addresses -->
                <div class="card border-0 shadow-sm p-4 mb-4" style="border-radius:14px;">
                    <h5 class="fw-bold mb-3">Shipping Address</h5>
                    
                    <div id="address-list">
                        @foreach($addresses as $addr)
                        <div class="card border mb-3 p-3 address-card @if($addr->is_default) border-primary bg-light @endif" 
                             style="border-radius:10px; cursor:pointer;" onclick="selectAddress(this, '{{ $addr->id }}')">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="address_id" 
                                       value="{{ $addr->id }}" id="addr-{{ $addr->id }}"
                                       @if($addr->is_default) checked @endif
                                       data-charge="{{ $addr->deliveryCharge->charge ?? 0 }}"
                                       data-days="{{ $addr->deliveryCharge->estimated_delivery_days ?? 0 }}">
                                <label class="form-check-label w-100" for="addr-{{ $addr->id }}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <strong class="text-dark">{{ $addr->full_name }}</strong>
                                        @if($addr->is_default)<span class="badge bg-primary">Default</span>@endif
                                    </div>
                                    <div class="small text-muted mt-1">
                                        {{ $addr->phone }}<br>
                                        {{ $addr->address }}, {{ $addr->landmark ? '['.$addr->landmark.']' : '' }}<br>
                                        {{ $addr->deliveryCharge->address ?? '' }}, {{ $addr->deliveryCharge->district->name ?? '' }}, {{ $addr->deliveryCharge->province->name ?? '' }}
                                    </div>
                                </label>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <button type="button" class="btn btn-outline-primary btn-sm w-100 mt-2" onclick="toggleNewAddress()">
                        <i class="bi bi-plus-lg me-1"></i>Add New Shipping Address
                    </button>

                    <!-- New Address Form -->
                    <div id="new-address-section" class="mt-4" style="display: none;">
                        <hr>
                        <h6 class="fw-bold mb-3">Add New Address</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Full Name *</label>
                                <input type="text" name="new_full_name" class="form-control" placeholder="Recipient Name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Phone *</label>
                                <input type="text" name="new_phone" class="form-control" placeholder="Contact Number">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Province *</label>
                                <select id="province_id" name="province_id" class="form-select" onchange="loadDistricts(this.value)">
                                    <option value="">Select Province</option>
                                    @foreach($provinces as $province)
                                        <option value="{{ $province->id }}">{{ $province->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">District *</label>
                                <select id="district_id" name="district_id" class="form-select" disabled onchange="loadCities(this.value)">
                                    <option value="">Select District</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Area / Location (Delivery Charge) *</label>
                                <select id="delivery_charge_id" name="delivery_charge_id" class="form-select" disabled onchange="updateNewAddressCharge(this)">
                                    <option value="">Select Location</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Address (Street/Block) *</label>
                                <textarea name="new_address" class="form-control" rows="2" placeholder="Exact Street Address"></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Landmark (Optional)</label>
                                <input type="text" name="new_landmark" class="form-control" placeholder="Near major building, hospital, etc.">
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="set_default" id="set_default" value="1">
                                    <label class="form-check-label" for="set_default">Set as default address</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payment Method -->
                <div class="card border-0 shadow-sm p-4" style="border-radius:14px;">
                    <h5 class="fw-bold mb-3">Payment Method</h5>
                    <div class="row g-3">
                        <div class="col-md-12">
                            <div class="form-check card border p-3" style="border-radius:10px;">
                                <input class="form-check-input" type="radio" name="payment_method" value="cod" id="pm_cod" checked>
                                <label class="form-check-label fw-semibold" for="pm_cod">
                                    <i class="bi bi-cash-stack me-2"></i>Cash on Delivery
                                </label>
                            </div>
                        </div>
                        {{-- 
                        <div class="col-md-6">
                            <div class="form-check card border p-3" style="border-radius:10px;">
                                <input class="form-check-input" type="radio" name="payment_method" value="esewa" id="pm_esewa">
                                <label class="form-check-label fw-semibold" for="pm_esewa">
                                    <i class="bi bi-wallet2 me-2"></i>eSewa
                                </label>
                            </div>
                        </div> 
                        --}}
                    </div>
                    <div class="col-12 mt-3">
                        <label class="form-label fw-bold">Order Note (Optional)</label>
                        <textarea name="note" class="form-control" rows="2" placeholder="Special instructions for delivery..."></textarea>
                    </div>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm p-4 sticky-top" style="border-radius:14px; top: 100px;">
                    <h5 class="fw-bold mb-4">Order Summary</h5>
                    
                    <div id="order-items-list" class="mb-4">
                        @php $subtotal = 0; @endphp
                        @foreach($carts as $cart)
                        @php 
                            $itemPrice = optional($cart->variant)->final_price ?? optional($cart->product)->final_price ?? 0;
                            if($itemPrice <= 0) $itemPrice = optional($cart->variant)->price ?? optional($cart->product)->price ?? 0;
                            $subtotal += $itemPrice * $cart->quantity;
                        @endphp
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div class="position-relative">
                                <img src="{{ optional($cart->product)->image ? asset('storage/'.optional($cart->product)->image) : 'https://via.placeholder.com/60?text=P' }}"
                                     style="width:50px;height:50px;object-fit:cover;border-radius:8px; border: 1px solid #eee;" alt="">
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary" style="font-size: 0.7rem;">
                                    {{ $cart->quantity }}
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-semibold text-truncate" style="max-width: 200px;">{{ optional($cart->product)->name }}</div>
                                <div class="small text-muted">{{ $cart->variant->name ?? '' }}</div>
                            </div>
                            <div class="text-end fw-bold">Rs. {{ number_format($itemPrice * $cart->quantity, 2) }}</div>
                        </div>
                        @endforeach
                    </div>

                    <div class="promo-section mb-4 p-3 bg-light rounded-3">
                        <label class="form-label small fw-bold text-uppercase text-muted">Promo Code</label>
                        <div class="input-group">
                            <input type="text" id="promo-code-input" class="form-control border-0 bg-white" placeholder="Enter code">
                            <button type="button" class="btn btn-dark px-3" onclick="applyPromoCode()" id="apply-promo-btn">Apply</button>
                        </div>
                        <div id="promo-message" class="small mt-2" style="display: none;"></div>
                        <input type="hidden" name="promo_id" id="applied-promo-id">
                    </div>

                    <div class="pricing-details mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Subtotal</span>
                            <span class="fw-semibold">Rs. <span id="summary-subtotal" data-value="{{ $subtotal }}">{{ number_format($subtotal, 2) }}</span></span>
                        </div>
                        <div class="d-flex justify-content-between mb-2" id="discount-row" style="display: none !important;">
                            <span class="text-success">Discount</span>
                            <span class="fw-semibold text-success">- Rs. <span id="summary-discount">0.00</span></span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Shipping</span>
                            <span class="fw-semibold text-success" id="summary-shipping">--</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2" id="delivery-date-row" style="display: none !important;">
                            <span class="text-muted small"><i class="bi bi-truck me-1"></i>Est. Delivery</span>
                            <span class="text-dark small fw-semibold" id="summary-delivery-date">--</span>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between fw-bold fs-4 mb-4">
                        <span>Total</span>
                        <span class="text-primary">Rs. <span id="summary-total">{{ number_format($subtotal, 2) }}</span></span>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 py-3 fw-bold shadow-sm rounded-pill mb-3" id="placeOrderBtn">
                        Place My Order <i class="bi bi-arrow-right ms-2"></i>
                    </button>
                    
                    <div class="text-center">
                        <small class="text-muted"><i class="bi bi-shield-check me-1"></i>Secure checkout & fast delivery</small>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const defaultSelected = document.querySelector('input[name="address_id"]:checked');
        if (defaultSelected) {
            updatePricing(defaultSelected.dataset.charge, defaultSelected.dataset.days);
        }
    });

    function toggleNewAddress() {
        const section = document.getElementById('new-address-section');
        const addressRadios = document.querySelectorAll('input[name="address_id"]');
        
        if (section.style.display === 'none') {
            section.style.display = 'block';
            // Uncheck all radios
            addressRadios.forEach(radio => radio.checked = false);
            // Clear pricing to --
            updatePricing(0, 0, true);
        } else {
            section.style.display = 'none';
            // Re-select default if exists
            const defaultRadio = document.querySelector('input[name="address_id"]');
            if (defaultRadio) {
                defaultRadio.checked = true;
                updatePricing(defaultRadio.dataset.charge, defaultRadio.dataset.days);
            }
        }
    }

    let currentDiscount = 0;
    let currentShipping = 0;
    let currentDays = 0;

    function selectAddress(element, id) {
        const radio = document.getElementById('addr-' + id);
        if (radio) {
            radio.checked = true;
            document.getElementById('new-address-section').style.display = 'none';
            currentShipping = parseFloat(radio.dataset.charge) || 0;
            currentDays = parseInt(radio.dataset.days) || 0;
            updatePricing();
        }
    }

    function updateNewAddressCharge(select) {
        const selectedOption = select.options[select.selectedIndex];
        if (selectedOption && selectedOption.value) {
            currentShipping = parseFloat(selectedOption.dataset.charge) || 0;
            currentDays = parseInt(selectedOption.dataset.days) || 0;
        } else {
            currentShipping = 0;
            currentDays = 0;
        }
        updatePricing();
    }

    function updatePricing(charge = null, days = null, reset = false) {
        if (charge !== null) currentShipping = parseFloat(charge) || 0;
        if (days !== null) currentDays = parseInt(days) || 0;

        const subtotal = parseFloat(document.getElementById('summary-subtotal').getAttribute('data-value'));
        const shippingEl = document.getElementById('summary-shipping');
        const discountRow = document.getElementById('discount-row');
        const discountEl = document.getElementById('summary-discount');
        const deliveryRow = document.getElementById('delivery-date-row');
        const deliveryEl = document.getElementById('summary-delivery-date');
        const totalEl = document.getElementById('summary-total');

        if (reset) {
            shippingEl.innerText = '--';
            discountRow.style.setProperty('display', 'none', 'important');
            deliveryRow.style.setProperty('display', 'none', 'important');
            totalEl.innerText = formatCurrency(subtotal);
            return;
        }

        // Update Shipping
        shippingEl.innerText = currentShipping > 0 ? 'Rs. ' + formatCurrency(currentShipping) : 'Free';
        
        // Update Discount
        if (currentDiscount > 0) {
            discountEl.innerText = formatCurrency(currentDiscount);
            discountRow.style.setProperty('display', 'flex', 'important');
        } else {
            discountRow.style.setProperty('display', 'none', 'important');
        }

        // Update Delivery Date
        if (currentDays > 0) {
            const deliveryDate = new Date();
            deliveryDate.setDate(deliveryDate.getDate() + currentDays);
            deliveryEl.innerText = deliveryDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            deliveryRow.style.setProperty('display', 'flex', 'important');
        } else {
            deliveryRow.style.setProperty('display', 'none', 'important');
        }

        const finalTotal = subtotal + currentShipping - currentDiscount;
        totalEl.innerText = formatCurrency(finalTotal > 0 ? finalTotal : 0);
    }

    async function applyPromoCode() {
        const codeInput = document.getElementById('promo-code-input');
        const messageEl = document.getElementById('promo-message');
        const applyBtn = document.getElementById('apply-promo-btn');
        const subtotal = parseFloat(document.getElementById('summary-subtotal').getAttribute('data-value'));
        
        const code = codeInput.value.trim();
        if (!code) return;

        applyBtn.disabled = true;
        applyBtn.innerText = 'Checking...';
        messageEl.style.display = 'none';

        try {
            const response = await fetch('{{ route("promo.apply") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ code: code, subtotal: subtotal })
            });

            const data = await response.json();

            if (data.success) {
                currentDiscount = parseFloat(data.discount_amount);
                document.getElementById('applied-promo-id').value = data.promo_id;
                messageEl.innerText = data.message;
                messageEl.className = 'small mt-2 text-success';
                messageEl.style.display = 'block';
                codeInput.disabled = true;
                applyBtn.innerText = 'Applied';
                updatePricing();
            } else {
                throw new Error(data.message);
            }
        } catch (e) {
            messageEl.innerText = e.message || 'Failed to apply promo code.';
            messageEl.className = 'small mt-2 text-danger';
            messageEl.style.display = 'block';
            applyBtn.disabled = false;
            applyBtn.innerText = 'Apply';
        }
    }

    function formatCurrency(num) {
        return num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    // AJAX Cascades
    async function loadDistricts(provinceId) {
        const districtSelect = document.getElementById('district_id');
        const citySelect = document.getElementById('delivery_charge_id');
        
        districtSelect.innerHTML = '<option value="">Loading districts...</option>';
        districtSelect.disabled = true;
        citySelect.innerHTML = '<option value="">Select Location</option>';
        citySelect.disabled = true;

        if (!provinceId) {
            districtSelect.innerHTML = '<option value="">Select District</option>';
            return;
        }

        try {
            const response = await fetch(`/customer/locations/districts/${provinceId}`);
            if (!response.ok) throw new Error('Network response was not ok');
            const districts = await response.json();
            
            districtSelect.innerHTML = '<option value="">Select District</option>';
            districts.forEach(d => {
                districtSelect.innerHTML += `<option value="${d.id}">${d.name}</option>`;
            });
            districtSelect.disabled = false;
        } catch (e) {
            console.error('Error loading districts:', e);
            districtSelect.innerHTML = '<option value="">Error loading districts</option>';
        }
    }

    async function loadCities(districtId) {
        const citySelect = document.getElementById('delivery_charge_id');
        citySelect.innerHTML = '<option value="">Loading locations...</option>';
        citySelect.disabled = true;

        if (!districtId) {
            citySelect.innerHTML = '<option value="">Select Location</option>';
            return;
        }

        try {
            const response = await fetch(`/customer/locations/cities/${districtId}`);
            if (!response.ok) throw new Error('Network response was not ok');
            const cities = await response.json();
            
            citySelect.innerHTML = '<option value="">Select Location</option>';
            cities.forEach(c => {
                citySelect.innerHTML += `<option value="${c.id}" data-charge="${c.charge}" data-days="${c.estimated_delivery_days}">${c.address} (Rs. ${c.charge})</option>`;
            });
            citySelect.disabled = false;
        } catch (e) {
            console.error('Error loading cities:', e);
            citySelect.innerHTML = '<option value="">Error loading locations</option>';
        }
    }
</script>

<style>
    .address-card:hover {
        border-color: #0d6efd !important;
        background-color: #f8f9fa;
    }
    .form-check-input {
        cursor: pointer;
    }
</style>
@endsection