{{-- Detail Riwayat Booking --}}
<x-layouts.app :title="'Detail Riwayat'">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-file-lines me-2" style="color:var(--sw-primary);"></i>Detail Booking</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0" style="font-size:0.8rem;">
            <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">{{ $booking->booking_code }}</li>
        </ol></nav>
    </div>
</div>

{{-- VOID / HANGUS BANNER --}}
@if ($booking->status === 'void')
<div class="alert border-0 rounded-3 mb-4 d-flex align-items-start gap-3"
     style="background:#FFF3CD;color:#7D5A00;border-left:4px solid #F59E0B !important;">
    <i class="fas fa-triangle-exclamation mt-1" style="font-size:1.2rem;color:#F59E0B;"></i>
    <div>
        <div class="fw-700 mb-1">Booking Anda Dinyatakan Hangus</div>
        <div style="font-size:0.875rem;">
            Anda berhak mengajukan <strong>refund sebesar 70%</strong> dari harga layanan
            ({{ 'Rp ' . number_format($booking->service_price * 0.7, 0, ',', '.') }}).
            @php $expiresAt = $booking->updated_at->copy()->addHours(24); @endphp
            <br>Batas waktu pengajuan: <strong>{{ $expiresAt->locale('id')->isoFormat('D MMM Y, HH:mm') }} WIB</strong>
            @if(now()->greaterThan($expiresAt))
                <span class="ms-2 badge rounded-pill" style="background:#FEE2E2;color:#991B1B;font-size:0.75rem;">Waktu habis</span>
            @else
                <span class="ms-2 badge rounded-pill" style="background:#D1FAE5;color:#065F46;font-size:0.75rem;">
                    Masih berlaku ({{ $expiresAt->diffForHumans() }})
                </span>
            @endif
        </div>
    </div>
</div>
@endif

<div class="row g-4">
<div class="col-lg-7">
    <div class="card mb-4">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Kode Booking</div>
                    <div class="fw-700" style="font-size:1.1rem;color:var(--sw-dark);">{{ $booking->booking_code }}</div>
                </div>
                @php $b = $booking->status_badge; @endphp
                <span class="badge-status {{ $b['class'] }}" style="font-size:0.825rem;padding:0.5em 1em;">{{ $b['label'] }}</span>
            </div>
            <div class="row g-3">
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Paket</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->service->name }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Harga</div>
                    <div class="fw-700" style="color:var(--sw-primary-dark);">{{ $booking->formatted_price }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Tanggal</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->schedule->date->locale('id')->isoFormat('D MMMM Y') }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">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.775rem;color:var(--sw-gray);">Nomor Antrian</div>
                    <div class="fw-700" style="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.775rem;color:var(--sw-gray);">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.775rem;color:var(--sw-gray);">Plat Nomor</div>
                    <div class="fw-700" style="font-size:0.875rem;letter-spacing:1px;">{{ $booking->vehicle_plate }}</div>
                </div>
                @if ($booking->vehicle_color)
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Warna</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->vehicle_color }}</div>
                </div>
                @endif
                @if ($booking->detailer)
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Petugas Cuci</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->detailer->name }}</div>
                </div>
                @endif
                @if ($booking->notes)
                <div class="col-12">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Catatan</div>
                    <div style="font-size:0.875rem;">{{ $booking->notes }}</div>
                </div>
                @endif
                @if ($booking->checked_in_at)
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Check-In</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->checked_in_at->format('d M Y, H:i') }} WIB</div>
                </div>
                @endif
                @if ($booking->completed_at)
                <div class="col-6">
                    <div style="font-size:0.775rem;color:var(--sw-gray);">Selesai Pada</div>
                    <div class="fw-600" style="font-size:0.875rem;">{{ $booking->completed_at->format('d M Y, H:i') }} WIB</div>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 flex-wrap">
        {{-- Tombol Lihat Struk --}}
        @if (in_array($booking->status, ['completed', 'in_process', 'check_in', 'confirmed', 'late', 'void']))
            @if ($booking->payment && $booking->payment->status === 'paid')
            <a href="{{ route('customer.payment.receipt', $booking) }}" class="btn btn-outline-primary flex-grow-1">
                <i class="fas fa-receipt me-2"></i>Lihat Struk
            </a>
            @endif
        @endif

        {{-- Tombol Ajukan Refund untuk Void --}}
        @if ($booking->status === 'void' && $booking->payment && $booking->payment->status === 'paid')
            @if ($booking->refund)
                <a href="{{ route('customer.refund.status', $booking) }}" class="btn flex-grow-1"
                   style="background:#FFF3CD;color:#7D5A00;border:1px solid #FDE68A;">
                    <i class="fas fa-money-bill-transfer me-2"></i>Status Refund
                </a>
            @elseif(now()->lessThan($booking->updated_at->copy()->addHours(24)))
                <a href="{{ route('customer.refund.create', $booking) }}" class="btn btn-warning flex-grow-1">
                    <i class="fas fa-money-bill-wave me-2"></i>Ajukan Refund 70%
                </a>
            @endif
        @endif

        {{-- Booking Lagi --}}
        @if ($booking->status === 'completed')
        <a href="{{ route('customer.booking.create', ['service_id' => $booking->service_id]) }}"
           class="btn btn-primary flex-grow-1">
            <i class="fas fa-rotate-right me-2"></i>Booking Lagi
        </a>
        @endif

        {{-- Bayar Sekarang --}}
        @if ($booking->payment && $booking->payment->status === 'unpaid')
        <a href="{{ route('customer.payment.show', $booking) }}" class="btn btn-warning flex-grow-1">
            <i class="fas fa-money-bill me-2"></i>Bayar Sekarang
        </a>
        @endif

        <a href="{{ route('customer.history.index') }}" class="btn btn-outline-secondary flex-grow-1">
            <i class="fas fa-arrow-left me-2"></i>Kembali
        </a>
    </div>
