@extends('layouts.app')

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

@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-manajemen-denda > colgroup > col:nth-child(2) { width: 160px!important; }
        #tabel-manajemen-denda tbody tr td div.book-cover-area {
            text-align: center;
        }
        #tabel-manajemen-denda tbody tr td div.book-cover-area > img {
            width: 160px;
            height: 160px;
            object-fit: contain;
        }
        #tabel-manajemen-denda tbody tr td dl.info-list {
            text-align: start;
            margin: 0;
            padding: 0;
        }
        #tabel-manajemen-denda tbody tr td dl.info-list > div.item {
            display: flex;
            margin-bottom: 6px;
            white-space: wrap;
            line-height: 1;
        }
        #tabel-manajemen-denda tbody tr td dl.info-list > div.item > dt:nth-child(2) {
            margin: 0 5px;
        }
        #tabel-manajemen-denda tbody tr td dl.info-list > div.item > dt:first-child {
            font-weight: bold;
            min-width: 122.5px; /* bisa diatur sesuai kebutuhan */
        }
        #tabel-manajemen-denda tbody tr td dl.info-list > div.item > dd {
            margin: 0;
            flex: 1;
            white-space: nowrap;
        }
        #form-catatan { resize: none; }
    </style>
@endpush

@section('content')
    <div id="content-page">
        <!--begin::Row-->
        <div class="row">
            {{-- Start::Tabel manajemen denda --}}
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex flex-column">
                        <div class="card-title fw-bold">Manajemen Denda</div>
                        <small class="fst-italic">Catatan penerimaan atas denda dari keterlambatan pengembalian buku</small>
                    </div>

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

        {{-- Start::Modal tambah / ubah data denda --}}
        <div class="modal fade" id="modal-form-denda" tabindex="-1" aria-labelledby="label-modal-form-denda" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="label-modal-form-denda"><span preview="aksi">Tambah</span> Informasi Denda</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="id" id="form-id" />
                            <div class="col-12">
                                <label for="form-nama" class="form-label">Nama <small class="text-danger">* required</small></label>
                                <input type="text" input-type="jqueryui-autocomplete" class="form-control" name="nama" id="form-nama" placeholder="Nama" required>
                                <div class="text-danger" data-error-field="msg_nama"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-member-id" class="form-label">ID Anggota</label>
                                <div class="form-control" name="member_id" id="form-member-id" placeholder="ID Anggota">&nbsp;</div>
                            </div>
                            <div class="col-12">
                                <label for="form-tgl-bayar" class="form-label">Tanggal Bayar</label>
                                <input type="text" input-type="jqueryui-datepicker" class="form-control" name="tgl_bayar" id="form-tgl-bayar" placeholder="Tanggal Bayar (dd/mm/yyyy)" >
                                <div class="text-danger" data-error-field="msg_tgl_bayar"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-nominal-bayar" class="form-label">Nominal Pembayaran</label>
                                <input type="text" class="form-control number-formatted text-end" name="nominal_bayar" id="form-nominal-bayar" placeholder="Nominal Pembayaran">
                                <div class="text-danger" data-error-field="msg_nominal_bayar"></div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-end">
                                    <label for="form-catatan" class="form-label">Catatan</label>
                                    <small class="text-body-tertiary"><span id="jumlah-karakter">0</span> / <span id="max-karakter">300</span></small>
                                </div>
                                <textarea class="form-control" name="catatan" id="form-catatan" rows="5" placeholder="Catatan"></textarea>
                                <div class="text-danger" data-error-field="msg_catatan"></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 / ubah data denda --}}

        {{-- Start::Modal hapus denda --}}
        <div class="modal fade" id="modal-hapus-denda" tabindex="-1" aria-labelledby="label-modal-hapus-denda" 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-denda">Hapus Anggota</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 anggota 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 denda --}}

        {{-- Start::Modal download report denda --}}
        <div class="modal fade" id="modal-download-report-denda" tabindex="-1" aria-labelledby="label-modal-download-report-denda" 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-download-report-denda">Download Report</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="form-tgl-awal" class="form-label">Tanggal Awal</label>
                            <input type="text" input-type="jqueryui-datepicker" class="form-control" name="tgl_awal" id="form-tgl-awal" placeholder="Tanggal Awal (dd/mm/yyyy)" >
                            <div class="text-danger" data-error-field="msg_tgl_awal"></div>
                        </div>
                        <div>
                            <label for="form-tgl-akhir" class="form-label">Tanggal Akhir</label>
                            <input type="text" input-type="jqueryui-datepicker" class="form-control" name="tgl_akhir" id="form-tgl-akhir" placeholder="Tanggal Akhir (dd/mm/yyyy)" >
                            <div class="text-danger" data-error-field="msg_tgl_akhir"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-secondary"><i class="bi bi-journal-arrow-down"></i> Download</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End::Modal download report denda --}}
    </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----------------------------- */
            const modal_opts = {
                backdrop: 'static',
                keyboard: false,
            };
            const el_modal_form_denda = `div#modal-form-denda`;
            const modal_form_denda = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_form_denda), modal_opts);
            const el_modal_hapus_denda = `div#modal-hapus-denda`;
            const modal_hapus_denda = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_hapus_denda), modal_opts);
            const el_modal_download_report_denda = `div#modal-download-report-denda`;
            const modal_download_report_denda = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_download_report_denda), modal_opts);

            const max_character = 300;
            $(`${el_modal_form_denda} textarea#form-catatan`).on('input', (e) => {
                const val = $(e.currentTarget).val().substring(0, Math.min($(e.currentTarget).val().length, max_character));
                $(`${el_modal_form_denda} span#max-karakter`).html(max_character);
                $(`${el_modal_form_denda} span#jumlah-karakter`).html(val.length);
                $(e.currentTarget).val(val);
            });
            /* -------------------End::Instantiate all page props----------------------------- */

            const id_table = `#tabel-manajemen-denda`;
            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: '1', member_id: '2025001', nama: 'Member 01', tgl_bayar: '2025-01-02', nominal_bayar: 'Rp 10.000', remarks: 'Catatan tambahan' },
                    { id: '2', member_id: '2025002', nama: 'Member 02', tgl_bayar: '2025-01-12', nominal_bayar: 'Rp 15.000', remarks: 'Catatan tambahan' },
                    { id: '3', member_id: '2025003', nama: 'Member 03', tgl_bayar: '2025-03-03', nominal_bayar: 'Rp 5.000', remarks: 'Catatan tambahan' },
                    { id: '4', member_id: '2025004', nama: 'Member 04', tgl_bayar: '2025-09-17', nominal_bayar: 'Rp 10.000', remarks: 'Catatan tambahan' },
                    { id: '5', member_id: '2025005', nama: 'Member 05', tgl_bayar: '2025-08-19', nominal_bayar: 'Rp 20.000', remarks: 'Catatan tambahan' },
                    { id: '6', member_id: '2025006', nama: 'Member 06', tgl_bayar: '2025-05-08', nominal_bayar: 'Rp 15.000', remarks: 'Catatan tambahan' },
                ],
                // 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: 'Nama Anggota',
                        data: 'nama',
                    },
                    {
                        title: 'ID Anggota',
                        data: 'member_id',
                        className: 'text-center',
                    },
                    {
                        title: 'Tanggal Bayar',
                        data: 'tgl_bayar',
                        render: (data, type, row) => {
                            const dt = $.datepicker.parseDate('yy-mm-dd', data);
                            return $.datepicker.formatDate('dd/mm/yy', dt);
                        },
                    },
                    {
                        title: 'Nominal Terbayarkan',
                        data: 'nominal_bayar',
                    },
                    {
                        title: 'Catatan',
                        data: 'remarks',
                    },
                    {
                        title: 'Aksi',
                        data: 'id',
                        render: (data, type, row) => {
                            return `<button type="button" class="btn btn-warning" data-aksi="edit-denda" 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-denda" 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="nama" name="nama" placeholder="">
                        <label for="nama">Nama</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" input-type="jqueryui-datepicker" class="form-control" operator="=" id="tgl-bayar" name="tgl_bayar" placeholder="">
                        <label for="tgl-bayar">Tanggal Bayar</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control number-formatted text-end" operator="=" id="nominal" name="nominal" placeholder="">
                        <label for="nominal">Nominal</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 gap-2">
                        @can('download-report-denda')
                        <button type="button" class="btn btn-info" aksi="download-report"><i class="bi bi-journal-arrow-down"></i> Download</button>
                        @endcan
                        @can('tambah-denda')
                        <button type="button" class="btn btn-secondary" aksi="tambah-denda"><i class="bi bi-file-earmark-plus"></i> Input Denda</button>
                        @endcan
                    </div>
                </div>`;

            // handle event di filter area
            datatable_wrapper.find('#filter-area')
                .html(filter_fields)
                .on('input', 'input[type=text].number-formatted', function() {
                    $(this).val(formatRupiah($(this).val()));
                })
                .on('click', 'button[type=submit]', () => {
                    datatable.ajax.reload();
                })
                .on('click', 'button[type=reset]', () => {
                    datatable_wrapper.find('#filter-area input, #filter-area select').each(function() {
                        if ($(this).is('select')) {
                            $(this).val($(this).find('option:first').val());
                            return true;
                        }
                        if ($(this).attr('input-type') === "jqueryui-datepicker") {
                            $(this).datepicker('setDate', null);
                            return true;
                        }
                        $(this).val(null);
                    });
                    datatable.ajax.reload();
                })
                .on('click', 'button[aksi=tambah-denda].btn-secondary', () => {
                    modal_form_denda.show();
                })
                .on('click', 'button[aksi=download-report]', () => {
                    modal_download_report_denda.show();
                });

            // event handler datatable
            $(`${id_table} tbody`)
                .on('click', 'button[data-aksi=edit-denda]', function() {
                    const dt = datatable.row($(this).closest('tr')).data();
                    $(el_modal_form_denda).trigger('form:fill', dt);
                    modal_form_denda.show();
                })
                .on('click', 'button[data-aksi=hapus-denda]', async function() {
                    modal_hapus_denda.show();
                });

            $(el_modal_form_denda)
                .on('form:fill', (e, data) => {
                    $(`${ el_modal_form_denda} span[preview=aksi]`).html('Ubah');
                    $(`${ el_modal_form_denda } div.modal-body`).find('input, select, textarea, div[name]').each(function() {
                        let key = $(this).attr('name');
                        if ($(this).is('div')) {
                            $(this).html(data[key]);
                            return;
                        }
                        if ($(this).attr("input-type") === "jqueryui-datepicker") {
                            $(this).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', data[key]));
                            return;
                        }
                        $(this).val(data[key]);
                    });
                })
                .on('error-message:fill', (e, errors) => {
                    $(el_modal_form_denda).find(`input, select, textarea`).removeClass('border-warning');
                    $(el_modal_form_denda).find(`div[data-error-field*=msg_]`).html('');

                    for (err in errors) {
                        $(el_modal_form_denda).find(`input[name=${err}], select[name=${err}], textarea[name=${err}]`).addClass('border-warning');
                        $(el_modal_form_denda).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_denda } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[type=reset]', () => {
                    $(`${ el_modal_form_denda } div.modal-body`).find('input, select, div[name]').each(function() {
                        if ($(this).data('inputType') === "jqueryui-datepicker") {
                            $(this).datepicker('setDate', null);
                            return true;
                        }
                        if ($(this).is('div')) {
                            $(this).html('&nbsp;');
                            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_denda} span[preview=aksi]`).html('Tambah');
                })
                .on('modal:disabled', (e, state) => {
                    $(el_modal_form_denda).find('input, textarea').attr('readonly', state);
                    $(el_modal_form_denda).find('select, button').attr('disabled', state);
                    $(el_modal_form_denda).find('button[type=submit]').trigger(state ? 'loading:set' : 'loading:clear');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_form_denda).trigger('modal:disabled', true);

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

                        showToast(result);
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan saat menyimpan data',
                        });
                    } finally {
                        $(el_modal_form_denda).trigger('modal:disabled', false);
                    }
                });

            $(el_modal_hapus_denda)
                .on('hidden.bs.modal', () => {
                    $(`${ el_modal_form_denda } input[input-type=jqueryui-datepicker]`).trigger('value:reset');
                })
                .on('modal:disabled', (e, state) => {
                    $(el_modal_hapus_denda).find('input, textarea').attr('readonly', state);
                    $(el_modal_hapus_denda).find('select, button').attr('disabled', state);
                    $(el_modal_hapus_denda).find('button[type=submit]').trigger(state ? 'loading:set' : 'loading:clear');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_hapus_denda).trigger('modal:disabled', true);

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

                        showToast({
                            status: 'success',
                            message: 'Data telah berhasil dihapus',
                        });
                        modal_hapus_denda.hide();
                    } catch (err) {
                        // do something when error
                    } finally {
                        $(el_modal_hapus_denda).trigger('modal:disabled', false);
                    }
                });

            $('input[input-type=jqueryui-datepicker]').datepicker({
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true,
                yearRange: '1960:2050',
                showAnim: 'fadeIn',
            });

            $('input[input-type=jqueryui-datepicker]').on('value:reset', (e) => {
                $(e.currentTarget).datepicker('setDate', null);
            });
        });
    </script>
@endpush