@extends('layouts.app')

@section('title', 'Selesaikan Pembayaran Anda | Trisna Monel')

@section('extra_css')
    <style>
        .checkout-section {
            padding: 140px 0 6rem;
            background: #fafafa;
            min-height: 80vh;
        }

        .checkout-grid {
            display: grid;
            grid-template-columns: 1.8fr 1.2fr;
            gap: 2.5rem;
            align-items: start;
        }

        @media (max-width: 991px) {
            .checkout-grid {
                grid-template-columns: 1fr;
            }
        }

        .checkout-card {
            background: white;
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .checkout-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 2rem;
            color: var(--color-primary);
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 576px) {
            .form-row {
                grid-template-columns: 1fr;
                gap: 1rem;
                margin-bottom: 1rem;
            }
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-primary);
            margin-bottom: 0.6rem;
        }

        .form-control {
            width: 100%;
            padding: 0.9rem 1.1rem;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: var(--color-primary);
            background: #fafafa;
            transition: all 0.3s;
            box-sizing: border-box;
            outline: none;
        }

        .form-control:focus {
            border-color: var(--color-secondary);
            background: white;
            box-shadow: 0 0 0 3px rgba(176, 130, 86, 0.1);
        }

        /* Courier and service selectors */
        .courier-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .courier-option {
            position: relative;
            cursor: pointer;
        }

        .courier-option input {
            position: absolute;
            opacity: 0;
        }

        .courier-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: white;
            border: 2px solid #e8e8e8;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--color-text-muted);
            transition: all 0.3s ease;
        }

        .courier-card i {
            font-size: 1.3rem;
            margin-bottom: 0.4rem;
        }

        .courier-option input:checked + .courier-card {
            border-color: var(--color-secondary);
            color: var(--color-primary);
            background: rgba(176, 130, 86, 0.04);
            box-shadow: 0 5px 15px rgba(176, 130, 86, 0.08);
        }

        /* Order Summary column styling */
        .summary-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 110px;
        }

        .summary-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--color-primary);
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 0.8rem;
        }

        .checkout-items {
            max-height: 240px;
            overflow-y: auto;
            margin-bottom: 1.5rem;
            padding-right: 0.5rem;
        }

        .checkout-item-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            padding: 0.6rem 0;
            border-bottom: 1px solid #f9f9f9;
        }

        .checkout-item-name {
            font-weight: 600;
            color: var(--color-primary);
            max-width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .checkout-item-qty {
            color: var(--color-text-muted);
            margin-left: 0.25rem;
        }

        .checkout-item-price {
            font-weight: 700;
            color: var(--color-accent);
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.8rem;
            font-size: 0.9rem;
            color: var(--color-text-muted);
        }

        .summary-row.total {
            border-top: 1px dashed #e0e0e0;
            padding-top: 1.25rem;
            margin-top: 1rem;
            font-weight: 700;
            color: var(--color-primary);
            font-size: 1.15rem;
        }

        .btn-pay {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            width: 100%;
            padding: 1.1rem;
            background: var(--grad-gold);
            color: white;
            border: none;
            border-radius: 12px;
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-size: 0.85rem;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(176, 130, 86, 0.15);
            transition: all 0.3s;
            margin-top: 1.5rem;
        }

        .btn-pay:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(176, 130, 86, 0.3);
            filter: brightness(1.05);
        }

        .btn-pay:disabled {
            background: #ccc;
            cursor: not-allowed;
            box-shadow: none;
        }

        /* Loading animation for shipping rates */
        .shipping-loading-container {
            display: none;
            text-align: center;
            padding: 1rem;
            color: var(--color-secondary);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .spinner-mini {
            border: 3px solid rgba(176, 130, 86, 0.1);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border-left-color: var(--color-secondary);
            animation: spin 0.8s linear infinite;
            display: inline-block;
            vertical-align: middle;
            margin-right: 0.5rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
@endsection

@section('content')
    <section class="checkout-section">
        <div class="container">
            <h1 class="font-heading mb-4 text-center" style="font-size: 2.2rem; font-weight: 800; letter-spacing: -0.01em;">
                Pengiriman & <strong>Pembayaran</strong>
            </h1>
            <p class="text-center text-muted mb-5">Lengkapi formulir pengiriman di bawah untuk menghitung ongkos kirim otomatis</p>

            @if(session('error'))
                <div style="background: rgba(239, 68, 68, 0.08); border-left: 4px solid #ef4444; color: #991b1b; padding: 1rem; border-radius: 8px; margin-bottom: 2rem;">
                    <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('checkout.store') }}" method="POST" id="checkoutForm">
                @csrf
                <!-- Hidden fields for shipping summary -->
                <input type="hidden" name="province_name" id="hiddenProvinceName" value="{{ old('province_name', $lastOrder->province ?? '') }}">
                <input type="hidden" name="city_name" id="hiddenCityName" value="{{ old('city_name', $lastOrder->city ?? '') }}">
                <input type="hidden" name="shipping_service" id="hiddenShippingService">
                <input type="hidden" name="shipping_cost" id="hiddenShippingCost" value="0">

                <div class="checkout-grid">
                    <!-- Left: Shipping Information Form -->
                    <div class="checkout-card">
                        <h3 class="checkout-title"><i class="fas fa-shipping-fast text-gold"></i> Informasi Penerima</h3>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="recipient_name">Nama Penerima</label>
                                <input type="text" name="recipient_name" id="recipient_name" class="form-control" placeholder="Nama Lengkap" value="{{ old('recipient_name', $lastOrder->recipient_name ?? Auth::user()->name) }}" required>
                            </div>
                            <div class="form-group">
                                <label for="recipient_phone">Nomor Telepon</label>
                                <input type="text" name="recipient_phone" id="recipient_phone" class="form-control" placeholder="Contoh: 08123456789" value="{{ old('recipient_phone', $lastOrder->recipient_phone ?? '') }}" required>
                            </div>
                        </div>

                        <h3 class="checkout-title mt-4"><i class="fas fa-map-marked-alt text-gold"></i> Alamat Pengiriman</h3>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="province_select">Provinsi</label>
                                <select id="province_select" name="province_id" class="form-control" required onchange="onProvinceChange()">
                                    <option value="">Pilih Provinsi</option>
                                    @foreach($provinces as $prov)
                                        <option value="{{ $prov['province_id'] }}" {{ old('province_id', $selectedProvinceId) == $prov['province_id'] ? 'selected' : '' }}>{{ $prov['province'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="city_select">Kota / Kabupaten</label>
                                <select id="city_select" name="city_id" class="form-control" required {{ empty($cities) ? 'disabled' : '' }} onchange="onCityChange()">
                                    <option value="">Pilih Kota / Kabupaten</option>
                                    @foreach($cities as $ct)
                                        <option value="{{ $ct['city_id'] }}" {{ old('city_id', $selectedCityId) == $ct['city_id'] ? 'selected' : '' }}>{{ $ct['type'] }} {{ $ct['city_name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group" style="grid-column: span 2;">
                                <label for="address_detail">Alamat Lengkap (Jalan, RT/RW, Dusun, Kelurahan, Kecamatan)</label>
                                <textarea name="address_detail" id="address_detail" rows="3" class="form-control" style="resize: none;" placeholder="Contoh: Jl. Monel Raya No. 12, RT 02 / RW 05, Dusun Mulyo, Kelurahan Karang, Kecamatan Kalinyamatan" required>{{ old('address_detail', $lastOrder->address_detail ?? '') }}</textarea>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="postal_code">Kode Pos</label>
                                <input type="text" name="postal_code" id="postal_code" class="form-control" placeholder="Contoh: 59462" value="{{ old('postal_code', $lastOrder->postal_code ?? '') }}" required>
                            </div>
                            <div class="form-group">
                                <label for="notes">Catatan Pesanan (Opsional)</label>
                                <input type="text" name="notes" id="notes" class="form-control" placeholder="Contoh: Ukuran kustom cadangan / Titip di pos satpam" value="{{ old('notes', $lastOrder->notes ?? '') }}">
                            </div>
                        </div>

                        <h3 class="checkout-title mt-4"><i class="fas fa-truck text-gold"></i> Jasa Ekspedisi</h3>
                        
                        <div class="courier-grid">
                            <label class="courier-option">
                                <input type="radio" name="courier" value="jne" {{ old('courier', $lastOrder->courier ?? '') == 'jne' ? 'checked' : '' }} onchange="onCourierChange()">
                                <div class="courier-card">
                                    <i class="fas fa-box"></i>
                                    <span>JNE Express</span>
                                </div>
                            </label>
                            <label class="courier-option">
                                <input type="radio" name="courier" value="pos" {{ old('courier', $lastOrder->courier ?? '') == 'pos' ? 'checked' : '' }} onchange="onCourierChange()">
                                <div class="courier-card">
                                    <i class="fas fa-mail-bulk"></i>
                                    <span>POS Indonesia</span>
                                </div>
                            </label>
                            <label class="courier-option">
                                <input type="radio" name="courier" value="tiki" {{ old('courier', $lastOrder->courier ?? '') == 'tiki' ? 'checked' : '' }} onchange="onCourierChange()">
                                <div class="courier-card">
                                    <i class="fas fa-shipping-fast"></i>
                                    <span>TIKI</span>
                                </div>
                            </label>
                        </div>

                        <!-- Dynamic service selector -->
                        <div class="form-group" id="service_select_group" style="display: none;">
                            <label for="service_select">Layanan Pengiriman</label>
                            <select id="service_select" class="form-control" required onchange="onServiceChange()">
                                <option value="">Pilih Layanan & Tarif</option>
                            </select>
                        </div>

                        <div class="shipping-loading-container" id="shippingLoader">
                            <div class="spinner-mini"></div> Menghitung tarif pengiriman...
                        </div>
                    </div>

                    <!-- Right: Sticky Order Summary -->
                    <div>
                        <div class="summary-card">
                            <h3 class="summary-title">Rincian Belanja</h3>
                            
                            <div class="checkout-items">
                                @foreach($cartItems as $item)
                                    <div class="checkout-item-row">
                                        <div class="checkout-item-name">
                                            {{ $item->product->name }}
                                            <span class="checkout-item-qty">x{{ $item->quantity }}</span>
                                            @if($item->variation)
                                                <div style="font-size: 0.7rem; color: var(--color-secondary); font-weight: bold; margin-top: 2px;">{{ $item->variation }}</div>
                                            @endif
                                        </div>
                                        <div class="checkout-item-price">Rp {{ number_format($item->product->getPriceForVariation($item->variation) * $item->quantity, 0, ',', '.') }}</div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="summary-row">
                                <span>Subtotal</span>
                                <span>Rp {{ number_format($totalPrice, 0, ',', '.') }}</span>
                            </div>

                            <div class="summary-row">
                                <span>Total Berat</span>
                                <span>{{ $totalWeight }} gram</span>
                            </div>

                            <div class="summary-row">
                                <span>Ongkos Kirim</span>
                                <span id="summaryShippingCost">-</span>
                            </div>

                            <div class="summary-row total">
                                <span>Total Tagihan</span>
                                <span id="summaryGrandTotal" data-subtotal="{{ $totalPrice }}">Rp {{ number_format($totalPrice, 0, ',', '.') }}</span>
                            </div>

                            <button type="submit" class="btn-pay" id="btnPay" disabled>
                                Buat Pesanan <i class="fas fa-shield-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('extra_js')
    <script>
        const totalWeight = {{ $totalWeight }};
        const subtotal = {{ $totalPrice }};
        const lastService = @json($lastService);

        function onProvinceChange() {
            const provinceSelect = document.getElementById('province_select');
            const citySelect = document.getElementById('city_select');
            const provinceId = provinceSelect.value;
            const provinceName = provinceSelect.options[provinceSelect.selectedIndex].text;

            document.getElementById('hiddenProvinceName').value = provinceId ? provinceName : '';
            citySelect.innerHTML = '<option value="">Pilih Kota / Kabupaten</option>';
            citySelect.disabled = true;
            resetShippingRates();

            if (!provinceId) return;

            fetch('{{ route("api.cities") }}?province_id=' + provinceId)
                .then(res => res.json())
                .then(res => {
                    if (res.status === 'success') {
                        res.data.forEach(city => {
                            const name = city.type + ' ' + city.city_name;
                            citySelect.innerHTML += `<option value="${city.city_id}">${name}</option>`;
                        });
                        citySelect.disabled = false;
                    } else {
                        alert(res.message || 'Gagal mengambil data kota.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Terjadi kesalahan koneksi saat memuat data kota.');
                });
        }

        function onCityChange() {
            const citySelect = document.getElementById('city_select');
            const cityName = citySelect.options[citySelect.selectedIndex].text;
            document.getElementById('hiddenCityName').value = citySelect.value ? cityName : '';
            
            // Re-fetch costs if courier is already checked
            const checkedCourier = document.querySelector('input[name="courier"]:checked');
            if (checkedCourier) {
                fetchShippingRates(citySelect.value, checkedCourier.value);
            } else {
                resetShippingRates();
            }
        }

        function onCourierChange() {
            const citySelect = document.getElementById('city_select');
            const courier = document.querySelector('input[name="courier"]:checked').value;

            if (!citySelect.value) {
                alert('Silakan pilih Provinsi dan Kota pengiriman terlebih dahulu.');
                document.querySelector('input[name="courier"]:checked').checked = false;
                return;
            }

            fetchShippingRates(citySelect.value, courier);
        }

        function fetchShippingRates(destination, courier) {
            const loader = document.getElementById('shippingLoader');
            const selectGroup = document.getElementById('service_select_group');
            const serviceSelect = document.getElementById('service_select');

            loader.style.display = 'block';
            selectGroup.style.display = 'none';
            serviceSelect.innerHTML = '<option value="">Pilih Layanan & Tarif</option>';
            resetShippingRatesSummary();

            fetch('{{ route("api.shipping-cost") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    destination: destination,
                    weight: totalWeight,
                    courier: courier
                })
            })
            .then(res => res.json())
            .then(res => {
                loader.style.display = 'none';
                if (res.status === 'success') {
                    if (res.data.length === 0) {
                        alert('Tidak ada layanan pengiriman tersedia untuk kurir ini.');
                        return;
                    }
                    let selectedIndex = -1;
                    res.data.forEach((service, index) => {
                        const cost = service.cost[0].value;
                        const etd = service.cost[0].etd ? `(${service.cost[0].etd} hari)` : '';
                        const text = `${service.service} - Rp ${formatNumber(cost)} ${etd}`;
                        const isSelected = lastService && (service.service.toUpperCase() === lastService.toUpperCase());
                        if (isSelected) {
                            selectedIndex = index;
                        }
                        serviceSelect.innerHTML += `<option value="${cost}" data-service="${service.service}">${text}</option>`;
                    });
                    selectGroup.style.display = 'block';

                    // Auto-select last used service if available, otherwise first option
                    if (selectedIndex !== -1) {
                        serviceSelect.selectedIndex = selectedIndex + 1;
                        onServiceChange();
                    } else if (res.data.length > 0) {
                        serviceSelect.selectedIndex = 1;
                        onServiceChange();
                    }
                } else {
                    alert(res.message || 'Gagal menghitung ongkos kirim.');
                }
            })
            .catch(err => {
                loader.style.display = 'none';
                console.error(err);
                alert('Terjadi kesalahan saat memproses perhitungan ongkir.');
            });
        }

        function onServiceChange() {
            const select = document.getElementById('service_select');
            const btnPay = document.getElementById('btnPay');
            
            if (!select.value) {
                resetShippingRatesSummary();
                return;
            }

            const cost = parseFloat(select.value);
            const serviceName = select.options[select.selectedIndex].getAttribute('data-service');
            const courierName = document.querySelector('input[name="courier"]:checked').value.toUpperCase();

            // Set hidden fields
            document.getElementById('hiddenShippingService').value = courierName + ' ' + serviceName;
            document.getElementById('hiddenShippingCost').value = cost;

            // Update displays
            document.getElementById('summaryShippingCost').innerText = 'Rp ' + formatNumber(cost);
            const grandTotal = subtotal + cost;
            document.getElementById('summaryGrandTotal').innerText = 'Rp ' + formatNumber(grandTotal);

            // Enable Pay Button
            btnPay.disabled = false;
        }

        function resetShippingRates() {
            // Uncheck courier
            const couriers = document.querySelectorAll('input[name="courier"]');
            couriers.forEach(c => c.checked = false);
            
            document.getElementById('service_select_group').style.display = 'none';
            document.getElementById('service_select').innerHTML = '<option value="">Pilih Layanan & Tarif</option>';
            
            resetShippingRatesSummary();
        }

        function resetShippingRatesSummary() {
            document.getElementById('hiddenShippingService').value = '';
            document.getElementById('hiddenShippingCost').value = 0;
            document.getElementById('summaryShippingCost').innerText = '-';
            document.getElementById('summaryGrandTotal').innerText = 'Rp ' + formatNumber(subtotal);
            document.getElementById('btnPay').disabled = true;
        }

        function formatNumber(num) {
            return new Intl.NumberFormat('id-ID').format(num);
        }

        // Auto trigger shipping cost calculation on page load if city and courier are pre-selected
        document.addEventListener('DOMContentLoaded', function() {
            const citySelect = document.getElementById('city_select');
            const checkedCourier = document.querySelector('input[name="courier"]:checked');
            
            if (citySelect && citySelect.value && checkedCourier && checkedCourier.value) {
                // Ensure hidden values are populated on load
                const provinceSelect = document.getElementById('province_select');
                if (provinceSelect && provinceSelect.value) {
                    const provinceName = provinceSelect.options[provinceSelect.selectedIndex].text;
                    document.getElementById('hiddenProvinceName').value = provinceName;
                }
                const cityName = citySelect.options[citySelect.selectedIndex].text;
                document.getElementById('hiddenCityName').value = cityName;

                // Fire shipping cost calculation
                fetchShippingRates(citySelect.value, checkedCourier.value);
            }
        });
    </script>
@endsection