@extends('layouts.dashboard')  

@section('content') 
<div class="container-fluid py-4">     
    <div class="header-section mb-4">
        <h3 class="text-primary fw-bold">
            <i class="fas fa-book-reader me-2"></i> Formulir Transaksi Peminjaman
        </h3>
        <p class="text-muted mb-0">Lengkapi data di bawah ini untuk mengajukan peminjaman buku.</p>
    </div>

    @if(!$anggota)
        <div class="alert alert-warning">
            <strong>Perhatian!</strong> Anda belum terdaftar sebagai anggota.
            <a href="{{ route('user.member.create') }}" class="btn btn-sm btn-primary ms-2">
                <i class="fas fa-user-plus me-1"></i> Daftar Anggota Baru
            </a>
        </div>

    @elseif(in_array($anggota->status, ['menunggu', 'ditolak']))
        <div class="alert alert-{{ $anggota->status === 'menunggu' ? 'info' : 'danger' }}">
            @if($anggota->status === 'menunggu')
                <i class="fas fa-hourglass-half me-1"></i>
                <strong>Pendaftaran Anda sedang menunggu persetujuan admin.</strong><br>
                Anda akan menerima notifikasi melalui email setelah akun Anda disetujui.
            @else
                <i class="fas fa-times-circle me-1"></i>
                <strong>Pendaftaran Anda ditolak oleh admin.</strong><br>
                Silakan hubungi admin untuk informasi lebih lanjut.
            @endif
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="card shadow border-0" style="border-radius: 1rem;">
                    <div class="card-header bg-light">
                        <h5 class="fw-bold text-primary mb-0">
                            <i class="fas fa-clipboard-list me-2"></i> Data Formulir Peminjaman (Terkunci)
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="alert alert-warning text-center">
                            <i class="fas fa-lock me-2"></i>
                            Formulir ini <strong>tidak dapat dikirim</strong> sebelum admin menyetujui pendaftaran Anda.
                        </div>
                    </div>
                </div>
            </div>
        </div>

    @else
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="card shadow border-0" style="border-radius: 1rem;">
                    <div class="card-header bg-light">
                        <h5 class="fw-bold text-primary mb-0">
                            <i class="fas fa-clipboard-list me-2"></i> Tambah Transaksi Peminjaman
                        </h5>
                    </div>

                    <div class="card-body p-4">
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <strong>Terjadi kesalahan:</strong>
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form id="peminjamanForm" action="{{ route('user.peminjaman.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="anggota_id" value="{{ $anggota->id }}">
                            <input type="hidden" name="koleksi_id" id="hidden_koleksi_id" required>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Nama Anggota</label>
                                <input type="text" class="form-control" value="{{ $anggota->nama }}" disabled>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">NIP/NIM</label>
                                <input type="text" class="form-control" value="{{ $anggota->nip_nim }}" disabled>
                            </div>

                            <div class="mb-3 position-relative">
                                <label for="title_input" class="form-label fw-semibold">Judul Buku</label>
                                <input type="text" name="title_input" id="title_input" class="form-control" placeholder="Ketik judul buku..." autocomplete="off" required>
                                <div id="autocomplete-list" class="list-group mt-1 position-absolute w-100"></div>
                            </div>

                            <div class="mb-3">
                                <label for="surat_pengantar" class="form-label fw-semibold">Upload Surat Pengantar (PDF)</label>
                                <input type="file" name="surat_pengantar" id="surat_pengantar" class="form-control" accept="application/pdf" required>

                                @if(isset($lastTransaction) && $lastTransaction->surat_pengantar)
                                    @php
                                        $pdfPath = storage_path('app/public/surat_pengantar/' . $lastTransaction->surat_pengantar);
                                    @endphp
                                    @if(file_exists($pdfPath))
                                        <div class="mt-2">
                                            <a href="{{ asset('storage/surat_pengantar/' . $lastTransaction->surat_pengantar) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                <i class="fas fa-file-pdf me-1"></i> Lihat Surat Sebelumnya
                                            </a>
                                        </div>
                                    @endif
                                @endif
                            </div>

                            <div class="mb-3">
                                <label for="tanggal_pinjam" class="form-label fw-semibold">Tanggal Pinjam</label>
                                <input type="date" name="tanggal_pinjam" id="tanggal_pinjam" class="form-control" required value="{{ old('tanggal_pinjam', date('Y-m-d')) }}">
                            </div>

                            <div class="alert alert-info small mt-4" style="border-radius: 0.5rem;">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                <strong>Perhatian!</strong> Pastikan data yang Anda isi sudah benar agar proses peminjaman disetujui oleh admin.<br>
                                <i class="fas fa-clock text-warning me-2 mt-2"></i>
                                <strong>Catatan:</strong> Apabila buku dikembalikan melebihi batas waktu yang ditentukan,
                                maka akan dikenakan <strong>denda keterlambatan</strong> sesuai dengan ketentuan perpustakaan.
                            </div>

                            <div class="text-end mt-4">
                                <a href="{{ route('user.peminjaman.index') }}" class="btn btn-outline-secondary me-2">
                                    <i class="fas fa-arrow-left me-1"></i> Batal
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i> Simpan Peminjaman
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif 
</div> 

<script>
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('title_input');
    const hiddenInput = document.getElementById('hidden_koleksi_id');
    const listContainer = document.getElementById('autocomplete-list');
    const form = document.getElementById('peminjamanForm');

    const books = @json($koleksi->map(fn($k) => ['id' => $k->biblio_id, 'title' => $k->title]));

    input.addEventListener('input', function() {
        const val = this.value.toLowerCase();
        listContainer.innerHTML = '';
        hiddenInput.value = '';
        if (!val) return;

        const matches = books.filter(b => b.title.toLowerCase().includes(val));
        matches.forEach(b => {
            const div = document.createElement('div');
            div.classList.add('list-group-item', 'list-group-item-action');

            const regex = new RegExp(`(${val})`, 'gi');
            div.innerHTML = b.title.replace(regex, '<strong>$1</strong>');

            div.addEventListener('click', function() {
                input.value = b.title;
                hiddenInput.value = b.id; 
                listContainer.innerHTML = '';
            });

            listContainer.appendChild(div);
        });
    });

    document.addEventListener('click', function(e) {
        if (!listContainer.contains(e.target) && e.target !== input) {
            listContainer.innerHTML = '';
        }
    });

    form.addEventListener('submit', function(e) {
        if (!hiddenInput.value || !document.getElementById('surat_pengantar').files.length || !document.getElementById('tanggal_pinjam').value) {
            e.preventDefault();
            alert('Semua field harus diisi sebelum mengirim form!');
        }
    });
});
</script>

<style>
#autocomplete-list {
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
}
#autocomplete-list .list-group-item {
    cursor: pointer;
    padding: 0.375rem 0.75rem;
}
#autocomplete-list .list-group-item:hover {
    background-color: #f1f1f1;
}
</style>
@endsection