@extends('layouts.app')

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

@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('css/table-datatable-jquery.css') }}"> --}}

    {{-- Select 2 --}}
    <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 Masal</h3>
                    <p class="text-subtitle text-muted">Halaman untuk input iuran masal.</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 Masal</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <section class="section">
        <div class="container-fluid">
            <div class="row mb-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Tabel Anggota</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="table-responsive">
                                    {{ $dataTable->table() }}
                                </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="inputAnggota">
                                            <span class="spinner-border spinner-border-sm" id="loaderAnggota"
                                                aria-hidden="true" hidden></span>
                                            <span role="status" id="statusButtonAnggota">Masukan ke data iuran</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-lg-4 col-md-4">
                    <div class="row">
                        <div class="card mb-2">
                            <div class="card-body">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" id="edit-satuan-tab" data-bs-toggle="tab"
                                            href="#edit-satuan" role="tab" aria-controls="edit-satuan"
                                            aria-selected="true">Edit
                                            Satuan</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="edit-masal-tab" data-bs-toggle="tab" href="#edit-masal"
                                            role="tab" aria-controls="edit-masal" aria-selected="false">Edit
                                            Masal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="edit-satuan" role="tabpanel"
                            aria-labelledby="edit-satuan-tab">
                            <div class="row">
                                <div class="card">
                                    <form id="formUpdateSatuan" class="needs-validation" data-parsley-validate>
                                        <div class="card-header">
                                            <h5>Form edit satuan</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="table-responsive">
                                                    @csrf
                                                    <input type="hidden" name="iuran_id" id="iuran_id">
                                                    <div class="form-group mandatory nama_container">
                                                        <label for="nama-column" class="form-label">Nama</label>
                                                        <input type="text" name="nama" id="nama-column"
                                                            class="form-control" placeholder="Nama"
                                                            value="{{ Cookie::get('nama') !== null ? Cookie::get('nama') : old('nama') }}"
                                                            data-parsley-required="true" disabled>
                                                        <ul class="parsley-error filled p-0 nama_hidden" hidden>
                                                            <span class="parsley-required nama_error_message"></span>
                                                        </ul>
                                                    </div>
                                                    <div class="form-group mandatory iuran_container">
                                                        <label for="iuran-column" class="form-label">Iuran</label>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text" id="basic-addon1">Rp</span>
                                                            <input type="number" name="iuran" id="iuran-column"
                                                                min="0" class="form-control" placeholder="Iuran"
                                                                value="{{ Cookie::get('iuran') !== null ? Cookie::get('iuran') : old('iuran') }}"
                                                                data-parsley-required="true">
                                                        </div>
                                                        <ul class="parsley-error filled p-0 iuran_hidden" hidden>
                                                            <span class="parsley-required iuran_error_message"></span>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group float-end">
                                                        <button type="submit" class="btn btn-primary"
                                                            id="btnSubmitDataSatuan" disabled>
                                                            <span class="spinner-border spinner-border-sm"
                                                                id="loaderDataSatuan" aria-hidden="true" hidden></span>
                                                            <span role="status" id="statusButtonDataSatuan">Update</span>
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-secondary btn-cancel-data-satuan"
                                                            onclick="defaultFormUpdateSatuan()" disabled>Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="edit-masal" role="tabpanel" aria-labelledby="edit-masal-tab">
                            <div class="row">
                                <div class="card">
                                    <form id="formUpdateMasal" class="needs-validation" data-parsley-validate>
                                        <div class="card-header">
                                            <h5>Form edit masal</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="table-responsive">
                                                    @csrf
                                                    <div class="form-group mandatory iuran_masal_container">
                                                        <label for="iuran_masal-column" class="form-label">Iuran</label>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text" id="basic-addon1">Rp</span>
                                                            <input type="number" name="iuran_masal"
                                                                id="iuran_masal-column" min="0"
                                                                class="form-control" placeholder="Iuran"
                                                                value="{{ Cookie::get('iuran_masal') !== null ? Cookie::get('iuran_masal') : old('iuran_masal') }}"
                                                                data-parsley-required="true">
                                                        </div>
                                                        <ul class="parsley-error filled p-0 iuran_masal_hidden" hidden>
                                                            <span
                                                                class="parsley-required iuran_masal_error_message"></span>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="form-group float-end">
                                                <button type="submit" class="btn btn-primary" id="btnSubmitDataMasal"
                                                    disabled>
                                                    <span class="spinner-border spinner-border-sm" id="loaderDataMasal"
                                                        aria-hidden="true" hidden></span>
                                                    <span role="status" id="statusButtonDataMasal">Update</span>
                                                </button>
                                                <button type="button" class="btn btn-secondary btn-cancel-data-masal"
                                                    onclick="defaultFormUpdateMasal()">Cancel</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-8 col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5>Table Detail Iuran</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-detail-iuran" id="dataTable" width="100%">
                                    <thead>
                                        <tr style="text-align: center">
                                            <th>No</th>
                                            <th>Anggota</th>
                                            <th>Nominal</th>
                                            <th>Iuran Bulan</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-nowrap">
                                    </tbody>
                                </table>
                            </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="btnSubmitValidasi"
                                            onclick="validate()">
                                            <span class="spinner-border spinner-border-sm" id="loaderValidasi"
                                                aria-hidden="true" hidden></span>
                                            <span role="status" id="statusButtonValidasi">Validasi</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@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>

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

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

    {{-- Select 2 --}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    {{-- 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>

    {{-- Datatable Detail Transaksi --}}
    <script>
        let dataTableDetailIuran = $('.table-detail-iuran').DataTable({
            autowidth: false,
            processing: true,
            serverSide: true,
            parameters: [{
                searchDelay: 1000
            }],
            ajax: '{{ route('datalist.masal.datatable') }}',
            columns: [{
                data: 'DT_RowIndex',
                class: 'text-center',
                searchable: false
            }, {
                data: 'anggota_id',
                class: 'align-middle'
            }, {
                data: 'nominal',
                class: 'text-start align-middle'
            }, {
                data: 'iuran_at',
                class: 'align-middle'
            }, {
                data: 'action',
                class: 'text-center align-middle',
                width: 60
            }]
        });
    </script>

    {{-- Set Checkbox Datatable Mustahik --}}
    <script>
        $(document).ready(function() {
            $('#selected-checkbox').on('change', function() {
                $('.unit-checkbox').prop('checked', this.checked);
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            var table = $('#anggotamasal-table').DataTable();

            // Handle click on "select all" control
            $('#select-all').on('click', function() {
                // Check/uncheck all checkboxes in the table
                var rows = table.rows({
                    'search': 'applied'
                }).nodes();
                $('input[type="checkbox"]', rows).prop('checked', this.checked);
            });

            // Handle click on checkbox to set state of "select all" control
            $('#anggotamasal-table tbody').on('change', 'input[type="checkbox"]', function() {
                // If checkbox is not checked
                if (!this.checked) {
                    var el = $('#select-all').get(0);
                    // If "select all" control is checked and has 'indeterminate' property
                    if (el && el.checked && ('indeterminate' in el)) {
                        // Set visual state of "select all" control as 'indeterminate'
                        el.indeterminate = true;
                    }
                }
            });
        });
    </script>

    {{-- Validate --}}
    <script>
        function validate() {
            let url = '{{ route('iuran.masal.approve') }}';

            Swal.fire({
                title: "Anda yakin akan validasi iuran ini?",
                html: 'Data yang telah divalidasi tidak bisa diubah kembali',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#435ebe',
                cancelButtonColor: '#dc3545',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: url,
                        beforeSend: function() {
                            $('#btnSubmitValidasi').prop('disabled', true);
                            // Menghapus properti hidden pada spinner
                            $('#loaderValidasi').removeAttr('hidden');
                            // Mengubah teks di statusButton menjadi "Loading..."
                            $('#statusButtonValidasi').text('Loading...');
                        },
                        success: function(response) {
                            Swal.fire(
                                'Berhasil!',
                                response.message,
                                'success'
                            )

                            $('#btnSubmitValidasi').prop('disabled', true)

                            setTimeout(function() {
                                window.location.href =
                                    '{{ route('iuran.index') }}';
                            }, 1000)
                        }
                    });
                }
            })
        }
    </script>

    @include('pages.iuran.backends.input-anggota');
    @include('pages.iuran.backends.update-satuan');
    @include('pages.iuran.backends.update-masal');
@endpush