@extends('layouts.app')

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

@push('style')
    <style>
        div#section-data-anggota table.table tr:not(:first-child) th:first-child { width: 160px; }
        div#section-data-anggota table.table tr:not(:first-child) th:nth-child(2) { width: 10px; }
        div#section-data-anggota table.table td.fit-contain {
            width: 130px;
            text-align: center;
        }
        img.foto-profil-anggota {
            width: 100px;
            height: 160px;
            object-fit: contain;
        }
        img.cover-buku {
            width: 100px;
            height: 180px;
            object-fit: contain;
        }
        div#hasil-pencarian div#section-data-buku table tbody tr.active td {
            background-color: #6c757d;
            color: #efefef;
        }
        div#hasil-pencarian div.info-screen > div.spinner-border {
            width: 3rem;
            height: 3rem;
        }
        div#hasil-pencarian div.info-screen {
            font-size: 2rem;
            margin-top: 1rem;
        }
        #form-catatan { 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">Manajemen Pengembalian</div>
                    </div>

                    <div class="card-body">
                        <div id="pencarian-kode" class="d-flex gap-3 align-items-end mb-3">
                            <div>
                                <label for="form-kode-eksemplar" class="form-label">Kode Eksemplar <small class="text-danger">* required</small></label>
                                <input type="text" class="form-control" name="copy_id" id="form-kode-eksemplar" placeholder="Kode Eksemplar">
                                <div class="text-danger" data-error-field="msg_copy_id"></div>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-secondary"><i class="bi bi-search"></i> Cari Buku</button>
                            </div>
                        </div>

                        <div id="hasil-pencarian"></div>
                    </div>
                </div>
            </div>
            {{-- End::Tabel master anggota --}}
        </div>
        <!--end::Row-->

        {{-- Start::Modal pengembalian buku --}}
        <div class="modal fade" id="modal-pengembalian-buku" tabindex="-1" aria-labelledby="label-modal-pengembalian-buku" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="label-modal-pengembalian-buku">Pengembalian Buku</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="unique_id">
                        <p>Anda akan melakukan proses pengembalian buku. Apakah anda yakin?</p>

                        <div class="my-1">
                            <label for="form-denda-tertagih" class="form-label">Tagihan Denda</label>
                            <div class="form-control text-end" name="fine_amount_display" id="form-denda-tertagih">Rp 0</div>
                        </div>
                        <div class="my-1">
                            <label for="form-denda-terbayar" class="form-label">Terbayar</label>
                            <input type="text" class="form-control number-formatted text-end" name="terbayar" id="form-denda-terbayar" placeholder="Terbayar">
                            <div class="text-danger" data-error-field="msg_terbayar"></div>
                        </div>
                        <div class="my-1">
                            <label for="form-denda-tgl-bayar" class="form-label">Tanggal Bayar</label>
                            <input type="text" class="form-control" input-type="jqueryui-datepicker" name="tgl_bayar" id="form-denda-tgl-bayar" placeholder="Tanggal Pembayaran (dd/mm/yyyy)">
                            <div class="text-danger" data-error-field="msg_tgl_bayar"></div>
                        </div>
                        <div class="my-1">
                            <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 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-check-lg"></i> Yakin</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End::Modal pengembalian buku --}}
    </div>
@endSection

