@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
                        @if (count($riwayatOffline) > 0)
                            @foreach ($riwayatOffline as $transaksi)
                                @foreach ($transaksi['books'] as $buku)
                                    @php
                                        try {
                                            $tglKembali = \Carbon\Carbon::createFromFormat(
                                                'd/m/Y',
                                                $transaksi['tanggal_kembali'],
                                            )->startOfDay();
                                        } catch (\Exception $e) {
                                            $tglKembali = \Carbon\Carbon::parse(
                                                $transaksi['tanggal_kembali'],
                                            )->startOfDay();
                                        }

                                        $today = now()->startOfDay();
                                        $isTelat = $today->gt($tglKembali) && $transaksi['status'] == 'Dipinjam';

                                        $hariTelat = 0;
                                        $denda = 0;

                                        if ($isTelat) {
                                            $hariTelat = $tglKembali->diffInDays($today);
                                            $denda = $hariTelat * 1000;
                                        }
                                    @endphp

                                    <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">Dikembalikan</span>
                                            @elseif($isTelat)
                                                <span class="badge rounded-pill bg-danger text-white">Terlambat</span>
                                            @else
                                                <span
                                                    class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Dipinjam</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'] }}"
                                                data-is-telat="{{ $isTelat ? 'true' : 'false' }}"
                                                data-hari-telat="{{ $hariTelat }}"
                                                data-denda="{{ number_format($denda, 0, ',', '.') }}">
                                                Detail
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- MODAL DETAIL --}}
    <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold"><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">Loading...</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']
                    ],

                    language: {
                        emptyTable: `
                            <div class="text-center py-5 text-muted">
                                <i class="bi bi-inbox fs-1 d-block mb-2 opacity-50"></i>
                                Belum ada riwayat peminjaman.
                            </div>
                        `,
                        zeroRecords: "Tidak ada data yang cocok"
                    },

                    columnDefs: [{
                            responsivePriority: 1,
                            targets: 3
                        },
                        {
                            responsivePriority: 2,
                            targets: 6
                        },
                        {
                            responsivePriority: 3,
                            targets: 0
                        },
                    ]
                });
            });

            // Modal Logic 
            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 isTelat = button.getAttribute('data-is-telat') === 'true';
                const hariTelat = button.getAttribute('data-hari-telat');
                const denda = button.getAttribute('data-denda');

                const modalBody = detailModal.querySelector('#modal-content-placeholder');
                const transaksiItem = riwayatOfflineData.find(item => item.id == transaksiId);
                if (!transaksiItem) return;
                const buku = transaksiItem.books.find(b => b.id == bukuId);
                if (!buku) return;

                const dendaHtml = isTelat ? `
                <div class="card border-0 border-start border-4 border-danger bg-danger-subtle mb-3 shadow-sm">
                    <div class="card-body p-3 d-flex align-items-center">
                        <div class="flex-shrink-0 me-3">
                            <i class="bi bi-exclamation-octagon-fill text-danger fs-1"></i>
                        </div>
                        <div class="text-start">
                            <h6 class="fw-bold text-danger mb-1">Terlambat Pengembalian!</h6>
                            <p class="mb-0 small text-danger-emphasis">
                                Anda terlambat <span class="badge bg-danger text-white">${hariTelat} Hari</span>. 
                                Denda yang harus dibayar: 
                                <span class="fw-bold fs-6 d-block mt-1">Rp ${denda}</span>
                            </p>
                        </div>
                    </div>
                </div>` : '';

            const keteranganHtml = buku.keterangan ? `
                <div class="card border-0 border-start border-4 border-warning bg-warning-subtle mb-4 shadow-sm">
                    <div class="card-body p-3 d-flex align-items-start">
                        <div class="flex-shrink-0 me-3">
                            <i class="bi bi-journal-bookmark-fill text-warning-emphasis fs-3"></i>
                        </div>
                        <div class="text-start">
                            <h6 class="fw-bold text-warning-emphasis mb-1">Catatan Petugas</h6>
                            <p class="mb-0 small text-dark opacity-75 fst-italic">
                                "${buku.keterangan}"
                            </p>
                        </div>
                    </div>
                </div>` : '';

            // RENDER HTML 
            modalBody.innerHTML = `
                <div class="text-center mb-4">
                    <img src="{{ asset('') }}${buku.cover}" class="img-fluid rounded shadow-sm" style="max-width: 140px;">
                </div>
                
                <h5 class="fw-bold text-center mb-1">${buku.judul}</h5>
                <p class="text-muted text-center small mb-4">${buku.deskripsi}</p>
                
                ${dendaHtml}
                ${keteranganHtml}
                
                <div class="card bg-light border-0 rounded-3 p-3">
                    <table class="table table-borderless table-sm mb-0">
                        <tbody>
                            <tr>
                                <td class="fw-bold text-start" style="width: 35%;">ID Peminjaman</td>
                                <td style="width: 1%;">:</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 fw-medium">${buku.kode_buku}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold text-start align-middle">Kategori</td>
                                <td class="align-middle">:</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>
                            <tr>
                                <td class="fw-bold text-start">Tgl Pinjam</td>
                                <td>:</td>
                                <td class="text-start">${transaksiItem.tanggal_pinjam}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold text-start">Tenggat</td>
                                <td>:</td>
                                <td class="text-start">${transaksiItem.tanggal_kembali}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>`;
            });
        </script>
    @endpush
</x-app-layout>