{{-- Detail Pembayaran + QRIS/E-Wallet --}}
<x-layouts.app :title="'Pembayaran — ' . $booking->booking_code">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-qrcode me-2" style="color:var(--sw-primary);"></i>Pembayaran</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0" style="font-size:0.8rem;">
            <li class="breadcrumb-item"><a href="{{ route('customer.dashboard') }}" style="color:var(--sw-primary);text-decoration:none;">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('customer.payment.list') }}" style="color:var(--sw-primary);text-decoration:none;">Pembayaran</a></li>
            <li class="breadcrumb-item active">{{ $booking->booking_code }}</li>
        </ol></nav>
    </div>
</div>

{{-- Status sudah lunas — redirect ke receipt harusnya terjadi di controller, tapi sebagai fallback --}}
@if ($booking->payment->status === 'paid')
<div class="col-lg-7 mx-auto">
    <div class="card text-center p-5">
        <i class="fas fa-circle-check mb-3" style="font-size:3rem;color:#22C55E;"></i>
        <h5 class="fw-700">Pembayaran Lunas</h5>
        <p style="color:var(--sw-gray);">Pembayaran telah dikonfirmasi.</p>
        <a href="{{ route('customer.payment.receipt', $booking) }}" class="btn btn-primary px-5">
            <i class="fas fa-receipt me-2"></i>Lihat Bukti Pembayaran
        </a>
    </div>
</div>

@elseif ($booking->payment->status === 'unpaid')