@push('script')
    <script>
        $(document).ready(() => {
            let rent_details = []; // buat temp variable

            /* -------------------Start::Instantiate all page props----------------------------- */
            $(document).find(`span[data-bs-toggle=tooltip]`).tooltip(); // semua tooltip di halaman ini bisa dipake
            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_pencarian_kode = 'div#pencarian-kode';
            const el_hasil_pencarian = 'div#hasil-pencarian';
            const el_modal_pengembalian_buku = `div#modal-pengembalian-buku`;
            const modal_pengembalian_buku = bootstrap.Modal.getOrCreateInstance($('#content-page').find(el_modal_pengembalian_buku), modal_opts);

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

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

                        let data = {};
                        $(el_pencarian_kode).find('input, select, textarea').each((i, el) => {
                            const key = $(el).attr('name');
                            data[key] = $(el).val();
                        });

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

                        rent_details = [ ...result.data.rent_details ];
                        showToast(result);
                        $(el_hasil_pencarian).trigger('content:fill', [ result.data ]);
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan pada proses pencarian kode eksemplar',
                        });
                        $(el_hasil_pencarian).trigger('error-result:set');
                    } finally {
                        $(el_pencarian_kode).trigger('form:disabled', false);
                    }
                });

            $(el_hasil_pencarian)
                .on('loading:set', (e) => {
                    $(e.currentTarget).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 mencari data)...</span>
                    </div>`);
                })
                .on('error-result:set', (e) => {
                    $(e.currentTarget).html(`<div class="d-flex align-items-center justify-content-center gap-2 info-screen">
                        <span><i class="bi bi-exclamation-diamond"></i></span>
                        <span>404 Not Found</span>
                    </div>`);
                })
                .on('books:populate', 'div#section-data-buku', (e, details) => {
                    const kode = $(el_pencarian_kode).find('input').val();
                    const daftar_buku = details.reduce((a, d, i) => {
                        let html = "";
                        html += `<tr class=\"${ (d.copy_id === kode || d.copy_id_old === kode) ? 'active' : '' }\">`;
                        html +=     `<td>${i + 1}</td>`;
                        html +=     `<td><img class=\"cover-buku\" src=\"${d.cover_buku}\" alt=\"Cover Buku\" /></td>`;
                        html +=     `<td>${d.copy_id}</td>`;
                        html +=     `<td>${d.title}</td>`;
                        html +=     `<td>${d.rent_date_display}</td>`;
                        html +=     `<td>${d.expected_return_date_display}</td>`;
                        html +=     `<td>${d.fine_amount_display}</td>`;
                        html +=     `<td>`;
                        html +=         `<button class=\"btn btn-info\" data-uuid=\"${d.unique_id}\" data-aksi=\"pengembalian\" data-bs-toggle=\"tooltip\" title=\"Proses Pengembalian Buku\" data-bs-placement=\"top\"><i class=\"bi bi-bookmark-check\"></i></button>`;
                        html +=     `</td>`;
                        html += `</tr>`;
                        return a + html;
                    }, "");

                    $(e.currentTarget).html(`<div class="table-responsive">
                        <table class="table table-hover text-center align-middle">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Cover Buku</th>
                                    <th>Kode Eksemplar</th>
                                    <th>Judul Buku</th>
                                    <th>Tanggal Peminjaman</th>
                                    <th>Tanggal Pengembalian</th>
                                    <th>Denda Keterlambatan</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>${daftar_buku}</tbody>
                        </table>
                    </div>`);
                })
                .on('content:fill', (e, dt) => {
                    $(e.currentTarget).html(`<div class="list-group list-group-flush">
                        <div class="list-group-item fw-bold">Data Anggota</div>
                        <div class="list-group-item" id="section-data-anggota">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <tr>
                                        <td rowspan=6 class="fit-contain"><img alt="Foto profil anggota" class="foto-profil-anggota" src="{{ asset('assets/img/default-150x150.png') }}" /></td>
                                    </tr>
                                    <tr>
                                        <th>Nama</th>
                                        <th>:</th>
                                        <td>${dt.name}</td>
                                    </tr>
                                    <tr>
                                        <th>ID Anggota</th>
                                        <th>:</th>
                                        <td>${dt.member_id}</td>
                                    </tr>
                                    <tr>
                                        <th>No HP</th>
                                        <th>:</th>
                                        <td>${dt.phone}</td>
                                    </tr>
                                    <tr>
                                        <th>Alamat</th>
                                        <th>:</th>
                                        <td>${dt.address}</td>
                                    </tr>
                                    <tr>
                                        <th>Terdaftar Sejak</th>
                                        <th>:</th>
                                        <td>${dt.tgl_daftar}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="list-group-item fw-bold">Daftar Buku</div>
                        <div class="list-group-item" id="section-data-buku"></div>
                    </div>`);

                    $(e.currentTarget).find('div#section-data-buku').trigger('books:populate', [ dt.rent_details ]);
                    $(e.currentTarget).find('[data-bs-toggle=tooltip]').tooltip();
                })
                .on('click', 'button[data-aksi=pengembalian]', (e) => {
                    // inject data juga ke modal
                    const dt_target = rent_details.filter((item) => item.unique_id === $(e.currentTarget).data('uuid'));
                    if (dt_target.length <= 0) {
                        showToast({
                            status: 'error',
                            message: 'Data tidak dikenali',
                        });
                    }
                    $(el_modal_pengembalian_buku).trigger('form:fill', [ dt_target[0] ])
                    modal_pengembalian_buku.show();
                });

            $(el_modal_pengembalian_buku)
                .on('shown.bs.modal', () => {
                    if (!$(el_modal_pengembalian_buku).find('input[input-type=jqueryui-datepicker]').data("datepicker")) {
                        $(el_modal_pengembalian_buku).find('input[input-type=jqueryui-datepicker]').trigger('datepicker:init');
                    }

                    $(el_modal_pengembalian_buku).find('input[input-type=jqueryui-datepicker]').datepicker('setDate', new Date());
                })
                .on('form:fill', (e, data) => {
                    $(`${ el_modal_pengembalian_buku } div.modal-body`).find('div[name], input').each((i, el) => {
                        const key = $(el).attr('name');

                        if ($(el).is('div')) {
                            $(el).html(data[key]);
                            return true;
                        }

                        $(el).val(data[key]);
                    });
                })
                .on('input', 'input.number-formatted', (e) => {
                    $(e.currentTarget).val(formatRupiah($(e.currentTarget).val()));
                })
                .on('datepicker:init', 'input[input-type=jqueryui-datepicker]', function() {
                    $(this).datepicker(datepicker_opts);
                })
                .on('hidden.bs.modal', () => {
                    $(`${ el_modal_pengembalian_buku } div.modal-footer button[type=reset]`).trigger('click');
                })
                .on('click', 'button[type=reset]', () => {
                    $(`${ el_modal_pengembalian_buku } div.modal-body`).find('div[name], input').each((e, el) => {
                        let key = $(el).attr('name');

                        if ($(el).is('div')) {
                            $(el).html('Rp 0');
                            return true;
                        }

                        if ($(el).attr('input-type') === 'jqueryui-datepicker') {
                            $(el).datepicker('setDate', new Date());
                            return true;
                        }

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

                        let data = {};
                        $(el_modal_pengembalian_buku).find('input, select, textarea').each((i, el) => {
                            const key = $(el).attr('name');
                            if ($(el).attr('input-type') === 'jqueryui-datepicker') {
                                data[key] = $.datepicker.formatDate('yy-mm-dd', $(el).datepicker('getDate'));
                                return;
                            }
                            if ($(el).hasClass('number-formatted')) {
                                data[key] = convertToAngka($(el).val());
                                return;
                            }
                            data[key] = $(el).val();
                        });

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

                        showToast(result);
                        modal_pengembalian_buku.hide();
                        rent_details = rent_details.filter((item) => item.unique_id !== data.unique_id);
                        if (rent_details.length <= 0) {
                            $(el_hasil_pencarian).html('');
                        } else {
                            $(el_hasil_pencarian).find('div#section-data-buku').trigger('books:populate', [ rent_details ]);
                        }
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan pada proses pengembalian buku',
                        });
                    } finally {
                        $(el_modal_pengembalian_buku).trigger('modal:disabled', false);
                    }
                });
        });
    </script>
@endpush