</div>

<div class="col-lg-5">
    {{-- Info Pembayaran --}}
    @if ($booking->payment)
    <div class="card mb-3">
        <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>Pembayaran
            </h6>
            @php $pb = $booking->payment->status_badge; @endphp
            <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">Status</span>
                <span class="badge-status {{ $pb['class'] }}">{{ $pb['label'] }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">Total</span>
                <span class="fw-700" style="color:var(--sw-primary-dark);">{{ $booking->payment->formatted_amount }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">Metode</span>
                <span class="fw-600">{{ $booking->payment->method_label }}</span>
            </div>
            @if ($booking->payment->paid_at)
            <div class="d-flex justify-content-between" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">Waktu Bayar</span>
                <span>{{ $booking->payment->paid_at->format('d M Y, H:i') }}</span>
            </div>
            @endif
        </div>
    </div>
    @endif

    {{-- Info Refund --}}
    @if ($booking->refund)
    <div class="card" style="border-left:4px solid
        {{ $booking->refund->status === 'approved' ? '#22C55E' : ($booking->refund->status === 'rejected' ? '#EF4444' : '#F59E0B') }};">
        <div class="card-body p-4">
            <h6 class="fw-700 mb-3" style="color:var(--sw-dark);">
                <i class="fas fa-money-bill-wave me-2" style="color:#F59E0B;"></i>Pengajuan Refund
            </h6>
            @php $rb = $booking->refund->status_badge; @endphp
            <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">Status</span>
                <span class="badge-status {{ $rb['class'] }}">{{ $rb['label'] }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">Jumlah Refund</span>
                <span class="fw-700" style="color:#16A34A;">{{ $booking->refund->formatted_amount }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">Bank</span>
                <span class="fw-600">{{ $booking->refund->bank_name }}</span>
            </div>
            <div class="d-flex justify-content-between" style="font-size:0.875rem;">
                <span style="color:var(--sw-gray);">No. Rekening</span>
                <span class="fw-600 font-monospace">{{ $booking->refund->account_number }}</span>
            </div>
            @if ($booking->refund->admin_notes && $booking->refund->status !== 'pending')
            <div class="mt-3 p-2 rounded-sw" style="background:#F8FAFC;font-size:0.8rem;">
                <span style="color:var(--sw-gray);">Catatan Admin: </span>{{ $booking->refund->admin_notes }}
            </div>
            @endif
        </div>
    </div>
    @endif
</div>
</div>

</x-layouts.app>