@extends('layouts.app')

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

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

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tabel-master-anggota" 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-anggota" tabindex="-1" aria-labelledby="label-modal-form-anggota" 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-anggota"><span preview="aksi">Tambah</span> Data Anggota</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" id="form-id" name="unique_id" />
                            <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="name" id="form-nama" placeholder="Nama" required>
                                <div class="text-danger" data-error-field="msg_name"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-jenis-kelamin" class="form-label">Jenis Kelamin <small class="text-danger">* required</small></label>
                                <div class="d-flex gap-2">
                                    @foreach($ddl_gender as $index => $gender)
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="{{ $gender['label'] }}" value="{{ $gender['value'] }}">
                                        <label class="form-check-label" for="{{ $gender['label'] }}">{{ $gender['text'] }}</label>
                                    </div>
                                    @endforeach
                                </div>
                                <div class="text-danger" data-error-field="msg_gender"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-no-hp" class="form-label">No HP <small class="text-danger">* required</small></label>
                                <input type="text" accepted="integer" class="form-control" name="phone" id="form-no-hp" placeholder="No HP" required>
                                <div class="text-danger" data-error-field="msg_phone"></div>
                            </div>
                            <div class="col-12">
                                <label for="form-tgl-lahir" class="form-label">Tanggal Lahir</label>
                                <input type="text" input-type="jqueryui-datepicker" class="form-control" name="birth_date" id="form-tgl-lahir" placeholder="Tanggal Lahir (dd/mm/yyyy)" >
                                <div class="text-danger" data-error-field="msg_birth_date"></div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-end">
                                    <label for="form-alamat" class="form-label">Alamat</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="address" id="form-alamat" rows="5" placeholder="Alamat"></textarea>
                                <div class="text-danger" data-error-field="msg_address"></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 anggota --}}

        {{-- Start::Modal hapus anggota --}}
        <div class="modal fade" id="modal-hapus-anggota" tabindex="-1" aria-labelledby="label-modal-hapus-anggota" 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-anggota">Hapus Anggota</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="form-hapus-id" name="unique_id" />
                        <p>Anda akan menghapus data 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 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_anggota = `div#modal-form-anggota`;
            const modal_form_anggota = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_form_anggota), modal_opts);
            const el_modal_hapus_anggota = `div#modal-hapus-anggota`;
            const modal_hapus_anggota = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_hapus_anggota), modal_opts);

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

            const id_table = `#tabel-master-anggota`;
            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-members-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() {
                            const key = $(this).attr('name');
                            const operator = $(this).attr('operator') || "=";
                            let val = $(this).val();

                            if ($(this).attr('input-type') === 'jqueryui-datepicker') {
                                val = $.datepicker.formatDate('yy-mm-dd', $(this).datepicker('getDate'));
                            }

                            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 Anggota',
                        data: 'nama_anggota',
                    },
                    {
                        title: 'Jenis Kelamin',
                        data: 'jenis_kelamin',
                    },
                    {
                        title: 'Tanggal Lahir',
                        data: 'tgl_lahir',
                    },
                    {
                        title: 'No HP',
                        data: 'phone',
                        className: 'text-center',
                    },
                    {
                        title: 'Alamat',
                        data: 'address',
                    },
                    {
                        title: 'Tanggal Daftar',
                        data: 'tgl_daftar',
                    },
                    {
                        title: 'Status',
                        data: 'status_display',
                    },
                    {
                        title: 'Aksi',
                        data: 'unique_id',
                        className: 'd-flex gap-2 justify-content-center',
                        render: (data, type, row) => {
                            let html = "";
                            @can('ubah-anggota')
                            html += `<button type="button" class="btn btn-warning" data-aksi="edit-anggota" data-bs-toggle="tooltip" title="Ubah data" data-bs-placement="top"><i class="bi bi-pencil-square"></i></button>`
                            @endcan
                            @can('hapus-anggota')
                            html += `<button type="button" class="btn btn-danger" data-aksi="hapus-anggota" data-bs-toggle="tooltip" title="Hapus data" data-bs-placement="top"><i class="bi bi-trash"></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="like" 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="form-floating">
                        <input type="text" input-type="jqueryui-datepicker" class="form-control" operator="=" id="tgl-lahir" name="birth_date" placeholder="">
                        <label for="tgl-lahir">Tanggal Lahir</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-anggota')
                        <button type="button" class="btn btn-secondary" aksi="tambah-anggota"><i class="bi bi-file-earmark-plus"></i> Tambah Anggota</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() {
                        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-anggota].btn-secondary', () => {
                    modal_form_anggota.show();
                });

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

            $(el_modal_form_anggota)
                .on('form:fill', (e, data) => {
                    $(`${ el_modal_form_anggota} span[preview=aksi]`).html('Ubah');
                    $(`${ el_modal_form_anggota } div.modal-body`).find('input, select, textarea').each((i, el) => {
                        const key = $(el).attr('name');
                        if ($(el).attr('input-type') === 'jqueryui-datepicker') {
                            $(el).datepicker('setDate', data[key] == null ? null : $.datepicker.parseDate('yy-mm-dd', data[key]));
                            return true;
                        }
                        if ($(el).is('input[type=radio]') && $(el).attr('value') === data[key]) {
                            $(el).prop('checked', true);
                            return true;
                        }
                        $(el).val(data[key]);
                    });
                })
                .on('error-message:fill', (e, errors) => {
                    $(el_modal_form_anggota).find(`input, select, textarea`).removeClass('border-warning');
                    $(el_modal_form_anggota).find(`div[data-error-field*=msg_]`).html('');

                    for (err in errors) {
                        $(el_modal_form_anggota).find(`input[name=${err}], select[name=${err}], textarea[name=${err}]`).addClass('border-warning');
                        $(el_modal_form_anggota).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_anggota } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[type=reset]', () => {
                    $(`${ el_modal_form_anggota } div.modal-body`).find('input, select').each((i, el) => {
                        if ($(el).attr('input-type') === 'jqueryui-datepicker') {
                            $(el).datepicker('setDate', null);
                            return true;
                        }
                        if ($(el).is('select')) {
                            $(el).val($(el).find('option:first').val());
                            return true; // untuk skip ke next each
                        }
                        if ($(el).is('input[type=radio]')) {
                            $(el).prop('checked', false);
                            return true; // untuk skip ke next each
                        }
                        $(el).val('');
                    });

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

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

                        const result = await $.ajax({
                            type: data.unique_id !== "" ? 'PATCH' : 'POST',
                            url: data.unique_id !== "" ? `{{ route('web-api-v1-members-update', ['uuid' => ':unique_id']) }}`.replace(':unique_id', data.unique_id) : `{{ route('web-api-v1-members-create') }}`,
                            data,
                        });

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

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

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

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

                        showToast(result);
                        datatable.ajax.reload();
                        modal_hapus_anggota.hide();
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan saat menghapus data',
                        });
                    } finally {
                        $(el_modal_hapus_anggota).trigger('modal:disabled', false);
                    }
                });

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