@extends('layouts.app')

@section('title', 'Data Penyewaan')
@section('page-title', 'Data Penyewaan')

@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">
        <i class="fa-solid fa-car"></i> Kelola Mobil
    </a>
    <a href="{{ route('admin.penyewaan') }}" class="menu-item active">
        <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">Semua Transaksi Penyewaan</div>
        <div class="page-header-sub">{{ $penyewaan->count() }} transaksi tercatat</div>
    </div>
    <button type="button" class="btn btn-primary" onclick="openAdminSewaModal()">
        <i class="fa-solid fa-plus"></i> Sewa untuk Penyewa
    </button>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        <i class="fa-solid fa-circle-xmark"></i>
        <span>{{ $errors->first() }}</span>
    </div>
@endif

<div class="card">
    <div class="card-body">
        @if($penyewaan->isEmpty())
            <div class="empty-state">
                <i class="fa-solid fa-clipboard-list"></i>
                <p>Belum ada data penyewaan.</p>
            </div>
        @else
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Penyewa</th>
                    <th>Mobil</th>
                    <th>Tanggal Sewa</th>
                    <th>Rencana Kembali</th>
                    <th>Aktual Kembali</th>
                    <th>Qty Sewa</th>
                    <th>Qty Kembali</th>
                    <th>Total Hari</th>
                    <th>Total Biaya</th>
                    <th>Denda</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($penyewaan as $i => $p)
                @php
                    $mulai = $p->tanggal_sewa;
                    $akhir = $p->tanggal_kembali_aktual ?? $p->tanggal_kembali_rencana;
                    $hari = $mulai && $akhir ? max(1, $mulai->diffInDays($akhir)) : 1;
                    $total = $hari * ($p->jumlah_sewa ?? 1) * ($p->mobil->harga_sewa ?? 0);
                @endphp
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td>{{ $p->user->username ?? '-' }}</td>
                    <td>{{ $p->mobil->nama_mobil ?? '-' }}</td>
                    <td>{{ optional($p->tanggal_sewa)->format('d M Y') }}</td>
                    <td>{{ optional($p->tanggal_kembali_rencana)->format('d M Y') }}</td>
                    <td>{{ optional($p->tanggal_kembali_aktual)->format('d M Y') ?? '-' }}</td>
                    <td>{{ $p->jumlah_sewa }}</td>
                    <td>{{ $p->jumlah_kembali ?? 0 }}</td>
                    <td>{{ $hari }} hari</td>
                    <td>Rp {{ number_format($total, 0, ',', '.') }}</td>
                    <td>
                        @if(($p->denda ?? 0) > 0)
                            <span style="color:var(--danger);font-weight:700;">Rp {{ number_format($p->denda, 0, ',', '.') }}</span>
                        @else
                            <span style="color:var(--gray-500);">-</span>
                        @endif
                    </td>
                    <td>
                        @if($p->status === 'aktif')
                            <span class="badge badge-info">Aktif</span>
                        @elseif($p->status === 'selesai')
                            <span class="badge badge-success">Selesai</span>
                        @elseif($p->status === 'terlambat')
                            <span class="badge badge-danger">Terlambat</span>
                        @else
                            <span class="badge badge-warning">{{ ucfirst($p->status) }}</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

<div class="modal-overlay" id="adminSewaModal">
    <div class="modal">
        <div class="modal-header">
            <div class="modal-title">Buat Transaksi Sewa</div>
        </div>
        <form action="{{ route('admin.penyewaan.sewa') }}" method="POST">
            @csrf
            <div class="modal-body">
                <div class="form-group" style="margin-bottom:14px;">
                    <label for="id_user">Pilih Penyewa</label>
                    <select id="id_user" name="id_user" class="form-control" required>
                        <option value="">Pilih penyewa</option>
                        @foreach($penyewas as $penyewa)
                            <option value="{{ $penyewa->id_user }}" @selected(old('id_user') == $penyewa->id_user)>
                                {{ $penyewa->nama }} ({{ $penyewa->username }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="margin-bottom:14px;">
                    <label for="id_mobil">Pilih Mobil</label>
                    <select id="id_mobil" name="id_mobil" class="form-control" required onchange="syncMaxAdminQty()">
                        <option value="">Pilih mobil</option>
                        @foreach($mobils as $mobil)
                            <option
                                value="{{ $mobil->id_mobil }}"
                                data-stok="{{ $mobil->jumlah }}"
                                @selected(old('id_mobil') == $mobil->id_mobil)
                            >
                                {{ $mobil->nama_mobil }} - Stok {{ $mobil->jumlah }} - Rp {{ number_format($mobil->harga_sewa, 0, ',', '.') }}/hari
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="margin-bottom:14px;">
                    <label for="jumlah_sewa">Jumlah Unit Dipinjam</label>
                    <input
                        type="number"
                        id="jumlah_sewa"
                        name="jumlah_sewa"
                        class="form-control"
                        min="1"
                        value="{{ old('jumlah_sewa', 1) }}"
                        required
                    >
                    <small id="adminSewaStokInfo" style="font-size:11px;color:var(--gray-500);"></small>
                </div>

                <div class="form-group" style="margin-bottom:14px;">
                    <label for="tanggal_sewa">Tanggal Sewa</label>
                    <input
                        type="date"
                        id="tanggal_sewa"
                        name="tanggal_sewa"
                        class="form-control"
                        value="{{ old('tanggal_sewa', date('Y-m-d')) }}"
                        min="{{ date('Y-m-d') }}"
                        required
                    >
                </div>

                <div class="form-group">
                    <label for="tanggal_kembali_rencana">Tanggal Rencana Kembali</label>
                    <input
                        type="date"
                        id="tanggal_kembali_rencana"
                        name="tanggal_kembali_rencana"
                        class="form-control"
                        value="{{ old('tanggal_kembali_rencana') }}"
                        min="{{ date('Y-m-d') }}"
                        required
                    >
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="closeAdminSewaModal()" class="btn btn-outline">Batal</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-check"></i> Simpan Transaksi
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function openAdminSewaModal() {
    document.getElementById('adminSewaModal').classList.add('open');
    syncMaxAdminQty();
}

function closeAdminSewaModal() {
    document.getElementById('adminSewaModal').classList.remove('open');
}

function syncMaxAdminQty() {
    const mobilSelect = document.getElementById('id_mobil');
    const qtyInput = document.getElementById('jumlah_sewa');
    const info = document.getElementById('adminSewaStokInfo');
    const opt = mobilSelect.options[mobilSelect.selectedIndex];

    if (!opt || !opt.dataset.stok) {
        qtyInput.max = '';
        info.textContent = '';
        return;
    }

    const stok = parseInt(opt.dataset.stok, 10);
    qtyInput.max = String(stok);
    if (parseInt(qtyInput.value || '1', 10) > stok) {
        qtyInput.value = String(stok);
    }
    info.textContent = 'Maksimal dipinjam: ' + stok + ' unit';
}

document.getElementById('adminSewaModal').addEventListener('click', function (e) {
    if (e.target === this) closeAdminSewaModal();
});

@if($errors->any())
openAdminSewaModal();
@endif
</script>
@endpush