@extends('layouts.app')

@section('page_title', 'Detail Buku')
@section('breadcrumb', $breadcrumb)
@section('breadcrumb_title', 'Detail 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/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 {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            white-space: normal;
        }
    </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">Detail Buku</div>
                    </div>

                    <div class="card-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>
                    </div>
                </div>
            </div>
            {{-- End::Tabel data buku dalam perpustakaan --}}
        </div>
        <!--end::Row-->

        {{-- 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" class="btn btn-secondary text-nowrap"><i class="bi bi-plus-lg"></i> Tambah Kode</button>
                                </div>

                                <div id="list-kode">
                                    <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" 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" 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" 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" 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" 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">
                        <p>Anda akan menghapus data buku ini. Apakah anda yakin?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" 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>
        $(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);
            /* -------------------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,
                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: `#`,
                //     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 (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: 'ID Buku',
                        width: '113px',
                        data: '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.judul_buku }</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: '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.jumlah } Eksemplar</dd>
                                </div>
                                <div class="item">
                                    <dt>Total Dipinjamkan</dt>
                                    <dt>:</dt>
                                    <dd>${ (row.jumlah - row.sisa) } Eksemplar</dd>
                                </div>
                                <div class="item">
                                    <dt>Sisa di Perpus</dt>
                                    <dt>:</dt>
                                    <dd>${ row.sisa } Eksemplar</dd>
                                </div>
                            </dl>`;
                        },
                    },
                    {
                        title: 'Aksi',
                        data: 'id',
                        sortable: false,
                        render: (data, type, row) => {
                            return `<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>
                            <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="judul_buku" 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="kode_eksemplar" placeholder="">
                        <label for="kode-eksemplar">Kode Eksemplar</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" operator="=" 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]', async function() {
                    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------------------------ */

            $(el_modal_form_buku)
                .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(function() {
                        let key = $(this).attr('name');

                        if ($(this).data('inputType') === "summernote") {
                            $(this).summernote('code', data[key]);
                            return;
                        }

                        $(this).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('input', 'div.modal-body input[type=text].number-formatted', function() {
                    $(this).val(formatRupiah($(this).val()));
                })
                .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 } div.modal-body`).find('input, select').each(function() {
                        if ($(this).data('inputType') === "select2") {
                            $(this).val(null).trigger('change');
                            return true;
                        }
                        if ($(this).is('select')) {
                            $(this).val($(this).find('option:first').val());
                            return true; // untuk skip ke next each
                        }
                        $(this).val('');
                    });

                    $(`${ el_modal_form_buku} span[preview=aksi]`).html('Tambah');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_form_buku).find('input, select, textarea').attr('readonly', true);
                        $(el_modal_form_buku).find('input[data-input-type=summernote]').summernote('disable');
                        $(el_modal_form_buku).find('div[contenteditable=true]').attr('contenteditable', false);
                        $(el_modal_form_buku).find('button').attr('disabled', true);
                        $(el_modal_form_buku).find('button[type=submit]').trigger('loading:set');

                        // const html = $('#deskripsi-buku').summernote('code');
                        // console.log("HTML output: \n", html);

                        const result = await new Promise((resolve, reject) => {
                            setTimeout(() => {
                                resolve({
                                    status: 'success',
                                    message: 'Buku baru telah berhasil ditambahkan',
                                });
                            }, 3000);
                        });

                        showToast(result);
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan saat menyimpan data',
                        });
                    } finally {
                        $(el_modal_form_buku).find('input, select, textarea').attr('readonly', false);
                        $(el_modal_form_buku).find('input[data-input-type=summernote]').summernote('enable');
                        $(el_modal_form_buku).find('div[contenteditable=true]').attr('contenteditable', false);
                        $(el_modal_form_buku).find('button').attr('disabled', false);
                        $(el_modal_form_buku).find('button[type=submit]').trigger('loading:clear');
                    }
                });

            $(el_modal_hapus_buku)
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_hapus_buku).find('input, select, textarea').attr('readonly', true);
                        $(el_modal_hapus_buku).find('button').attr('disabled', true);
                        $(el_modal_hapus_buku).find('button[type=submit]').trigger('loading:set');

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

                        showToast({
                            status: 'success',
                            message: 'Data telah berhasil dihapus',
                        });
                        modal_hapus_buku.hide();
                    } catch (err) {
                        // do something when error
                    } finally {
                        $(el_modal_hapus_buku).find('input, select, textarea').attr('readonly', false);
                        $(el_modal_hapus_buku).find('button').attr('disabled', false);
                        $(el_modal_hapus_buku).find('button[type=submit]').trigger('loading:clear');
                    }
                });
        });
    </script>
@endpush