@extends('layouts.app')

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

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

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tabel-pengguna" 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 pengguna --}}
        <div class="modal fade" id="modal-form-pengguna" tabindex="-1" aria-labelledby="label-modal-form-pengguna" 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-pengguna"><span preview="aksi">Tambah</span> Data Pengguna</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-username" class="form-label">Username <small class="text-danger">* required</small></label>
                                <input type="text" class="form-control" name="username" id="form-username" placeholder="Username" required>
                                <div class="text-danger" data-error-field="msg_username"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-nama" class="form-label">Nama <small class="text-danger">* required</small></label>
                                <input type="text" class="form-control" name="nama" id="form-nama" placeholder="Nama">
                                <div class="text-danger" data-error-field="msg_nama"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-email" class="form-label">E-mail <small class="text-danger">* required</small></label>
                                <input type="email" class="form-control" name="email" id="form-email" placeholder="E-mail" >
                                <div class="text-danger" data-error-field="msg_email"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-peran" class="form-label">Peran <small class="text-danger">* required</small></label>
                                <select class="form-select" name="role" id="form-peran">
                                    <option value="Kepala Perpustakaan">Kepala Perpustakaan</option>
                                    <option value="Pustakawan">Pustakawan</option>
                                </select>
                                <div class="text-danger" data-error-field="msg_role"></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-pengguna"><i class="bi bi-floppy"></i> Simpan</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End::Modal tambah / ubah data pengguna --}}

        {{-- Start::Modal hapus anggota --}}
        <div class="modal fade" id="modal-hapus-pengguna" tabindex="-1" aria-labelledby="label-modal-hapus-pengguna" 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-pengguna">Hapus Pengguna</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 pengguna 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 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----------------------------- */
            const modal_opts = {
                backdrop: 'static',
                keyboard: false,
            };
            const el_modal_form_pengguna = `div#modal-form-pengguna`;
            const modal_form_pengguna = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_form_pengguna), modal_opts);
            const el_modal_hapus_pengguna = `div#modal-hapus-pengguna`;
            const modal_hapus_pengguna = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_hapus_pengguna), modal_opts);
            /* -------------------End::Instantiate all page props----------------------------- */

            const id_table = `#tabel-pengguna`;
            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: [
                    { username: 'username1', nama: 'Member 01', email: 'username1@example.net', role: 'Kepala Perpustakaan', status: 'Active' },
                    { username: 'username2', nama: 'Member 02', email: 'username2@example.net', role: 'Pustakawan', status: 'Active' },
                    { username: 'username3', nama: 'Member 03', email: 'username3@example.net', role: 'Pustakawan', status: 'Active' },
                    { username: 'username4', nama: 'Member 04', email: 'username4@example.net', role: 'Pustakawan', status: 'Active' },
                    { username: 'username5', nama: 'Member 05', email: 'username5@example.net', role: 'Pustakawan', status: 'Active' },
                    { username: 'username6', nama: 'Member 06', email: 'username6@example.net', role: 'Pustakawan', 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: 'Username',
                        data: 'username',
                    },
                    {
                        title: 'Nama',
                        data: 'nama',
                    },
                    {
                        title: 'Email',
                        data: 'email',
                    },
                    {
                        title: 'Peran',
                        data: 'role',
                    },
                    {
                        title: 'Status',
                        data: 'status',
                    },
                    {
                        title: 'Aksi',
                        data: 'id',
                        render: (data, type, row) => {
                            return `<button type="button" class="btn btn-warning" data-aksi="edit-pengguna" 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-pengguna" 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="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-pengguna')
                        <button type="button" class="btn btn-secondary" aksi="tambah-pengguna"><i class="bi bi-file-earmark-plus"></i> Tambah Pengguna</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-pengguna].btn-secondary', () => {
                    modal_form_pengguna.show();
                });

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

            $(el_modal_form_pengguna)
                .on('form:fill', (e, data) => {
                    $(`${ el_modal_form_pengguna} span[preview=aksi]`).html('Ubah');
                    $(`${ el_modal_form_pengguna } div.modal-body`).find('input, select, textarea').each(function() {
                        let key = $(this).attr('name');
                        $(this).val(data[key]);
                    });
                })
                .on('error-message:fill', (e, errors) => {
                    $(el_modal_form_pengguna).find(`input, select, textarea`).removeClass('border-warning');
                    $(el_modal_form_pengguna).find(`div[data-error-field*=msg_]`).html('');

                    for (err in errors) {
                        $(el_modal_form_pengguna).find(`input[name=${err}], select[name=${err}], textarea[name=${err}]`).addClass('border-warning');
                        $(el_modal_form_pengguna).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_pengguna } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[type=reset]', () => {
                    $(`${ el_modal_form_pengguna } 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_pengguna} span[preview=aksi]`).html('Tambah');
                })
                .on('modal:disabled', (e, state) => {
                    $(el_modal_form_pengguna).find('input, select, textarea').attr('readonly', state);
                    $(el_modal_form_pengguna).find('button').attr('disabled', state);
                    $(el_modal_form_pengguna).find('button[type=submit]').trigger(state ? 'loading:set' : 'loading:clear');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_form_pengguna).trigger('modal:disabled', true);

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

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

            $(el_modal_hapus_pengguna)
                .on('modal:disabled', (e, state) => {
                    $(el_modal_hapus_pengguna).find('input, select, textarea').attr('readonly', state);
                    $(el_modal_hapus_pengguna).find('button').attr('disabled', state);
                    $(el_modal_hapus_pengguna).find('button[type=submit]').trigger(state ? 'loading:set' : 'loading:clear');
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $(el_modal_hapus_pengguna).trigger('modal:disabled', true);

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

                        showToast({
                            status: 'success',
                            message: 'Data telah berhasil dihapus',
                        });
                        modal_hapus_pengguna.hide();
                    } catch (err) {
                        showToast({
                            status: 'error',
                            message: 'Penghapusan data gagal',
                        });
                    } finally {
                        $(el_modal_hapus_pengguna).trigger('modal:disabled', false);
                    }
                });
        });
    </script>
@endpush