@extends('layouts.app')

@section('title', 'Kelola Mobil')
@section('page-title', 'Kelola Mobil')

@section('sidebar-menu')
    <div class="menu-label">Menu Utama</div>
    <a href="{{ route('admin.dashboard') }}" class="menu-item">
        <i class="fa-solid fa-gauge-high"></i> Dashboard
    </a>
    <a href="{{ route('admin.mobil') }}" class="menu-item active">
        <i class="fa-solid fa-car"></i> Kelola Mobil
    </a>
    <a href="{{ route('admin.penyewaan') }}" class="menu-item">
        <i class="fa-solid fa-clipboard-list"></i> Data Penyewaan
    </a>
    <div class="menu-label" style="margin-top:10px;">Akun</div>
    <a href="{{ route('profil') }}" class="menu-item">
        <i class="fa-solid fa-circle-user"></i> Profil Saya
    </a>
@endsection

@section('content')
<div class="page-header">
    <div>
        <div class="page-header-title">Daftar Armada Mobil</div>
        <div class="page-header-sub">{{ $mobils->count() }} jenis mobil tercatat</div>
    </div>
    <a href="{{ route('admin.mobil.tambah') }}" class="btn btn-primary">
        <i class="fa-solid fa-plus"></i> Tambah Mobil
    </a>
</div>

<div class="card">
    <div class="card-body">
        @if($mobils->isEmpty())
            <div class="empty-state">
                <i class="fa-solid fa-car"></i>
                <p>Belum ada data mobil.</p>
            </div>
        @else
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Foto</th>
                        <th>Nama Mobil</th>
                        <th>Kondisi</th>
                        <th>Stok</th>
                        <th>Harga Sewa / Hari</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($mobils as $i => $mobil)
                    <tr>
                        <td>{{ $i + 1 }}</td>
                        <td>
                            @if($mobil->foto)
                                <img src="{{ asset('storage/'.$mobil->foto) }}" alt="{{ $mobil->nama_mobil }}" style="width:72px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--gray-100);">
                            @else
                                <span style="color:var(--gray-500);">-</span>
                            @endif
                        </td>
                        <td>{{ $mobil->nama_mobil }}</td>
                        <td>
                            @if($mobil->kondisi === 'Baik')
                                <span class="badge badge-success">Baik</span>
                            @elseif($mobil->kondisi === 'Perawatan')
                                <span class="badge badge-warning">Perawatan</span>
                            @else
                                <span class="badge badge-danger">Rusak</span>
                            @endif
                        </td>
                        <td>{{ $mobil->jumlah }}</td>
                        <td>Rp {{ number_format($mobil->harga_sewa, 0, ',', '.') }}</td>
                        <td style="white-space: nowrap;">
                            <a href="{{ route('admin.mobil.edit', $mobil->id_mobil) }}" class="btn btn-outline btn-sm">
                                <i class="fa-solid fa-pen"></i> Edit
                            </a>
                            <form action="{{ route('admin.mobil.hapus', $mobil->id_mobil) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Hapus mobil ini?')">
                                    <i class="fa-solid fa-trash"></i> Hapus
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</div>
@endsection