@extends('layouts.app')

@section('title', 'Pengajuan VRC — Vehicle Registration Certificate')

@push('styles')
    <style>
        .vrc-header-info {
            background: rgba(88, 101, 242, .08);
            border: 1px solid rgba(88, 101, 242, .25);
            border-radius: var(--radius);
            padding: 14px 18px;
            margin-bottom: 24px;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        /* ---- Vehicle Selector Cards ---- */
        .vehicle-selector {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 14px;
            margin-top: 10px;
        }

        .vehicle-option {
            position: relative;
        }

        /* Hidden real radio */
        .vehicle-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .vehicle-card-label {
            display: block;
            border: 2px solid var(--border);
            border-radius: var(--radius);
            padding: 14px;
            cursor: pointer;
            transition: border-color .2s, background .2s, transform .15s;
            position: relative;
        }

        .vehicle-card-label:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .vehicle-option input[type="radio"]:checked+.vehicle-card-label {
            border-color: var(--accent);
            background: rgba(88, 101, 242, .08);
            box-shadow: 0 0 0 3px rgba(88, 101, 242, .2);
        }

        .vehicle-option.disabled .vehicle-card-label {
            opacity: .45;
            cursor: not-allowed;
            pointer-events: none;
        }

        .vehicle-card-check {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            color: transparent;
            background: var(--bg-primary);
            transition: all .2s;
        }

        .vehicle-option input[type="radio"]:checked+.vehicle-card-label .vehicle-card-check {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .vehicle-plat-big {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: .8px;
            margin-bottom: 6px;
        }

        .vehicle-thumb-sm {
            width: 100%;
            height: 110px;
            object-fit: cover;
            border-radius: 6px;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 2rem;
            margin-bottom: 10px;
            overflow: hidden;
        }

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

        .tag-sm {
            font-size: .7rem;
            font-weight: 600;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 2px 7px;
            border-radius: 4px;
            text-transform: capitalize;
            display: inline-block;
            margin-right: 4px;
            margin-bottom: 4px;
        }

        .pending-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: .7rem;
            font-weight: 600;
            background: rgba(210, 153, 34, .15);
            color: var(--warning);
            padding: 3px 8px;
            border-radius: 4px;
            margin-top: 6px;
        }

        /* ---- Preview box ---- */
        .preview-box {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            margin-top: 20px;
            display: none;
        }

        .preview-box.visible {
            display: block;
        }

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

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

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

        .empty-notice {
            text-align: center;
            padding: 48px 20px;
            color: var(--text-muted);
        }

        .empty-notice i {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 12px;
            opacity: .3;
        }

        .app-no-display {
            font-family: monospace;
            font-size: 1rem;
            font-weight: 700;
            color: var(--accent);
            background: rgba(88, 101, 242, .1);
            padding: 6px 14px;
            border-radius: 6px;
            display: inline-block;
        }
    </style>
@endpush

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

        {{-- Page title --}}
        <div class="page-title">
            <a href="{{ route('dashboard') }}" style="color:var(--text-muted);text-decoration:none">
                <i class="bi bi-arrow-left"></i>
            </a>
            <i class="bi bi-card-checklist" style="color:var(--accent)"></i>
            Pengajuan VRC
            <span style="font-size:.75rem;font-weight:400;color:var(--text-muted)">Vehicle Registration Certificate</span>
        </div>

        {{-- Info banner --}}
        <div class="vrc-header-info">
            <i class="bi bi-info-circle-fill" style="color:var(--accent);font-size:1.1rem;margin-top:1px;flex-shrink:0"></i>
            <div style="font-size:.875rem">
                <div style="font-weight:600;margin-bottom:4px">Cara Pengajuan VRC</div>
                <div style="color:var(--text-muted)">
                    1. Pilih kendaraan berstatus <strong>Not Registered</strong> yang ingin didaftarkan.<br>
                    2. Klik <strong>Kirim Pengajuan</strong> — nomor aplikasi akan di-generate otomatis.<br>
                    3. Petugas DOJ akan memproses pengajuan. Status kendaraan akan berubah ke <em>Registered</em> jika
                    disetujui dan masa aktif akan ditambahkan <strong>30 hari</strong>.<br>
                    4. Wajib Memiliki <strong>SIM/DRIVER LICENSE</strong> Yang masih Aktif Dan berlaku.<br>
                </div>
            </div>
        </div>

        @if ($errors->has('vehicle_id'))
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-triangle-fill"></i>
                {{ $errors->first('vehicle_id') }}
            </div>
        @endif

        @if ($vehicles->isEmpty())
            {{-- Tidak ada kendaraan not registered --}}
            <div class="card">
                <div class="empty-notice">
                    <i class="bi bi-car-front"></i>
                    <p style="font-size:1rem;font-weight:600;margin-bottom:6px">Tidak ada kendaraan yang bisa diajukan</p>
                    <p style="font-size:.85rem;margin-bottom:16px">
                        Semua kendaraan Anda sudah terdaftar, sedang pending, atau Anda belum punya kendaraan.
                    </p>
                    <a href="{{ route('vehicle.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-lg"></i> Daftarkan Kendaraan Baru
                    </a>
                </div>
            </div>
        @else
            <form method="POST" action="{{ route('vrc.store') }}" id="vrcForm">
                @csrf

                <div class="card">
                    <div class="card-title">
                        <i class="bi bi-car-front" style="color:var(--accent)"></i>
                        Pilih Kendaraan
                        <span style="font-size:.78rem;font-weight:400;color:var(--text-muted)">
                            ({{ $vehicles->count() }} kendaraan tersedia)
                        </span>
                    </div>

                    <div class="vehicle-selector" id="vehicleSelector">
                        @foreach ($vehicles as $v)
                            @php $isPending = in_array($v->id, $pendingVehicleIds); @endphp
                            <div class="vehicle-option {{ $isPending ? 'disabled' : '' }}">
                                <input type="radio" name="vehicle_id" id="veh_{{ $v->id }}"
                                    value="{{ $v->id }}" data-plat="{{ $v->veh_plat }}"
                                    data-type="{{ $v->veh_type }}" data-color="{{ $v->veh_color }}"
                                    data-img="{{ !empty($v->veh_img) ? $v->veh_img[0] : '' }}"
                                    {{ $isPending ? 'disabled' : '' }} {{ old('vehicle_id') == $v->id ? 'checked' : '' }}>

                                <label class="vehicle-card-label" for="veh_{{ $v->id }}">
                                    {{-- Thumbnail --}}
                                    <div class="vehicle-thumb-sm">
                                        @if (!empty($v->veh_img) && count($v->veh_img) > 0)
                                            <img src="{{ $v->veh_img[0] }}" alt="{{ $v->veh_plat }}"
                                                onerror="this.parentElement.innerHTML='<i class=\'bi bi-car-front\'></i>'">
                                        @else
                                            <i class="bi bi-car-front"></i>
                                        @endif
                                    </div>

                                    {{-- Check circle --}}
                                    <div class="vehicle-card-check">
                                        <i class="bi bi-check-lg"></i>
                                    </div>

                                    {{-- Info --}}
                                    <div class="vehicle-plat-big">{{ $v->veh_plat }}</div>
                                    <div>
                                        <span class="tag-sm">{{ ucfirst($v->veh_type) }}</span>
                                        <span class="tag-sm">{{ $v->veh_color }}</span>
                                    </div>

                                    @if ($isPending)
                                        <div class="pending-badge">
                                            <i class="bi bi-hourglass-split"></i> VRC Pending
                                        </div>
                                    @endif
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Preview & Application No --}}
                <div class="preview-box" id="previewBox">
                    <div
                        style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px">
                        <div style="font-size:.85rem;font-weight:600;color:var(--text-muted)">
                            NOMOR APLIKASI (OTOMATIS)
                        </div>
                        <div class="app-no-display">{{ $applicationNo }}</div>
                    </div>

                    <div class="preview-row">
                        <div class="preview-label">Plat Nomor</div>
                        <div id="prev-plat" style="font-weight:700;letter-spacing:.5px">—</div>
                    </div>
                    <div class="preview-row">
                        <div class="preview-label">Tipe</div>
                        <div id="prev-type" style="text-transform:capitalize">—</div>
                    </div>
                    <div class="preview-row">
                        <div class="preview-label">Warna</div>
                        <div id="prev-color">—</div>
                    </div>
                    <div class="preview-row">
                        <div class="preview-label">Tanggal Pengajuan</div>
                        <div>{{ now()->format('d M Y') }}</div>
                    </div>
                </div>

                <div style="display:flex;gap:10px;margin-top:20px" id="submitArea" style="display:none">
                    <button type="submit" class="btn btn-primary" id="btnSubmit" disabled>
                        <i class="bi bi-send-fill"></i> Kirim Pengajuan
                    </button>
                    <a href="{{ route('dashboard') }}" class="btn btn-secondary">Batal</a>
                </div>
            </form>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('input[name="vehicle_id"]').forEach(radio => {
            radio.addEventListener('change', () => {
                const plat = radio.dataset.plat;
                const type = radio.dataset.type;
                const color = radio.dataset.color;

                document.getElementById('prev-plat').textContent = plat;
                document.getElementById('prev-type').textContent = type;
                document.getElementById('prev-color').textContent = color;

                document.getElementById('previewBox').classList.add('visible');
                document.getElementById('submitArea').style.display = 'flex';
                document.getElementById('btnSubmit').disabled = false;
            });
        });

        // Jika old value ada (validasi gagal), trigger preview
        const checked = document.querySelector('input[name="vehicle_id"]:checked');
        if (checked) {
            checked.dispatchEvent(new Event('change'));
        }
    </script>
@endpush