@extends('layouts.app')

@section('title', 'Setoran 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') }}">

    <style>
        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 5px solid #f3f3f3;
            /* Light grey */
            border-top: 5px solid #3498db;
            /* Blue */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .modal-dialog {
            max-height: 80vh;
            /* Adjust as needed */
            overflow-y: auto;
        }

        #image-previewer {
            max-height: 80vh;
            max-width: 100%;
            height: auto;
            width: auto;
        }
    </style>
@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>Setoran Program</h3>
                    <p class="text-subtitle text-muted">Halaman untuk melakukan setoran wilayah.</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">Setoran Program</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 Setoran Program</h6>
                                </div>
                                <div class="col-8">
                                    <div class="float-end">
                                        <button type="button" onclick="setoran()" class="btn btn-primary"
                                            id="btnSubmitOlahPresentase">
                                            <span class="spinner-border spinner-border-sm" id="loaderOlahPresentase"
                                                aria-hidden="true" hidden></span>
                                            <span role="status" id="statusButtonOlahPresentase">Setorkan</span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="table-responsive">
                                    {{ $dataTable->table() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="modal-setoran" tabindex="-1" aria-labelledby="modal-setoranLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="modal-imunisasiLabel">Setorkan</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="post" id="formDepositSetoran" enctype="multipart/form-data" class="needs-validation"
                        data-parsley-validate>
                        @csrf
                        <input type="hidden" name="setoran_program_id" id="setoran_program_id">
                        <div class="form-group mandatory bank_container">
                            <label for="bank" class="form-label">Bank</label>
                            <input type="text" name="bank" id="bank" class="form-control" readonly>
                            <ul class="parsley-error filled p-0 bank_hidden" hidden>
                                <span class="parsley-required bank_error_message"></span>
                            </ul>
                        </div>
                        <div class="form-group mandatory rekening_container">
                            <label for="rekening" class="form-label">Rekening</label>
                            <div class="input-group mb-3">
                                <input type="text" name="rekening" id="rekening" class="form-control" readonly>
                                <button type="button" id="copy-rekening" class="btn btn-outline-secondary"><i
                                        class="bi bi-copy"></i></button>
                            </div>
                            <ul class="parsley-error filled p-0 rekening_hidden" hidden>
                                <span class="parsley-required rekening_error_message"></span>
                            </ul>
                        </div>
                        <div class="form-group mandatory bukti_container">
                            <label for="bukti-column" class="form-label">Bukti Transfer</label>
                            <input type="file" accept=".jpg, .png, .jpeg" name="bukti" id="bukti-column"
                                class="form-control"
                                value="{{ Cookie::get('bukti') !== null ? Cookie::get('bukti') : old('bukti') }}"
                                data-parsley-required="true">
                            <ul class="parsley-error filled p-0 bukti_hidden" hidden>
                                <span class="parsley-required bukti_error_message"></span>
                            </ul>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="btn-cancel-deposit"
                        data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btnSubmitFormDeposit">
                        <span class="spinner-border spinner-border-sm" id="loaderDeposit" aria-hidden="true"
                            hidden></span>
                        <span role="status" id="statusButtonDeposit">Simpan</span>
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <img id="image-previewer" class="img-fluid" style="max-width: 100%; height: auto;" alt="Blog Image">
            </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>

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

    <script>
        function onLoading() {
            // Menambahkan properti disabled pada tombol submit
            $('#btnSubmitOlahPresentase').prop('disabled', true);
            // Menghapus properti hidden pada spinner
            $('#loaderOlahPresentase').removeAttr('hidden');
            // Mengubah teks di statusButton menjadi "Loading..."
            $('#statusButtonOlahPresentase').text('Loading...');
        }

        function onSuccess() {
            // Kembalikan properti disabled pada tombol submit
            $('#btnSubmitOlahPresentase').removeAttr('disabled');
            // Tambahkan kembali properti hidden pada spinner
            $('#loaderOlahPresentase').attr('hidden', true);
            // Kembalikan teks di statusButton menjadi "Buat Akun"
            $('#statusButtonOlahPresentase').text('Setoran');
        }

        function setoran() {

            let url = '{{ route('setoran-program.store') }}';

            Swal.fire({
                title: "Anda yakin akan melakukan setoran?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#435ebe',
                cancelButtonColor: '#dc3545',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: url,
                        beforeSend: function() {
                            onLoading();
                        },
                        success: function(response) {
                            onSuccess()
                            Swal.fire(
                                'Berhasil!',
                                response.message,
                                'success'
                            )
                            $('#setoranprogrambendahara-table').DataTable().ajax.reload();
                        },
                        error: function(error) {
                            onSuccess()
                            if (error.status === 422) {
                                let errors = error.responseJSON.errors;
                                $('form').removeClass('was-validated');
                                Swal.fire(
                                    'Error!',
                                    errors,
                                    'warning'
                                )
                            } else {
                                // Fungsi untuk menangani kesalahan
                                // onErrorHandling();
                                Swal.fire(
                                    'Error!',
                                    'Terjadi kesalahan di sistem',
                                    'warning'
                                )
                            }
                        }
                    });
                }
            })
        }
    </script>

    <script>
        'use strict' // untuk validasi javascript yang lebih sensitif
        // mencegah form untuk reload waktu di submit
        $('#formDepositSetoran').submit(function(e) {
            e.preventDefault();
        });

        function onLoadingSetoran() {
            // Menambahkan properti disabled pada tombol submit
            $('#btnSubmitFormDeposit').prop('disabled', true);
            // Menghapus properti hidden pada spinner
            $('#loaderDeposit').removeAttr('hidden');
            // Mengubah teks di statusButton menjadi "Loading..."
            $('#statusButtonDeposit').text('Loading...');
        }

        function onSuccessSetoran() {
            // Kembalikan properti disabled pada tombol submit
            $('#btnSubmitFormDeposit').removeAttr('disabled');
            // Tambahkan kembali properti hidden pada spinner
            $('#loaderDeposit').attr('hidden', true);
            // Kembalikan teks di statusButton menjadi "Buat Akun"
            $('#statusButtonDeposit').text('Simpan');
        }

        function defaultFormSetoran() {
            onSuccessSetoran();
            $('#formDepositSetoran')[0].reset();
            $('#setoran_id').val('');
            $('#bank').val('');
            $('#rekening').val('');
            // reset class form
            $('form').removeClass('was-validated');
        }

        defaultFormSetoran();

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

            let url = '{{ route('setoran-program.upload') }}';
            $.ajax({
                url: url,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                datatype: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    onLoadingSetoran();
                },
                success: function(res) {
                    $('#modal-setoran').modal('hide');
                    Toast.fire({
                        icon: 'success',
                        title: res.message
                    })
                    defaultFormSetoran();
                    $('#setoranprogrambendahara-table').DataTable().ajax.reload();
                },
                error: function(error) {
                    $('#modal-setoran').modal('hide');
                    onSuccessSetoran(); // reset button
                    if (error.status === 422) {
                        $('#modal-setoran').modal('show');
                        let errors = error.responseJSON.errors;
                        $('form').removeClass('was-validated');

                        if (errors.bukti) {
                            $('.bukti_pemohon_container').addClass('is-invalid')
                            $('.bukti_pemohon_hidden').removeAttr('hidden')
                            $('.bukti_pemohon_error_message').text(errors.bukti[0])
                        }

                        if (errors.setoran_id) {
                            Swal.fire(
                                'Error!',
                                errors.setoran_id[0],
                                'error'
                            )
                        }
                    } else {
                        Swal.fire(
                            'error!',
                            'Terjadi kesalahan di sistem',
                            'error'
                        )
                    }
                }
            });
        }

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

        handleFormSubmissionSetoran();
    </script>

    <script>
        $(document).on('click', '.modal-setoran', function() {
            const id = $(this).data('setoran_id');
            const bank = $(this).data('bank');
            const rekening = $(this).data('rekening');
            $("#setoran_program_id").val(id);
            $("#bank").val(bank);
            $("#rekening").val(rekening);
            $('#modal-setoran').modal('show');
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var modal = document.getElementById("previewModal");

            modal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                var urlImage = button.getAttribute('data-image-url');

                var imagePreview = modal.querySelector('#image-previewer');
                imagePreview.src = urlImage;
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle click event for the Copy button
            document.getElementById('copy-rekening').addEventListener('click', function() {
                // Get the input element
                var input = document.getElementById('rekening');
                var value = input.value.replace(' ', '');
                // Select the input value
                input.select();
                input.setSelectionRange(0, 99999); // For mobile devices

                try {
                    // Copy the text to clipboard
                    var successful = document.execCommand('copy');
                    var msg = successful ? 'successful' : 'unsuccessful';
                    console.log('Copying text command was ' + msg);
                } catch (err) {
                    console.error('Oops, unable to copy', err);
                }
            });
        });
    </script>

    <script>
        function remove(id) {
            let url = '{{ route('setoran-program.destroy', ['setoran_program' => ':id']) }}';
            url = url.replace(':id', id);

            Swal.fire({
                title: "Anda yakin akan menghapus setoran ini?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#435ebe',
                cancelButtonColor: '#dc3545',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: url,
                        success: function(response) {
                            $('#setoranprogrambendahara-table').DataTable().ajax.reload();
                            Swal.fire(
                                'Berhasil!',
                                response.message,
                                'success'
                            )
                        },
                        error: function(error) {
                            Swal.fire(
                                'Error!',
                                'Terjadi kesalahan di sistem',
                                'warning'
                            )
                        }
                    });
                }
            })
        }
    </script>
@endpush