@extends('layouts.app')

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

@section('content')
    <div id="content-page">
        <div class="card mb-4">
            <div class="card-header">
                <div class="card-title fw-bold">Pengaturan Aplikasi</div>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-lg-4">
                        <table class="table table-borderless table-sm align-middle" id="form-config">
                            <tr>
                                <th>Max Pinjaman</th>
                                <th>:</th>
                                <td>
                                    <div class="input-group">
                                        <input type="text" class="form-control number-formatted text-end" placeholder="Maksimum jumlah pinjaman" aria-describedby="label-pinjaman">
                                        <span class="input-group-text" id="label-pinjaman">buku / orang</span>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <th>Durasi Keterlambatan</th>
                                <th>:</th>
                                <td>
                                    <select name="durasi" id="durasi" class="form-select">
                                        <option value="daily" data-preview="hari">Harian</option>
                                        <option value="weekly" data-preview="minggu">Mingguan</option>
                                        <option value="biweekly" data-preview="2 minggu">2 Mingguan</option>
                                        <option value="triweekly" data-preview="3 minggu">3 Mingguan</option>
                                        <option value="quadriweekly" data-preview="4 minggu">4 Mingguan</option>
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <th>Besaran Denda</th>
                                <th>:</th>
                                <td>
                                    <div class="input-group">
                                        <input type="text" class="form-control number-formatted text-end" placeholder="Besar Denda" aria-describedby="label-durasi">
                                        <span class="input-group-text" id="label-durasi">/ <span id="preview-durasi">minggu</span></span>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td colspan=3 class="text-end">
                                    <button type="submit" class="btn btn-secondary"><i class="bi bi-floppy"></i> Simpan</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endSection

@push('script')
    <script>
        $(document).ready(() => {
            $('#form-config')
                .on('form:disabled', (e, state) => {
                    $('#form-config').find('input, textarea').attr('readonly', state);
                    $('#form-config').find('select, button').attr('disabled', state);
                    $('#form-config').find('button[type=submit]').trigger(state ? 'loading:set' : 'loading:clear');
                })
                .on('input', 'input[type=text].number-formatted', function() {
                    $(this).val(formatRupiah($(this).val()));
                })
                .on('click', 'button[type=submit]', async () => {
                    try {
                        $('#form-config').trigger('form:disabled', true);

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

                        showToast(result);
                    } catch (err) {
                        showToast({
                            status: err?.responseJSON?.status || 'error',
                            message: err?.responseJSON?.message || 'Terjadi kesalahan saat menyimpan data',
                        });
                    } finally {
                        $('#form-config').trigger('form:disabled', false);
                    }
                });
        });
    </script>
@endpush