{{-- Bukti Pembayaran / Receipt Digital --}}
<x-layouts.app :title="'Bukti Pembayaran — ' . $booking->booking_code">

@push('styles')
<style>
/* Print-specific styles */
@media print {
    .navbar-customer, .sw-footer, .no-print, .page-header { display: none !important; }
    main { padding: 0 !important; }
    .receipt-card { box-shadow: none !important; border: 1px solid #ddd !important; }
    .btn { display: none !important; }
}
</style>
@endpush

<div class="page-header no-print">
    <div>
        <h1 class="page-title"><i class="fas fa-receipt me-2" style="color:var(--sw-primary);"></i>Bukti 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.history.index') }}" style="color:var(--sw-primary);text-decoration:none;">Riwayat</a></li>
            <li class="breadcrumb-item active">Receipt</li>
        </ol></nav>
    </div>
</div>

@if (session('success'))
<div class="alert border-0 mb-4 d-flex align-items-center gap-3 no-print"
     style="background:#D1FAE5;color:#065F46;border-radius:12px;">
    <i class="fas fa-circle-check" style="font-size:1.3rem;"></i>
    <div>{{ session('success') }}</div>
</div>
@endif

<div class="row justify-content-center">
    <div class="col-lg-7 col-xl-6">

        {{-- Action Buttons --}}
        <div class="d-flex gap-2 mb-4 no-print">
            <button onclick="window.print()" class="btn btn-primary flex-grow-1">
                <i class="fas fa-print me-2"></i>Cetak / Download PDF
            </button>
            <a href="{{ route('customer.history.index') }}" class="btn btn-outline-secondary flex-grow-1">
                <i class="fas fa-history me-2"></i>Riwayat
            </a>
        </div>

        {{-- Receipt Card --}}
        <div class="card receipt-card" style="border-radius:16px;overflow:hidden;">

            {{-- Header --}}
            <div class="p-4 text-center text-white" style="background:var(--sw-gradient);">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-2">
                    <div style="width:36px;height:36px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-soap" style="font-size:1.1rem;"></i>
                    </div>
                    <span class="fw-700" style="font-size:1.2rem;">SparkWash</span>
                </div>
                <p class="mb-0" style="font-size:0.8rem;opacity:0.85;">Bukti Pembayaran Digital</p>
            </div>

            {{-- Status Badge --}}
            <div class="text-center py-3" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">
                <i class="fas fa-circle-check mb-1" style="font-size:2rem;color:#059669;"></i>
                <div class="fw-700" style="color:#065F46;font-size:1rem;">PEMBAYARAN BERHASIL</div>
                <div style="font-size:0.8rem;color:#047857;">
                    {{ $booking->payment->paid_at?->locale('id')->isoFormat('dddd, D MMMM Y, HH:mm') }} WIB
                </div>
            </div>

            {{-- Dashed divider --}}
            <div style="border-bottom:2px dashed #E5E7EB;margin:0 24px;"></div>

            {{-- Invoice Details --}}
            <div class="p-4">

                {{-- Invoice Number --}}
                <div class="text-center mb-4">
                    <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:1px;">No. Invoice</div>
                    <div class="fw-700 font-monospace" style="font-size:1rem;color:var(--sw-dark);">
                        {{ $booking->payment->payment_code }}
                    </div>
                </div>

                {{-- Info Grid --}}
                <div class="row g-3 mb-4">
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Kode Booking</div>
                        <div class="fw-600 font-monospace" style="font-size:0.875rem;color:var(--sw-dark);">{{ $booking->booking_code }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">No. Antrian</div>
                        <div class="fw-700" style="font-size:1.3rem;color:var(--sw-primary-dark);">
                            #{{ str_pad($booking->queue_number, 2, '0', STR_PAD_LEFT) }}
                        </div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Nama Customer</div>
                        <div class="fw-600" style="font-size:0.875rem;">{{ $booking->user->name }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Paket Layanan</div>
                        <div class="fw-600" style="font-size:0.875rem;">{{ $booking->service->name }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Tanggal Cuci</div>
                        <div class="fw-600" style="font-size:0.875rem;">{{ $booking->schedule->date->locale('id')->isoFormat('D MMM Y') }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Jam</div>
                        <div class="fw-600" style="font-size:0.875rem;">{{ substr($booking->schedule->time_slot, 0, 5) }} WIB</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Kendaraan</div>
                        <div class="fw-600" style="font-size:0.875rem;">{{ $booking->vehicle_type }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Plat Nomor</div>
                        <div class="fw-700 font-monospace" style="font-size:0.875rem;letter-spacing:1px;">{{ $booking->vehicle_plate }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Metode Bayar</div>
                        <div class="fw-600" style="font-size:0.875rem;">{{ $booking->payment->method_label }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:0.72rem;color:var(--sw-gray);text-transform:uppercase;letter-spacing:0.5px;">Status Pembayaran</div>
                        <span class="badge-status status-paid" style="font-size:0.75rem;padding:0.3em 0.8em;">Lunas</span>
                    </div>
                </div>

                {{-- Dashed divider --}}
                <div style="border-bottom:2px dashed #E5E7EB;margin-bottom:16px;"></div>

                {{-- Total --}}
                <div class="d-flex justify-content-between align-items-center">
                    <span class="fw-700" style="font-size:1rem;color:var(--sw-dark);">Total Dibayar</span>
                    <span class="fw-700" style="font-size:1.4rem;color:var(--sw-primary-dark);">{{ $booking->payment->formatted_amount }}</span>
                </div>
            </div>

            {{-- Footer Receipt --}}
            <div class="p-4 text-center" style="background:#F9FAFB;border-top:1px dashed #E5E7EB;">
                <div style="font-size:0.75rem;color:var(--sw-gray);">
                    <i class="fas fa-shield-check me-1" style="color:var(--sw-primary);"></i>
                    Dokumen ini merupakan bukti pembayaran yang sah dari SparkWash
                </div>
                <div style="font-size:0.7rem;color:#9CA3AF;margin-top:4px;">
                    Dicetak pada {{ now()->locale('id')->isoFormat('D MMM Y, HH:mm') }} WIB
                </div>
            </div>
        </div>

        {{-- Bottom Actions --}}
        <div class="d-flex gap-2 mt-4 no-print">
            <a href="{{ route('customer.queue.show', $booking) }}" class="btn btn-outline-primary flex-grow-1">
                <i class="fas fa-list-ol me-2"></i>Lihat Antrian
            </a>
            <a href="{{ route('customer.booking.create') }}" class="btn btn-primary flex-grow-1">
                <i class="fas fa-plus me-2"></i>Booking Lagi
            </a>
        </div>

    </div>
</div>

</x-layouts.app>