@extends('layouts.app')

@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-11">
                <!-- Header -->
                <div class="d-flex align-items-center mb-4">
                    <i class="fas fa-credit-card text-success me-3" style="font-size: 2rem;"></i>
                    <h1 class="mb-0 fw-bold text-dark">Checkout</h1>
                </div>

                <!-- Breadcrumb -->
                <nav aria-label="breadcrumb" class="mb-4">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('user.product') }}"
                                class="text-decoration-none">Produk</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('cart.index') }}"
                                class="text-decoration-none">Keranjang</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Checkout</li>
                    </ol>
                </nav>

                <!-- Alert Messages -->
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form action="{{ route('checkout.store') }}" method="POST" id="checkoutForm" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-4">
                        <!-- Shipping Information -->
                        <div class="col-lg-7">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-header bg-primary text-white border-0">
                                    <h5 class="mb-0">
                                        <i class="fas fa-shipping-fast me-2"></i>
                                        Informasi Pengiriman
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-user me-2 text-primary"></i>
                                                Nama Lengkap
                                            </label>
                                            <input type="text" name="shipping_name"
                                                class="form-control form-control-lg @error('shipping_name') is-invalid @enderror"
                                                value="{{ old('shipping_name', auth()->user()->name) }}" required>
                                            @error('shipping_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-phone me-2 text-primary"></i>
                                                Nomor Telepon
                                            </label>
                                            <input type="tel" name="shipping_phone"
                                                class="form-control form-control-lg @error('shipping_phone') is-invalid @enderror"
                                                value="{{ old('shipping_phone') }}" required>
                                            @error('shipping_phone')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                                Alamat Lengkap
                                            </label>
                                            <textarea name="shipping_address" rows="3" class="form-control @error('shipping_address') is-invalid @enderror"
                                                required>{{ old('shipping_address') }}</textarea>
                                            @error('shipping_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-city me-2 text-primary"></i>
                                                Kota
                                            </label>
                                            <select name="shipping_city" id="shipping_city"
                                                class="form-select @error('shipping_city') is-invalid @enderror" required>
                                                <option value="">Pilih Kota</option>
                                                <option value="Jakarta Pusat" data-shipping="15000" 
                                                    {{ old('shipping_city') == 'Jakarta Pusat' ? 'selected' : '' }}>
                                                    Jakarta Pusat
                                                </option>
                                                <option value="Jakarta Timur" data-shipping="10000" 
                                                    {{ old('shipping_city') == 'Jakarta Timur' ? 'selected' : '' }}>
                                                    Jakarta Timur
                                                </option>
                                                <option value="Jakarta Barat" data-shipping="20000" 
                                                    {{ old('shipping_city') == 'Jakarta Barat' ? 'selected' : '' }}>
                                                    Jakarta Barat
                                                </option>
                                                <option value="Bogor" data-shipping="30000" 
                                                    {{ old('shipping_city') == 'Bogor' ? 'selected' : '' }}>
                                                    Bogor
                                                </option>
                                                <option value="Depok" data-shipping="25000" 
                                                    {{ old('shipping_city') == 'Depok' ? 'selected' : '' }}>
                                                    Depok
                                                </option>
                                            </select>
                                            @error('shipping_city')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-mail-bulk me-2 text-primary"></i>
                                                Kode Pos
                                            </label>
                                            <input type="text" name="shipping_postal_code"
                                                class="form-control @error('shipping_postal_code') is-invalid @enderror"
                                                value="{{ old('shipping_postal_code') }}" required>
                                            @error('shipping_postal_code')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Payment Method -->
                                    <hr class="my-4">
                                    <h6 class="fw-semibold mb-3">
                                        <i class="fas fa-wallet me-2 text-success"></i>
                                        Metode Pembayaran
                                    </h6>

                                    <div class="mb-3">
                                        <select name="payment_method" id="payment_method"
                                            class="form-select form-select-lg @error('payment_method') is-invalid @enderror"
                                            required>
                                            <option value="">Pilih Metode Pembayaran</option>
                                            <option value="bank_transfer"
                                                {{ old('payment_method') == 'bank_transfer' ? 'selected' : '' }}>
                                                Transfer Bank
                                            </option>
                                            <option value="e_wallet"
                                                {{ old('payment_method') == 'e_wallet' ? 'selected' : '' }}>
                                                E-Wallet
                                            </option>
                                            <option value="cod" {{ old('payment_method') == 'cod' ? 'selected' : '' }}>
                                                Bayar di Tempat (COD)
                                            </option>
                                        </select>
                                        @error('payment_method')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Payment Method Templates -->
                                    <div id="payment-templates" class="mb-3">
                                        <!-- Bank Transfer Template -->
                                        <div id="bank_transfer_template" class="payment-template" style="display: none;">
                                            <div class="card border-primary">
                                                <div class="card-header bg-primary text-white">
                                                    <h6 class="mb-0">
                                                        <i class="fas fa-university me-2"></i>
                                                        Informasi Transfer Bank
                                                    </h6>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <div class="bank-info p-3 border rounded">
                                                                <h6 class="text-primary fw-bold">Bank BCA</h6>
                                                                <p class="mb-1"><strong>No. Rekening:</strong> 1234567890
                                                                </p>
                                                                <p class="mb-1"><strong>Atas Nama:</strong> PT Toko
                                                                    Online</p>
                                                                <p class="mb-0"><strong>Kode Bank:</strong> 014</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="bank-info p-3 border rounded">
                                                                <h6 class="text-primary fw-bold">Bank BRI</h6>
                                                                <p class="mb-1"><strong>No. Rekening:</strong> 0987654321
                                                                </p>
                                                                <p class="mb-1"><strong>Atas Nama:</strong> PT Toko
                                                                    Online</p>
                                                                <p class="mb-0"><strong>Kode Bank:</strong> 002</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="bank-info p-3 border rounded">
                                                                <h6 class="text-primary fw-bold">Bank BNI</h6>
                                                                <p class="mb-1"><strong>No. Rekening:</strong> 1122334455
                                                                </p>
                                                                <p class="mb-1"><strong>Atas Nama:</strong> PT Toko
                                                                    Online</p>
                                                                <p class="mb-0"><strong>Kode Bank:</strong> 009</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="bank-info p-3 border rounded">
                                                                <h6 class="text-primary fw-bold">Bank Mandiri</h6>
                                                                <p class="mb-1"><strong>No. Rekening:</strong> 5566778899
                                                                </p>
                                                                <p class="mb-1"><strong>Atas Nama:</strong> PT Toko
                                                                    Online</p>
                                                                <p class="mb-0"><strong>Kode Bank:</strong> 008</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="alert alert-info mt-3">
                                                        <i class="fas fa-info-circle me-2"></i>
                                                        <strong>Total yang harus dibayar:</strong>
                                                        <span id="bank-total">{{ $formattedTotal ?? 'Rp 0' }}</span>
                                                        <br>
                                                        <small>Transfer sesuai dengan nominal yang tertera, termasuk kode
                                                            unik jika ada.</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- E-Wallet Template -->
                                        <div id="e_wallet_template" class="payment-template" style="display: none;">
                                            <div class="card border-info">
                                                <div class="card-header bg-info text-white">
                                                    <h6 class="mb-0">
                                                        <i class="fas fa-mobile-alt me-2"></i>
                                                        Informasi E-Wallet
                                                    </h6>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <div class="text-center">
                                                                <h6 class="text-info fw-bold">GoPay</h6>
                                                                <div class="qr-code-placeholder mb-2">
                                                                    <img src="{{ asset('images/qr-codes/QR_code_for_mobile_English_Wikipedia.svg.png') }}"
                                                                        alt="GoPay QR Code" class="img-fluid"
                                                                        style="max-width: 200px;">
                                                                </div>
                                                                <p class="small text-muted">Scan QR Code dengan aplikasi
                                                                    GoPay</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="text-center">
                                                                <h6 class="text-info fw-bold">OVO</h6>
                                                                <div class="qr-code-placeholder mb-2">
                                                                    <img src="{{ asset('images/qr-codes/ovo-qr.png') }}"
                                                                        alt="OVO QR Code" class="img-fluid"
                                                                        style="max-width: 200px;">
                                                                </div>
                                                                <p class="small text-muted">Scan QR Code dengan aplikasi
                                                                    OVO</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="text-center">
                                                                <h6 class="text-info fw-bold">DANA</h6>
                                                                <div class="qr-code-placeholder mb-2">
                                                                    <img src="{{ asset('images/qr-codes/dana-qr.png') }}"
                                                                        alt="DANA QR Code" class="img-fluid"
                                                                        style="max-width: 200px;">
                                                                </div>
                                                                <p class="small text-muted">Scan QR Code dengan aplikasi
                                                                    DANA</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="text-center">
                                                                <h6 class="text-info fw-bold">LinkAja</h6>
                                                                <div class="qr-code-placeholder mb-2">
                                                                    <img src="{{ asset('images/qr-codes/linkaja-qr.png') }}"
                                                                        alt="LinkAja QR Code" class="img-fluid"
                                                                        style="max-width: 200px;">
                                                                </div>
                                                                <p class="small text-muted">Scan QR Code dengan aplikasi
                                                                    LinkAja</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="alert alert-warning mt-3">
                                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                                        <strong>Total yang harus dibayar:</strong>
                                                        <span id="ewallet-total">{{ $formattedTotal ?? 'Rp 0' }}</span>
                                                        <br>
                                                        <small>Pastikan nominal pembayaran sesuai dengan total
                                                            pesanan.</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- COD Template -->
                                        <div id="cod_template" class="payment-template" style="display: none;">
                                            <div class="card border-success">
                                                <div class="card-header bg-success text-white">
                                                    <h6 class="mb-0">
                                                        <i class="fas fa-hand-holding-usd me-2"></i>
                                                        Informasi Bayar di Tempat (COD)
                                                    </h6>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="alert alert-success">
                                                                <i class="fas fa-check-circle me-2"></i>
                                                                <strong>Pembayaran Cash On Delivery (COD)</strong>
                                                                <br>
                                                                <small>Anda akan membayar langsung kepada kurir saat produk
                                                                    diterima.</small>
                                                            </div>
                                                            <div class="border rounded p-3">
                                                                <h6 class="text-success fw-bold mb-3">Detail Pembayaran:
                                                                </h6>
                                                                <ul class="list-unstyled">
                                                                    <li class="mb-2">
                                                                        <i class="fas fa-check text-success me-2"></i>
                                                                        Total yang harus dibayar:
                                                                        <strong id="cod-total">{{ $formattedTotal ?? 'Rp 0' }}</strong>
                                                                    </li>
                                                                    <li class="mb-2">
                                                                        <i class="fas fa-check text-success me-2"></i>
                                                                        Siapkan uang pas atau kembalian akan diberikan
                                                                    </li>
                                                                    <li class="mb-2">
                                                                        <i class="fas fa-check text-success me-2"></i>
                                                                        Pembayaran dilakukan saat produk diterima
                                                                    </li>
                                                                    <li class="mb-0">
                                                                        <i class="fas fa-check text-success me-2"></i>
                                                                        Cek kondisi produk sebelum melakukan pembayaran
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Upload Bukti Pembayaran (Hidden for COD) -->
                                    <div id="payment-proof-section" style="display: none;">
                                        <hr class="my-4">
                                        <h6 class="fw-semibold mb-3">
                                            <i class="fas fa-upload me-2 text-warning"></i>
                                            Upload Bukti Pembayaran
                                        </h6>
                                        <div class="mb-3">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-file-image me-2 text-warning"></i>
                                                Bukti Pembayaran
                                            </label>
                                            <input type="file" name="payment_proof" id="payment_proof"
                                                class="form-control @error('payment_proof') is-invalid @enderror"
                                                accept="image/*,.pdf">
                                            <div class="form-text">
                                                <small>Format: JPG, PNG, PDF. Maksimal 5MB</small>
                                            </div>
                                            @error('payment_proof')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Preview Area -->
                                        <div id="proof-preview" class="mt-3" style="display: none;">
                                            <div class="card border-info">
                                                <div class="card-header bg-light">
                                                    <h6 class="mb-0 text-info">
                                                        <i class="fas fa-eye me-2"></i>
                                                        Preview Bukti Pembayaran
                                                    </h6>
                                                </div>
                                                <div class="card-body text-center">
                                                    <div id="proof-preview-content"></div>
                                                    <button type="button" class="btn btn-outline-danger btn-sm mt-2"
                                                        onclick="removeProof()">
                                                        <i class="fas fa-trash me-1"></i>
                                                        Hapus
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Order Notes -->
                                    <hr class="my-4">
                                    <div class="mb-0">
                                        <label class="form-label fw-semibold">
                                            <i class="fas fa-sticky-note me-2 text-warning"></i>
                                            Catatan Pesanan (Opsional)
                                        </label>
                                        <textarea name="notes" rows="3" class="form-control @error('notes') is-invalid @enderror"
                                            placeholder="Tambahkan catatan untuk pesanan Anda...">{{ old('notes') }}</textarea>
                                        @error('notes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Order Summary -->
                        <div class="col-lg-5">
                            <div class="card border-0 shadow-sm" style="top: 2rem;">
                                <div class="card-header bg-success text-white border-0">
                                    <h5 class="mb-0">
                                        <i class="fas fa-receipt me-2"></i>
                                        Ringkasan Pesanan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-4">
                                        @foreach ($cartItems as $item)
                                            <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                                                <img src="{{ $item->product->image_url }}"
                                                    alt="{{ $item->product->name }}"
                                                    class="rounded-3 me-3 object-fit-cover"
                                                    style="width: 60px; height: 60px;">
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-1 fw-semibold">{{ $item->product->name }}</h6>
                                                    <small class="text-muted">
                                                        {{ $item->formatted_price }} × {{ $item->quantity }}
                                                    </small>
                                                </div>
                                                <div class="fw-bold text-success">
                                                    {{ $item->formatted_subtotal }}
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <!-- Summary Calculation -->
                                    <div class="border-top pt-3">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Subtotal</span>
                                            <span class="fw-semibold" id="display-subtotal">{{ $formattedSubtotal }}</span>
                                        </div>

                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Ongkos Kirim</span>
                                            <span class="fw-semibold" id="display-shipping">{{ $formattedShipping }}</span>
                                        </div>

                                        <hr>

                                        <div class="d-flex justify-content-between mb-4">
                                            <span class="h5 fw-bold">Total</span>
                                            <span class="h5 fw-bold text-success" id="display-total">{{ $formattedTotal }}</span>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="d-grid gap-2">
                                        <button type="submit" class="btn btn-success btn-lg">
                                            <i class="fas fa-check-circle me-2"></i>
                                            Buat Pesanan
                                        </button>

                                        <a href="{{ route('cart.index') }}" class="btn btn-outline-secondary">
                                            <i class="fas fa-arrow-left me-2"></i>
                                            Kembali ke Keranjang
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Hidden inputs for dynamic values -->
                    <input type="hidden" name="shipping_cost" id="shipping_cost" value="{{ $shippingCost ?? 15000 }}">
                    <input type="hidden" name="total_amount" id="total_amount" value="{{ $total ?? 0 }}">
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('checkoutForm');
            const paymentSelect = document.getElementById('payment_method');
            const paymentTemplates = document.querySelectorAll('.payment-template');
            const paymentProofSection = document.getElementById('payment-proof-section');
            const paymentProofInput = document.getElementById('payment_proof');
            const proofPreview = document.getElementById('proof-preview');
            const proofPreviewContent = document.getElementById('proof-preview-content');
            const shippingCitySelect = document.getElementById('shipping_city');

            // Subtotal from PHP (constant)
            const subtotal = {{ $subtotal ?? 0 }};

            // Shipping costs mapping
            const shippingCosts = {
                'Jakarta Pusat': 15000,
                'Jakarta Timur': 10000,
                'Jakarta Barat': 20000,
                'Bogor': 30000,
                'Depok': 25000
            };

            // Format currency
            function formatCurrency(amount) {
                return 'Rp ' + new Intl.NumberFormat('id-ID').format(amount);
            }

            // Update shipping cost and total
            function updateShippingAndTotal() {
                const selectedCity = shippingCitySelect.value;
                const shippingCost = selectedCity ? shippingCosts[selectedCity] || 15000 : 0;
                const total = subtotal + shippingCost;

                // Update display elements
                document.getElementById('display-shipping').textContent = formatCurrency(shippingCost);
                document.getElementById('display-total').textContent = formatCurrency(total);

                // Update payment templates totals
                document.getElementById('bank-total').textContent = formatCurrency(total);
                document.getElementById('ewallet-total').textContent = formatCurrency(total);
                document.getElementById('cod-total').textContent = formatCurrency(total);

                // Update hidden inputs
                document.getElementById('shipping_cost').value = shippingCost;
                document.getElementById('total_amount').value = total;

                // Add animation to updated elements
                const elementsToAnimate = [
                    document.getElementById('display-shipping'),
                    document.getElementById('display-total'),
                    document.getElementById('bank-total'),
                    document.getElementById('ewallet-total'),
                    document.getElementById('cod-total')
                ];

                elementsToAnimate.forEach(element => {
                    element.style.transition = 'all 0.3s ease';
                    element.style.backgroundColor = '#fff3cd';
                    element.style.padding = '2px 6px';
                    element.style.borderRadius = '4px';
                    
                    setTimeout(() => {
                        element.style.backgroundColor = 'transparent';
                    }, 1000);
                });
            }

            // Handle city selection change
            shippingCitySelect.addEventListener('change', function() {
                updateShippingAndTotal();
                
                // Show shipping cost change notification
                if (this.value) {
                    const selectedOption = this.options[this.selectedIndex];
                    const shippingCost = parseInt(selectedOption.dataset.shipping);
                    
                    // Optional: Show toast notification
                    if (typeof Swal !== 'undefined') {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true
                        });

                        Toast.fire({
                            icon: 'info',
                            title: `Ongkos kirim ke ${this.value}: ${formatCurrency(shippingCost)}`
                        });
                    }
                }
            });

            // Handle payment method selection
            paymentSelect.addEventListener('change', function() {
                const selectedMethod = this.value;

                // Hide all templates
                paymentTemplates.forEach(template => {
                    template.style.display = 'none';
                });

                // Show selected template
                if (selectedMethod) {
                    const selectedTemplate = document.getElementById(selectedMethod + '_template');
                    if (selectedTemplate) {
                        selectedTemplate.style.display = 'block';
                    }

                    // Show/hide payment proof section
                    if (selectedMethod === 'cod') {
                        paymentProofSection.style.display = 'none';
                        paymentProofInput.removeAttribute('required');
                    } else {
                        paymentProofSection.style.display = 'block';
                        paymentProofInput.setAttribute('required', 'required');
                    }
                } else {
                    paymentProofSection.style.display = 'none';
                    paymentProofInput.removeAttribute('required');
                }
            });

            // Handle file upload preview
            paymentProofInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const fileType = file.type;
                        let content = '';

                        if (fileType.startsWith('image/')) {
                            content =
                                `<img src="${e.target.result}" class="img-fluid" style="max-width: 300px; max-height: 200px;">`;
                        } else if (fileType === 'application/pdf') {
                            content = `<div class="text-center p-4">
                        <i class="fas fa-file-pdf text-danger" style="font-size: 3rem;"></i>
                        <p class="mt-2 mb-0">${file.name}</p>
                        <small class="text-muted">PDF File</small>
                    </div>`;
                        }

                        proofPreviewContent.innerHTML = content;
                        proofPreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Initialize on page load
            if (shippingCitySelect.value) {
                updateShippingAndTotal();
            }

            // Set default state based on old values
            if (paymentSelect.value) {
                paymentSelect.dispatchEvent(new Event('change'));
            }

            // Form submission with validation
            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const selectedPayment = paymentSelect.value;
                    const selectedCity = shippingCitySelect.value;

                    if (!selectedCity) {
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Pilih Kota Tujuan',
                                text: 'Silakan pilih kota tujuan pengiriman terlebih dahulu'
                            });
                        } else {
                            alert('Silakan pilih kota tujuan pengiriman terlebih dahulu');
                        }
                        return;
                    }

                    if (!selectedPayment) {
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Pilih Metode Pembayaran',
                                text: 'Silakan pilih metode pembayaran terlebih dahulu'
                            });
                        } else {
                            alert('Silakan pilih metode pembayaran terlebih dahulu');
                        }
                        return;
                    }

                    // Validate payment proof for non-COD methods
                    if (selectedPayment !== 'cod' && !paymentProofInput.files.length) {
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Upload Bukti Pembayaran',
                                text: 'Silakan upload bukti pembayaran terlebih dahulu'
                            });
                        } else {
                            alert('Silakan upload bukti pembayaran terlebih dahulu');
                        }
                        return;
                    }

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: 'Memproses Pesanan...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    }

                    setTimeout(() => {
                        form.submit();
                    }, 500);
                });
            }

            // Input focus/blur animation
            const inputs = document.querySelectorAll('.form-control, .form-select');
            inputs.forEach(input => {
                input.addEventListener('focus', () => input.classList.add('shadow-sm'));
                input.addEventListener('blur', () => input.classList.remove('shadow-sm'));
            });

            // Add visual feedback for city selection
            shippingCitySelect.addEventListener('focus', function() {
                this.style.borderColor = '#007bff';
                this.style.boxShadow = '0 0 0 0.2rem rgba(0, 123, 255, 0.25)';
            });

            shippingCitySelect.addEventListener('blur', function() {
                this.style.borderColor = '#ced4da';
                this.style.boxShadow = 'none';
            });
        });

        // Remove proof function
        function removeProof() {
            const paymentProofInput = document.getElementById('payment_proof');
            const proofPreview = document.getElementById('proof-preview');

            paymentProofInput.value = '';
            proofPreview.style.display = 'none';
        }

        // Add some helper functions for better UX
        function highlightElement(elementId, duration = 2000) {
            const element = document.getElementById(elementId);
            if (element) {
                element.style.transition = 'all 0.3s ease';
                element.style.backgroundColor = '#fff3cd';
                element.style.transform = 'scale(1.02)';
                
                setTimeout(() => {
                    element.style.backgroundColor = 'transparent';
                    element.style.transform = 'scale(1)';
                }, duration);
            }
        }

        // Auto-save form data to prevent data loss
        function saveFormData() {
            const formData = new FormData(document.getElementById('checkoutForm'));
            const data = {};
            
            for (let [key, value] of formData.entries()) {
                if (key !== 'payment_proof') { // Don't save file data
                    data[key] = value;
                }
            }
            
            try {
                sessionStorage.setItem('checkout_form_data', JSON.stringify(data));
            } catch (e) {
                // Session storage not available or quota exceeded
                console.log('Could not save form data');
            }
        }

        // Restore form data
        function restoreFormData() {
            try {
                const savedData = sessionStorage.getItem('checkout_form_data');
                if (savedData) {
                    const data = JSON.parse(savedData);
                    Object.keys(data).forEach(key => {
                        const element = document.querySelector(`[name="${key}"]`);
                        if (element && !element.value) { // Only restore if field is empty
                            element.value = data[key];
                            
                            // Trigger change event for dropdowns
                            if (element.tagName === 'SELECT') {
                                element.dispatchEvent(new Event('change'));
                            }
                        }
                    });
                }
            } catch (e) {
                console.log('Could not restore form data');
            }
        }

        // Clear saved data on successful form submission
        function clearSavedFormData() {
            try {
                sessionStorage.removeItem('checkout_form_data');
            } catch (e) {
                console.log('Could not clear saved form data');
            }
        }

        // Initialize form data restoration
        window.addEventListener('load', function() {
            restoreFormData();
        });

        // Save form data on input changes
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('checkoutForm');
            if (form) {
                form.addEventListener('change', saveFormData);
                form.addEventListener('input', saveFormData);
            }
        });
    </script>

    <style>
        .payment-template {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .bank-info {
            transition: all 0.3s ease;
        }

        .bank-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .qr-code-placeholder {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 20px;
            background-color: #f8f9fa;
            transition: all 0.3s ease;
        }

        .qr-code-placeholder:hover {
            border-color: #007bff;
            background-color: #e3f2fd;
        }

        .form-control,
        .form-select {
            transition: all 0.3s ease;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        /* Enhanced city select styling */
        #shipping_city {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 16px 12px;
        }

        #shipping_city:focus {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23007bff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        }

        /* Shipping cost animation */
        .shipping-update {
            animation: pulse 0.6s ease-in-out;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
                background-color: #fff3cd;
            }
            100% {
                transform: scale(1);
            }
        }

        .card {
            border-radius: 15px;
            overflow: hidden;
        }

        .card-header {
            border-radius: 15px 15px 0 0 !important;
        }

        .btn {
            border-radius: 10px;
        }

        .object-fit-cover {
            object-fit: cover;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            content: "›";
            font-weight: bold;
        }

        #proof-preview {
            animation: slideDown 0.3s ease-in-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                max-height: 0;
            }

            to {
                opacity: 1;
                max-height: 500px;
            }
        }

        /* Enhanced hover effects for interactive elements */
        .form-select option {
            padding: 10px;
        }

        .form-select option:hover {
            background-color: #f8f9fa;
        }

        /* Loading states */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 991px) {
            .card[style*="top: 2rem"] {
                position: relative !important;
                top: auto !important;
            }
        }

        @media (max-width: 576px) {
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }

            .card-body {
                padding: 1rem;
            }

            .bank-info {
                padding: 1rem !important;
            }

            .qr-code-placeholder img {
                max-width: 150px !important;
            }

            .row.g-3>.col-md-6 {
                margin-bottom: 1rem;
            }
        }

        /* Custom scrollbar for better UX */
        .card-body {
            scrollbar-width: thin;
            scrollbar-color: #dee2e6 #f8f9fa;
        }

        .card-body::-webkit-scrollbar {
            width: 6px;
        }

        .card-body::-webkit-scrollbar-track {
            background: #f8f9fa;
            border-radius: 10px;
        }

        .card-body::-webkit-scrollbar-thumb {
            background: #dee2e6;
            border-radius: 10px;
        }

        .card-body::-webkit-scrollbar-thumb:hover {
            background: #adb5bd;
        }

        /* Loading animation for form submission */
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .loading {
            position: relative;
            overflow: hidden;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        /* Enhanced hover effects */
        .alert {
            transition: all 0.3s ease;
        }

        .alert:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* File upload styling */
        .form-control[type="file"] {
            padding: 0.75rem;
            border: 2px dashed #dee2e6;
            background-color: #f8f9fa;
            transition: all 0.3s ease;
        }

        .form-control[type="file"]:hover {
            border-color: #007bff;
            background-color: #e3f2fd;
        }

        .form-control[type="file"]:focus {
            border-color: #007bff;
            border-style: solid;
            background-color: #fff;
        }

        /* Payment method dropdown enhancement */
        .form-select {
            background-position: right 1rem center;
            background-size: 16px 12px;
        }

        .form-select:focus {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23007bff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        }

        /* Print styles */
        @media print {

            .btn,
            .breadcrumb,
            .alert {
                display: none !important;
            }

            .card {
                border: 1px solid #dee2e6 !important;
                box-shadow: none !important;
            }

            .card-header {
                background-color: #f8f9fa !important;
                color: #000 !important;
            }
        }
    </style>
@endsection