@extends('layouts.app')

@section('title', 'Detail Kendaraan — ' . $vehicle->veh_plat)

@push('styles')
    <style>
        .detail-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 10px;
            margin-top: 12px;
        }

        .gallery-img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: transform .2s, border-color .2s;
        }

        .gallery-img:hover {
            transform: scale(1.02);
            border-color: var(--accent);
        }

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

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

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

        .info-value {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .color-dot {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid var(--border);
            vertical-align: middle;
            margin-right: 6px;
        }

        .no-photo {
            grid-column: 1 / -1;
            padding: 32px;
            text-align: center;
            color: var(--text-muted);
            border: 1px dashed var(--border);
            border-radius: 8px;
            font-size: 0.85rem;
        }

        /* Lightbox */
        #lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .85);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        #lightbox.open {
            display: flex;
        }

        #lightbox img {
            max-width: 90vw;
            max-height: 85vh;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
        }

        #lightbox-close {
            position: absolute;
            top: 20px;
            right: 24px;
            background: none;
            border: none;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            opacity: .7;
        }

        #lightbox-close:hover {
            opacity: 1;
        }

        .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;
        }

        .btn-danger-outline {
            background: transparent;
            border: 1px solid var(--danger);
            color: #ff7b72;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
            text-decoration: none;
        }

        .btn-danger-outline:hover {
            background: rgba(218, 54, 51, .15);
        }
    </style>
@endpush

@section('content')
    <div class="detail-header">
        <div>
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
                <a href="{{ route('vehicle.index') }}" style="color:var(--text-muted);text-decoration:none;font-size:1.2rem">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <h1 style="font-size:1.5rem;font-weight:700;letter-spacing:1px">{{ $vehicle->veh_plat }}</h1>
                <span class="badge badge-{{ str_replace(' ', '-', $vehicle->status) }}">
                    @if ($vehicle->status === 'registered')
                        <i class="bi bi-check-circle-fill"></i>
                    @elseif($vehicle->status === 'suspend')
                        <i class="bi bi-slash-circle-fill"></i>
                    @else
                        <i class="bi bi-hourglass-split"></i>
                    @endif
                    {{ ucwords($vehicle->status) }}
                </span>
            </div>
            <div style="color:var(--text-muted);font-size:0.85rem">
                Didaftarkan {{ $vehicle->created_at->diffForHumans() }}
            </div>
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap">
            <a href="{{ route('vehicle.edit', $vehicle->id) }}" class="btn btn-secondary">
                <i class="bi bi-pencil"></i> Edit
            </a>

            <form method="POST" action="{{ route('vehicle.destroy', $vehicle->id) }}"
                onsubmit="return confirm('Yakin hapus kendaraan {{ $vehicle->veh_plat }}?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn-danger-outline">
                    <i class="bi bi-trash3"></i> Hapus
                </button>
            </form>
        </div>
    </div>

    {{-- Galeri Foto --}}
    <div class="card" style="margin-bottom:20px">
        <div class="card-title">
            <i class="bi bi-images" style="color:var(--accent)"></i> Foto Kendaraan
            @if (!empty($vehicle->veh_img))
                <span style="font-size:0.75rem;color:var(--text-muted);font-weight:400">
                    {{ count($vehicle->veh_img) }} foto
                </span>
            @endif
        </div>
        <div class="gallery">
            @if (!empty($vehicle->veh_img) && count($vehicle->veh_img) > 0)
                @foreach ($vehicle->veh_img as $i => $imgUrl)
                    <img src="{{ $imgUrl }}" alt="Foto {{ $i + 1 }}" class="gallery-img"
                        onclick="openLightbox('{{ $imgUrl }}')" onerror="this.style.display='none'">
                @endforeach
            @else
                <div class="no-photo">
                    <i class="bi bi-camera" style="font-size:2rem;display:block;margin-bottom:8px;opacity:.3"></i>
                    Belum ada foto — <a href="{{ route('vehicle.edit', $vehicle->id) }}"
                        style="color:var(--accent)">tambahkan foto</a>
                </div>
            @endif
        </div>
    </div>

    {{-- Info Detail --}}
    <div class="card">
        <div class="card-title">
            <i class="bi bi-info-circle" style="color:var(--accent)"></i> Informasi Kendaraan
        </div>

        <div class="info-row">
            <div class="info-label">Plat Nomor</div>
            <div class="info-value" style="font-weight:700;letter-spacing:.5px">{{ $vehicle->veh_plat }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Tipe</div>
            <div class="info-value" style="text-transform:capitalize">{{ $vehicle->veh_type }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Warna</div>
            <div class="info-value">
                <span class="color-dot" style="background:{{ $vehicle->veh_color }}"></span>
                {{ $vehicle->veh_color }}
            </div>
        </div>
        <div class="info-row">
            <div class="info-label">Status</div>
            <div class="info-value">
                <span class="badge badge-{{ str_replace(' ', '-', $vehicle->status) }}">
                    {{ ucwords($vehicle->status) }}
                </span>
            </div>
        </div>
        <div class="info-row">
            <div class="info-label">Exp. Date</div>
            <div class="info-value">
                {{ $vehicle->expdate ? $vehicle->expdate->format('d M Y') : '—' }}
            </div>
        </div>
        <div class="info-row">
            <div class="info-label">Foto URL (JSON)</div>
            <div class="info-value" style="font-size:0.78rem">
                @if (!empty($vehicle->veh_img))
                    <details>
                        <summary style="cursor:pointer;color:var(--accent)">Lihat raw JSON ({{ count($vehicle->veh_img) }}
                            item)</summary>
                        <pre
                            style="background:var(--bg-primary);padding:10px;border-radius:6px;margin-top:8px;overflow-x:auto;font-size:0.75rem">{{ json_encode($vehicle->veh_img, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                    </details>
                @else
                    <span style="color:var(--text-muted)">—</span>
                @endif
            </div>
        </div>
        <div class="info-row">
            <div class="info-label">Dibuat</div>
            <div class="info-value">{{ $vehicle->created_at->format('d M Y, H:i') }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Diperbarui</div>
            <div class="info-value">{{ $vehicle->updated_at->format('d M Y, H:i') }}</div>
        </div>
    </div>

    {{-- Lightbox --}}
    <div id="lightbox">
        <button id="lightbox-close" onclick="closeLightbox()">
            <i class="bi bi-x-lg"></i>
        </button>
        <img id="lightbox-img" src="" alt="Foto kendaraan">
    </div>
@endsection

@push('scripts')
    <script>
        function openLightbox(src) {
            document.getElementById('lightbox-img').src = src;
            document.getElementById('lightbox').classList.add('open');
            document.body.style.overflow = 'hidden';
        }

        function closeLightbox() {
            document.getElementById('lightbox').classList.remove('open');
            document.getElementById('lightbox-img').src = '';
            document.body.style.overflow = '';
        }
        document.getElementById('lightbox').addEventListener('click', function(e) {
            if (e.target === this) closeLightbox();
        });
        document.addEventListener('keydown', e => {
            if (e.key === 'Escape') closeLightbox();
        });
    </script>
@endpush