@section('page-title', $pageTitle)
<x-app-layout>
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0 fw-bold">{{ $pageTitle }}</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="riwayatOfflineTable" class="table table-striped dt-responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>NO</th>
                            <th>ID PEMINJAMAN</th>
                            <th>KODE BUKU</th>
                            <th>JUDUL BUKU</th>
                            <th>TANGGAL PINJAM</th>
                            <th>TANGGAL KEMBALI</th>
                            <th>STATUS</th>
                            <th>AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $counter = 1; @endphp
                        @forelse ($riwayatOffline as $transaksi)
                            @foreach ($transaksi['books'] as $buku)
                                <tr>
                                    <td>{{ $counter++ }}</td>
                                    <td>{{ $transaksi['id_peminjaman'] }}</td>
                                    <td>{{ $buku['kode_buku'] }}</td>
                                    <td>{{ $buku['judul'] }}</td>
                                    <td>{{ $transaksi['tanggal_pinjam'] }}</td>
                                    <td>{{ $transaksi['tanggal_kembali'] }}</td>
                                    <td>
                                        @if ($transaksi['status'] == 'Dikembalikan')
                                            <span
                                                class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ $transaksi['status'] }}</span>
                                        @else
                                            <span
                                                class="badge rounded-pill bg-warning-subtle text-warning-emphasis">{{ $transaksi['status'] }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-primary btn-sm text-white" data-bs-toggle="modal"
                                            data-bs-target="#detailModal" data-transaksi-id="{{ $transaksi['id'] }}"
                                            data-buku-id="{{ $buku['id'] }}">
                                            Detail
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="7" class="text-center">Tidak ada riwayat peminjaman.</td> </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- MODAL DETAIL RIWAYAT --}}
    <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold" id="detailModalLabel"><i
                            class="bi bi-book-half me-2 text-primary"></i>Detail Riwayat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div id="modal-content-placeholder" class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            const riwayatOfflineData = @json($riwayatOffline);

            $(document).ready(function() {
                $('#riwayatOfflineTable').DataTable({
                    responsive: true,
                    searching: false,
                    pageLength: 10,
                    order: [
                        [0, 'asc']
                    ],
                    columnDefs: [{
                            responsivePriority: 1,
                            targets: 2
                        },
                        {
                            responsivePriority: 2,
                            targets: 6
                        },
                        {
                            responsivePriority: 3,
                            targets: 0
                        },
                    ]
                });
            });


            // Modal Detail
            const detailModal = document.getElementById('detailModal');

            detailModal.addEventListener('show.bs.modal', event => {
                const button = event.relatedTarget;
                const transaksiId = button.getAttribute('data-transaksi-id');
                const bukuId = button.getAttribute('data-buku-id');
                const modalBody = detailModal.querySelector('#modal-content-placeholder');
                const modalTitle = detailModal.querySelector('#detailModalLabel');

                const transaksiItem = riwayatOfflineData.find(item => item.id == transaksiId);
                if (!transaksiItem) return;

                const buku = transaksiItem.books.find(b => b.id == bukuId);
                if (!buku) return;

                modalTitle.textContent = `Detail Buku`;

                const keteranganHtml = buku.keterangan ?
                    `
                    <hr class="my-3">
                    <div class="alert alert-warning border-0 bg-warning-subtle mb-0">
                        <h6 class="fw-bold mb-1 text-warning-emphasis"><i class="bi bi-info-circle-fill me-2"></i>Catatan Petugas</h6>
                        <p class="mb-0">${buku.keterangan}</p>
                    </div>
                    ` :
                    '';


                const contentHTML = `
                <div class="text-center mb-4">
                    <img src="{{ asset('${buku.cover}') }}" alt="Cover ${buku.judul}" class="img-fluid rounded shadow-sm" style="max-width: 150px;">
                </div>
                
                <h4 class="fw-bold text-center">${buku.judul}</h4>
                <p class="text-muted text-center">${buku.deskripsi}</p>
                
                <hr class="my-4">

                <table class="table table-borderless table-sm">
                    <tbody>
                        <tr>
                            <td class="fw-bold text-start" style="width: 35%;">ID Peminjaman</td>
                            <td style="width: 5%;">:</td>
                            <td class="text-start">${transaksiItem.id_peminjaman}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold text-start">Kode Buku</td>
                            <td>:</td>
                            <td class="text-start">${buku.kode_buku}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold text-start">Kategori Buku</td>
                            <td>:</td>
                            <td class="text-start"><span class="badge bg-primary-subtle text-primary-emphasis rounded-pill px-3 py-2">${buku.kategori}</span></td>
                        </tr>
                        <tr>
                            <td class="fw-bold text-start">Tahun Terbit</td>
                            <td>:</td>
                            <td class="text-start">${buku.tahun}</td>
                        </tr>
                    </tbody>
                </table>
                
                ${keteranganHtml} `;

                modalBody.innerHTML = contentHTML;
            });
        </script>
    @endpush
</x-app-layout>