@extends('layouts.app')
@section('title', 'Pengembalian Buku')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-3">
    <h4>Pengembalian Buku</h4>
    <a href="{{ route('loans.index') }}" class="btn btn-secondary btn-sm">Kembali</a>
</div>

<div class="row" style="max-width:700px;">
    <div class="col-md-6">
        <div class="card mb-3">
            <div class="card-header">Info Peminjaman</div>
            <div class="card-body">
                <p><strong>Kode:</strong> {{ $loan->kode_pinjam }}</p>
                <p><strong>Anggota:</strong> {{ $loan->member->nama ?? '-' }}</p>
                <p><strong>Buku:</strong> {{ $loan->buku->judul ?? '-' }}</p>
                <p><strong>Tgl Pinjam:</strong> {{ $loan->tanggal_pinjam?->format('d/m/Y') }}</p>
                <p class="{{ $loan->terlambat() ? 'text-danger fw-bold' : '' }}">
                    <strong>Jatuh Tempo:</strong> {{ $loan->tanggal_kembali?->format('d/m/Y') }}
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Form Pengembalian</div>
            <div class="card-body">
                <form action="{{ route('loans.process-return', $loan) }}" method="POST">
                    @csrf @method('POST')
                    <div class="mb-3">
                        <label class="form-label">Tanggal Dikembalikan <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_dikembalikan" id="tgl_kembali" class="form-control" value="{{ date('Y-m-d') }}" required>
                        @error('tanggal_dikembalikan')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="alert alert-info py-2" id="info-denda">
                        <small>Denda: <strong id="nilai-denda">Rp 0</strong></small>
                    </div>
                    <button type="submit" class="btn btn-success" onclick="return confirm('Konfirmasi pengembalian buku?')">
                        Proses Pengembalian
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
var jatuhTempo = new Date('{{ $loan->tanggal_kembali?->format('Y-m-d') }}');

document.getElementById('tgl_kembali').addEventListener('change', function() {
    var tgl = new Date(this.value);
    var denda = 0;
    if (tgl > jatuhTempo) {
        var selisih = Math.floor((tgl - jatuhTempo) / (1000 * 60 * 60 * 24));
        denda = selisih * 1000;
    }
    document.getElementById('nilai-denda').textContent = 'Rp ' + denda.toLocaleString('id-ID');
    var infoBox = document.getElementById('info-denda');
    infoBox.className = denda > 0 ? 'alert alert-danger py-2' : 'alert alert-info py-2';
});
</script>

@endsection