@extends('layouts.admin')

@section('content')

<style>

.form-card{
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(8px);
    padding:30px;
    border-radius:20px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    max-width:900px;
}

.form-card h2{
    margin-bottom:25px;
    color:#14532d;
    font-size:32px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#334155;
}

.form-control{
    width:100%;
    padding:14px;
    border:1px solid #dbe2ea;
    border-radius:12px;
    background:white;
    font-size:15px;
}

.form-control:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.15);
}

.btn-save{
    background:#16a34a;
    color:white;
    border:none;
    padding:14px 28px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
}

.btn-save:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(22,163,74,.25);
}

</style>

<div class="form-card">

<h2>🛠 Tambahkan Rekap Maintenance</h2>

<form method="POST" action="/admin/maintenance/store">

@csrf

<div class="form-group">
<label>Kendaraan</label>

<select name="vehicle_id" class="form-control" required>
@foreach($vehicles as $vehicle)
<option value="{{ $vehicle->id }}">
{{ $vehicle->vehicle_name }}
</option>
@endforeach
</select>
</div>

<div class="form-group">
<label>Jenis Service</label>
<input type="text" name="service_type" class="form-control" required>
</div>

<div class="form-group">
<label>Tanggal Service</label>
<input type="date" name="service_date" class="form-control" required>
</div>

<div class="form-group">
<label>Biaya</label>
<input type="number" name="cost" class="form-control">
</div>

<div class="form-group">
<label>Vendor</label>
<input type="text" name="vendor" class="form-control">
</div>

<div class="form-group">
<label>Catatan</label>
<textarea name="notes" rows="5" class="form-control"></textarea>
</div>

<button type="submit" class="btn-save">
Simpan Rekap Maintenance
</button>

</form>

</div>

@endsection