@extends('layouts.app')

@section('title', 'Pengembalian Mobil')
@section('page-title', 'Pengembalian <span>Sewa</span>')

@section('sidebar-menu')
    <div class="menu-label">Menu Saya</div>
    <a href="{{ route('penyewa.dashboard') }}" class="menu-item">
        <i class="fa-solid fa-car"></i> Cari & Sewa Mobil
    </a>
    <a href="{{ route('penyewa.riwayat') }}" class="menu-item active">
        <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">Konfirmasi Pengembalian</div>
        <div class="page-header-sub">Pastikan data pengembalian sudah benar.</div>
    </div>
    <a href="{{ route('penyewa.riwayat') }}" class="btn btn-outline">
        <i class="fa-solid fa-arrow-left"></i> Kembali
    </a>
</div>

<div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;">
    <div class="card">
        <div class="card-header">
            <div class="card-title">Detail Penyewaan</div>
        </div>
        <div class="card-body" style="padding:20px;">
            <div style="display:flex;gap:16px;align-items:center;margin-bottom:16px;">
                <div style="width:64px;height:64px;border-radius:12px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;overflow:hidden;">
                    @if($penyewaan->mobil->foto)
                        <img src="{{ asset('storage/'.$penyewaan->mobil->foto) }}" alt="{{ $penyewaan->mobil->nama_mobil }}" style="width:100%;height:100%;object-fit:cover;">
                    @else
                        <i class="fa-solid fa-car-side" style="font-size:24px;color:var(--gray-500);"></i>
                    @endif
                </div>
                <div>
                    <div style="font-size:17px;font-weight:800;color:var(--navy);">{{ $penyewaan->mobil->nama_mobil }}</div>
                    <div style="font-size:12px;color:var(--gray-500);">ID Sewa #{{ $penyewaan->id_sewa }}</div>
                </div>
            </div>

            <table style="width:100%;font-size:13px;">
                <tr>
                    <td style="padding:6px 0;color:var(--gray-500);">Tanggal Sewa</td>
                    <td style="padding:6px 0;font-weight:700;color:var(--navy);text-align:right;">{{ optional($penyewaan->tanggal_sewa)->format('d M Y') }}</td>
                </tr>
                <tr>
                    <td style="padding:6px 0;color:var(--gray-500);">Rencana Kembali</td>
                    <td style="padding:6px 0;font-weight:700;color:var(--navy);text-align:right;">{{ optional($tanggalKembaliRencana)->format('d M Y') }}</td>
                </tr>
                <tr>
                    <td style="padding:6px 0;color:var(--gray-500);">Tanggal Kembali Aktual</td>
                    <td style="padding:6px 0;font-weight:700;color:var(--navy);text-align:right;">{{ $tanggalHariIni->format('d M Y') }}</td>
                </tr>
                <tr>
                    <td style="padding:6px 0;color:var(--gray-500);">Durasi Sewa</td>
                    <td style="padding:6px 0;font-weight:700;color:var(--navy);text-align:right;">{{ $totalHari }} hari</td>
                </tr>
                <tr>
                    <td style="padding:6px 0;color:var(--gray-500);">Jumlah Dipinjam</td>
                    <td style="padding:6px 0;font-weight:700;color:var(--navy);text-align:right;">{{ $penyewaan->jumlah_sewa }} unit</td>
                </tr>
                <tr>
                    <td style="padding:6px 0;color:var(--gray-500);">Sudah Dikembalikan</td>
                    <td style="padding:6px 0;font-weight:700;color:var(--navy);text-align:right;">{{ $penyewaan->jumlah_kembali }} unit</td>
                </tr>
                <tr>
                    <td style="padding:6px 0;color:var(--gray-500);">Sisa Pengembalian</td>
                    <td style="padding:6px 0;font-weight:700;color:var(--danger);text-align:right;">{{ $sisaUnit }} unit</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="card-title">Ringkasan Biaya</div>
        </div>
        <div class="card-body" style="padding:20px;">
            @php
                $dendaPerUnitHariIni = $hariTerlambat * $tarifDendaHari;
            @endphp
            <div style="display:flex;justify-content:space-between;padding:8px 0;">
                <span style="color:var(--gray-500);font-size:13px;">Biaya Sewa</span>
                <strong>Rp {{ number_format($totalBiaya, 0, ',', '.') }}</strong>
            </div>
            <div style="display:flex;justify-content:space-between;padding:8px 0;">
                <span style="color:var(--gray-500);font-size:13px;">Estimasi Denda</span>
                <strong id="estimasiDendaText" style="color:{{ $estimasiDenda > 0 ? 'var(--danger)' : 'var(--navy)' }};">
                    Rp {{ number_format($estimasiDenda, 0, ',', '.') }}
                </strong>
            </div>
            <div style="font-size:11px;color:var(--gray-500);margin-bottom:12px;">
                Tarif denda: Rp {{ number_format($tarifDendaHari, 0, ',', '.') }}/hari terlambat
            </div>
            <div style="display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--gray-100);margin-top:8px;">
                <span style="font-weight:700;">Total Estimasi</span>
                <strong id="totalEstimasiText" style="font-size:18px;">Rp {{ number_format($totalBiaya + $estimasiDenda, 0, ',', '.') }}</strong>
            </div>

            <form action="{{ route('penyewa.kembali.proses', $penyewaan->id_sewa) }}" method="POST" style="margin-top:14px;">
                @csrf
                @method('PATCH')

                <div class="form-group" style="margin-bottom:12px;">
                    <label for="jumlah_kembali">Jumlah Dikembalikan</label>
                    <input
                        id="jumlah_kembali"
                        name="jumlah_kembali"
                        type="number"
                        class="form-control"
                        value="{{ old('jumlah_kembali', $sisaUnit) }}"
                        min="1"
                        max="{{ $sisaUnit }}"
                        required
                    >
                    <small style="font-size:11px;color:var(--gray-500);">Maksimal {{ $sisaUnit }} unit (sisa pinjaman).</small>
                </div>

                <div class="form-group" style="margin-bottom:12px;">
                    <label for="tanggal_kembali_aktual">Tanggal Pengembalian</label>
                    <input
                        id="tanggal_kembali_aktual"
                        name="tanggal_kembali_aktual"
                        type="date"
                        class="form-control"
                        value="{{ old('tanggal_kembali_aktual', $tanggalHariIni->toDateString()) }}"
                        required
                    >
                </div>

                <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">
                    <i class="fa-solid fa-check"></i> Konfirmasi Pengembalian
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
@media (max-width: 900px) {
    div[style*="grid-template-columns:1fr 340px"] {
        display: flex !important;
        flex-direction: column !important;
    }
}
</style>
@endpush

@push('scripts')
<script>
const jumlahKembaliInput = document.getElementById('jumlah_kembali');
const estimasiDendaText = document.getElementById('estimasiDendaText');
const totalEstimasiText = document.getElementById('totalEstimasiText');
const sisaMaks = {{ (int) $sisaUnit }};
const dendaPerUnit = {{ (int) $dendaPerUnitHariIni }};
const totalBiaya = {{ (int) $totalBiaya }};

function formatRupiah(value) {
    return 'Rp ' + Number(value).toLocaleString('id-ID');
}

function recalcEstimasi() {
    let qty = parseInt(jumlahKembaliInput.value || '1', 10);
    if (!Number.isFinite(qty) || qty < 1) qty = 1;
    if (qty > sisaMaks) qty = sisaMaks;
    jumlahKembaliInput.value = qty;

    const estimasiDenda = dendaPerUnit * qty;
    estimasiDendaText.textContent = formatRupiah(estimasiDenda);
    totalEstimasiText.textContent = formatRupiah(totalBiaya + estimasiDenda);
}

jumlahKembaliInput.addEventListener('input', recalcEstimasi);
</script>
@endpush