@extends('layouts.app')

@section('page_title', 'Buku')
@section('breadcrumb', $breadcrumb)
@section('breadcrumb_title', 'Buku')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/lightbox.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/minimal.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/custom-datatable.css') }}">
    <style>
        .note-btn.dropdown-toggle::after { content: none }
        /* custom css untuk gambar */
        #tabel-master-buku > colgroup > col:nth-child(2) { width: 160px!important; }
        #tabel-master-buku tbody tr td div.book-cover-area {
            text-align: center;
        }
        #tabel-master-buku tbody tr td div.book-cover-area > img {
            width: 160px;
            height: 160px;
            object-fit: contain;
        }
        #tabel-master-buku tbody tr td dl.info-list {
            text-align: start;
            margin: 0;
            padding: 0;
        }
        #tabel-master-buku tbody tr td dl.info-list > div.item {
            display: flex;
            margin-bottom: 6px;
            white-space: wrap;
            line-height: 1;
        }
        #tabel-master-buku tbody tr td dl.info-list > div.item > dt:nth-child(2) {
            margin: 0 5px;
        }
        #tabel-master-buku tbody tr td dl.info-list > div.item > dt:first-child {
            font-weight: bold;
            min-width: 122.5px; /* bisa diatur sesuai kebutuhan */
        }
        #tabel-master-buku tbody tr td dl.info-list > div.item > dd {
            margin: 0;
            flex: 1;
            white-space: nowrap;
        }
        .form-tambah-kode-eksemplar {
            display: flex;
            gap: .5rem;
            flex-direction: row;
            align-items: flex-end;
        }
        #modal-daftar-kode-eksemplar img.cover-buku-modal-eksemplar {
            width: 180px;
            height: 260px;
            object-fit: contain;
        }
        #list-kode-eksemplar {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            white-space: normal;
        }
        #preview-cover-buku {
            width: 70px;
            height: 70px;
        }
        #preview-cover-buku > a {
            cursor: zoom-in;
        }
    </style>
@endpush

