@extends('layouts.admin')

@section('content')

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

    <p style="
    color:#64748b;
    font-size:14px;
    margin-bottom:8px;
    ">
        Home / Kendaraan
    </p>

    <h2 style="
    font-size:34px;
    font-weight:700;
    margin:0;
    ">
        Kelola Kendaraan
    </h2>

    <hr style="
    margin-top:20px;
    border:none;
    border-top:4px solid #e5e7eb;
    ">

</div>


<!-- TOP BAR -->
<div class="card" style="
padding:18px;
margin-bottom:22px;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
flex-wrap:wrap;
">

<form method="GET" action="/admin/vehicles" style="
display:flex;
gap:10px;
flex:1;
min-width:280px;
">

<input type="text"
name="search"
placeholder="Telusuri Kendaraan..."
value="{{ $search ?? '' }}"
style="
flex:1;
padding:11px 14px;
border:1px solid #d1d5db;
border-radius:10px;
outline:none;
">

<button type="submit"
style="
background:#2563eb;
color:white;
border:none;
padding:11px 18px;
border-radius:10px;
font-weight:600;
cursor:pointer;
">
Cari
</button>

</form>

<a href="/admin/vehicles/create"
style="
background:#16a34a;
color:white;
padding:11px 18px;
border-radius:10px;
text-decoration:none;
font-weight:600;
white-space:nowrap;
">
＋ Tambahkan Kendaraan
</a>

<a href="/admin/maintenance"
style="
background:#f59e0b;
color:white;
padding:11px 18px;
border-radius:10px;
text-decoration:none;
font-weight:600;
white-space:nowrap;
display:inline-block;
margin-left:8px;
box-shadow:0 4px 10px rgba(245,158,11,0.20);
">
🛠 Maintenance
</a>
</div>


<!-- TABLE -->
<div class="card" style="
padding:20px;
border-radius:18px;
background:white;
box-shadow:0 4px 16px rgba(0,0,0,0.05);
">

<table width="100%" cellpadding="12" cellspacing="0" style="
border-collapse:collapse;
width:100%;
">

<thead style="
background:#f8fafc;
color:#64748b;
">

<tr>

<th align="left" style="padding:16px;">Gambar</th>
<th align="left" style="padding:16px;">Nama</th>
<th align="left" style="padding:16px;">Tipe</th>
<th align="left" style="padding:16px;">Tahun / Model</th>
<th align="left" style="padding:16px;">Kapasitas</th>
<th align="left" style="padding:16px;">Bahan Bakar</th>
<th align="left" style="padding:16px;">Status</th>
<th align="left" style="padding:16px;">Tindakan</th>

</tr>

</thead>

<tbody>

@foreach($vehicles as $vehicle)

<tr style="
border-top:1px solid #e5e7eb;
">

<td style="padding:16px;">

@if($vehicle->image)

<img src="{{ asset('storage/' . $vehicle->image) }}"
style="
width:72px;
height:48px;
object-fit:cover;
border-radius:10px;
border:1px solid #e5e7eb;
">

@else

<div style="
width:72px;
height:48px;
background:#f1f5f9;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
color:#64748b;
">
Tidak ada Foto
</div>

@endif

</td>

<td style="
font-weight:700;
padding:16px;
">
{{ $vehicle->vehicle_name }}
</td>

<td style="padding:16px;">
{{ $vehicle->type }}
</td>

<td style="padding:16px;">
{{ $vehicle->year_model }}
</td>

<td style="padding:16px;">
{{ $vehicle->capacity }}
</td>

<td style="padding:16px;">
{{ $vehicle->fuel_type }}
</td>

<td style="padding:16px;">

@if($vehicle->status == 'available')

<span style="
background:#dcfce7;
color:#166534;
padding:7px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
">
Tersedia
</span>

@elseif($vehicle->status == 'in_use')

<span style="
background:#fee2e2;
color:#991b1b;
padding:7px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
">
Digunakan
</span>

@else

<span style="
display:inline-flex;
align-items:center;
gap:6px;
background:#fef3c7;
color:#92400e;
padding:8px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
box-shadow:0 2px 6px rgba(245,158,11,0.12);
">
Maintenance
</span>

@endif

</td>

<td style="
white-space:nowrap;
padding:16px;
">

<a href="/admin/vehicles/{{ $vehicle->id }}/edit"
style="
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
padding:9px 15px;
border-radius:10px;
text-decoration:none;
font-size:13px;
font-weight:700;
display:inline-block;
box-shadow:0 4px 10px rgba(37,99,235,0.25);
">
Edit
</a>

<form action="/admin/vehicles/{{ $vehicle->id }}/delete"
method="POST"
style="display:inline;"
onsubmit="return confirm('Delete this vehicle?')">

@csrf

<button type="submit"
style="
background:#dc2626;
color:white;
border:none;
padding:9px 14px;
border-radius:10px;
font-size:13px;
font-weight:700;
cursor:pointer;
margin-left:6px;
">
Hapus
</button>

</form>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@endsection