@extends('layouts.app')

@section('title', 'Dashboard Penyewa')
@section('page-title', 'Sewa Mobil')

@section('sidebar-menu')
    <div class="menu-label">Menu Saya</div>
    <a href="{{ route('penyewa.dashboard') }}" class="menu-item active">
        <i class="fa-solid fa-car"></i> Cari & Sewa Mobil
    </a>
    <a href="{{ route('penyewa.riwayat') }}" class="menu-item">
        <i class="fa-solid fa-clock-rotate-left"></i> Riwayat Sewa
    </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">Pilih Mobil yang Tersedia</div>
        <div class="page-header-sub">{{ $mobils->sum('jumlah') }} unit siap disewa</div>
    </div>
</div>

@if($mobils->isEmpty())
    <div class="card">
        <div class="empty-state">
            <i class="fa-solid fa-car"></i>
            <p>Maaf, belum ada mobil yang tersedia saat ini.</p>
        </div>
    </div>
@else
<div class="car-grid">
    @foreach($mobils as $mobil)
    <div class="car-card">
        <div class="car-card-img">
            @if($mobil->foto)
                <img src="{{ asset('storage/'.$mobil->foto) }}" alt="{{ $mobil->nama_mobil }}">
            @else
                <i class="fa-solid fa-car-side"></i>
            @endif
        </div>
        <div class="car-card-body">
            <div class="car-name">{{ $mobil->nama_mobil }}</div>
            <div class="car-meta">
                <div class="car-meta-item"><i class="fa-solid fa-screwdriver-wrench"></i> {{ $mobil->kondisi }}</div>
                <div class="car-meta-item"><i class="fa-solid fa-boxes-stacked"></i> {{ $mobil->jumlah }} unit</div>
            </div>
            <div class="car-price">Rp {{ number_format($mobil->harga_sewa, 0, ',', '.') }} <span>/ hari</span></div>
            <button
                onclick='openSewa({{ $mobil->id_mobil }}, @json($mobil->nama_mobil), {{ $mobil->harga_sewa }}, {{ $mobil->jumlah }})'
                class="btn btn-primary"
                style="margin-top:14px;width:100%;justify-content:center;"
            >
                <i class="fa-solid fa-key"></i> Sewa Sekarang
            </button>
        </div>
    </div>
    @endforeach
</div>
@endif

<div class="modal-overlay" id="modalSewa">
    <div class="modal">
        <div class="modal-header">
            <div class="modal-title">Form Penyewaan</div>
        </div>
        <form action="{{ route('penyewa.sewa') }}" method="POST">
            @csrf
            <input type="hidden" name="mobil_id" id="modalMobilId">
            <div class="modal-body">
                <div id="modalMobilNama" style="font-size:18px;font-weight:800;color:var(--navy);margin-bottom:4px;"></div>
                <div id="modalMobilHarga" style="font-size:14px;color:var(--gold-dark);font-weight:700;margin-bottom:20px;"></div>
                <div class="form-group" style="margin-bottom:16px;">
                    <label>Jumlah Unit Dipinjam</label>
                    <input type="number" name="jumlah_sewa" id="jumlahSewa" class="form-control" required min="1" value="1" onchange="hitungTotal()">
                    <small id="infoStok" style="font-size:11px;color:var(--gray-500);"></small>
                </div>
                <div class="form-group" style="margin-bottom:16px;">
                    <label>Tanggal Mulai Sewa</label>
                    <input type="date" name="tanggal_sewa" id="tglMulai" class="form-control" required
                           min="{{ date('Y-m-d') }}" onchange="hitungTotal()">
                </div>
                <div class="form-group" style="margin-bottom:16px;">
                    <label>Tanggal Kembali</label>
                    <input type="date" name="tanggal_kembali" id="tglKembali" class="form-control" required
                           min="{{ date('Y-m-d') }}" onchange="hitungTotal()">
                </div>
                <div id="ringkasan" style="display:none;background:var(--gray-50);border-radius:12px;padding:14px 16px;border:1px solid var(--gray-100);">
                    <div style="font-size:12px;color:var(--gray-500);font-weight:600;">Estimasi Total</div>
                    <div id="totalHarga" style="font-size:22px;font-weight:800;color:var(--navy);"></div>
                    <div id="totalHari" style="font-size:12px;color:var(--gray-500);"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="closeSewa()" class="btn btn-outline">Batal</button>
                <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Konfirmasi Sewa</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
let hargaPerHari = 0;
let stokTersedia = 0;
function openSewa(id, nama, harga, stok) {
    hargaPerHari = harga;
    stokTersedia = stok;
    document.getElementById('modalMobilId').value = id;
    document.getElementById('modalMobilNama').textContent = nama;
    document.getElementById('modalMobilHarga').textContent = 'Rp ' + harga.toLocaleString('id') + ' / hari';
    document.getElementById('jumlahSewa').value = 1;
    document.getElementById('jumlahSewa').max = stok;
    document.getElementById('infoStok').textContent = 'Stok tersedia: ' + stok + ' unit';
    document.getElementById('modalSewa').classList.add('open');
    document.getElementById('ringkasan').style.display = 'none';
}
function closeSewa() {
    document.getElementById('modalSewa').classList.remove('open');
}
function hitungTotal() {
    const mulai = new Date(document.getElementById('tglMulai').value);
    const kembali = new Date(document.getElementById('tglKembali').value);
    const qtyInput = document.getElementById('jumlahSewa');
    let qty = parseInt(qtyInput.value || '1', 10);
    if (!Number.isFinite(qty) || qty < 1) qty = 1;
    if (qty > stokTersedia) qty = stokTersedia;
    qtyInput.value = qty;

    if (!mulai || !kembali || kembali <= mulai) {
        document.getElementById('ringkasan').style.display = 'none';
        return;
    }
    const hari = Math.ceil((kembali - mulai) / 86400000);
    const total = hari * hargaPerHari * qty;
    document.getElementById('ringkasan').style.display = 'block';
    document.getElementById('totalHarga').textContent = 'Rp ' + total.toLocaleString('id');
    document.getElementById('totalHari').textContent = qty + ' unit x ' + hari + ' hari x Rp ' + hargaPerHari.toLocaleString('id');
}
document.getElementById('modalSewa').addEventListener('click', function(e) {
    if (e.target === this) closeSewa();
});
</script>
@endpush