@extends('layouts.montir')

@section('title', 'Detail Inspeksi')

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <!-- ================= HEADER ================= -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
        <div>
            <h1 class="text-3xl font-extrabold text-gray-800">
                Detail Inspeksi
            </h1>
            <p class="text-gray-500 mt-1">
                ID Inspeksi: <span class="font-semibold">#{{ $inspeksi->id }}</span>
            </p>
        </div>

        <a href="{{ route('montir.my-inspeksi.index') }}"
           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg
                  bg-gray-200 text-gray-700 font-semibold
                  hover:bg-gray-300 transition">
            <i class="fas fa-arrow-left"></i>
            Kembali
        </a>
    </div>

    <!-- ================= INFORMASI UMUM ================= -->
    <div class="bg-white rounded-2xl shadow-sm border mb-8">
        <div class="px-6 py-4 border-b">
            <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                <i class="fas fa-info-circle text-amber-600"></i>
                Informasi Umum
            </h2>
        </div>

        <div class="p-6">
            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8 text-sm">
                <div>
                    <dt class="text-gray-500">Customer</dt>
                    <dd class="font-semibold text-gray-800">
                        {{ $inspeksi->customer_name }}
                    </dd>
                </div>

                <div>
                    <dt class="text-gray-500">Cabang</dt>
                    <dd class="font-semibold text-gray-800">
                        {{ $inspeksi->branch }}
                    </dd>
                </div>

                <div>
                    <dt class="text-gray-500">Tanggal Inspeksi</dt>
                    <dd class="font-semibold text-gray-800">
                        {{ $inspeksi->inspection_date?->format('d/m/Y') ?? '-' }}
                    </dd>
                </div>

                <div>
                    <dt class="text-gray-500">Progress</dt>
                    <dd class="font-semibold text-gray-800">
                        {{ $inspeksi->current_step }}/20
                    </dd>
                </div>

                <div>
                    <dt class="text-gray-500">Status</dt>
                    <dd class="mt-1">
                        @if($inspeksi->status === 'draft')
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                         bg-gray-200 text-gray-700">
                                Draft
                            </span>
                        @elseif($inspeksi->status === 'pending')
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                         bg-amber-100 text-amber-700">
                                Pending
                            </span>
                        @elseif($inspeksi->status === 'selesai')
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                         bg-green-100 text-green-700">
                                Selesai
                            </span>
                        @else
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                         bg-red-100 text-red-700">
                                Dibatalkan
                            </span>
                        @endif
                    </dd>
                </div>
            </dl>

            @if($inspeksi->status === 'draft')
                <div class="mt-6">
                    <a href="{{ route('montir.inspection.continue', $inspeksi->id) }}"
                       class="inline-flex items-center gap-2 px-5 py-3 rounded-xl
                              bg-amber-600 text-white font-semibold
                              hover:bg-amber-700 transition">
                        <i class="fas fa-play"></i>
                        Lanjutkan Inspeksi
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- ================= DATA KENDARAAN ================= -->
    @if($inspeksi->plat_nomor)
    <div class="bg-white rounded-2xl shadow-sm border">
        <div class="px-6 py-4 border-b">
            <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                <i class="fas fa-car text-green-600"></i>
                Data Kendaraan
            </h2>
        </div>

        <div class="p-6">
            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8 text-sm">
                <div>
                    <dt class="text-gray-500">Merek</dt>
                    <dd class="font-semibold text-gray-800">
                        {{ $inspeksi->merek ?? '-' }}
                    </dd>
                </div>

                <div>
                    <dt class="text-gray-500">Tipe</dt>
                    <dd class="font-semibold text-gray-800">
                        {{ $inspeksi->tipe ?? '-' }}
                    </dd>
                </div>

                <div>
                    <dt class="text-gray-500">Plat Nomor</dt>
                    <dd class="font-extrabold text-gray-900">
                        {{ $inspeksi->plat_nomor }}
                    </dd>
                </div>

                <div>
                    <dt class="text-gray-500">Tahun</dt>
                    <dd class="font-semibold text-gray-800">
                        {{ $inspeksi->tahun ?? '-' }}
                    </dd>
                </div>
            </dl>
        </div>
    </div>
    @endif

</div>
@endsection