@section('content')
    <div id="content-page">
        <!--begin::Row-->
        <div class="row">
            {{-- Start::Tabel data buku dalam perpustakaan --}}
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title fw-bold">Data Buku</div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tabel-master-buku" class="table table-bordered table-striped align-middle text-center text-nowrap"></table>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End::Tabel data buku dalam perpustakaan --}}
        </div>
        <!--end::Row-->

        {{-- Start::Modal tambah buku baru --}}
        <div class="modal fade" id="modal-form-buku" tabindex="-1" aria-labelledby="label-modal-form-buku" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="label-modal-form-buku"><span preview="aksi">Tambah</span> Data Buku</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <input type="hidden" name="unique_id" id="form-id-buku" />
                            <div class="col-12 col-md-4">
                                <label for="form-judul-buku" class="form-label">Judul Buku <small class="text-danger">* required</small></label>
                                <input type="text" input-type="jqueryui-autocomplete" class="form-control" name="title" id="form-judul-buku" placeholder="Judul buku" required>
                                <div class="text-danger" data-error-field="msg_title"></div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="d-flex gap-2">
                                    <div id="preview-cover-buku" style="width: 70px; height: 70px;">
                                        <a href="{{ asset('assets/img/book-cover.jpg') }}">
                                            <img alt="Cover buku" src="{{ asset('assets/img/book-cover.jpg') }}" class="w-100 h-100 object-fit-contain" />
                                        </a>
                                    </div>
                                    <div class="flex-grow-1">
                                        <label for="form-cover-buku" class="form-label">Cover Buku</label>
                                        <input type="file" class="form-control" name="cover_buku" id="form-cover-buku">
                                        <div class="text-danger" data-error-field="msg_cover_buku"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-2">
                                <label for="form-penulis" class="form-label">Penulis</label>
                                <input type="text" input-type="jqueryui-autocomplete" class="form-control" name="penulis" id="form-penulis" placeholder="Nama penulis">
                                <div class="text-danger" data-error-field="msg_penulis"></div>
                            </div>
                            <div class="col-12 col-md-2">
                                <label for="form-penerbit" class="form-label">Penerbit</label>
                                <input type="text" input-type="jqueryui-autocomplete" class="form-control" name="penerbit" id="form-penerbit" placeholder="Penerbit" >
                                <div class="text-danger" data-error-field="msg_penerbit"></div>
                            </div>
                            <div class="col-12 col-md-1">
                                <label for="form-tahun-terbit" class="form-label"><span id="preview-jenis-tahun-terbit">Tahun</span> Terbit</label>
                                <input type="text" class="form-control" name="tahun_terbit" id="form-tahun-terbit" field-jenis="jenis_tahun_terbit" placeholder="Tahun Terbit" >
                                <div class="text-danger" data-error-field="msg_tahun_terbit"></div>
                            </div>
                            <div class="col-12 col-md-2">
                                <label for="form-mds" class="form-label">MDS <span data-bs-toggle="tooltip" data-bs-placement="right" title="Melvil Decimal System"><i class="bi bi-info-circle"></i></span></label>
                                <input type="text" input-type="jqueryui-autocomplete" class="form-control" name="mds" id="form-mds" placeholder="Melvil Decimal System">
                                <div class="text-danger" data-error-field="msg_mds"></div>
                            </div>
                            <div class="col-12 col-md-5">
                                <label for="form-isbn-issn" class="form-label">ISBN/ISSN</label>
                                <input type="text" class="form-control" name="isbn_issn" id="form-isbn-issn" placeholder="ISBN/ISSN">
                                <div class="text-danger" data-error-field="msg_isbn_issn"></div>
                            </div>
                            <div class="col-12 col-md-2">
                                <label for="form-kode-eksemplar" class="form-label">Kode Eksemplar Lama <span data-bs-toggle="tooltip" data-bs-placement="right" title="Opsional untuk diisi"><i class="bi bi-info-circle"></i></span></label>
                                <input type="text" class="form-control" name="copy_id_old" id="form-kode-eksemplar" placeholder="Kode Eksemplar Lama">
                                <div class="text-danger" data-error-field="msg_copy_id_old"></div>
                            </div>
                            <div class="col-12 col-md-2">
                                <label for="form-bahasa" class="form-label">Bahasa</label>
                                <input type="text" class="form-control" name="bahasa" id="form-bahasa" placeholder="Bahasa">
                                <div class="text-danger" data-error-field="msg_bahasa"></div>
                            </div>
                            <div class="col-12">
                                <div>
                                    <textarea input-type="summernote" name="deskripsi" id="deskripsi-buku"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i> Batal</button>
                        <button type="submit" class="btn btn-secondary" data-aksi="simpan-data-buku"><i class="bi bi-floppy"></i> Simpan</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End::Modal tambah buku baru --}}

        {{-- Start::Daftar kode eksemplar per buku --}}
        <div class="modal fade" id="modal-daftar-kode-eksemplar" tabindex="-1" aria-labelledby="label-modal-daftar-kode-eksemplar" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="label-modal-daftar-kode-eksemplar">Daftar Kode Eksemplar</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-12 col-lg-3">
                                <div class="text-center">
                                    <img alt="Gambar cover buku" src="{{ asset('assets/img/book-cover.png') }}" class="cover-buku-modal-eksemplar" />
                                </div>
                            </div>
                            <div class="col-12 col-lg-9">
                                <table class="table border-0 table-striped table-sm">
                                    <tr>
                                        <th>Judul Buku</th>
                                        <th>:</th>
                                        <td>Reason for My Hope: Salvation (First Edition)</td>
                                    </tr>
                                    <tr>
                                        <th>Penulis</th>
                                        <th>:</th>
                                        <td>Billy Graham</td>
                                    </tr>
                                    <tr>
                                        <th>Penerbit</th>
                                        <th>:</th>
                                        <td>Nelson Incorporated / W Publishing Group</td>
                                    </tr>
                                    <tr>
                                        <th>Tahun Terbit</th>
                                        <th>:</th>
                                        <td>2013</td>
                                    </tr>
                                    <tr>
                                        <th>ISBN/ISSN</th>
                                        <th>:</th>
                                        <td>ISBN-10: 0849947618; ISBN-13: 978-0849947612</td>
                                    </tr>
                                    <tr>
                                        <th>MDS <span data-bs-toggle="tooltip" data-bs-placement="right" title="Melvil Decimal System"><i class="bi bi-info-circle"></i></span></th>
                                        <th>:</th>
                                        <td>234.25</td>
                                    </tr>
                                    <tr>
                                        <th>Bahasa</th>
                                        <th>:</th>
                                        <td>English</td>
                                    </tr>
                                    <tr>
                                        <th>Total Eksemplar</th>
                                        <th>:</th>
                                        <td>5 Eksemplar</td>
                                    </tr>
                                </table>
                            </div>

                            <div class="col-12 col-lg-8 mx-auto">
                                <div class="form-tambah-kode-eksemplar mb-2">
                                    <div class="input-group mb-0">
                                        <input type="text" class="form-control" id="kode-eksemplar" name="kode_eksemplar" aria-describedby="prefix-kode" placeholder="Kode Eksemplar">
                                    </div>
                                    <button type="button" data-aksi="tambah-kode-eksemplar" class="btn btn-secondary text-nowrap"><i class="bi bi-plus-lg"></i> Tambah Kode</button>
                                </div>

                                <div id="list-kode-eksemplar">
                                    <ul class="list-group">
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>EKS-202510-001</span>
                                            <button type="button" data-aksi="hapus-kode-eksemplar" data-id="1" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>EKS-202510-002</span>
                                            <button type="button" data-aksi="hapus-kode-eksemplar" data-id="2" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>EKS-202510-003</span>
                                            <button type="button" data-aksi="hapus-kode-eksemplar" data-id="3" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>EKS-202510-004</span>
                                            <button type="button" data-aksi="hapus-kode-eksemplar" data-id="4" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>EKS-202510-005</span>
                                            <button type="button" data-aksi="hapus-kode-eksemplar" data-id="5" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i> Tutup</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End::Daftar kode eksemplar per buku --}}

        {{-- Start::Modal hapus buku --}}
        <div class="modal fade" id="modal-hapus-buku" tabindex="-1" aria-labelledby="label-modal-hapus-buku" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="label-modal-hapus-buku">Hapus Buku</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="form-hapus-id" name="unique_id" />
                        <p>Anda akan menghapus data buku ini. Apakah anda yakin?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-info" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i> Batal</button>
                        <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Hapus</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End::Modal hapus buku --}}

        @include('pages.book.sub-components.modal-hapus-eksemplar')
    </div>
