@extends('layouts.app')

@section('title', 'Detail VRC — ' . $vrc->application_no)

@push('styles')
    <style>
        .status-banner {
            border-radius: var(--radius);
            padding: 18px 20px;
            display: flex;
            gap: 14px;
            align-items: flex-start;
            margin-bottom: 24px;
        }

        .status-banner.pending {
            background: rgba(210, 153, 34, .1);
            border: 1px solid rgba(210, 153, 34, .35);
        }

        .status-banner.approved {
            background: rgba(46, 160, 67, .1);
            border: 1px solid rgba(46, 160, 67, .35);
        }

        .status-banner.rejected {
            background: rgba(218, 54, 51, .1);
            border: 1px solid rgba(218, 54, 51, .35);
        }

        .status-icon {
            font-size: 1.6rem;
            line-height: 1;
            flex-shrink: 0;
        }

        .pending .status-icon {
            color: var(--warning);
        }

        .approved .status-icon {
            color: #56d364;
        }

        .rejected .status-icon {
            color: #ff7b72;
        }

        .status-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .pending .status-title {
            color: var(--warning);
        }

        .approved .status-title {
            color: #56d364;
        }

        .rejected .status-title {
            color: #ff7b72;
        }

        .info-row {
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid rgba(48, 54, 61, .5);
            gap: 16px;
            font-size: .875rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            font-size: .75rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: .4px;
            min-width: 140px;
        }

        .vehicle-mini {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 6px;
        }

        .vehicle-mini-thumb {
            width: 72px;
            height: 54px;
            border-radius: 6px;
            object-fit: cover;
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 1.5rem;
            flex-shrink: 0;
            overflow: hidden;
        }

        .vehicle-mini-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .app-no-code {
            font-family: monospace;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent);
            background: rgba(88, 101, 242, .12);
            padding: 5px 14px;
            border-radius: 6px;
            display: inline-block;
        }

        .badge-not-registered {
            background: rgba(210, 153, 34, .15);
            color: var(--warning);
        }

        .badge-registered {
            background: rgba(46, 160, 67, .15);
            color: #56d364;
        }

        .badge-suspend {
            background: rgba(218, 54, 51, .15);
            color: #ff7b72;
        }

        .timeline {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-top: 8px;
        }

        .timeline-item {
            display: flex;
            gap: 14px;
            padding: 12px 0;
        }

        .timeline-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--border);
            margin-top: 5px;
            flex-shrink: 0;
            position: relative;
        }

        .timeline-dot.active {
            background: var(--accent);
        }

        .timeline-dot.success {
            background: #56d364;
        }

        .timeline-dot.danger {
            background: #ff7b72;
        }
    </style>
@endpush