<div class="row g-4">

    {{-- Rincian Pembayaran --}}
    <div class="col-lg-5 order-2 order-lg-1">
        <div class="card mb-4">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="color:var(--sw-dark);">
                    <i class="fas fa-receipt me-2" style="color:var(--sw-primary);"></i>Rincian Pembayaran
                </h6>
                <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                    <span style="color:var(--sw-gray);">Kode Booking</span>
                    <span class="fw-600 font-monospace">{{ $booking->booking_code }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                    <span style="color:var(--sw-gray);">Nomor Antrian</span>
                    <span class="fw-700" style="color:var(--sw-primary-dark);">#{{ str_pad($booking->queue_number, 2, '0', STR_PAD_LEFT) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                    <span style="color:var(--sw-gray);">Paket</span>
                    <span class="fw-600">{{ $booking->service->name }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                    <span style="color:var(--sw-gray);">Jadwal</span>
                    <span class="fw-600">{{ $booking->schedule->date->locale('id')->isoFormat('D MMM Y') }}, {{ substr($booking->schedule->time_slot, 0, 5) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                    <span style="color:var(--sw-gray);">Kendaraan</span>
                    <span class="fw-600">{{ $booking->vehicle_type }} — {{ $booking->vehicle_plate }}</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between">
                    <span class="fw-700">Total Bayar</span>
                    <span class="fw-700" style="font-size:1.15rem;color:var(--sw-primary-dark);">{{ $booking->payment->formatted_amount }}</span>
                </div>
                @if ($booking->payment->expired_at)
                <div class="alert border-0 mt-3 mb-0 rounded-sw p-2" style="background:#FFF3E0;font-size:0.8rem;color:#E65100;">
                    <i class="fas fa-clock me-1"></i>Batas waktu: <strong>{{ $booking->payment->expired_at->format('d M Y, H:i') }} WIB</strong>
                </div>
                @endif
            </div>
        </div>

        {{-- Status Booking --}}
        <div class="card">
            <div class="card-body p-3 d-flex align-items-center gap-3">
                <div style="width:40px;height:40px;border-radius:50%;background:var(--sw-primary-soft);display:flex;align-items:center;justify-content:center;color:var(--sw-primary);font-size:1rem;">
                    <i class="fas fa-info"></i>
                </div>
                <div>
                    <div style="font-size:0.75rem;color:var(--sw-gray);">Status Booking</div>
                    @php $sb = $booking->status_badge; @endphp
                    <span class="badge-status {{ $sb['class'] }}" style="font-size:0.8rem;">{{ $sb['label'] }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Panel Pembayaran --}}
    <div class="col-lg-7 order-1 order-lg-2">

        {{-- Pilih Metode --}}
        <div class="card mb-4">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="color:var(--sw-dark);">
                    <i class="fas fa-wallet me-2" style="color:var(--sw-primary);"></i>Pilih Metode Pembayaran
                </h6>
                <div class="row g-2" id="methodSelector">
                    @foreach ([
                        'qris'     => ['label' => 'QRIS',          'icon' => 'fas fa-qrcode',         'desc' => 'Scan QR untuk bayar'],
                        'gopay'    => ['label' => 'GoPay',         'icon' => 'fas fa-g',               'desc' => 'Via aplikasi GoPay'],
                        'ovo'      => ['label' => 'OVO',           'icon' => 'fas fa-circle-dot',      'desc' => 'Via aplikasi OVO'],
                        'dana'     => ['label' => 'DANA',          'icon' => 'fas fa-d',               'desc' => 'Via aplikasi DANA'],
                        'transfer' => ['label' => 'Transfer Bank', 'icon' => 'fas fa-university','desc' => 'Transfer manual'],
                    ] as $val => $opt)
                    <div class="col-6 col-md-4">
                        <input class="btn-check" type="radio" name="payment_method"
                               id="pm_{{ $val }}" value="{{ $val }}"
                               {{ $val === 'qris' ? 'checked' : '' }}>
                        <label class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center gap-1 method-btn"
                               for="pm_{{ $val }}" style="font-size:0.8rem;border-radius:10px;min-height:80px;">
                            <i class="{{ $opt['icon'] }}" style="font-size:1.3rem;"></i>
                            <span class="fw-600">{{ $opt['label'] }}</span>
                            <span style="font-size:0.7rem;opacity:0.7;">{{ $opt['desc'] }}</span>
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Panel QRIS --}}
        <div id="panel_qris" class="payment-panel card mb-4">
            <div class="card-body p-4 text-center">
                <h6 class="fw-700 mb-1" style="color:var(--sw-dark);">Scan QRIS untuk Membayar</h6>
                <p style="font-size:0.825rem;color:var(--sw-gray);">Gunakan aplikasi e-wallet atau m-banking apapun yang mendukung QRIS</p>
                <img src="{{ asset('images/qris-demo.png') }}" alt="QRIS SparkWash"
                     class="mx-auto d-block mb-3"
                     style="width:200px;height:200px;object-fit:contain;border:3px solid var(--sw-primary-light);border-radius:16px;padding:8px;background:#fff;">
                <div class="fw-700 mb-1" style="font-size:1.3rem;color:var(--sw-primary-dark);">
                    {{ $booking->payment->formatted_amount }}
                </div>
                <div style="font-size:0.8rem;color:var(--sw-gray);">a.n. <strong>SparkWash</strong></div>
                <div class="mt-3 p-3 rounded-sw text-start" style="background:#EFF7FF;font-size:0.8rem;">
                    <div class="fw-600 mb-2"><i class="fas fa-circle-info me-1" style="color:var(--sw-primary);"></i>Cara Bayar QRIS</div>
                    <ol class="mb-0 ps-3" style="color:var(--sw-gray);">
                        <li>Buka aplikasi e-wallet atau m-banking Anda</li>
                        <li>Pilih menu "Scan QR" atau "QRIS"</li>
                        <li>Arahkan kamera ke QR Code di atas</li>
                        <li>Masukkan nominal: <strong>{{ $booking->payment->formatted_amount }}</strong></li>
                        <li>Konfirmasi dan selesaikan pembayaran</li>
                        <li>Klik tombol "<strong>Saya Sudah Membayar</strong>" di bawah</li>
                    </ol>
                </div>
            </div>
        </div>

        {{-- Panel E-Wallet --}}
        @foreach (['gopay' => ['name' => 'GoPay', 'num' => '0812-3456-7890', 'color' => '#00AED6'], 'ovo' => ['name' => 'OVO', 'num' => '0812-3456-7890', 'color' => '#4C3494'], 'dana' => ['name' => 'DANA', 'num' => '0812-3456-7890', 'color' => '#118EEA']] as $key => $wallet)
        <div id="panel_{{ $key }}" class="payment-panel card mb-4 d-none">
            <div class="card-body p-4 text-center">
                <h6 class="fw-700 mb-1" style="color:var(--sw-dark);">Bayar via {{ $wallet['name'] }}</h6>
                <p style="font-size:0.825rem;color:var(--sw-gray);">Transfer ke nomor {{ $wallet['name'] }} berikut</p>
                <div class="p-4 rounded-sw mb-3" style="background:{{ $wallet['color'] }}15;border:2px solid {{ $wallet['color'] }}30;">
                    <div style="font-size:0.8rem;color:var(--sw-gray);">Nomor {{ $wallet['name'] }}</div>
                    <div class="fw-700 mt-1" style="font-size:1.5rem;letter-spacing:2px;color:{{ $wallet['color'] }};">
                        {{ $wallet['num'] }}
                    </div>
                    <div style="font-size:0.8rem;color:var(--sw-gray);">a.n. SparkWash</div>
                    <div class="mt-2 fw-700" style="font-size:1.1rem;color:var(--sw-primary-dark);">{{ $booking->payment->formatted_amount }}</div>
                </div>
                <div class="mt-2 p-3 rounded-sw text-start" style="background:#EFF7FF;font-size:0.8rem;">
                    <div class="fw-600 mb-2"><i class="fas fa-circle-info me-1" style="color:var(--sw-primary);"></i>Cara Bayar {{ $wallet['name'] }}</div>
                    <ol class="mb-0 ps-3" style="color:var(--sw-gray);">
                        <li>Buka aplikasi {{ $wallet['name'] }}</li>
                        <li>Pilih menu Transfer / Kirim Uang</li>
                        <li>Masukkan nomor: <strong>{{ $wallet['num'] }}</strong></li>
                        <li>Masukkan nominal: <strong>{{ $booking->payment->formatted_amount }}</strong></li>
                        <li>Konfirmasi dan selesaikan transfer</li>
                        <li>Klik tombol "<strong>Saya Sudah Membayar</strong>" di bawah</li>
                    </ol>
                </div>
            </div>
        </div>
        @endforeach

        {{-- Panel Transfer Bank --}}
        <div id="panel_transfer" class="payment-panel card mb-4 d-none">
            <div class="card-body p-4 text-center">
                <h6 class="fw-700 mb-1" style="color:var(--sw-dark);">Transfer Bank</h6>
                <p style="font-size:0.825rem;color:var(--sw-gray);">Transfer ke rekening berikut</p>
                <div class="p-4 rounded-sw mb-3" style="background:#F0F9FF;border:2px solid #BAE6FD;">
                    <div style="font-size:0.8rem;color:var(--sw-gray);">BCA — SparkWash</div>
                    <div class="fw-700 mt-1" style="font-size:1.5rem;letter-spacing:2px;color:var(--sw-primary-dark);">1234 5678 90</div>
                    <div style="font-size:0.8rem;color:var(--sw-gray);">a.n. SparkWash Indonesia</div>
                    <div class="mt-2 fw-700" style="font-size:1.1rem;color:var(--sw-primary-dark);">{{ $booking->payment->formatted_amount }}</div>
                </div>
                <div class="alert border-0 p-2 mb-0" style="background:#FFF3E0;font-size:0.8rem;color:#E65100;border-radius:8px;">
                    <i class="fas fa-triangle-exclamation me-1"></i>Wajib transfer tepat <strong>{{ $booking->payment->formatted_amount }}</strong> tanpa pembulatan
                </div>
            </div>
        </div>

        {{-- Tombol Konfirmasi Bayar --}}
        <form id="paymentForm" method="POST" action="{{ route('customer.payment.process', $booking) }}">
            @csrf
            <input type="hidden" name="method" id="selectedMethod" value="qris">
            <button type="button" id="btnPay" class="btn btn-primary w-100 py-3 fw-700" style="font-size:1rem;border-radius:12px;">
                <i class="fas fa-check-circle me-2"></i>Saya Sudah Membayar
            </button>
        </form>

    </div>
</div>

@else
{{-- Status lain (expired/refunded) --}}
<div class="col-lg-6 mx-auto">
    <div class="card">
        <div class="card-body p-5 text-center">
            @php $b = $booking->payment->status_badge; @endphp
            <i class="fas fa-circle-xmark mb-3" style="font-size:3rem;color:#EF4444;"></i>
            <span class="badge-status {{ $b['class'] }}" style="font-size:1rem;padding:0.6em 1.5em;">{{ $b['label'] }}</span>
            <p class="mt-3 mb-4" style="color:var(--sw-gray);font-size:0.875rem;">Silakan buat booking baru atau hubungi admin SparkWash jika ada pertanyaan.</p>
            <a href="{{ route('customer.booking.create') }}" class="btn btn-primary px-5">
                <i class="fas fa-plus me-2"></i>Booking Baru
            </a>
        </div>
    </div>
</div>
@endif

@push('scripts')
<script>
// Switching payment method panels
const methodRadios = document.querySelectorAll('input[name="payment_method"]');
const panels = document.querySelectorAll('.payment-panel');
const selectedMethodInput = document.getElementById('selectedMethod');

function showPanel(val) {
    panels.forEach(p => p.classList.add('d-none'));
    const active = document.getElementById('panel_' + val);
    if (active) active.classList.remove('d-none');
    if (selectedMethodInput) selectedMethodInput.value = val;
}

methodRadios.forEach(r => {
    r.addEventListener('change', function() { showPanel(this.value); });
});

// Init
showPanel('qris');

// Confirm payment
const btnPay = document.getElementById('btnPay');
if (btnPay) {
    btnPay.addEventListener('click', function() {
        const method = selectedMethodInput ? selectedMethodInput.value : 'qris';
        const labels = { qris: 'QRIS', gopay: 'GoPay', ovo: 'OVO', dana: 'DANA', transfer: 'Transfer Bank' };
        SwAlert.confirm(
            'Konfirmasi Pembayaran',
            'Pastikan Anda sudah melakukan pembayaran via <strong>' + (labels[method] || method) + '</strong>.<br>Klik OK untuk konfirmasi.'
        ).then(r => {
            if (r.isConfirmed) {
                document.getElementById('paymentForm').submit();
            }
        });
    });
}
</script>
@endpush

</x-layouts.app>