@endSection

@push('script')
    <!-- Datatables CDN -->
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
    <script src="{{ asset('assets/js/lightbox.lite.min.js') }}"></script>
    <script src="{{ asset('assets/js/alloy-finger.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            /* -------------------Start::Instantiate all page props----------------------------- */
            $(document).find(`span[data-bs-toggle=tooltip]`).tooltip(); // semua tooltip di halaman ini bisa dipake
            const modal_opts = {
                backdrop: 'static',
                keyboard: false,
            };
            const el_modal_form_buku = `div#modal-form-buku`;
            const modal_form_buku = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_form_buku), modal_opts);
            const el_modal_daftar_kode_eksemplar = `div#modal-daftar-kode-eksemplar`;
            const modal_daftar_kode_eksemplar = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_daftar_kode_eksemplar), modal_opts);
            const el_modal_hapus_buku = `div#modal-hapus-buku`;
            const modal_hapus_buku = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_hapus_buku), modal_opts);
            lc_lightbox('div#preview-cover-buku > a', {
                wrap_class: 'lcl_fade_oc',
                gallery : true,
                thumb_attr: 'data-lcl-thumb',

                skin: 'minimal',
                radius: 0,
                padding	: 0,
                border_w: 0,
            });
            /* -------------------End::Instantiate all page props----------------------------- */

            const id_table = `#tabel-master-buku`;
            let datatable = $(id_table).on('error.dt', function(e, settings, techNote, message) {
                showToast(settings.jqXHR?.responseJSON || {
                    icon: settings.jqXHR?.responseJSON?.icon || 'error',
                    message: settings.jqXHR?.responseJSON?.message || 'Terjadi kesalahan pada tabel master kantor'
                });
            }).DataTable({
                dom: `<"#filter-area">rt<"mt-2 d-flex flex-column flex-md-row justify-content-md-between align-items-center"<i><p>>`,
                pageLength: 10,
                ordering: false,
                searching: false, // pakai kotak search custom sendiri
                responsive: true,
                autoWidth: false,
                // data: [
                //     { id: 'BK001', cover_buku: `{{ asset('assets/img/book-cover.png') }}`, judul_buku: 'Reason for My Hope: Salvation (First Edition)', penulis: 'Billy Graham', isbn_issn: 'ISBN-10: 0849947618; ISBN-13: 978-0849947612', penerbit: 'Nelson Incorporated / W Publishing Group', tahun_terbit: '2013', kode_eksemplar: 'EKS-202510-0001', mds: '234.25', description: 'The Reason for My Hope: Salvation presents Billy Graham\'s central message about the hope of salvation — what salvation is, why people need it (sin, selfishness, cultural deception), and its transforming power. The book is biblical and direct, offering both hard warnings (about sin and Hell) and an invitation to follow Jesus. (Publisher/back-cover summary).', bahasa: 'English', jumlah: 5, sisa: 3, status: 'active' },
                //     { id: 'BK002', cover_buku: `{{ asset('assets/img/book-cover-02.png') }}`, judul_buku: 'The Reason for My Hope: Salvation (Second Edition)', penulis: 'Billy Graham', isbn_issn: 'ISBN-10: 0849947618; ISBN-13: 978-0849947612', penerbit: 'Nelson Incorporated / W Publishing Group', tahun_terbit: '2013', kode_eksemplar: 'EKS-202510-0002', mds: '234.25', description: 'The Reason for My Hope: Salvation presents Billy Graham\'s central message about the hope of salvation — what salvation is, why people need it (sin, selfishness, cultural deception), and its transforming power. The book is biblical and direct, offering both hard warnings (about sin and Hell) and an invitation to follow Jesus. (Publisher/back-cover summary).', bahasa: 'English', jumlah: 8, sisa: 4, status: 'active' },
                // ],
                serverSide: true,
                processing: true,
                ajax: {
                    url: `{{ route('web-api-v1-books-data-table') }}`,
                    type: 'POST',
                    beforeSend: () => {
                        // do something before sending ajax call
                    },
                    data: function(d) {
                        d.custom_filter = [];
                        $(`${ id_table }_wrapper div#filter-area`).find('input, select').each(function() {
                            let key = $(this).attr('name');
                            let operator = $(this).attr('operator') || "=";
                            let val = $(this).val();

                            if ($.trim(operator.toLowerCase()) === "like" && val != "") {
                                val = `%${ val }%`;
                            }

                            if (key === "copy_id" && val != "") {
                                d.custom_filter.push([
                                    ['copy_id', operator, val],
                                    ['copy_id_old', operator, val]
                                ]);
                                return true;
                            }

                            if (val != "") {
                                d.custom_filter.push([key, operator, val]);
                            }
                        });

                        return d;
                    },
                    dataSrc: res => {
                        // do something right after getting response from ajax call
                        return res.data;
                    },
                    complete: () => {
                        // do something after calling ajax and load all data
                    },
                },
                columns: [{
                        title: 'Kode Eksemplar Lama',
                        width: '113px',
                        className: 'text-center',
                        data: 'copy_id_old',
                    },
                    {
                        title: 'Kode Eksemplar Baru',
                        width: '113px',
                        className: 'text-center',
                        data: 'copy_id',
                    },
                    {
                        title: 'Cover Buku',
                        width: '143px',
                        render: (data, type, row) => {
                            return `<div class="book-cover-area"><img alt="Book Cover" src="${ row.cover_buku }"></img></div>`;
                        },
                    },
                    {
                        title: 'Informasi Buku',
                        width: '683px',
                        render: (data, type, row) => {
                            return `<dl class="info-list">
                                <div class="item">
                                    <dt>Judul Buku</dt>
                                    <dt>:</dt>
                                    <dd>${ row.title }</dd>
                                </div>
                                <div class="item">
                                    <dt>Penulis</dt>
                                    <dt>:</dt>
                                    <dd>${ row.penulis }</dd>
                                </div>
                                <div class="item">
                                    <dt>Penerbit</dt>
                                    <dt>:</dt>
                                    <dd>${ row.penerbit }</dd>
                                </div>
                                <div class="item">
                                    <dt>Tahun Terbit</dt>
                                    <dt>:</dt>
                                    <dd>${ row.tahun_terbit }</dd>
                                </div>
                                <div class="item">
                                    <dt>MDS <span data-bs-toggle="tooltip" data-bs-placement="left" title="Melvil Decimal System"><i class="bi bi-info-circle"></i></span></dt>
                                    <dt>:</dt>
                                    <dd>${ row.mds }</dd>
                                </div>
                                <div class="item">
                                    <dt>ISBN/ISSN</dt>
                                    <dt>:</dt>
                                    <dd>${ row.isbn_issn }</dd>
                                </div>
                                <div class="item">
                                    <dt>Bahasa</dt>
                                    <dt>:</dt>
                                    <dd>${ row.bahasa }</dd>
                                </div>
                            </dl>`;
                        },
                    },
                    {
                        title: 'Status Peminjaman',
                        data: 'status_peminjaman_display',
                    },
                    // {
                    //     title: 'Jumlah Buku',
                    //     sortable: false,
                    //     width: '263px',
                    //     render: (data, type, row) => {
                    //         return `<dl class="info-list">
                    //             <div class="item">
                    //                 <dt>Total Keseluruhan</dt>
                    //                 <dt>:</dt>
                    //                 <dd>${ row.total_copies } Eksemplar</dd>
                    //             </div>
                    //             <div class="item">
                    //                 <dt>Total Dipinjamkan</dt>
                    //                 <dt>:</dt>
                    //                 <dd>${ row.total_renteds } Eksemplar</dd>
                    //             </div>
                    //             <div class="item">
                    //                 <dt>Sisa di Perpus</dt>
                    //                 <dt>:</dt>
                    //                 <dd>${ row.total_availables } Eksemplar</dd>
                    //             </div>
                    //         </dl>`;
                    //     },
                    // },
                    {
                        title: 'Aksi',
                        data: 'id',
                        sortable: false,
                        render: (data, type, row) => {
                            {{-- <button type="button" class="btn btn-secondary" data-aksi="daftar-eksemplar" data-bs-toggle="tooltip" title="Daftar kode eksemplar" data-bs-placement="top"><i class="bi bi-journal-plus"></i></button> --}}
                            return `<button type="button" class="btn btn-warning" data-aksi="edit-buku" data-bs-toggle="tooltip" title="Ubah data" data-bs-placement="top"><i class="bi bi-pencil-square"></i></button>
                            <button type="button" class="btn btn-danger" data-aksi="hapus-buku" data-bs-toggle="tooltip" title="Hapus data" data-bs-placement="top"><i class="bi bi-trash"></i></button>`;
                        },
                    },
                ],
                drawCallback: function(settings) {
                    $('.dt-container [data-bs-toggle="tooltip"]').tooltip();
                }
            });

            let datatable_wrapper = $(`${ id_table }_wrapper`);
            let filter_fields = `<div>
                    <div class="form-floating">
                        <input type="text" class="form-control" operator="like" id="judul-buku" name="title" placeholder="">
                        <label for="judul-buku">Judul Buku</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" operator="like" id="penulis" name="penulis" placeholder="">
                        <label for="penulis">Penulis</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" operator="=" id="kode-eksemplar" name="copy_id" placeholder="">
                        <label for="kode-eksemplar">Kode Eksemplar</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" operator="like" id="kode-mds" name="mds" placeholder="">
                        <label for="kode-mds">Melvil Decimal System</label>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-secondary" type="submit"><i class="bi bi-search"></i> Cari Data</button>
                        <button type="reset" class="btn btn-danger"><i class="bi bi-x-lg"></i> Reset Filter</button>
                    </div>
                </div>
                <div class="justify-content-end">
                    <div class="d-flex align-items-center">
                        @can('tambah-buku')
                        <button type="button" class="btn btn-secondary" aksi="tambah-buku"><i class="bi bi-file-earmark-plus"></i> Tambah Buku</button>
                        @endcan
                    </div>
                </div>`;

            // handle event di filter area
            datatable_wrapper.find('#filter-area')
                .html(filter_fields)
                .on('click', 'button[type=submit]', () => {
                    datatable.ajax.reload();
                })
                .on('click', 'button[type=reset]', () => {
                    datatable_wrapper.find('#filter-area input, #filter-area select').each(function() {
                        $(this).val(null);
                        if ($(this).is('select')) {
                            $(this).val($(this).find('option:first').val());
                        }
                    });
                    datatable.ajax.reload();
                })
                .on('click', 'button[aksi=tambah-buku].btn-secondary', () => {
                    modal_form_buku.show();
                });

            // event handler datatable
            $(`${id_table} tbody`)
                .on('click', 'button[data-aksi=edit-buku]', function() {
                    const dt = datatable.row($(this).closest('tr')).data();
                    $(el_modal_form_buku).trigger('form:fill', [ dt ]);
                    modal_form_buku.show();
                })
                .on('click', 'button[data-aksi=hapus-buku]', function() {
                    const dt = datatable.row($(this).closest('tr')).data();
                    $(el_modal_hapus_buku).trigger('form:fill', [ dt ]);
                    modal_hapus_buku.show();
                })
                .on('click', 'button[data-aksi=daftar-eksemplar]', async (e) => {
                    modal_daftar_kode_eksemplar.show();
                });

            /* -------------------Start::plugin buat summernote------------------------ */
            $('#deskripsi-buku').summernote({
                placeholder: 'Tuliskan secara singkat deskripsi buku...',
                height: 350,
                lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0'],
                fontSizeUnits: ['px', 'pt'],
                fontFamily: 'Times New Roman',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                    ['fontname', ['fontname', 'fontsize', 'fontsizeunit']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph', 'height']],
                    ['table', ['table']],
                    ['insert', []], // disable image, video, link if you want
                    ['view', ['codeview']],
                ],
                spellCheck: false,
                disableGrammer: true,
                codeviewFilter: true,
                codeviewIframeFilter: true,
            });
            /* -------------------End::plugin buat summernote------------------------ */

            const search_autocomplete = (el, sourceHandler, selectHandler) => {
                // Ensure spinner wrapper exists
                if (el.parent('.autocomplete-wrapper').length === 0) {
                    // Wrap the input in a relative container if not already wrapped
                    el.wrap('<div class="autocomplete-wrapper position-relative"></div>');
                    el.addClass('pe-5');
                }

                // If no spinner yet, inject it
                if (el.siblings('.autocomplete-spinner').length === 0) {
                    const spinnerHtml = `<div class="autocomplete-spinner position-absolute top-50 end-0 translate-middle-y me-3 d-none">
                        <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
                    </div>`;
                    el.after(spinnerHtml);
                }
                el.autocomplete({
                    minLength: 3,
                    appendTo: el_modal_form_buku,
                    delay: 500,
                    source: sourceHandler,
                    select: selectHandler,
                    search: function(e, ui) {
                        $(e.currentTarget).attr('readonly', true);
                        $(e.currentTarget).autocomplete("disable");

                        $(e.currentTarget).siblings('.autocomplete-spinner').removeClass('d-none');
                    },
                    response: function(e, ui) {
                        $(e.target).attr('readonly', false);
                        $(e.target).autocomplete("enable");

                        $(e.target).siblings('.autocomplete-spinner').addClass('d-none');
                    },
                });
            };

            $(el_modal_form_buku)
                .on('shown.bs.modal', (e) => {
                    if (!$(el_modal_form_buku).find('input[input-type=jqueryui-autocomplete]').data('ui-autocomplete')) {
                        $(el_modal_form_buku).find('input[input-type=jqueryui-autocomplete]').trigger('autocomplete:init');
                    }
                })
                .on('form:fill', (e, data) => {
                    $(`${ el_modal_form_buku} span[preview=aksi]`).html('Ubah');
                    $(`${ el_modal_form_buku } div.modal-body`).find('input, select, textarea').each((e, el) => {
                        let key = $(el).attr('name');

                        if (!(key in data)) {
                            return;
                        }

                        if ($(el).is('input[type=file]')) {
                            const $previewLink = $(`${el_modal_form_buku} div.modal-body div#preview-cover-buku > a`);
                            const $previewImg = $previewLink.find('img');

                            $previewLink.prop('href', data[key]).data('oldHref', null);
                            $previewImg.prop('src', data[key]).data('oldSrc', null).show();
                            return true;
                        }
                        if ($(el).attr('input-type') === "summernote") {
                            $(el).summernote('code', data[key]);
                            return;
                        }

                        $(el).val(data[key]);
                    });
                })
                .on('error-message:fill', (e, errors) => {
                    $(el_modal_form_buku).find(`input, select, textarea`).removeClass('border-warning');
                    $(el_modal_form_buku).find(`div[data-error-field*=msg_]`).html('');

                    for (err in errors) {
                        $(el_modal_form_buku).find(`input[name=${err}], select[name=${err}], textarea[name=${err}]`).addClass('border-warning');
                        $(el_modal_form_buku).find(`div[data-error-field=msg_${err}]`).html(errors[err][0]);
                    }
                })
                .on('selection:freeze', (e, state) => {
                    $(el_modal_form_buku).find('input:not(#form-judul-buku), textarea').attr('readonly', state);
                    $(el_modal_form_buku).find('input[type=file], select').attr('disabled', state);
                    $(el_modal_form_buku).find('input[input-type=summernote]').summernote(state ? 'disable' : 'enable');
                    if (state) {
                        $(el_modal_form_buku).find(`div[contenteditable=true]`).attr('contenteditable', false);
                    } else {
                        $(el_modal_form_buku).find(`div[contenteditable=false]`).attr('contenteditable', true);
                    }

                    $(el_modal_form_buku).find('input[name=copy_id_old]').attr('readonly', false);
                })
                .on('change', 'div.modal-body input[type=file]', (e) => {
                    const fileInput = e.target;
                    const file = fileInput.files[0];
                    const $previewLink = $(`${el_modal_form_buku} div.modal-body div#preview-cover-buku > a`);
                    const $previewImg = $previewLink.find('img');

                    const oldHref = $previewLink.data('oldHref') || $previewLink.prop('href');
                    const oldSrc = $previewImg.data('oldSrc') || $previewImg.prop('src');

                    // Helper to restore old preview
                    const restorePreview = () => {
                        $previewLink.prop('href', oldHref).data('oldHref', null);
                        $previewImg.prop('src', oldSrc).data('oldSrc', null).show();
                        fileInput.value = ''; // reset file input if invalid
                    };

                    // No file selected → restore
                    if (!file) return restorePreview();

                    // ✅ Check file extension
                    const ext = file.name.split('.').pop().toLowerCase();
                    const validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];

                    if (!validExtensions.includes(ext)) {
                        showToast({ status: 'error', message: 'Only image files are allowed!' });
                        return restorePreview();
                    }

                    // ✅ Convert to Base64 and preview
                    const reader = new FileReader();
                    reader.onload = (ev) => {
                        const base64 = ev.target.result;
                        $previewLink.prop('href', base64).data('oldHref', oldHref);
                        $previewImg.prop('src', base64).data('oldSrc', oldSrc).show();
                    };
                    reader.readAsDataURL(file);
                })
                .on('img:reset', 'div.modal-body input[type=file]', (e) => {
                    $(e.currentTarget).val('');
                    // put default value dari image kosong disini untuk diassign di prop href dan src
                    $(`${el_modal_form_buku} div.modal-body div#preview-cover-buku > a`).prop('href', `{{ asset('assets/img/book-cover.jpg') }}`).data('oldHref', null);
                    $(`${el_modal_form_buku} div.modal-body div#preview-cover-buku > a > img`).prop('src', `{{ asset('assets/img/book-cover.jpg') }}`).data('oldSrc', null).show();
                })
                .on('input', 'div.modal-body input[type=text].number-formatted', function() {
                    $(this).val(formatRupiah($(this).val()));
                })
                .on('input', 'div.modal-body input#form-judul-buku', (e) => {
                    $(el_modal_form_buku).trigger('selection:freeze', false);
                    $(e.currentTarget).data('refUniqueId', null); // remove, artinya ga mau disamain dengan yang ada saat ini
                    $(el_modal_form_buku).find('div.modal-body input[type=file]').trigger('img:reset');
                })
                .on('autocomplete:init', 'input#form-judul-buku', (e) => {
                    search_autocomplete($(e.currentTarget), async function (request, response) {
                        let last_query = request.term;

                        try {
                            const result = await $.ajax({
                                type: 'GET',
                                url: `{{ route('web-api-v1-books-lists-titles') }}`, // your Laravel route
                                data: {
                                    q: request.term // send the search term
                                },
                            });

                            if (last_query === request.term) {
                                response($.map(result.data, function (item) {
                                    return {
                                        ...item,
                                        label: item.title,
                                        value: item.title,
                                        id: item.ref_unique_id,
                                    };
                                }));
                            }
                        } catch (err) {
                            showToast({
                                status: err?.responseJSON?.status || 'error',
                                message: err?.responseJSON?.message || 'Terjadi kesalahan pada proses pencarian judul buku',
                            });
                            response([]);
                        }
                    }, function (event, ui) {
                        // ✅ This refers to the input field where user is typing
                        const $input = $(this);
                        $input.data('refUniqueId', ui.item.ref_unique_id);
                        $(el_modal_form_buku).trigger('form:fill', [ ui.item ]);
                        $(el_modal_form_buku).trigger('selection:freeze', true);
                        $(el_modal_form_buku).find('input[name=copy_id_old]').focus();
                    });
                })
                .on('autocomplete:init', 'input#form-penulis', (e) => {
                    search_autocomplete($(e.currentTarget), async function (request, response) {
                        try {
                            let last_query = request.term;
                            const result = await $.ajax({
                                type: 'GET',
                                url: `{{ route('web-api-v1-books-lists-authors') }}`, // your Laravel route
                                data: {
                                    q: request.term // send the search term
                                },
                            });

                            if (last_query === request.term) {
                                response($.map(result.data, function (item) {
                                    return {
                                        ...item,
                                        label: item.penulis,
                                        value: item.penulis,
                                        id: item.penulis,
                                    };
                                }));
                            }
                        } catch (err) {
                            showToast({
                                status: err?.responseJSON?.status || 'error',
                                message: err?.responseJSON?.message || 'Terjadi kesalahan pada proses pencarian informasi penulis',
                            });
                            response([]);
                        }
                    }, function (event, ui) {
                        // ✅ This refers to the input field where user is typing
                        $(this).val(ui.item.penulis);
                    });
                })
                .on('autocomplete:init', 'input#form-penerbit', (e) => {
                    search_autocomplete($(e.currentTarget), async function (request, response) {
                        try {
                            let last_query = request.term;
                            const result = await $.ajax({
                                type: 'GET',
                                url: `{{ route('web-api-v1-books-lists-publishers') }}`, // your Laravel route
                                data: {
                                    q: request.term // send the search term
                                },
                            });

                            if (last_query === request.term) {
                                response($.map(result.data, function (item) {
                                    return {
                                        ...item,
                                        label: item.penerbit,
                                        value: item.penerbit,
                                        id: item.penerbit,
                                    };
                                }));
                            }
                        } catch (err) {
                            showToast({
                                status: err?.responseJSON?.status || 'error',
                                message: err?.responseJSON?.message || 'Terjadi kesalahan pada proses pencarian informasi penerbit',
                            });
                            response([]);
                        }
                    }, function (event, ui) {
                        // ✅ This refers to the input field where user is typing
                        $(this).val(ui.item.penerbit);
                    });
                })
                .on('hidden.bs.modal', () => {
                    $(`${ el_modal_form_buku } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[type=reset]', () => {
                    $(el_modal_form_buku).trigger('modal:disabled', false);
                    $(`${ el_modal_form_buku } div.modal-body`).find('input, select, textarea').each((i, el) => {
                        if ($(el).attr('input-type') === "summernote") {
                            $(el).summernote('code', null);
                            return true;
                        }
                        if ($(el).is('input[type=file]')) {
                            $(el).trigger('img:reset');
                            return true; // untuk skip ke next each
                        }
                        $(el).val('');
                    });

                    $(`${ el_modal_form_buku} span[preview=aksi]`).html('Tambah');
                })
                .on('modal:disabled', (e, state) => {
                    if (state) {
                        $(el_modal_form_buku).trigger('error-message:fill'); // reset dulu error message terakhir
                    }
                    $(el_modal_form_buku).find('input, textarea').attr('readonly', state);
                    $(el_modal_form_buku).find('input[input-type=summernote]').summernote(state ? 'disable' : 'enable');
                    $(el_modal_form_buku).find('input[type=file], select, button').attr('disabled', state);
                    $(el_modal_form_buku).find('button[type=submit]').trigger(state ? 'loading:set' : 'loading:clear');
                    if (state) {
                        $(el_modal_form_buku).find(`div[contenteditable=true]`).attr('contenteditable', false);
                    } else {
                        $(el_modal_form_buku).find(`div[contenteditable=false]`).attr('contenteditable', true);
                    }
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_form_buku).trigger('modal:disabled', true);

                        const data = new FormData();
                        $(el_modal_form_buku).find('input, select, textarea').each((i, el) => {
                            let key = $(el).attr('name');
                            if (key == undefined || key == null) {
                                return;
                            }

                            if ($(el).prop('id') === "form-judul-buku") {
                                data.append('ref_unique_id', $(el).data('refUniqueId') || null);
                            }

                            if ($(el).is('input[type=file]')) {
                                const file = $(el)[0].files[0];
                                data.append(key, file || null);
                                return true;
                            }
                            if ($(el).attr('input-type') === "summernote") {
                                data.append(key, $(el).summernote('code'));
                                return true;
                            }

                            data.append(key, $(el).val());
                        });

                        const result = await $.ajax({
                            type: 'POST',
                            url: (data.get('unique_id') !== "") ? `{{ route('web-api-v1-books-update', ['uuid' => ':unique_id']) }}`.replace(':unique_id', data.get('unique_id')) : `{{ route('web-api-v1-books-create') }}`,
                            data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            enctype: 'multipart/form-data',
                        });

                        showToast(result);
                        datatable.ajax.reload();
                        modal_form_buku.hide();
                    } catch (err) {
                        $(el_modal_form_buku).trigger('error-message:fill', [ err?.responseJSON?.errors ]);
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan saat menyimpan data',
                        });
                    } finally {
                        $(el_modal_form_buku).trigger('modal:disabled', false);
                    }
                });

            $(el_modal_daftar_kode_eksemplar)
                .on('content:fill', (e, data) => {
                    // fill data here
                })
                .on('click', 'button[data-aksi=tambah-kode-eksemplar]', async (e) => {
                    try {
                        $(e.currentTarget).closest('div.modal').find('button').attr('disabled', true);
                        $(e.currentTarget).trigger('loading:set');
                        $('#kode-eksemplar').attr('readonly', true);

                        const results = await new Promise((resolve, reject) => {
                            setTimeout(() => (resolve(true)), 3000);
                        });

                        showToast({
                            status: 'success',
                            message: 'Kode eksemplar berhasil ditambah',
                        });
                    } catch (err) {
                        showToast({
                            status: 'error',
                            message: 'Gagal menambahkan kode eksemplar',
                        });
                    } finally {
                        $(e.currentTarget).closest('div.modal').find('button').attr('disabled', false);
                        $(e.currentTarget).trigger('loading:clear');
                        $('#kode-eksemplar').attr('readonly', false);
                    }
                })
                .on('click', 'button[data-aksi=hapus-kode-eksemplar]', function() {
                    App.Book.fillModalHapusEksemplar({
                        e: 1,
                        c: 2,
                        d: 'haha',
                    });
                    App.Book.showModalHapusEksemplar();
                });

            $(el_modal_hapus_buku)
                .on('form:fill', (e, data) => {
                    $(`${ el_modal_hapus_buku } div.modal-body`).find('input, select, textarea').each((i, el) => {
                        const key = $(el).attr('name');
                        if ($(el).attr('input-type') === 'jqueryui-datepicker') {
                            $(el).datepicker('setDate', data[key] == null ? null : $.datepicker.parseDate('yy-mm-dd', data[key]));
                            return true;
                        }
                        if ($(el).is('input[type=radio]') && $(el).attr('value') === data[key]) {
                            $(el).prop('checked', true);
                            return true;
                        }
                        $(el).val(data[key]);
                    });
                })
                .on('hidden.bs.modal', () => {
                    $(`${ el_modal_hapus_buku } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[type=reset]', () => {
                    $(`${ el_modal_hapus_buku } div.modal-body`).find('input, select').each((i, el) => {
                        if ($(el).attr('input-type') === 'jqueryui-datepicker') {
                            $(el).datepicker('setDate', null);
                            return true;
                        }
                        if ($(el).is('select')) {
                            $(el).val($(el).find('option:first').val());
                            return true; // untuk skip ke next each
                        }
                        if ($(el).is('input[type=radio]')) {
                            $(el).prop('checked', false);
                            return true; // untuk skip ke next each
                        }
                        $(el).val('');
                    });
                })
                .on('modal:disabled', (e, state) => {
                    $(el_modal_hapus_buku).find('input, textarea').attr('readonly', state);
                    $(el_modal_hapus_buku).find('select, button').attr('disabled', state);
                    $(el_modal_hapus_buku).find('button[type=submit]').trigger(state ? 'loading:set' : 'loading:clear');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_hapus_buku).trigger('modal:disabled', true);

                        let data = {
                            unique_id: null,
                        };
                        $(el_modal_hapus_buku).find('input, select, textarea').each((i, el) => {
                            if ($(el).is('input[type=radio]') && !$(el).is(':checked')) {
                                return true;
                            }
                            const key = $(el).attr('name');
                            if ($(el).attr('input-type') === 'jqueryui-datepicker') {
                                data[key] = $.datepicker.formatDate('yy-mm-dd', $(el).datepicker('getDate'));
                                return true;
                            }
                            data[key] = $(el).val();
                        });

                        const result = await $.ajax({
                            type: 'DELETE',
                            url: `{{ route('web-api-v1-books-delete', ['uuid' => ':unique_id']) }}`.replace(':unique_id', data.unique_id),
                            data,
                        });

                        showToast(result);
                        modal_hapus_buku.hide();
                        datatable.ajax.reload();
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan saat menghapus data',
                        });
                    } finally {
                        $(el_modal_hapus_buku).trigger('modal:disabled', false);
                    }
                });
        });
    </script>
@endpush