@extends('layouts.app')

@section('title', 'Peminjaman Buku Perpustakaan')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen Perpus</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Peminjaman</p>
            <h1 class="pkbm-dashboard__title">Peminjaman Buku</h1>
            <p class="pkbm-dashboard__subtitle">Kelola sirkulasi peminjaman dan pengembalian buku oleh siswa maupun guru.</p>
        </div>
    </header>

    @include('pkbm.perpustakaan.partials.navigation', ['menus' => $menus])

    @if (session('success') || session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
            <span>{{ session('success') ?? session('status') }}</span>
        </div>
    @endif

    @if (session('error'))
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Terjadi kesalahan validasi:</p>
                <ul class="mt-1 list-inside list-disc text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- Statistik -->
    <div class="grid gap-4 sm:grid-cols-3">
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-blue-100 text-xl text-blue-700">
                <i class="bi bi-journal-arrow-up" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Sedang Dipinjam</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($sedangDipinjam, 0, ',', '.') }}</span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-rose-100 text-xl text-rose-700">
                <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Terlambat Kembali</span>
                <span class="text-2xl font-bold text-rose-700">{{ number_format($terlambat, 0, ',', '.') }}</span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-xl text-emerald-700">
                <i class="bi bi-journal-check" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Transaksi</span>
                <span class="text-2xl font-bold text-emerald-700">{{ number_format($totalPeminjaman, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>

    <!-- Filter & Aksi -->
    <section class="sp-card p-4 space-y-4">
        <!-- Tabs -->
        <div class="flex items-center gap-1 rounded-xl bg-slate-100 p-1 text-sm font-medium text-slate-600 w-fit">
            <a href="{{ route('pkbm.perpustakaan.peminjaman', array_merge(request()->query(), ['tab' => 'aktif'])) }}"
                @class([
                    'rounded-lg px-3 py-1.5 transition-colors',
                    'bg-white text-slate-900 shadow-sm font-semibold' => $tab === 'aktif',
                    'hover:text-slate-900' => $tab !== 'aktif',
                ])>
                Pinjaman Aktif
            </a>
            <a href="{{ route('pkbm.perpustakaan.peminjaman', array_merge(request()->query(), ['tab' => 'riwayat'])) }}"
                @class([
                    'rounded-lg px-3 py-1.5 transition-colors',
                    'bg-white text-slate-900 shadow-sm font-semibold' => $tab === 'riwayat',
                    'hover:text-slate-900' => $tab !== 'riwayat',
                ])>
                Riwayat Pengembalian
            </a>
            <a href="{{ route('pkbm.perpustakaan.peminjaman', array_merge(request()->query(), ['tab' => 'semua'])) }}"
                @class([
                    'rounded-lg px-3 py-1.5 transition-colors',
                    'bg-white text-slate-900 shadow-sm font-semibold' => $tab === 'semua',
                    'hover:text-slate-900' => $tab !== 'semua',
                ])>
                Semua
            </a>
        </div>

        <form method="GET" action="{{ route('pkbm.perpustakaan.peminjaman') }}" class="flex flex-wrap items-end justify-between gap-3">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <div class="flex flex-wrap items-end gap-3">
                <label class="sp-form-label mb-0">Pencarian
                    <input type="text" name="q" value="{{ $search }}" placeholder="Judul buku atau peminjam..." class="sp-form-control mt-1 px-3 py-2 text-sm min-w-[16rem]">
                </label>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
                @if ($search !== '')
                    <a href="{{ route('pkbm.perpustakaan.peminjaman', ['tab' => $tab]) }}" class="sp-btn-secondary">Reset</a>
                @endif
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <button type="button" data-open-create class="sp-btn-primary">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Pinjam Buku
                </button>
            </div>
        </form>
    </section>

    <!-- Tabel Peminjaman -->
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Data Peminjaman & Pengembalian</h2>
            <p class="mt-1 text-xs text-slate-500">Daftar sirkulasi peminjaman buku oleh warga belajar dan tenaga pendidik.</p>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[55rem]">
                <thead>
                    <tr>
                        <th class="w-14 text-center">No.</th>
                        <th>Peminjam</th>
                        <th>Buku</th>
                        <th class="text-center w-16">Jumlah</th>
                        <th class="text-center">Tgl Pinjam</th>
                        <th class="text-center">Jatuh Tempo</th>
                        <th class="text-center">Status</th>
                        <th class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($peminjaman as $index => $item)
                        @php
                            $isLate = ($item->status === 'dipinjam') && ($item->tanggal_kembali < now()->toDateString());
                            $peminjamNama = $item->nama_siswa ?? $item->nama_guru ?? 'Tidak diketahui';
                            $peminjamTipe = !empty($item->id_siswa) ? 'Siswa' : 'Guru';
                        @endphp
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td>
                                <div class="font-semibold text-slate-900">{{ $peminjamNama }}</div>
                                <span @class([
                                    'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium border mt-0.5',
                                    'bg-sky-50 text-sky-700 border-sky-200' => $peminjamTipe === 'Siswa',
                                    'bg-purple-50 text-purple-700 border-purple-200' => $peminjamTipe === 'Guru',
                                ])>
                                    <i class="bi {{ $peminjamTipe === 'Siswa' ? 'bi-person' : 'bi-person-badge' }} text-[10px]" aria-hidden="true"></i>
                                    {{ $peminjamTipe }}
                                </span>
                            </td>
                            <td class="font-medium text-slate-900">
                                {{ $item->judul_buku }}
                            </td>
                            <td class="text-center font-bold text-slate-800">
                                {{ $item->jumlah_buku }}
                            </td>
                            <td class="text-center text-slate-600">
                                {{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d/m/Y') }}
                            </td>
                            <td class="text-center">
                                <span @class([
                                    'font-medium',
                                    'text-rose-600 font-bold' => $isLate,
                                    'text-slate-600' => ! $isLate,
                                ])>
                                    {{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d/m/Y') }}
                                </span>
                                @if ($isLate)
                                    <span class="block text-[11px] font-semibold text-rose-600">Terlambat!</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if ($item->status === 'dipinjam')
                                    <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 border border-amber-200">
                                        <i class="bi bi-clock-fill text-[10px]" aria-hidden="true"></i> Dipinjam
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 border border-emerald-200">
                                        <i class="bi bi-check-circle-fill text-[10px]" aria-hidden="true"></i> Dikembalikan
                                    </span>
                                    @if ($item->tanggal_dikembalikan)
                                        <span class="block text-[11px] text-slate-500 mt-0.5">
                                            {{ \Carbon\Carbon::parse($item->tanggal_dikembalikan)->format('d/m/Y') }}
                                        </span>
                                    @endif
                                @endif
                            </td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1 justify-end">
                                    @if ($item->status === 'dipinjam')
                                        <form method="POST" action="{{ route('pkbm.perpustakaan.peminjaman.kembalikan', $item->id_pinjam) }}" class="inline" onsubmit="return confirm('Konfirmasi pengembalian buku ini? Stok buku akan bertambah otomatis.');">
                                            @csrf
                                            <button type="submit" class="sp-btn-secondary px-2.5 py-1 text-xs text-emerald-700 border-emerald-200 hover:bg-emerald-50" title="Kembalikan Buku">
                                                <i class="bi bi-arrow-return-left" aria-hidden="true"></i>Kembalikan
                                            </button>
                                        </form>
                                    @else
                                        <form method="POST" action="{{ route('pkbm.perpustakaan.peminjaman.destroy', $item->id_pinjam) }}" class="inline" onsubmit="return confirm('Hapus riwayat peminjaman ini?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="sp-btn-secondary px-2.5 py-1 text-xs text-rose-600 hover:border-rose-200 hover:bg-rose-50" title="Hapus Riwayat">
                                                <i class="bi bi-trash" aria-hidden="true"></i>Hapus
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center text-slate-500">
                                <i class="bi bi-journal-x text-3xl text-slate-300 block mb-2" aria-hidden="true"></i>
                                Tidak ada data transaksi peminjaman.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<!-- Modal Tambah Peminjaman -->
<dialog id="modal-create-pinjam" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-pinjam-title">
    <form method="POST" action="{{ route('pkbm.perpustakaan.peminjaman.store') }}">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-journal-plus"></i></span>
                <div>
                    <h2 id="modal-pinjam-title" class="sp-section-title">Formulir Peminjaman Buku</h2>
                    <p class="mt-1 text-xs text-slate-500">Pilih buku dan peminjam (siswa atau guru) untuk mencatat peminjaman baru.</p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>

        <div class="grid gap-4 p-5 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="create-buku" class="sp-form-label">Judul Buku <span class="text-rose-500">*</span></label>
                <select id="create-buku" name="id_buku" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="">-- Pilih Buku --</option>
                    @foreach ($bukuTersedia as $b)
                        <option value="{{ $b->id_buku }}" {{ old('id_buku') == $b->id_buku ? 'selected' : '' }}>
                            {{ $b->judul }} (Stok tersedia: {{ $b->jumlah }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="create-jumlah" class="sp-form-label">Jumlah Pinjam <span class="text-rose-500">*</span></label>
                <input id="create-jumlah" name="jumlah_buku" type="number" min="1" value="{{ old('jumlah_buku', 1) }}" required class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-tgl" class="sp-form-label">Tanggal Pinjam <span class="text-rose-500">*</span></label>
                <input id="create-tgl" name="tanggal_pinjam" type="date" value="{{ old('tanggal_pinjam', date('Y-m-d')) }}" required class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>

            <div class="sm:col-span-2">
                <label for="create-tipe" class="sp-form-label">Tipe Peminjam <span class="text-rose-500">*</span></label>
                <select id="create-tipe" name="tipe" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="">-- Pilih Tipe Peminjam --</option>
                    <option value="siswa" {{ old('tipe', 'siswa') === 'siswa' ? 'selected' : '' }}>Siswa (Warga Belajar)</option>
                    <option value="guru" {{ old('tipe') === 'guru' ? 'selected' : '' }}>Guru / Tutor</option>
                </select>
            </div>

            <div id="field-siswa" class="sm:col-span-2">
                <label for="create-siswa" class="sp-form-label">Nama Siswa <span class="text-rose-500">*</span></label>
                <select id="create-siswa" name="id_siswa" class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="">-- Pilih Nama Siswa Aktif --</option>
                    @forelse ($siswaList as $s)
                        <option value="{{ $s->id }}" {{ old('id_siswa') == $s->id ? 'selected' : '' }}>
                            {{ $s->nama_siswa }}{{ !empty($s->nama_kelas) ? ' (' . $s->nama_kelas . ')' : '' }}
                        </option>
                    @empty
                        <option value="" disabled>Belum ada siswa dengan status aktif di kelas</option>
                    @endforelse
                </select>
            </div>

            <div id="field-guru" class="sm:col-span-2 hidden">
                <label for="create-guru" class="sp-form-label">Nama Guru <span class="text-rose-500">*</span></label>
                <select id="create-guru" name="id_guru" class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="">-- Pilih Nama Guru --</option>
                    @foreach ($guruList as $g)
                        <option value="{{ $g->id }}" {{ old('id_guru') == $g->id ? 'selected' : '' }}>{{ $g->nama }}</option>
                    @endforeach
                </select>
            </div>

            <div class="sm:col-span-2 rounded-xl bg-blue-50/70 border border-blue-200/60 p-3 text-xs text-blue-800">
                <div class="flex items-start gap-2">
                    <i class="bi bi-info-circle-fill text-blue-600 mt-0.5" aria-hidden="true"></i>
                    <div>
                        <p class="font-semibold">Informasi Durasi Pinjam</p>
                        <p class="text-blue-700/90">Batas waktu pengembalian otomatis ditentukan <strong>7 hari</strong> setelah tanggal pinjam. Stok buku akan otomatis dikurangi.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary">
                <i class="bi bi-save" aria-hidden="true"></i>Simpan Pinjaman
            </button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
(() => {
    const createModal = document.getElementById('modal-create-pinjam');
    const tipeSelect = document.getElementById('create-tipe');
    const fieldSiswa = document.getElementById('field-siswa');
    const fieldGuru = document.getElementById('field-guru');

    function syncPeminjamFields() {
        const val = tipeSelect?.value;
        if (val === 'guru') {
            fieldGuru?.classList.remove('hidden');
            fieldSiswa?.classList.add('hidden');
        } else {
            fieldSiswa?.classList.remove('hidden');
            fieldGuru?.classList.add('hidden');
        }
    }

    tipeSelect?.addEventListener('change', syncPeminjamFields);
    syncPeminjamFields();

    document.querySelector('[data-open-create]')?.addEventListener('click', () => {
        createModal?.showModal();
    });

    document.querySelectorAll('[data-close-dialog]').forEach((btn) => {
        btn.addEventListener('click', () => {
            btn.closest('dialog')?.close();
        });
    });

    createModal?.addEventListener('click', (event) => {
        if (event.target === createModal) {
            createModal.close();
        }
    });
})();
</script>
@endpush
@endsection