@extends('layouts.admin')

@section('content')

<h2 style="margin-bottom:22px;">Edit Data</h2>

<div class="card" style="
max-width:900px;
padding:28px;
margin:auto;
">

<form method="POST"
action="/admin/vehicles/{{ $vehicle->id }}"
enctype="multipart/form-data">

@csrf
@method('PUT')

<!-- IMAGE PREVIEW -->
<div style="margin-bottom:28px;">

<label style="
display:block;
font-weight:700;
margin-bottom:10px;
color:#334155;
">
Foto saat ini
</label>

@if($vehicle->image)

<img src="{{ asset('storage/' . $vehicle->image) }}"
style="
width:180px;
height:110px;
object-fit:cover;
border-radius:14px;
border:1px solid #e5e7eb;
box-shadow:0 8px 18px rgba(0,0,0,0.08);
">

@else

<div style="
width:180px;
height:110px;
background:#f1f5f9;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
color:#64748b;
">
Tidak ada foto
</div>

@endif

</div>

<!-- REPLACE IMAGE -->
<div style="margin-bottom:22px;">

<label style="
display:block;
font-weight:700;
margin-bottom:10px;
color:#334155;
">
Ganti foto
</label>

<input type="file" name="image"
style="
padding:10px;
border:1px solid #d1d5db;
border-radius:10px;
width:100%;
">

</div>

<!-- NAME -->
<div style="margin-bottom:18px;">

<label style="font-weight:700; color:#334155;">Nama Kendaraan</label>

<input type="text"
name="vehicle_name"
value="{{ $vehicle->vehicle_name }}"
required
style="
width:100%;
padding:12px 14px;
margin-top:8px;
border:1px solid #d1d5db;
border-radius:10px;
">

</div>

<!-- GRID -->
<div style="
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:18px;
">

<div>
<label style="font-weight:700; color:#334155;">Tipe</label>

<input type="text"
name="type"
value="{{ $vehicle->type }}"
required
style="
width:100%;
padding:12px 14px;
margin-top:8px;
border:1px solid #d1d5db;
border-radius:10px;
">
</div>

<div>
<label style="font-weight:700; color:#334155;">Tahun / Model</label>

<input type="text"
name="year_model"
value="{{ $vehicle->year_model }}"
required
style="
width:100%;
padding:12px 14px;
margin-top:8px;
border:1px solid #d1d5db;
border-radius:10px;
">
</div>

</div>


<div style="
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:18px;
">

<div>
<label style="font-weight:700; color:#334155;">Kapasitas</label>

<input type="text"
name="capacity"
value="{{ $vehicle->capacity }}"
required
style="
width:100%;
padding:12px 14px;
margin-top:8px;
border:1px solid #d1d5db;
border-radius:10px;
">
</div>

<div>
<label style="font-weight:700; color:#334155;">Tipe Bahan Bakar</label>

<input type="text"
name="fuel_type"
value="{{ $vehicle->fuel_type }}"
required
style="
width:100%;
padding:12px 14px;
margin-top:8px;
border:1px solid #d1d5db;
border-radius:10px;
">
</div>

</div>


<!-- STATUS -->
<div style="margin-bottom:25px;">

<label style="font-weight:700; color:#334155;">Status</label>

<select name="status"
style="
width:100%;
padding:12px 14px;
margin-top:8px;
border:1px solid #d1d5db;
border-radius:10px;
">

<option value="available"
{{ $vehicle->status == 'available' ? 'selected' : '' }}>
Tersedia
</option>

<option value="in_use"
{{ $vehicle->status == 'in_use' ? 'selected' : '' }}>
Sedang Digunakan
</option>

<option value="maintenance"
{{ $vehicle->status == 'maintenance' ? 'selected' : '' }}>
Maintenance
</option>

</select>

</div>


<!-- BUTTON -->
<button type="submit"
style="
background:linear-gradient(135deg,#16a34a,#15803d);
color:white;
border:none;
padding:13px 22px;
border-radius:12px;
font-weight:700;
font-size:15px;
cursor:pointer;
box-shadow:0 8px 18px rgba(22,163,74,0.20);
">
Update Data
</button>

</form>

</div>

@endsection