@extends('layouts.app')

@section('title', 'Anggota')

@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>Anggota</h3>
                    <p class="text-subtitle text-muted">Halaman untuk melihat data anggota.</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">Anggota</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <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 Anggota</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                {{ $dataTable->table() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- modal transfer --}}
    <div class="modal fade" id="migrasiAnggota" tabindex="-1" aria-labelledby="migrasiAnggotaLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" id="formMigrasiAnggota" data-parsley-validate="">
                    @csrf
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="migrasiAnggotaLabel">Pindah Anggota</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="anggota_migrasi" id="anggota_migrasi">
                        <div class="form-group migrasi_group">
                            <label for="bendahara-select" class="form-label">Bendahara</label>
                            <select name="bendahara" id="bendahara-select" class="form-select">
                                <option value="">Pilih Bendahara</option>
                            </select>
                            <ul class="parsley-error filled p-0 migrasi_hidden" hidden>
                                <span class="parsley-required migrasi_error_message"></span>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="btnSubmitFormMigrasiAnggota">Simpan</button>
                    </div>
                </form>
            </div>
        </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>

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

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

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

    {{-- Select 2 --}}
    <script>
        $('#bendahara-select').select2({
            theme: 'bootstrap-5',
            placeholder: 'Pilih Bendahara',
            dropdownParent: $("#migrasiAnggota")
        });
    </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)
            }
        })

        $(document).ready(function() {
            $('#migrasiAnggota').on('show.bs.modal', function(e) {
                var button = $(e.relatedTarget);
                var bendaharaSelect = document.getElementById("bendahara-select");
                var bendaharaOption = null;

                let anggotaId = button.data('anggota-id');
                $('#anggota_migrasi').val(anggotaId);
                let url = '{{ route('get.bendahara') }}';

                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(response) {

                        response.forEach((item) => {
                            bendaharaOption +=
                                `<option value='${item.id}'>${item.name}</option>`;
                        });
                        bendaharaSelect.innerHTML = bendaharaOption;

                        $('#bendahara-select').val(null).trigger('change');

                        $('.migrasi_group').addClass('mandatory');

                        $('#bendahara-select').attr('data-parsley-required', 'true');

                    },
                    error: function(xhr, status, error) {
                        console.log(xhr.responseText);
                    }
                });
            });

            $('#migrasiAnggota').on('hide.bs.modal', function(e) {
                $('.migrasi_group').removeClass('mandatory');
                $('#bendahara-select').removeAttr('data-parsley-required');
                $('#bendahara-select').val(null).trigger('change');
            });
        });

        $('#formMigrasiAnggota').submit(function(e) {
            e.preventDefault();
        });

        function migrasi(form) {
            let formData = new FormData(form);

            $.ajax({
                url: '{{ route('migrasi.anggota') }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                datatype: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(res) {
                    $('#dataanggota-table').DataTable().ajax.reload();
                    $('#migrasiAnggota').modal('hide');
                    Toast.fire({
                        icon: 'success',
                        title: res.message
                    })

                    defaultForm();
                    $('#formAnggota')[0].reset();
                    // reset class form
                    $('form').removeClass('was-validated');
                },
                error: function(error) {
                    if (error.status === 422) {
                        let errors = error.responseJSON.errors;
                        $('form').removeClass('was-validated');
                        if (errors.bendahara) {
                            $('.migrasi_container').addClass('is-invalid')
                            $('.migrasi_hidden').removeAttr('hidden')
                            $('.migrasi_error_message').text(errors.bendahara[0])
                        }
                        if (errors.anggota_migrasi) {
                            Swal.fire(
                                'Error!',
                                errors.anggota_migrasi[0],
                                'warning'
                            )
                        }
                        if (errors.error_iuran) {
                            Swal.fire(
                                'Error!',
                                errors.error_iuran,
                                'warning'
                            )
                        }
                    }

                    if (error.status === 500) {
                        Swal.fire(
                            'Error!',
                            'Terjadi error disistem',
                            'error'
                        )
                    }
                }
            });
        }

        function handleFormSubmissionMigrasi() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            const forms = document.querySelectorAll('#formMigrasiAnggota')
            // Loop over them and prevent submission
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', event => {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    } else {
                        migrasi(form)
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        }

        handleFormSubmissionMigrasi()
    </script>
@endpush