<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Kendaraan - {{ config('app.name') }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; background: #f8fafc; }
        .app { display: flex; min-height: 100vh; }
        .content { flex: 1; padding: 32px; }
        @media (max-width: 1024px) { .content { padding: 20px; padding-top: 80px; } }
    </style>
</head>
<body>
    <div class="app">
        @include('partials.sidebar')

        <main class="content">
            <div class="max-w-4xl mx-auto">
                {{-- Breadcrumb --}}
                <nav class="flex mb-5 text-sm" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li><a href="{{ route('vehicles.index') }}" class="text-gray-500 hover:text-blue-600">Kendaraan</a></li>
                        <li class="flex items-center text-gray-400">
                            <svg class="w-3 h-3 mx-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke-width="2"/></svg>
                            Tambah Baru
                        </li>
                    </ol>
                </nav>

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
                        <div>
                            <h1 class="text-xl font-bold text-gray-900">Tambah Kendaraan Baru</h1>
                            <p class="text-sm text-gray-500">Lengkapi formulir di bawah untuk mendaftarkan armada baru.</p>
                        </div>
                    </div>

                    <form action="{{ route('vehicles.store') }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-6">
                        @csrf
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {{-- Informasi Dasar --}}
                            <div class="space-y-4">
                                <h2 class="text-sm font-bold text-blue-600 uppercase tracking-wider">Informasi Dasar</h2>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Kendaraan <span class="text-red-500">*</span></label>
                                    <input type="text" name="name" value="{{ old('name') }}" required class="w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-blue-500 outline-none transition-all" placeholder="Contoh: Toyota Avanza">
                                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                </div>

                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">No. Polisi <span class="text-red-500">*</span></label>
                                        <input type="text" name="plate_number" value="{{ old('plate_number') }}" required class="w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-blue-500 outline-none" placeholder="B 1234 ABC">
                                        @error('plate_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Jenis <span class="text-red-500">*</span></label>
                                        <select name="type" required class="w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-blue-500 outline-none">
                                            <option value="mobil" {{ old('type') == 'mobil' ? 'selected' : '' }}>Mobil</option>
                                            <option value="motor" {{ old('type') == 'motor' ? 'selected' : '' }}>Motor</option>
                                        </select>
                                        @error('type') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Divisi Penanggung Jawab <span class="text-red-500">*</span></label>
                                    <select name="divisi_id" required class="w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-blue-500 outline-none">
                                        <option value="">Pilih Divisi</option>
                                        @foreach($divisis as $divisi)
                                            <option value="{{ $divisi->id }}" {{ old('divisi_id') == $divisi->id ? 'selected' : '' }}>
                                                {{ $divisi->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('divisi_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                </div>

                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Merek</label>
                                        <input type="text" name="brand" value="{{ old('brand') }}" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none" placeholder="Toyota">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Model / Tipe</label>
                                        <input type="text" name="model" value="{{ old('model') }}" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none" placeholder="Veloz 1.5 AT">
                                    </div>
                                </div>
                            </div>

                            {{-- Spesifikasi --}}
                            <div class="space-y-4">
                                <h2 class="text-sm font-bold text-blue-600 uppercase tracking-wider">Spesifikasi & Teknis</h2>
                                
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Kapasitas (Orang)</label>
                                        <input type="number" name="capacity" value="{{ old('capacity', 4) }}" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Bahan Bakar</label>
                                        <select name="fuel_type" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none">
                                            <option value="bensin">Bensin</option>
                                            <option value="diesel">Diesel</option>
                                            <option value="listrik">Listrik</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Tahun</label>
                                        <input type="number" name="year" value="{{ old('year', date('Y')) }}" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Warna</label>
                                        <input type="text" name="color" value="{{ old('color') }}" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none" placeholder="Hitam Metalik">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Status Awal</label>
                                    <select name="status" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none">
                                        <option value="available">Tersedia</option>
                                        <option value="maintenance">Dalam Perbaikan</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <hr class="border-gray-100">

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Foto Kendaraan</label>
                            <div class="flex items-center justify-center w-full">
                                <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-all">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <svg class="w-8 h-8 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Klik untuk upload</span> atau drag and drop</p>
                                        <p class="text-xs text-gray-400">PNG, JPG atau JPEG (Max. 2MB)</p>
                                    </div>
                                    <input type="file" name="image" class="hidden" accept="image/*" />
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Catatan / Deskripsi</label>
                            <textarea name="description" rows="3" class="w-full rounded-lg border-gray-300 border p-2.5 outline-none" placeholder="Informasi tambahan mengenai kondisi kendaraan...">{{ old('description') }}</textarea>
                        </div>

                        <div class="flex justify-end gap-3 pt-4 border-t border-gray-100">
                            <a href="{{ route('vehicles.index') }}" class="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-all">Batal</a>
                            <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-semibold hover:bg-blue-700 shadow-md transition-all active:scale-95">Simpan Kendaraan</button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
