@extends('layouts.app')

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

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.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-peminjaman > colgroup > col:nth-child(2) { width: 160px!important; }
        #tabel-peminjaman tbody tr td div.book-cover-area {
            text-align: center;
        }
        #tabel-peminjaman tbody tr td div.book-cover-area > img {
            width: 160px;
            height: 160px;
            object-fit: contain;
        }
        #tabel-peminjaman tbody tr td dl.info-list {
            text-align: start;
            margin: 0;
            padding: 0;
        }
        #tabel-peminjaman tbody tr td dl.info-list > div.item {
            display: flex;
            margin-bottom: 6px;
            white-space: wrap;
            line-height: 1;
        }
        #tabel-peminjaman tbody tr td dl.info-list > div.item > dt:nth-child(2) {
            margin: 0 5px;
        }
        #tabel-peminjaman tbody tr td dl.info-list > div.item > dt:first-child {
            font-weight: bold;
            min-width: 122.5px; /* bisa diatur sesuai kebutuhan */
        }
        #tabel-peminjaman tbody tr td dl.info-list > div.item > dd {
            margin: 0;
            flex: 1;
            white-space: nowrap;
        }
        div#modal-form-peminjaman div.modal-body > div.list-group > div.list-group-item.bg-secondary.text-white {
            height: 60px;
            display: flex;
            align-items: center;
        }
        div#modal-form-peminjaman div.modal-body > div.list-group > div#section-data-anggota > div {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: .5rem;
            align-items: center;
            margin-bottom: .5rem;
        }
        div#modal-form-peminjaman div.modal-body > div.list-group > div#section-data-anggota > div > div { min-width: 141.67px; }
    </style>
@endpush

