@extends('layouts.app')

@section('title', 'Iuran Program')

@push('style')
    {{-- sweetalert2 --}}
    <link rel="stylesheet" href="{{ asset('extensions/sweetalert2/sweetalert2.min.css') }}">

    {{-- Data Table --}}
    <link rel="stylesheet" href="{{ asset('extensions/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('compiled/css/table-datatable-jquery.css') }}">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
@endpush

@section('main')

    <div class="page-heading">
        <div class="page-title">
            <div class="row">
                <div class="col-12 col-md-6 order-md-1 order-last">
                    <h3>Iuran Program</h3>
                    <p class="text-subtitle text-muted">Halaman untuk melihat data iuran.</p>
                </div>
                <div class="col-12 col-md-6 order-md-2 order-first">
                    <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Iuran Program</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    @role('bendahara')
        <section class="section">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <form id="formIuranProgram" class="needs-validation" enctype="multipart/form-data"
                                data-parsley-validate>
                                @csrf
                                <div class="card-header">
                                    <h6>Input Iuran Program</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12 col-lg-6 col-md-8">
                                            <div class="form-group mandatory anggota_container">
                                                <label for="anggota-select" class="form-label">Anggota</label>
                                                <select name="anggota" id="anggota-select" class="form-select"
                                                    data-parsley-required="true">
                                                    <option value=""> - Pilih Anggota - </option>
                                                    @foreach ($anggotas as $anggota)
                                                        <option value="{{ $anggota->id }}">{{ $anggota->nama }}</option>
                                                    @endforeach
                                                </select>
                                                <ul class="parsley-error filled p-0 anggota_hidden" hidden>
                                                    <span class="parsley-required anggota_error_message"></span>
                                                </ul>
                                            </div>
                                            <div class="form-group mandatory program_container">
                                                <label for="program-select" class="form-label">Program</label>
                                                <select name="program" id="program-select" class="form-select"
                                                    data-parsley-required="true">
                                                    <option value=""> - Pilih Program - </option>
                                                    @foreach ($programs as $program)
                                                        <option value="{{ $program->id }}">{{ $program->program }}</option>
                                                    @endforeach
                                                </select>
                                                <ul class="parsley-error filled p-0 program_hidden" hidden>
                                                    <span class="parsley-required program_error_message"></span>
                                                </ul>
                                            </div>
                                            <div class="form-group mandatory nominal_container">
                                                <label for="nominal" class="form-label">Nominal</label><br>
                                                <div class="input-group mb-3">
                                                    <span class="input-group-text" id="basic-addon1">Rp</span>
                                                    <input type="text" name="nominal" id="nominal" class="form-control"
                                                        data-parsley-required="true" placeholder="Nominal">
                                                </div>
                                                <ul class="parsley-error filled p-0 nominal_hidden" hidden>
                                                    <span class="parsley-required nominal_error_message"></span>
                                                </ul>
                                            </div>
                                            <div class="form-group catatan_container">
                                                <label for="catatan" class="form-label">Catatan</label><br>
                                                <textarea name="catatan" id="catatan" cols="30" rows="5" class="form-control"></textarea>
                                                <ul class="parsley-error filled p-0 catatan_hidden" hidden>
                                                    <span class="parsley-required catatan_error_message"></span>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="float-end">
                                                <button type="submit" class="btn btn-primary" id="btnSubmitFormStore">
                                                    <span class="spinner-border spinner-border-sm" id="loaderStore"
                                                        aria-hidden="true" hidden></span>
                                                    <span role="status" id="statusButtonStore">Simpan</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endrole
    <section class="section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-4">
                                    <h6>Tabel Iuran Program</h6>
                                </div>
                                {{-- @role('bendahara')
                                    <div class="col-8">
                                        <div class="float-end">
                                            <a href="{{ route('iuran.create') }}" class="btn btn-primary">Input
                                                Iuran</a>
                                        </div>
                                    </div>
                                @endrole --}}
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                {{ $dataTable->table() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- modal Add Surat Berobat --}}
    <div class="modal modal-borderless fade" id="modal-edit" tabindex="-1" aria-labelledby="modal-editLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" id="formUpdateIuran" data-parsley-validate>
                    @csrf
                    <input type="hidden" id="iuran_program_id">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="modalAddObatRacikLabel">Edit Data Iuran</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mandatory anggota_container">
                            <label for="anggota" class="form-label">Anggota</label>
                            <select name="anggota" id="anggota-update-select" class="form-select"
                                data-parsley-required="true">
                                <option value=""> - Pilih Anggota - </option>
                                @foreach ($anggotas as $anggota)
                                    <option value="{{ $anggota->id }}">{{ $anggota->nama }}</option>
                                @endforeach
                            </select>
                            <ul class="parsley-error filled p-0 anggota_hidden" hidden>
                                <span class="parsley-required anggota_error_message"></span>
                            </ul>
                        </div>
                        <div class="form-group mandatory program_container">
                            <label for="program" class="form-label">Program</label>
                            <select name="program" id="program-update-select" class="form-select"
                                data-parsley-required="true">
                                <option value=""> - Pilih Program - </option>
                                @foreach ($programs as $program)
                                    <option value="{{ $program->id }}">{{ $program->program }}</option>
                                @endforeach
                            </select>
                            <ul class="parsley-error filled p-0 program_hidden" hidden>
                                <span class="parsley-required program_error_message"></span>
                            </ul>
                        </div>
                        <div class="form-group mandatory nominal_update_container">
                            <label for="nominal_update" class="form-label">Nominal</label><br>
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">Rp</span>
                                <input type="text" name="nominal" id="nominal_update" class="form-control"
                                    data-parsley-required="true" placeholder="Nominal">
                            </div>
                            <ul class="parsley-error filled p-0 nominal_update_hidden" hidden>
                                <span class="parsley-required nominal_update_error_message"></span>
                            </ul>
                        </div>
                        <div class="form-group catatan_update_container">
                            <label for="catatan_update" class="form-label">Catatan</label><br>
                            <textarea name="catatan_update" id="catatan_update" cols="30" rows="5" class="form-control"
                                placeholder="Catatan ..."></textarea>
                            <ul class="parsley-error filled p-0 catatan_update_hidden" hidden>
                                <span class="parsley-required catatan_update_error_message"></span>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="btn-cancel-surat-berobat"
                            data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="btnSubmitForm">
                            <span class="spinner-border spinner-border-sm" id="loader" aria-hidden="true"
                                hidden></span>
                            <span role="status" id="statusButton">Simpan</span>
                        </button>
                    </div>
                </form>
            </div>
            </form>
        </div>
    </div>
