@extends('layouts.content')

@section('content')
    <style>
        @media (max-width: 768px) {
            footer { display: none !important; }
        }
        .checkout-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; }
        .checkout-section-title { font-weight: 800; font-size: 1.05rem; }

        .custom-sticky-container {
            position: sticky;
            top: 110px;
            z-index: 10;
        }

        /* Mobile checkout improvements */
        @media (max-width: 767px) {
            .custom-sticky-container {
                position: static;
            }
            .checkout-card {
                border-radius: 12px;
            }
            #address-modal > div:last-child > div {
                max-height: 92svh;
                overflow-y: auto;
                margin: 0;
                border-radius: 20px 20px 0 0;
            }
        }
    </style>

    <main class="container py-3 py-md-5 px-3 px-md-4" style="max-width: 1280px;">
        <div class="mb-4">
            <h1 class="cart-headline-font text-primary-custom" style="font-size: 1.8rem;">Detail Pembelian</h1>
            <p class="text-secondary-emphasis">Lengkapi alamat, gunakan kupon, lalu selesaikan pembayaran.</p>
        </div>

        @if (session('error'))
            <div class="alert alert-danger border-0 rounded-3 shadow-sm mb-4">
                {{ session('error') }}
            </div>
        @endif

        @if (isset($successMessage) && $successMessage)
            <div class="alert alert-success border-0 rounded-3 shadow-sm mb-4">
                {{ $successMessage }}
            </div>
        @endif

        <div class="row g-4">
            {{-- Bagian Kiri: Alamat & Produk --}}
            <div class="col-lg-8">
                <div class="checkout-card p-4 shadow-sm">

                    {{-- 1. Alamat Pengiriman --}}
                    <section class="mb-4">
                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3">
                            <div>
                                <div class="checkout-section-title">Alamat Pengiriman</div>
                                <div class="text-secondary" style="font-size: .95rem;">Alamat yang dipilih akan digunakan untuk estimasi dan ongkir.</div>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary-custom rounded-pill fw-semibold" id="open-address-modal">
                                    Ubah Alamat
                                </button>
                                <a href="{{ route('addresses.create', ['redirect_to' => url()->current()]) }}" class="btn btn-outline-secondary-custom rounded-pill fw-semibold">
                                    Tambah Baru
                                </a>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                @if($addresses->isEmpty())
                                    <div class="alert alert-warning rounded-3">Belum ada data alamat pengiriman aktif.</div>
                                @else
                                    @php
                                        $defaultAddress = $addresses->firstWhere('address_id', $selectedAddressId) ?? $addresses->first();
                                    @endphp

                                    <div class="form-check p-3 border rounded-4 mb-2" style="background: rgba(32,96,61,0.04); border-color: rgba(32,96,61,0.15)!important;">
                                        <input class="form-check-input" type="radio" name="address_id" id="main-display-radio" value="{{ $defaultAddress->address_id }}" checked>
                                        <label class="form-check-label w-100" for="main-display-radio">
                                            <div class="fw-bold text-dark" id="display-address-label">
                                                {{ $defaultAddress->address_label }} {{ $defaultAddress->is_primary ? '(Utama)' : '' }}
                                            </div>
                                            <div class="text-secondary" id="display-recipient" style="font-size: .92rem;">
                                                {{ $defaultAddress->recipient_name }} - {{ $defaultAddress->recipient_phone }}
                                            </div>
                                            <div class="text-dark mt-1" id="display-full-address" style="font-size: .95rem; line-height: 1.4;">
                                                {{ $defaultAddress->full_address }}, {{ $defaultAddress->village ? $defaultAddress->village.', ' : '' }}{{ $defaultAddress->district }}, {{ $defaultAddress->city }}, {{ $defaultAddress->province }} {{ $defaultAddress->postal_code }}
                                            </div>
                                        </label>
                                    </div>

                                    {{-- Modal Daftar Alamat --}}
                                    <div id="address-modal" class="position-fixed top-0 start-0 w-100 h-100" style="display:none; z-index: 1060;">
                                        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(0,0,0,.55);"></div>
                                        <div class="position-relative h-100 d-flex align-items-center justify-content-center p-3">
                                            <div class="bg-white border rounded-4 shadow-lg" style="width: 100%; max-width: 680px;">
                                                <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                                                    <h5 class="fw-bold mb-0">Pilih Alamat Pengiriman</h5>
                                                    <button type="button" class="btn btn-sm btn-light rounded-circle" id="close-address-modal">✕</button>
                                                </div>
                                                <div class="p-3" style="max-height: 60vh; overflow-y: auto;">
                                                    @foreach($addresses as $address)
                                                        <div class="form-check p-3 border rounded-4 mb-2 modal-address-item">
                                                            <input class="form-check-input modal-radio-address" type="radio" name="modal_address_id" id="modal-address-{{ $address->address_id }}" value="{{ $address->address_id }}" {{ $address->address_id == $defaultAddress->address_id ? 'checked' : '' }}
                                                                data-label="{{ $address->address_label }} {{ $address->is_primary ? '(Utama)' : '' }}"
                                                                data-recipient="{{ $address->recipient_name }} - {{ $address->recipient_phone }}"
                                                                data-full="{{ $address->full_address }}, {{ $address->village ? $address->village.', ' : '' }}{{ $address->district }}, {{ $address->city }}, {{ $address->province }} {{ $address->postal_code }}">
                                                            <label class="form-check-label w-100" for="modal-address-{{ $address->address_id }}">
                                                                <div class="fw-bold">{{ $address->address_label }}</div>
                                                                <div class="text-secondary small">{{ $address->recipient_name }} - {{ $address->recipient_phone }}</div>
                                                                <div class="text-dark small mt-1">{{ $address->full_address }}, {{ $address->city }}</div>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div class="p-3 border-top">
                                                    <button type="button" class="btn btn-primary-custom w-100 rounded-3 fw-semibold" id="save-address-modal">Konfirmasi Alamat</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </section>

                    <hr class="text-muted my-4" style="opacity: 0.1;">

                    {{-- 2. Daftar Produk --}}
                    <section>
                        <div class="checkout-section-title mb-3">Produk Yang Dibeli</div>
                        <div class="row g-3">
                            @foreach($purchase['items'] as $item)
                                <div class="col-12">
                                    <div class="d-flex gap-3 align-items-start p-3 border rounded-4 bg-light">
                                        <div style="width: 70px; height: 70px; flex: 0 0 auto;">
                                            <img src="{{ $item['photo_url'] }}" alt="{{ $item['product_name'] }}" class="w-100 h-100 rounded-3" style="object-fit: cover;">
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="fw-bold text-dark">{{ $item['product_name'] }}</div>
                                            <div class="text-secondary small">Varian: {{ $item['package_label'] }}</div>
                                            <div class="text-secondary small">Jumlah: <span class="fw-bold text-dark">{{ $item['quantity'] }}</span></div>
                                            <div class="fw-bold text-primary-custom mt-1">Rp {{ number_format($item['subtotal'], 0, ',', '.') }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </section>
                </div>
            </div>

            {{-- Bagian Kanan: Kupon + Summary & Bayar --}}
            <div class="col-lg-4">
                <div class="custom-sticky-container">

                    {{-- 3. Form Penerapan Kupon (Menggunakan GET ke Halaman Ini Sendiri) --}}
                    <section class="checkout-card p-4 mb-3 shadow-sm">
                        <div class="checkout-section-title mb-2">Gunakan Kupon Belanja</div>
                        <form method="GET" action="" id="coupon-form">
                            {{-- Tetap pertahankan data cart_ids di URL saat merefresh halaman verifikasi kupon --}}
                            @if(!empty($purchase['cart_ids']))
                                @foreach($purchase['cart_ids'] as $id)
                                    <input type="hidden" name="cart_ids[]" value="{{ $id }}">
                                @endforeach
                            @endif
                            <input type="hidden" name="source" value="{{ $purchase['source'] }}">
                            <input type="hidden" name="package_id" value="{{ $purchase['package_id'] }}">
                            <input type="hidden" name="quantity" value="{{ $purchase['quantity'] }}">
                            <input type="hidden" name="address_id" value="{{ $selectedAddressId }}" id="coupon_address_id_hidden">

                            <div class="d-flex gap-2">
                                <input type="text" name="coupon_code" value="{{ $couponCode }}" class="form-control rounded-3" placeholder="Kode Kupon">
                                <button type="submit" class="btn btn-outline-secondary-custom fw-semibold px-3">Terapkan</button>
                            </div>

                            <div class="mt-2">
                                @if($couponPreview && $couponPreview['valid'] && $couponPreview['discount'] > 0)
                                    <div class="alert alert-success py-1 px-2 small mb-0">
                                        ✓ Potongan Rp {{ number_format($couponPreview['discount'], 0, ',', '.') }} diterapkan.
                                    </div>
                                @elseif($couponCode && $couponPreview && !$couponPreview['valid'])
                                    <div class="text-danger small px-1">⚠ {{ $couponPreview['message'] }}</div>
                                @endif
                            </div>
                        </form>
                    </section>

                    {{-- 4. Ringkasan Estimasi & Pembayaran --}}
                    <section class="checkout-card p-4 shadow-sm">
                        <div class="checkout-section-title mb-3">Ringkasan Pembayaran</div>

                        <div class="mb-3 border-bottom pb-2">
                            <div class="d-flex justify-content-between text-secondary small mb-2">
                                <span>Total Produk</span>
                                <span class="text-dark fw-medium">Rp {{ number_format($summary['subtotal'], 0, ',', '.') }}</span>
                            </div>
                            <div class="d-flex justify-content-between text-secondary small mb-2">
                                <span>Ongkos Kirim ({{ $summary['weight_in_kg'] }} kg)</span>
                                @if(!empty($rateNominalMissing) && $rateNominalMissing)
                                    <span class="fw-medium text-warning">Menunggu konfirmasi</span>
                                @else
                                    <span class="text-dark fw-medium">Rp {{ number_format($summary['shipping_cost'], 0, ',', '.') }}</span>
                                @endif
                            </div>
                            <div class="d-flex justify-content-between text-secondary small mb-2">
                                <span>Diskon Kupon</span>
                                <span class="text-danger fw-medium">- Rp {{ number_format($summary['coupon_discount'], 0, ',', '.') }}</span>
                            </div>
                            @if($summary['estimated_days'])
                                <div class="text-muted small mt-1">
                                    Estimasi Pengiriman: <strong>{{ $summary['estimated_days'] }} Hari</strong>
                                </div>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <span class="text-secondary fw-semibold">Total Tagihan</span>
                            <span class="text-primary-custom fw-bold h4 mb-0">
                                Rp {{ number_format($summary['total_payment'], 0, ',', '.') }}
                            </span>
                        </div>

                        {{-- Form POST Transaksi Utama --}}
                        <form method="POST" action="{{ route('checkout.store') }}" id="payment-form">
                            @csrf
                            {{-- Mengirim array cart_ids ter-encode JSON agar aman dari limitasi URL POST --}}
                            <input type="hidden" name="cart_ids" value="{{ json_encode($purchase['cart_ids'] ?? []) }}">
                            <input type="hidden" name="source" value="{{ $purchase['source'] }}">
                            <input type="hidden" name="package_id" value="{{ $purchase['package_id'] }}">
                            <input type="hidden" name="quantity" value="{{ $purchase['quantity'] }}">
                            <input type="hidden" name="address_id" id="payment_address_id" value="{{ $selectedAddressId }}">
                            <input type="hidden" name="coupon_code" value="{{ $couponCode }}">

                            @if(!empty($rateNominalMissing) && $rateNominalMissing)
                                <div class="alert border-0 rounded-3 mb-3 py-3 px-3" style="background: #fffbeb; border-left: 4px solid #f59e0b !important; border-left-style: solid !important;">
                                    <div class="d-flex align-items-start gap-2">
                                        <span class="material-symbols-outlined flex-shrink-0" style="color: #d97706; font-size: 20px; margin-top: 1px;">pending</span>
                                        <div>
                                            <div class="fw-bold" style="color: #92400e; font-size: 0.88rem;">Tarif Ongkir Belum Tersedia</div>
                                            <div style="color: #b45309; font-size: 0.82rem; margin-top: 2px;">Admin sedang mengisi nominal tarif untuk wilayah Anda. Halaman akan dapat digunakan setelah admin mengkonfirmasi.</div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn w-100 py-3 rounded-3 fw-bold d-flex align-items-center justify-content-center gap-2" style="background:#e5e7eb; color:#9ca3af; cursor:not-allowed;" disabled>
                                    <span class="material-symbols-outlined" style="font-size:20px;">hourglass_empty</span>
                                    Menunggu Konfirmasi Tarif Ongkir
                                </button>
                            @else
                                <button type="button" id="btn-pay-midtrans" class="btn btn-primary-custom w-100 py-3 rounded-3 fw-bold" onclick="checkoutMidtrans()">
                                    Bayar Sekarang
                                </button>
                            @endif
                        </form>
                    </section>

                </div>
            </div>
        </div>
    </main>

    {{-- Script Integration Midtrans --}}
    @if(config('services.midtrans.is_production', false))
        <script type="text/javascript" src="https://app.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.client_key') }}"></script>
    @else
        <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.client_key') }}"></script>
    @endif

    <script>
        function removeCartItems(cartIds) {
            if (!cartIds || cartIds.length === 0) return Promise.resolve();
            return fetch('{{ route("cart.destroyBatch") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ cart_ids: cartIds })
            }).then(r => r.json()).then(data => {
                console.log('Cart items removed:', data);
            }).catch(err => {
                console.error('Failed to remove cart items:', err);
            });
        }

        function checkoutMidtrans() {
            const btnPay = document.getElementById('btn-pay-midtrans');
            if (btnPay) {
                btnPay.disabled = true;
                btnPay.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span> Memproses...';
            }

            // Membaca token dari Controller jika ada
            const token = "{{ $snapToken ?? '' }}";

            // JIKA token kosong, submit form POST untuk membuat order baru & me-return token baru
            if (!token || token.trim() === "") {
                document.getElementById('payment-form').submit();
                return;
            }

            if (!window.snap) {
                alert('Sistem pembayaran sedang sibuk. Silakan coba sesaat lagi.');
                if (btnPay) {
                    btnPay.disabled = false;
                    btnPay.innerHTML = 'Bayar Sekarang';
                }
                return;
            }

            // JIKA token sudah ada, langsung luncurkan modal Pop-Up Snap Midtrans
            window.snap.pay(token, {
                onSuccess: function(result){
                    // Simpan hasil untuk referensi
                    window._lastPaymentResult = result;

                    // Auto-remove purchased items from cart
                    const cartIds = @json($purchase['cart_ids'] ?? []);
                    removeCartItems(cartIds);

                    // Arahkan ke route finish pembayaran untuk memproses status di database
                    const finishUrl = "{{ route('payment.finish') }}" + 
                        "?order_id=" + encodeURIComponent(result.order_id || '') + 
                        "&transaction_status=" + encodeURIComponent(result.transaction_status || '') + 
                        "&transaction_id=" + encodeURIComponent(result.transaction_id || '') + 
                        "&payment_type=" + encodeURIComponent(result.payment_type || '');
                    window.location.href = finishUrl;
                },
                onPending: function(result){
                    // Auto-remove purchased items from cart
                    const cartIds = @json($purchase['cart_ids'] ?? []);
                    removeCartItems(cartIds);

                    // Arahkan ke route finish pembayaran untuk memproses status di database (pending)
                    const finishUrl = "{{ route('payment.finish') }}" + 
                        "?order_id=" + encodeURIComponent(result.order_id || '') + 
                        "&transaction_status=" + encodeURIComponent(result.transaction_status || '') + 
                        "&transaction_id=" + encodeURIComponent(result.transaction_id || '') + 
                        "&payment_type=" + encodeURIComponent(result.payment_type || '');
                    window.location.href = finishUrl;
                },
                onError: function(result){
                    // Arahkan ke halaman profil -> tab Pesanan Saya
                    window.location.href = "{{ route('profile.index') }}?tab=orders&status=error";
                },
                onClose: function(){
                    // Jika pop-up ditutup tanpa menyelesaikan, tetap di halaman checkout
                    console.log('User menutup panel pop-up pembayaran.');
                    const btnPay = document.getElementById('btn-pay-midtrans');
                    if (btnPay) {
                        btnPay.disabled = false;
                        btnPay.innerHTML = 'Bayar Sekarang';
                    }
                }
            });
        }

        // AUTO-TRIGGER + Script Pengaturan Sinkronisasi Modal Alamat Domisili
        document.addEventListener('DOMContentLoaded', function(){
            // Auto-trigger Midtrans popup setelah order baru berhasil dibuat
            // $snapToken hanya di-set setelah POST store() berhasil, jadi cukup cek token
            const token = "{{ $snapToken ?? '' }}";

            if (token && token.trim() !== "") {
                // Beri jeda sebentar agar snap.js selesai dimuat
                setTimeout(function() {
                    if (window.snap) {
                        checkoutMidtrans();
                    } else {
                        console.error('Midtrans Snap tidak tersedia. Token sudah ada tetapi snap.js belum dimuat.');
                    }
                }, 500);
            }

            // Address modal logic
            const couponAddressHidden = document.getElementById('coupon_address_id_hidden');
            const paymentAddressHidden = document.getElementById('payment_address_id');
            const mainDisplayRadio = document.getElementById('main-display-radio');

            const toggleBtn = document.getElementById('open-address-modal');
            const addressModal = document.getElementById('address-modal');
            const closeModalBtn = document.getElementById('close-address-modal');
            const saveAddressBtn = document.getElementById('save-address-modal');

            const displayLabel = document.getElementById('display-address-label');
            const displayRecipient = document.getElementById('display-recipient');
            const displayFullAddress = document.getElementById('display-full-address');

            if (toggleBtn && addressModal) {
                toggleBtn.addEventListener('click', () => addressModal.style.display = 'block');
            }
            if (closeModalBtn && addressModal) {
                closeModalBtn.addEventListener('click', () => addressModal.style.display = 'none');
            }

            if (saveAddressBtn) {
                saveAddressBtn.addEventListener('click', function(){
                    const selected = document.querySelector('input[name="modal_address_id"]:checked');
                    if (selected) {
                        const idVal = selected.value;

                        if (couponAddressHidden) couponAddressHidden.value = idVal;
                        if (paymentAddressHidden) paymentAddressHidden.value = idVal;
                        if (mainDisplayRadio) mainDisplayRadio.value = idVal;

                        if (displayLabel) displayLabel.textContent = selected.getAttribute('data-label');
                        if (displayRecipient) displayRecipient.textContent = selected.getAttribute('data-recipient');
                        if (displayFullAddress) displayFullAddress.textContent = selected.getAttribute('data-full');

                        // Otomatis reload halaman checkout agar ongkos kirim ke alamat baru terhitung ulang
                        document.getElementById('coupon-form').submit();
                    }
                    addressModal.style.display = 'none';
                });
            }
        });
    </script>
@endsection