@section('content')
    <div id="content-page">
        <!--begin::Row-->
        <div class="row">
            {{-- Start::Tabel master anggota --}}
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title fw-bold">Manajemen Peminjaman</div>
                    </div>

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

        {{-- Start::Modal tambah / ubah data anggota --}}
        <div class="modal fade" id="modal-form-peminjaman" tabindex="-1" aria-labelledby="label-modal-form-peminjaman" 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-peminjaman">Detail Peminjaman</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="list-group">
                            {{-- Start::Manage data anggota --}}
                            <div class="list-group-item bg-secondary text-white">Data Anggota</div>
                            <div class="list-group-item" id="section-data-anggota">
                                <div>
                                    <div>
                                        <label for="form-nama" class="form-label">Nama Anggota <small class="text-danger">* required</small></label>
                                        <input type="text" input-type="jqueryui-autocomplete" class="form-control" name="nama" id="form-nama" placeholder="Nama">
                                        <div class="text-danger" data-error-field="msg_member_id"></div>
                                    </div>

                                    <div>
                                        <label for="form-member-id" class="form-label">ID Anggota</label>
                                        <div class="form-control" id="form-member-id">&nbsp;</div>
                                    </div>

                                    <div>
                                        <label for="form-member-nohp" class="form-label">No HP</label>
                                        <div class="form-control" id="form-member-nohp">&nbsp;</div>
                                    </div>
                                </div>
                            </div>
                            {{-- End::Manage data anggota --}}

                            {{-- Start::Manage data buku pinjaman --}}
                            <div class="list-group-item bg-secondary text-white">
                                <div class="d-flex gap-3 align-items-center">
                                    <span>Daftar Buku Pinjaman</span>
                                    <button class="btn btn-info btn-sm" data-aksi="tambah-buku-pinjaman"><i class="bi bi-plus-lg"></i> Tambah Buku</button>
                                </div>
                            </div>
                            <div class="list-group-item" id="section-data-buku"></div>
                            {{-- End::Manage data buku pinjaman --}}
                        </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-peminjaman"><i class="bi bi-floppy"></i> Simpan</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End::Modal tambah / ubah data anggota --}}
    </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>
        $(document).ready(function() {
            /* -------------------Start::Instantiate all page props----------------------------- */
            // Hitung 28 hari dari hari ini
            const futureDate = new Date();
            futureDate.setDate(futureDate.getDate() + 28);

            const datepicker_opts = {
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true,
                yearRange: '1960:2050',
                showAnim: 'fadeIn',
            };
            const modal_opts = {
                backdrop: 'static',
                keyboard: false,
            };
            const el_modal_form_peminjaman = `div#modal-form-peminjaman`;
            const modal_form_peminjaman = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_form_peminjaman), modal_opts);
            /* -------------------End::Instantiate all page props----------------------------- */

            const id_table = `#tabel-peminjaman`;
            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,
                serverSide: true,
                processing: true,
                ajax: {
                    url: `{{ route('web-api-v1-rents-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 (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 Anggota',
                        data: 'member_id',
                        className: 'text-center',
                    },
                    {
                        title: 'Nama',
                        data: 'name',
                    },
                    {
                        title: 'No HP',
                        data: 'phone',
                        className: 'text-center',
                    },
                    {
                        title: 'Jumlah Buku',
                        data: 'jumlah_buku',
                    },
                    {
                        title: 'Tanggal Pengembalian Terdekat',
                        data: 'nearest_due_date_display',
                    },
                    {
                        title: 'Status',
                        data: 'rent_status_display',
                    },
                    {
                        title: 'Aksi',
                        data: 'id',
                        render: (data, type, row) => {
                            let html = "";
                            @can('view-detail-pinjaman')
                            html += `<button type="button" class="btn btn-info" data-aksi="detail-peminjaman" data-bs-toggle="tooltip" title="Detail Pinjaman Anggota" data-bs-placement="top"><i class="bi bi-book"></i></button>`;
                            @endcan
                            return html;
                        },
                    },
                ],
                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="=" id="id-member" name="member_id" placeholder="">
                        <label for="id-member">ID Anggota</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" operator="like" id="nama" name="name" placeholder="">
                        <label for="nama">Nama</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-pinjaman-baru')
                        <button type="button" class="btn btn-secondary" aksi="tambah-pinjaman"><i class="bi bi-file-earmark-plus"></i> Pinjaman Baru</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-pinjaman].btn-secondary', () => {
                    modal_form_peminjaman.show();
                });

            // event handler datatable
            @can('view-detail-pinjaman')
            $(`${id_table} tbody`)
                .on('click', 'button[data-aksi=detail-peminjaman]', function() {
                    const dt = datatable.row($(this).closest('tr')).data();
                    $(el_modal_form_peminjaman).trigger('form:fill', dt);
                    modal_form_peminjaman.show();
                });
            @endcan

            /* ====================Start::Setup autocomplete area==================== */
            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_peminjaman,
                    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');
                    },
                });
            };
            /* ====================End::Setup autocomplete area==================== */

            let id_section_buku = 0; // ini untuk bedain id inputan di section buku
            let last_query = ''; // ini untuk bagian autocomplete
            $(el_modal_form_peminjaman)
                .on('shown.bs.modal', (e) => {
                    if (!$(el_modal_form_peminjaman).find('div#section-data-anggota input[input-type=jqueryui-autocomplete]').data('ui-autocomplete')) {
                        $(el_modal_form_peminjaman).find('div#section-data-anggota input[input-type=jqueryui-autocomplete]').trigger('autocomplete:init');
                    }
                    if ($(el_modal_form_peminjaman).find('div#section-data-buku > div[name=list_buku]').length === 0) {
                        $(el_modal_form_peminjaman).trigger('add:buku');
                    }
                })
                .on('form:fill', async (e, data) => {
                    $(el_modal_form_peminjaman).find('input#form-nama').val(data.name).data('memberId', data.member_id).data('rentUniqueId', data.unique_id);
                    $(el_modal_form_peminjaman).find('div#form-member-id').html(data.member_id);
                    $(el_modal_form_peminjaman).find('div#form-member-nohp').html(data.phone);

                    setTimeout(() => {
                        $(el_modal_form_peminjaman).trigger('fetch:buku', data.unique_id);
                    }, 500);
                })
                .on('error-message:fill', (e, errors) => {
                    $(el_modal_form_peminjaman).find(`input, select, textarea`).removeClass('border-warning');
                    $(el_modal_form_peminjaman).find(`div[data-error-field*=msg_]`).html('');

                    for (err in errors) {
                        $(el_modal_form_peminjaman).find(`input[name=${err}], select[name=${err}], textarea[name=${err}]`).addClass('border-warning');
                        $(el_modal_form_peminjaman).find(`div[data-error-field=msg_${err}]`).html(errors[err][0]);
                    }
                })
                .on('fetch:buku', async (e, rent_unique_id) => {
                    // proses cek sudah pernah ada pinjaman atau belum
                    try {
                        $(el_modal_form_peminjaman).trigger('modal:disabled', true);
                        $(`${el_modal_form_peminjaman} div.modal-body div#section-data-buku`).html(`<div class="d-flex align-items-center justify-content-center gap-2 info-screen">
                            <div class="spinner-border spinner-border-sm text-secondary" role="status" aria-hidden="true"></div>
                            <span>Loading (sedang memuat data)...</span>
                        </div>`);

                        const result = await $.ajax({
                            type: 'GET',
                            url: `{{ route('web-api-v1-rents-search', ['uuid' => ':unique_id']) }}`.replace(':unique_id', rent_unique_id),
                        });

                        showToast(result);
                        $(el_modal_form_peminjaman).trigger('add-bulk:buku', [ result.data ]);
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan saat memuat data',
                        });
                    } finally {
                        $(el_modal_form_peminjaman).trigger('modal:disabled', false);
                    }
                })
                .on('add:buku', (e, data) => {
                    id_section_buku += 1;
                    $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku`).append(`<div class="row mb-2" name="list_buku">
                        <div class="col-12 col-lg-3">
                            <label for="form-kode-eksemplar" class="form-label">Kode Eksemplar <small class="text-danger">* required</small></label>
                            <input type="text" input-type="jqueryui-autocomplete" class="form-control" name="kode_eksemplar" id="form-kode-eksemplar-${id_section_buku}" placeholder="Kode Eksemplar">
                            <div class="text-danger" data-error-field="msg_kode_eksemplar"></div>
                        </div>

                        <div class="col-12 col-lg-5">
                            <label for="form-judul-buku" class="form-label">Judul Buku</label>
                            <div class="form-control" name="judul_buku">&nbsp;</div>
                        </div>

                        <div class="col-12 col-lg-3">
                            <label for="form-tgl-pengembalian" class="form-label">Tanggal Pengembalian</label>
                            <input type="text" input-type="jqueryui-datepicker" class="form-control" name="tgl_pengembalian" id="form-tgl-pengembalian-${id_section_buku}" placeholder="Tanggal Pengembalian (dd/mm/yyyy)" >
                            <div class="text-danger" data-error-field="msg_tgl_pengembalian"></div>
                        </div>

                        <div class="col-12 col-lg-1">
                            <div class="d-flex justify-content-end align-items-end h-100">
                                <button class="btn btn-outline-danger" data-aksi="hapus-baris" data-bs-toggle="tooltip" title="Hapus baris" data-bs-placement="top"><i class="bi bi-trash"></i></button>
                            </div>
                        </div>
                    </div>`);

                    $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku > div[name=list_buku]:last-child input[input-type=jqueryui-autocomplete]`).trigger('autocomplete:init');
                    $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku > div[name=list_buku]:last-child input[input-type=jqueryui-datepicker]`).trigger('datepicker:init');
                    $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku > div[name=list_buku]:last-child [data-bs-toggle=tooltip]`).tooltip();

                    if (data !== undefined) {
                        $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku > div[name=list_buku]:last-child input[input-type=jqueryui-autocomplete]`).val(data.copy_id).data('kodeEksemplar', data.copy_id);
                        $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku > div[name=list_buku]:last-child div.form-control[name=judul_buku]`).html(data.title);
                        $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku > div[name=list_buku]:last-child input[input-type=jqueryui-datepicker]`).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', data.expected_return_date));
                    }
                })
                .on('add-bulk:buku', (e, data) => {
                    $(`${el_modal_form_peminjaman} div.modal-body div#section-data-buku`).html('');
                    data.forEach((item, index) => {
                        $(el_modal_form_peminjaman).trigger('add:buku', [ item ]);
                    });
                })
                .on('input', 'input[name=kode_eksemplar]', (e) => {
                    $(e.currentTarget).data('kodeEksemplar', null);
                    $(e.currentTarget).closest('div.row[name=list_buku]').find('div.form-control[name=judul_buku]').html('&nbsp;');
                })
                .on('autocomplete:init', 'input[name=nama]', (e) => {
                    search_autocomplete($(e.currentTarget), async function (request, response) {
                        try {
                            last_query = request.term;
                            const result = await $.ajax({
                                type: 'GET',
                                url: `{{ route('web-api-v1-members-lists') }}`, // 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.name + ' (' + item.member_id + ' - ' + (item.phone || '-') + ')',
                                        value: item.name,
                                        id: item.member_id,
                                    };
                                }));
                            }
                        } catch (err) {
                            showToast({
                                status: err?.responseJSON?.status || 'error',
                                message: err?.responseJSON?.message || 'Terjadi kesalahan pada proses pencarian nama',
                            });
                            response([]);
                        }
                    }, function (event, ui) {
                        // ✅ This refers to the input field where user is typing
                        const $input = $(this);
                        $input.data('memberId', ui.item.member_id).data('rentUniqueId', ui.item.rent_unique_id);
                        $('#form-member-id').html(ui.item.member_id);
                        $('#form-member-nohp').html(ui.item.phone);
                        $(el_modal_form_peminjaman).trigger('fetch:buku', [ ui.item.rent_unique_id ]);
                    });
                })
                .on('autocomplete:init', 'input[name=kode_eksemplar]', (e) => {
                    search_autocomplete($(e.currentTarget), async function (request, response) {
                        try {
                            last_query = request.term;
                            const result = await $.ajax({
                                type: 'GET',
                                url: `{{ route('web-api-v1-books-lists-copies') }}`, // 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: last_query + ' (' + item.title + ')',
                                        value: last_query,
                                        id: last_query,
                                    };
                                }));
                            }
                        } catch (err) {
                            showToast({
                                status: err?.responseJSON?.status || 'error',
                                message: err?.responseJSON?.message || 'Terjadi kesalahan pada proses pencarian nama',
                            });
                            response([]);
                        }
                    }, function (event, ui) {
                        // ✅ This refers to the input field where user is typing
                        const $input = $(this);
                        $input.data('kodeEksemplar', ui.item.id);
                        $input.closest('div.row[name=list_buku]').find('div.form-control[name=judul_buku]').html(ui.item.title);
                    });
                })
                .on('datepicker:init', 'input[input-type=jqueryui-datepicker]', function() {
                    $(this).datepicker(datepicker_opts);
                    $(this).datepicker('setDate', futureDate);
                })
                .on('datepicker:reset-value', 'input[input-type=jqueryui-datepicker]', (e) => {
                    $(e.currentTarget).datepicker('setDate', null);
                })
                .on('input', 'div.modal-body input[type=text].number-formatted', function() {
                    $(this).val(formatRupiah($(this).val()));
                })
                .on('modal:disabled', (e, state) => {
                    $(el_modal_form_peminjaman).find('input, textarea').attr('readonly', state);
                    $(el_modal_form_peminjaman).find('select, button').attr('disabled', state);
                    $(el_modal_form_peminjaman).find('input[input-type=jqueryui-autocomplete]').autocomplete("option", "disabled", state);
                    $(el_modal_form_peminjaman).find('input[input-type=jqueryui-datepicker]').datepicker("option", "disabled", state);

                    const button_trigger = state ? 'loading:set' : 'loading:clear';
                    $(el_modal_form_peminjaman).find('button[type=submit]').trigger(button_trigger);
                })
                .on('hidden.bs.modal', () => {
                    $(`${ el_modal_form_peminjaman } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[data-aksi=hapus-baris]', (e) => {
                    $(e.currentTarget).closest('div[name=list_buku]').remove();
                })
                .on('click', 'button[data-aksi=tambah-buku-pinjaman]', () => {
                    const max_buku_dipinjam = 4;
                    const jlh_buku_dipinjam = $(`${ el_modal_form_peminjaman } div.modal-body div#section-data-buku`).find('> div[name=list_buku]').length;

                    if (jlh_buku_dipinjam < max_buku_dipinjam) {
                        $(el_modal_form_peminjaman).trigger('add:buku');
                    }
                })
                .on('click', 'button[type=reset]', () => {
                    $(`${ el_modal_form_peminjaman } div.modal-body`).find('input, select').each((i, el) => {
                        if ($(el).attr('input-type') === "jqueryui-datepicker") {
                            $(el).trigger('datepicker:reset-value');
                            return true;
                        }
                        if ($(el).is('select')) {
                            $(el).val($(el).find('option:first').val());
                            return true; // untuk skip ke next each
                        }
                        $(el).val('');
                    });
                    $(`${ el_modal_form_peminjaman } div.form-control`).html('&nbsp;');
                    $(el_modal_form_peminjaman).find('div#section-data-buku').html('');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_form_peminjaman).trigger('modal:disabled', true);

                        let data = {
                            member_id: $(el_modal_form_peminjaman).find('input[input-type=jqueryui-autocomplete][name=nama]').data('memberId') || null,
                            books: [],
                        };
                        $(el_modal_form_peminjaman).find('div[name=list_buku]').each((i, el) => {
                            data.books.push({
                                copy_id: $(el).find('input[input-type=jqueryui-autocomplete][name=kode_eksemplar]').data('kodeEksemplar') || null,
                                return_date: $.datepicker.formatDate('yy-mm-dd', $(el).find('input[input-type=jqueryui-datepicker][name=tgl_pengembalian]').datepicker('getDate')),
                            });
                        });

                        const result = await $.ajax({
                            type: 'POST',
                            url: `{{ route('web-api-v1-rents-create') }}`,
                            data,
                        });

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