@extends('layouts.app')

@section('title', 'Bank')

@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') }}">
@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>Bank</h3>
                    <p class="text-subtitle text-muted">Halaman untuk mengelola master data bank.</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">Bank</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <section class="section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-4">
                    <div class="card">
                        <form id="formBank" class="needs-validation" data-parsley-validate>
                            <div class="card-header">
                                <h6 id="form-header">Form Tambah Bank</h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    @csrf
                                    <input type="hidden" id="bank_id">
                                    <div class="form-group mandatory bank_container">
                                        <label for="bank-column" class="form-label">Bank</label>
                                        <input type="text" name="bank" id="bank-column" class="form-control"
                                            placeholder="Bank"
                                            value="{{ Cookie::get('bank') !== null ? Cookie::get('bank') : old('bank') }}"
                                            data-parsley-required="true">
                                        <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 atas_nama_container">
                                        <label for="atas-nama-column" class="form-label">Atas Nama</label>
                                        <input type="text" name="atas_nama" id="atas-nama-column" class="form-control"
                                            placeholder="Atas Nama"
                                            value="{{ Cookie::get('atas_nama') !== null ? Cookie::get('atas_nama') : old('atas_nama') }}"
                                            data-parsley-required="true">
                                        <ul class="parsley-error filled p-0 atas_nama_hidden" hidden>
                                            <span class="parsley-required atas_nama_error_message"></span>
                                        </ul>
                                    </div>
                                    <div class="form-group mandatory rekening_container">
                                        <label for="rekening-column" class="form-label">Rekening</label>
                                        <input type="number" name="rekening" id="rekening-column" class="form-control"
                                            placeholder="Rekening"
                                            value="{{ Cookie::get('rekening') !== null ? Cookie::get('rekening') : old('rekening') }}"
                                            data-parsley-required="true">
                                        <ul class="parsley-error filled p-0 rekening_hidden" hidden>
                                            <span class="parsley-required rekening_error_message"></span>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="form-group float-end mb-3">
                                    <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>
                                    <button type="button" class="btn btn-outline-secondary btn-cancel"
                                        onclick="defaultForm()">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-8">
                    <div class="card">
                        <div class="card-header">
                            <h6>Tabel Bank</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                {{ $dataTable->table() }}
                            </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() }}

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

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

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

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

        function defaultForm() {
            onSuccess();
            $('#form-header').html('Form Tambah Bank');
            $('.btn-cancel').hide();
            $('#formBank')[0].reset();
            $('#bank_id').val('');
            // reset class form
            $('form').removeClass('was-validated');
        }

        defaultForm();

        function onErrorHandling() {
            // Lakukan tindakan atau tampilkan pesan kesalahan sesuai kebutuhan
            // Atau lakukan tindakan lain untuk menangani kesalahan
            alert("Maaf, terjadi kesalahan. Silakan coba lagi.");
        }

        function getData(id) {
            let url = '{{ route('bank.show', ['bank' => ':id']) }}'
            url = url.replace(':id', id);

            $.ajax({
                url: url,
                cache: true,
                method: 'GET',
                datatype: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                beforeSend: function() {
                    if (!$('.form-header').html() == '') {
                        defaultForm()
                    }
                },
                success: function(res) {
                    $('#bank_id').val(res.id);
                    $('#bank-column').val(res.bank);
                    $('#atas-nama-column').val(res.atas_nama);
                    $('#rekening-column').val(res.rekening);

                    $('#form-header').html('Form Edit Bank');
                    $('.btn-cancel').show();
                    $('.btn-cancel').removeAttr('hidden');
                },
            })

        }

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

            let url = '';
            let method = 'POST';
            if ($('#form-header').html() == 'Form Tambah Bank') {
                url = '{{ route('bank.store') }}';
                method = 'POST';
            } else {
                url = '{{ route('bank.update', ['bank' => ':id']) }}';
                url = url.replace(':id', $('#bank_id').val());
                method = 'POST';
            }

            $.ajax({
                url: url,
                method: method,
                data: formData,
                processData: false,
                contentType: false,
                datatype: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    onLoading();
                },
                success: function(res) {
                    Toast.fire({
                        icon: 'success',
                        title: res.message
                    })

                    defaultForm();
                    $('#formBank')[0].reset();
                    // reset class form
                    $('form').removeClass('was-validated');
                    $('#bank-table').DataTable().ajax.reload();
                },
                error: function(error) {
                    onSuccess(); // reset button
                    if (error.status === 422) {
                        let errors = error.responseJSON.errors;
                        $('form').removeClass('was-validated');
                        if (errors.bank) {
                            $('.bank_container').addClass('is-invalid')
                            $('.bank_hidden').removeAttr('hidden')
                            $('.bank_error_message').text(errors.bank[0])
                        }

                        if (errors.atas_nama) {
                            $('.atas_nama_container').addClass('is-invalid')
                            $('.atas_nama_hidden').removeAttr('hidden')
                            $('.atas_nama_error_message').text(errors.atas_nama[0])
                        }

                        if (errors.rekening) {
                            $('.rekening_container').addClass('is-invalid')
                            $('.rekening_hidden').removeAttr('hidden')
                            $('.rekening_error_message').text(errors.rekening[0])
                        }
                    } else {
                        Swal.fire(
                            'error!',
                            'Terjadi kesalahan di sistem',
                            'error'
                        )
                    }
                }
            });
        }

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

        handleFormSubmission();

        function remove(id) {
            let url = '{{ route('bank.destroy', ['bank' => ':id']) }}';
            url = url.replace(':id', id);

            Swal.fire({
                title: "Anda yakin akan menghapus data master ini?",
                html: 'Semua data dari bank ini akan terpengaruh',
                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) {
                            $('#bank-table').DataTable().ajax.reload();
                            Swal.fire(
                                'Berhasil!',
                                response.message,
                                'success'
                            )
                        }
                    });
                }
            })
        }
    </script>
@endpush