@endsection

@push('script')
    {{-- Library Jquery --}}
    <script src="{{ asset('extensions/jquery/jquery.min.js') }}"></script>
    {{-- Sweetalert2 --}}
    <script src="{{ asset('extensions/sweetalert2/sweetalert2.min.js') }}"></script>

    {{-- Library Data Table --}}
    <script src="{{ asset('extensions/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('extensions/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('static/js/pages/datatables.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    {{-- Validation --}}
    <script src="{{ asset('extensions/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('static/js/pages/parsley.js') }}"></script>

    <!-- Yajra DataTables -->
    {{ $dataTable->scripts() }}

    {{-- Costom Alert --}}
    <script>
        const Swal2 = Swal.mixin({
            customClass: {
                input: 'form-control'
            }
        })

        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
    </script>

    {{-- Rupiah Formater --}}
    <script>
        function formatRupiah(angka) {
            angka = angka ? angka.toString() : '';
            let number_string = angka.replace(/[^,\d]/g, '');
            let split = number_string.split(',');
            let sisa = split[0].length % 3;
            let rupiah = split[0].substr(0, sisa);
            let ribuan = split[0].substr(sisa).match(/\d{3}/gi);

            if (ribuan) {
                let separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] !== undefined ? rupiah + ',' + split[1] : rupiah;
            return rupiah;
        }

        document.getElementById('nominal').addEventListener('input', function(e) {
            let value = e.target.value;
            e.target.value = formatRupiah(value);
        });

        document.getElementById('nominal_update').addEventListener('input', function(e) {
            let value = e.target.value;
            e.target.value = formatRupiah(value);
        });
    </script>

    @include('pages.iuran-program.backends.input-iuran')
    @include('pages.iuran-program.backends.update-iuran')
@endpush