<x-app-layout>
    @section('page-title', $pageTitle)

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="my-0 fw-bold">Daftar Buku</h5>
            <a href="{{ route('admin.buku.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle-fill me-2"></i>Tambah Buku
            </a>
        </div>
        <div class="card-body">
            <ul class="nav nav-tabs" id="bukuTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="offline-tab" data-bs-toggle="tab"
                        data-bs-target="#offline-tab-pane" type="button" role="tab">Peminjaman Offline
                        ({{ $bukuOffline->count() }})</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="online-tab" data-bs-toggle="tab" data-bs-target="#online-tab-pane"
                        type="button" role="tab">Baca Online ({{ $bukuOnline->count() }})</button>
                </li>
            </ul>

            <div class="tab-content" id="bukuTabContent">
                {{-- TAB UNTUK BUKU OFFLINE --}}
                <div class="tab-pane fade show active" id="offline-tab-pane" role="tabpanel">
                    <div class="table-responsive mt-3">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Cover</th>
                                    <th>Judul</th>
                                    <th>Kode Buku</th>
                                    <th>Penulis</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bukuOffline as $buku)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}"
                                                width="50" class="rounded"></td>
                                        <td>{{ $buku['judul'] }}</td>
                                        <td>{{ $buku['kode_buku'] }}</td>
                                        <td>{{ $buku['penulis'] }}</td>
                                        <td>
                                            @if ($buku['status'] == 'Tersedia')
                                                <span
                                                    class="badge bg-success-subtle text-success-emphasis">Tersedia</span>
                                            @else
                                                <span
                                                    class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
                                            @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                                                data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
                                                data-cover="{{ asset($buku['cover']) }}"
                                                data-judul="{{ $buku['judul'] }}"
                                                data-kode_buku="{{ $buku['kode_buku'] }}"
                                                data-penulis="{{ $buku['penulis'] }}"
                                                data-kategori="{{ $buku['kategori'] }}"
                                                data-tahun="{{ $buku['tahun'] }}" data-status="{{ $buku['status'] }}">
                                                <i class="bi bi-eye-fill"></i> Detail
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">Tidak ada data buku offline.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- TAB UNTUK BUKU ONLINE --}}
                <div class="tab-pane fade" id="online-tab-pane" role="tabpanel">
                    <div class="table-responsive mt-3">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Cover</th>
                                    <th>Judul</th>
                                    <th>Penulis</th>
                                    <th>File PDF</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bukuOnline as $buku)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}"
                                                width="50" class="rounded"></td>
                                        <td>{{ $buku['judul'] }}</td>
                                        <td>{{ $buku['penulis'] }}</td>
                                        <td><span
                                                class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}</span>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                                                data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
                                                data-cover="{{ asset($buku['cover']) }}"
                                                data-judul="{{ $buku['judul'] }}"
                                                data-penulis="{{ $buku['penulis'] }}"
                                                data-kategori="{{ $buku['kategori'] }}"
                                                data-tahun="{{ $buku['tahun'] }}" data-status="Dapat Dibaca Online">
                                                <i class="bi bi-eye-fill"></i> Detail
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">Tidak ada data buku online.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailBukuModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="modalJudul">Detail Buku</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="" id="modalCover" class="img-fluid rounded shadow-sm" alt="Cover Buku">
                        </div>
                        <div class="col-md-8">
                            <h3 id="modalJudulContent" class="fw-bold"></h3>
                            <p class="text-muted" id="modalPenulis"></p>
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <th width="100px">Kategori</th>
                                    <td id="modalKategori"></td>
                                </tr>
                                <tr id="rowKodeBuku">
                                    <th>Kode Buku</th>
                                    <td id="modalKode_buku"></td>
                                </tr>
                                <tr>
                                    <th>Tahun</th>
                                    <td id="modalTahun"></td>
                                </tr>
                                <tr>
                                    <th>Status</th>
                                    <td><span id="modalStatus" class="badge"></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <a href="#" id="modalEditButton" class="btn btn-primary"><i
                            class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const detailBukuModal = document.getElementById('detailBukuModal');
                if (detailBukuModal) {
                    detailBukuModal.addEventListener('show.bs.modal', event => {
                        const button = event.relatedTarget;

                        const id = button.getAttribute('data-id');
                        const cover = button.getAttribute('data-cover');
                        const judul = button.getAttribute('data-judul');
                        const kode_buku = button.getAttribute('data-kode_buku');
                        const penulis = button.getAttribute('data-penulis');
                        const kategori = button.getAttribute('data-kategori');
                        const tahun = button.getAttribute('data-tahun');
                        const status = button.getAttribute('data-status');

                        const editUrl = `{{ url('admin/buku') }}/${id}/edit`;

                        const modalJudul = detailBukuModal.querySelector('#modalJudul');
                        const modalCover = detailBukuModal.querySelector('#modalCover');
                        const modalKode_buku = detailBukuModal.querySelector('#modalKode_buku');
                        const modalJudulContent = detailBukuModal.querySelector('#modalJudulContent');
                        const modalPenulis = detailBukuModal.querySelector('#modalPenulis');
                        const modalKategori = detailBukuModal.querySelector('#modalKategori');
                        const modalTahun = detailBukuModal.querySelector('#modalTahun');
                        const modalStatus = detailBukuModal.querySelector('#modalStatus');
                        const modalEditButton = detailBukuModal.querySelector('#modalEditButton');
                        const rowKodeBuku = detailBukuModal.querySelector('#rowKodeBuku');

                        modalJudul.textContent = judul;
                        modalCover.src = cover;
                        modalJudulContent.textContent = judul;
                        modalPenulis.textContent = `oleh ${penulis}`;
                        modalKategori.textContent = `: ${kategori}`;
                        modalTahun.textContent = `: ${tahun}`;
                        modalStatus.textContent = status;
                        modalEditButton.href = editUrl;

                        // Tampilkan/sembunyikan kode buku berdasarkan ada tidaknya data
                        if (kode_buku && kode_buku !== 'null' && kode_buku !== '') {
                            rowKodeBuku.style.display = '';
                            modalKode_buku.textContent = `: ${kode_buku}`;
                        } else {
                            rowKodeBuku.style.display = 'none';
                        }

                        if (status === 'Tersedia' || status === 'Dapat Dibaca Online') {
                            modalStatus.className = 'badge bg-success-subtle text-success-emphasis';
                        } else {
                            modalStatus.className = 'badge bg-warning-subtle text-warning-emphasis';
                        }
                    });
                }
            });
        </script>
    @endpush
</x-app-layout>
