@extends('template.admin')

@section('content')
<div class="max-w-4xl mx-auto p-4 bg-white shadow rounded">
    <h1 class="text-lg font-semibold mb-4 text-gray-700">
        {{ isset($mobil) ? 'Edit' : 'Tambah' }} Mobil
    </h1>
    {{-- Pesan sukses --}}
    @if(session('success'))
        <div class="mb-4 p-4 rounded bg-green-100 border border-green-300 text-green-800 text-sm">
            {{ session('success') }}
        </div>
    @endif

    <form action="{{ isset($mobil) ? route('mobil.update', $mobil->id) : route('mobil.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
        @csrf
        @if(isset($mobil))
        @method('PUT')
        @endif

        <!-- Nama Mobil -->
        <div>
            <label for="nama_mobil" class="block mb-1 text-gray-600 text-sm">Nama Mobil</label>
            <input type="text" id="nama_mobil" name="nama_mobil" required
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                value="{{ old('nama_mobil', $mobil->nama_mobil ?? '') }}">
            @error('nama_mobil')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Sub Kriteria -->
        <div>
            <label for="sub_kriteria_id" class="block mb-1 text-gray-600 text-sm">Sub Kriteria</label>
            <select id="sub_kriteria_id" name="sub_kriteria_id" required
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                <option value="" disabled {{ !isset($mobil) ? 'selected' : '' }}>-- Pilih Sub Kriteria --</option>
                @foreach($subkriteria as $item)
                <option value="{{ $item->id }}" {{ (old('sub_kriteria_id', $mobil->sub_kriteria_id ?? '') == $item->id) ? 'selected' : '' }}>
                    {{ $item->nama_subkriteria }}
                </option>
                @endforeach
            </select>
            @error('sub_kriteria_id')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Gambar Mobil -->
        <div>
            <label for="gambar" class="block mb-1 text-gray-600 text-sm">Gambar Mobil</label>
            <input type="file" id="gambar" name="gambar" accept="image/*"
                class="w-full text-sm text-gray-600">
            @error('gambar')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror

            @if(isset($mobil) && $mobil->gambar)
            <img src="{{ asset($mobil->gambar) }}" alt="Gambar Mobil" class="h-20 mt-2 rounded border border-gray-300">
            @endif
        </div>

        <!-- Kelengkapan Mobil -->
        <div>
            <label for="kelengkapan_mobil" class="block mb-1 text-gray-600 text-sm">Kelengkapan Mobil</label>
            <textarea id="kelengkapan_mobil" name="kelengkapan_mobil" rows="3"
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">{{ old('kelengkapan_mobil', $mobil->kelengkapan_mobil ?? '') }}</textarea>
            @error('kelengkapan_mobil')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Harga Sewa Per Hari -->
        <div>
            <label for="harga_sewa_per_hari" class="block mb-1 text-gray-600 text-sm">Harga Sewa Per Hari</label>
            <input type="text" id="harga_sewa_per_hari" name="harga_sewa_per_hari"
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                value="{{ old('harga_sewa_per_hari', $mobil->harga_sewa_per_hari ?? '') }}">
            @error('harga_sewa_per_hari')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Konsumsi BBM -->
        <div>
            <label for="konsumsi_bbm" class="block mb-1 text-gray-600 text-sm">Konsumsi BBM (km/liter)</label>
            <input type="number" step="0.01" min="0" id="konsumsi_bbm" name="konsumsi_bbm"
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                value="{{ old('konsumsi_bbm', $mobil->konsumsi_bbm ?? '') }}">
            @error('konsumsi_bbm')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Tahun -->
        <div>
            <label for="tahun" class="block mb-1 text-gray-600 text-sm">Tahun</label>
            <input type="number" min="1900" max="{{ date('Y') }}" id="tahun" name="tahun"
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                value="{{ old('tahun', $mobil->tahun ?? '') }}">
            @error('tahun')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Buttons -->
        <div class="flex justify-end gap-4 mt-4">
            <a href="{{ route('mobil.index') }}" class="text-gray-500 hover:text-blue-500 transition flex items-center gap-1" title="Batal" aria-label="Batal">
                <!-- Icon batal -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span class="text-sm">Batal</span>
            </a>

            <button type="submit" class="flex items-center gap-2 text-blue-500 hover:text-blue-700 transition font-medium" title="{{ isset($mobil) ? 'Update' : 'Simpan' }}" aria-label="{{ isset($mobil) ? 'Update' : 'Simpan' }}">
                <!-- Icon save/update -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="{{ isset($mobil) ? 'M11 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-5m-10-7l8 8m-3 0h3v3' : 'M12 4v16m8-8H4' }}" />
                </svg>
                <span class="text-sm">{{ isset($mobil) ? 'Update' : 'Simpan' }}</span>
            </button>
        </div>
    </form>
</div>
@endsection
@section('scripts')