@extends('layouts.panel')

@section('title', 'Bank')

@push('styles')
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script>
        $(function() {
            const $teleport = $('#teleport')
            const $table = $('table#dataTableBank');

            const dataTable = $table.DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('master.bank.index') }}",
                order: [
                    [1, 'asc']
                ],
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(_, __, ___, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'code',
                        render: function(data, __, row) {
                            return data
                        }
                    },
                    {
                        data: 'name',
                        render: function(data, __, row) {
                            return data
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, __, row) {
                            return `
                                <span class="small font-weight-bold">${row.account_owner || '-'}</span>
                                <div>${row.account_number || '-'}</div>
                            `
                        }
                    },
                    {
                        data: 'is_active',
                        className: 'text-center',
                        render: function(data, __, row) {
                            const checked = data ? 'checked' : '';
                            const disabled = row.is_protected ? 'disabled' : '';

                            return `
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input toggle-status" id="switchUpdateStatusBank-${row.id}" ${checked} ${disabled} data-id="${row.id}">
                                    <label class="custom-control-label" for="switchUpdateStatusBank-${row.id}"></label>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, __, row) {
                            const disabled = row.is_protected ? 'disabled' : '';

                            return `
                                <div class="row flex-nowrap">
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-warning text-nowrap edit" data-id="${data}">
                                            <i class="fas fa-edit"></i>
                                            Edit
                                        </button>
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-sm btn-danger text-nowrap delete" data-id="${data}" ${disabled}>
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            `;
                        }
                    }
                ],
                responsive: true,
                autoWidth: false
            });

            $('#btnCreateBank').on('click', function() {
                const $this = $(this);
                const url = "{{ route('master.bank.create') }}";

                $this.prop('disabled', true)

                $.get(url, function(html) {
                    $teleport.html(html);
                    $('#modalCreateBank').modal({
                        backdrop: 'static',
                        keyboard: false,
                        show: true
                    });
                }).fail(function(err) {
                    const response = err.responseJSON || {}

                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: response.message,
                    });
                }).always(function() {
                    $this.prop('disabled', false);
                });
            });

            $table.on('click', '.edit', function() {
                const $this = $(this);
                const id = $this.data('id');
                const url = "{{ route('master.bank.edit', ':id') }}".replace(':id', id);

                $this.prop('disabled', true)

                $.get(url, function(html) {
                    $teleport.html(html);
                    $('#modalEditBank').modal({
                        backdrop: 'static',
                        keyboard: false,
                        show: true
                    });
                }).fail(function(err) {
                    const response = err.responseJSON || {}

                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: response.message,
                    });
                }).always(function() {
                    $this.prop('disabled', false);
                });
            });

            $table.on('change', '.toggle-status', function() {
                const $this = $(this);
                const id = $this.data('id');
                const url = "{{ route('master.bank.updateStatus', ':id') }}".replace(':id', id);
                const checked = $this.is(':checked')

                $this.prop('disabled', true)

                $.ajax({
                    type: "put",
                    url: url,
                    data: {
                        _token: '{{ csrf_token() }}',
                        is_active: checked ? 1 : 0
                    },
                    success: function(response) {
                        toastr.success(response.message)
                    },
                    error: function(err) {
                        const response = err.responseJSON || {}

                        $this.prop('checked', !checked);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops!',
                            text: response.message,
                        });
                    },
                }).always(function() {
                    $this.prop('disabled', false);
                });
            });

            $table.on('click', '.delete', function() {
                const $this = $(this);
                const id = $this.data('id');
                const url = "{{ route('master.bank.destroy', ':id') }}".replace(':id', id);

                Swal.fire({
                    icon: 'warning',
                    title: 'Hapus Bank',
                    text: 'Data yang dihapus tidak dapat dikembalikan lagi. Apakah anda yakin?',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    preConfirm: () => {
                        Swal.showLoading();

                        const cancelBtn = Swal.getCancelButton();
                        if (cancelBtn) cancelBtn.style.display = 'none';

                        return $.ajax({
                            type: 'delete',
                            url: url,
                            data: {
                                _token: '{{ csrf_token() }}',
                            }
                        }).then(
                            (response) => response,
                            (error) => {
                                const response = error.responseJSON || {}

                                const cancelBtn = Swal.getCancelButton();
                                if (cancelBtn) cancelBtn.style.display = '';

                                Swal.showValidationMessage(response.message);
                            }
                        );
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: result.value.message
                        });

                        dataTable.ajax.reload(null, false);
                    }
                });
            });

            $teleport.on(
                'submit',
                '#formCreateBank',
                function(e) {
                    e.preventDefault()

                    const $this = $(this)
                    const $message = $this.find('#message')
                    const $btnSubmit = $this.find('button[type="submit"]')
                    const $btnDismissModal = $this.find('button[data-dismiss="modal"]')

                    $message.empty()
                    $btnSubmit.prop('disabled', true)
                    $btnDismissModal.prop('disabled', true)

                    $.ajax({
                        type: $this.prop('method'),
                        url: $this.prop('action'),
                        data: $this.serializeArray(),
                        success: function(response) {
                            toastr.success(response.message)
                            $('#modalCreateBank').modal('hide');
                            dataTable.ajax.reload(null, false)
                        },
                        error: function(err) {
                            $message.html(buildErrorAlertHTML(err))
                        }
                    }).always(function() {
                        $btnSubmit.prop('disabled', false);
                        $btnDismissModal.prop('disabled', false);
                    });
                }
            )

            $teleport.on(
                'submit',
                '#formEditBank',
                function(e) {
                    e.preventDefault()

                    const $this = $(this)
                    const $message = $this.find('#message')
                    const $btnSubmit = $this.find('button[type="submit"]')
                    const $btnDismissModal = $this.find('button[data-dismiss="modal"]')

                    $message.empty()
                    $btnSubmit.prop('disabled', true)
                    $btnDismissModal.prop('disabled', true)

                    $.ajax({
                        type: $this.prop('method'),
                        url: $this.prop('action'),
                        data: $this.serializeArray(),
                        success: function(response) {
                            toastr.success(response.message)
                            $('#modalEditBank').modal('hide');
                            dataTable.ajax.reload(null, false)
                        },
                        error: function(err) {
                            $message.html(buildErrorAlertHTML(err))
                        }
                    }).always(function() {
                        $btnSubmit.prop('disabled', false);
                        $btnDismissModal.prop('disabled', false);
                    });
                }
            )

            $teleport.on(
                'hidden.bs.modal',
                '#modalCreateBank,#modalEditBank',
                function() {
                    $(this).remove();
                }
            );
        });
    </script>
@endpush


@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">@yield('title')</h1>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-auto">
                                <button type="button" class="btn btn-primary text-nowrap" id="btnCreateBank">
                                    <i class="fas fa-plus"></i>
                                    Tambah baru
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="dataTableBank" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th width="1" class="text-center">#</th>
                                        <th width="1" class="text-center">Kode</th>
                                        <th>Nama</th>
                                        <th>Akun</th>
                                        <th width="1" class="text-center">Status</th>
                                        <th width="1" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection