{{-- Status Pengajuan Refund --}}
<x-layouts.app :title="'Status Refund'">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-money-bill-wave me-2" style="color:#F59E0B;"></i>Status Refund</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"><a href="{{ route('customer.history.show', $booking) }}" style="color:var(--sw-primary);text-decoration:none;">{{ $booking->booking_code }}</a></li>
            <li class="breadcrumb-item active">Status Refund</li>
        </ol></nav>
    </div>
</div>

@if (session('success'))
<div class="alert border-0 mb-4 d-flex align-items-center gap-3"
     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">

    {{-- Status Card --}}
    @php
        $refund = $booking->refund;
        $statusConfig = [
            'pending'  => ['bg'=>'#FFF3E0','border'=>'#F59E0B','icon'=>'fa-hourglass-half','color'=>'#92400E','title'=>'Menunggu Review Admin'],
            'approved' => ['bg'=>'#D1FAE5','border'=>'#22C55E','icon'=>'fa-circle-check',  'color'=>'#065F46','title'=>'Refund Disetujui!'],
            'rejected' => ['bg'=>'#FEE2E2','border'=>'#EF4444','icon'=>'fa-circle-xmark',  'color'=>'#991B1B','title'=>'Pengajuan Ditolak'],
        ];
        $sc = $statusConfig[$refund->status] ?? $statusConfig['pending'];
    @endphp

    <div class="card mb-4" style="border-top:4px solid {{ $sc['border'] }};">
        <div class="card-body p-5 text-center">
            <div class="mb-3">
                <div style="width:72px;height:72px;border-radius:50%;background:{{ $sc['bg'] }};display:inline-flex;align-items:center;justify-content:center;font-size:2rem;color:{{ $sc['border'] }};">
                    <i class="fas {{ $sc['icon'] }}"></i>
                </div>
            </div>
            <h5 class="fw-700 mb-1" style="color:{{ $sc['color'] }};">{{ $sc['title'] }}</h5>
            @php $rb = $refund->status_badge; @endphp
            <span class="badge-status {{ $rb['class'] }}" style="font-size:0.85rem;padding:.4em 1em;">{{ $rb['label'] }}</span>
            <div class="mt-3" style="font-size:2rem;font-weight:800;color:#16A34A;">
                {{ $refund->formatted_amount }}
            </div>
            <div style="font-size:0.85rem;color:var(--sw-gray);">Jumlah refund (70% dari {{ $booking->formatted_price }})</div>

            @if ($refund->processed_at)
            <div class="mt-2" style="font-size:0.8rem;color:var(--sw-gray);">
                Diproses: {{ $refund->processed_at->locale('id')->isoFormat('D MMM Y, HH:mm') }} WIB
            </div>
            @endif
        </div>
    </div>

    {{-- Detail Rekening --}}
    <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-university me-2" style="color:var(--sw-primary);"></i>Data Rekening Tujuan
            </h6>
            <div class="row g-2" style="font-size:0.875rem;">
                <div class="col-5" style="color:var(--sw-gray);">Bank</div>
                <div class="col-7 fw-600">{{ $refund->bank_name }}</div>
                <div class="col-5" style="color:var(--sw-gray);">No. Rekening</div>
                <div class="col-7 fw-600 font-monospace" style="letter-spacing:1px;">{{ $refund->account_number }}</div>
                <div class="col-5" style="color:var(--sw-gray);">Pemilik</div>
                <div class="col-7 fw-600">{{ $refund->account_name }}</div>
            </div>
        </div>
    </div>

    {{-- Catatan Admin jika ada --}}
    @if ($refund->admin_notes)
    <div class="card mb-4" style="border-left:4px solid {{ $sc['border'] }};">
        <div class="card-body p-4">
            <h6 class="fw-700 mb-2" style="color:var(--sw-dark);">Catatan Admin</h6>
            <p class="mb-0" style="font-size:0.875rem;color:var(--sw-gray);">{{ $refund->admin_notes }}</p>
        </div>
    </div>
    @endif

    <div class="d-flex gap-2">
        <a href="{{ route('customer.history.show', $booking) }}" class="btn btn-outline-primary flex-grow-1">
            <i class="fas fa-file-lines me-2"></i>Detail Booking
        </a>
        <a href="{{ route('customer.history.index') }}" class="btn btn-outline-secondary flex-grow-1">
            <i class="fas fa-arrow-left me-2"></i>Riwayat
        </a>
    </div>

</div>
</div>

</x-layouts.app>