@section('content')
    <div style="max-width:720px">

        {{-- Header --}}
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap">
            <a href="{{ route('dashboard') }}" style="color:var(--text-muted);text-decoration:none;font-size:1.1rem">
                <i class="bi bi-arrow-left"></i>
            </a>
            <div>
                <h1 style="font-size:1.3rem;font-weight:700;margin-bottom:2px">
                    <i class="bi bi-card-checklist" style="color:var(--accent)"></i>
                    VRC Request
                </h1>
                <div class="app-no-code">{{ $vrc->application_no }}</div>
            </div>
        </div>

        {{-- Status Banner --}}
        <div class="status-banner {{ $vrc->status }}">
            <div class="status-icon">
                @if ($vrc->status === 'pending')
                    <i class="bi bi-hourglass-split"></i>
                @elseif($vrc->status === 'approved')
                    <i class="bi bi-check-circle-fill"></i>
                @else
                    <i class="bi bi-x-circle-fill"></i>
                @endif
            </div>
            <div>
                <div class="status-title">
                    @if ($vrc->status === 'pending')
                        Menunggu Review Petugas DOJ
                    @elseif($vrc->status === 'approved')
                        Pengajuan Disetujui
                    @else
                        Pengajuan Ditolak
                    @endif
                </div>
                <div style="font-size:.83rem;color:var(--text-muted)">
                    @if ($vrc->status === 'pending')
                        Pengajuan Anda sedang diproses. Kendaraan akan berstatus <strong>Registered</strong> dan mendapat
                        masa aktif <strong>30 hari</strong> setelah disetujui.
                    @elseif($vrc->status === 'approved')
                        Kendaraan telah diregistrasi. Masa aktif berakhir pada
                        <strong>{{ $vrc->vehicle->expdate ? $vrc->vehicle->expdate->format('d M Y') : '—' }}</strong>.
                    @else
                        Pengajuan VRC Anda ditolak oleh petugas DOJ. Silakan ajukan ulang atau hubungi petugas.
                    @endif
                </div>
            </div>
        </div>

        {{-- Kendaraan yang Diajukan --}}
        <div class="card" style="margin-bottom:18px">
            <div class="card-title">
                <i class="bi bi-car-front" style="color:var(--accent)"></i> Kendaraan
            </div>

            <div class="vehicle-mini">
                <div class="vehicle-mini-thumb">
                    @if (!empty($vrc->vehicle->veh_img) && count($vrc->vehicle->veh_img) > 0)
                        <img src="{{ $vrc->vehicle->veh_img[0] }}" alt="{{ $vrc->vehicle->veh_plat }}"
                            onerror="this.parentElement.innerHTML='<i class=\'bi bi-car-front\'></i>'">
                    @else
                        <i class="bi bi-car-front"></i>
                    @endif
                </div>
                <div>
                    <div style="font-size:1.1rem;font-weight:700;letter-spacing:.6px;margin-bottom:4px">
                        {{ $vrc->vehicle->veh_plat }}
                    </div>
                    <div style="font-size:.8rem;color:var(--text-muted);text-transform:capitalize">
                        {{ $vrc->vehicle->veh_type }} &bull; {{ $vrc->vehicle->veh_color }}
                    </div>
                    <div style="margin-top:6px">
                        <span class="badge badge-{{ str_replace(' ', '-', $vrc->vehicle->status) }}">
                            @if ($vrc->vehicle->status === 'registered')
                                <i class="bi bi-check-circle-fill"></i>
                            @elseif($vrc->vehicle->status === 'suspend')
                                <i class="bi bi-slash-circle-fill"></i>
                            @else<i class="bi bi-hourglass-split"></i>
                            @endif
                            {{ ucwords($vrc->vehicle->status) }}
                        </span>
                    </div>
                </div>
                <div style="margin-left:auto">
                    <a href="{{ route('vehicle.show', $vrc->vehicle->id) }}" class="btn btn-secondary"
                        style="padding:5px 12px;font-size:.78rem">
                        <i class="bi bi-eye"></i> Detail
                    </a>
                </div>
            </div>
        </div>

        {{-- Detail Request --}}
        <div class="card" style="margin-bottom:18px">
            <div class="card-title">
                <i class="bi bi-file-text" style="color:var(--accent)"></i> Detail Pengajuan
            </div>

            <div class="info-row">
                <div class="info-label">No. Aplikasi</div>
                <div class="app-no-code" style="font-size:.9rem;padding:3px 10px">{{ $vrc->application_no }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Tanggal Pengajuan</div>
                <div>{{ $vrc->date->format('d M Y') }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Status</div>
                <div>
                    <span
                        class="badge
                    {{ $vrc->status === 'approved' ? 'badge-approved' : ($vrc->status === 'rejected' ? 'badge-rejected' : 'badge-pending') }}">
                        @if ($vrc->status === 'pending')
                            <i class="bi bi-hourglass-split"></i>
                        @elseif($vrc->status === 'approved')
                            <i class="bi bi-check-circle-fill"></i>
                        @else<i class="bi bi-x-circle-fill"></i>
                        @endif
                        {{ ucfirst($vrc->status) }}
                    </span>
                </div>
            </div>
            @if ($vrc->status !== 'pending' && $vrc->accept)
                <div class="info-row">
                    <div class="info-label">Diproses Oleh</div>
                    <div style="color:var(--text-muted);font-size:.85rem">Petugas DOJ #{{ $vrc->accept }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Notes</div>
                    <div>{{ $vrc->rejection_notes }}</div>
                </div>
            @endif
            @if ($vrc->status === 'approved' && $vrc->vehicle->expdate)
                <div class="info-row">
                    <div class="info-label">Masa Aktif s.d.</div>
                    <div style="font-weight:600;color:#56d364">
                        {{ $vrc->vehicle->expdate->format('d M Y') }}
                        <span style="color:var(--text-muted);font-weight:400;font-size:.8rem">
                            ({{ $vrc->vehicle->expdate->diffForHumans() }})
                        </span>
                    </div>
                </div>
            @endif
            <div class="info-row">
                <div class="info-label">Dibuat</div>
                <div>{{ $vrc->created_at->format('d M Y, H:i') }}</div>
            </div>

        </div>
        @if ($vrc->status === 'approved' && $vrc->vehicle->expdate)
            <div class="form-group">
                <div class="form-label">Download Dokumen</div>
                <a href="{{ url('/api/generate/vrc/' . $vrc->id) }}" class="btn btn-primary">
                    <i class="bi bi-download"></i> Download Dokumen
                </a>
            </div>
        @endif
        {{-- Aksi --}}
        <div style="display:flex;gap:10px;margin-top:4px">
            <a href="{{ route('dashboard') }}" class="btn btn-secondary">
                <i class="bi bi-grid-1x2"></i> Kembali ke Dashboard
            </a>
            @if ($vrc->status === 'rejected')
                <a href="{{ route('vrc.create') }}" class="btn btn-primary">
                    <i class="bi bi-arrow-repeat"></i> Ajukan Ulang
                </a>
            @endif
        </div>
    </div>
@endsection