{{-- Referensi file fVendor folder Esaku --}}
    <link rel="stylesheet" href="{{ asset('asset_baru/css/master.css?version=_') . time() }}" />
    <link rel="stylesheet" href="{{ asset('asset_baru/css/table-action.css?version=_') . time() }}" />
    <!-- LIST DATA -->
    <x-sai-list-data judul="Data Akun" tambah="true" :thead="['Kode', 'Nama', 'Tgl Input', 'Aksi']" :thwidth="[20, 70, 0, 10]" :thclass="['', '', '', 'text-center']" />
    <!-- END LIST DATA -->

    <!-- FORM INPUT -->
    <form id="form-tambah" class="tooltip-label-right" novalidate>
        <div class="row" id="saku-form" style="display:none;">
            <div class="col-12">
                <div class="card-body form-header form-header-fix py-2">
                    <div>
                        <h6 id="judul-form" style="position:absolute;top:15px"></h6>
                    </div>
                    <div>
                        <div style="display: flex;">
                            <button type="submit" class="btn-form btn-save mr-2" id="btn-save">
                                <img alt="save-icon" src="{{ asset('asset_baru/icon/save.png') }}" height="20"
                                    width="20">
                                <span style="font-size: 0.875rem;font-weight: 600;margin-left: 0.5rem;">Simpan</span>
                            </button>
                            <button type="button" class="btn-form btn-kembali" id="btn-kembali">
                                <img alt="cancel-icon" src="{{ asset('asset_baru/icon/cancel.png') }}" height="20"
                                    width="20">
                                <span style="font-size: 0.875rem;font-weight: 600;margin-left: 0.3rem;">Tutup</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card form-body-card">
                    <div class="card-body pt-2 form-body-new" style="min-height: calc(100vh - 130px)">
                        <div class="form-master-body">
                            <div class="form-group row " id="row-id">
                                <div class="col-9">
                                    <input class="form-control" type="hidden" id="id_edit" name="id_edit">
                                    <input type="hidden" id="method" name="_method" value="post">
                                    <input type="hidden" id="id" name="id">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12 col-sm-12">
                                    <x-label-field htmlFor="nama">Nama</x-label-field>
                                    <input class="form-control" type="text" placeholder="Nama" id="nama"
                                        name="nama" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6 col-sm-12">
                                    <x-label-field htmlFor="modul">Kelompok Akun</x-label-field>
                                    <select class="form-control selectize" id="modul" name="modul" required>
                                        <option value="">--Pilih Modul--</option>
                                        <option value="A">Aktiva</option>
                                        <option value="P">Passiva</option>
                                        <option value="L">Laba Rugi</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-sm-12">
                                    <x-label-field htmlFor="jenis">Kelompok Laporan</x-label-field>
                                    <select class="form-control" id="jenis" name="jenis" required>
                                        <option value="">--Pilih Jenis--</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6 col-sm-12">
                                    <x-label-field htmlFor="account">Normal Account</x-label-field>
                                    <select class="form-control selectize" id="account" name="account" required>
                                        <option value="">--Pilih Normal Account--</option>
                                        <option value="D">D - Debet</option>
                                        <option value="C">C - Kredit</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-sm-12">
                                    <x-label-field htmlFor="kode_curr">Currency</x-label-field>
                                    <input class="form-control" type="text" placeholder="Kode Currency"
                                        id="kode_curr" name="kode_curr" value="IDR" readonly required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6 col-sm-12">
                                    <x-label-field htmlFor="kode_akun">Kode</x-label-field>
                                    <input class="form-control" type="text" placeholder="Kode Akun" id="kode_akun"
                                        name="kode_akun" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6 col-sm-12">
                                    <div class="custom-control custom-switch" style="margin-left: 20px;">
                                        <input type="checkbox" class="custom-control-input" id="status-aktif">
                                        <label class="custom-control-label" for="status-aktif">Tidak Aktif</label>

                                        <div class="label-switch hidden">
                                            <span id="active">Aktif</span>
                                            <span id="unactive">Tidak Aktif</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6 col-sm-12">
                                    <div class="custom-control custom-switch" style="margin-left: 20px;">
                                        <input type="checkbox" class="custom-control-input" id="status-anggaran">
                                        <label class="custom-control-label" for="status-anggaran">Tidak Cek
                                            Anggaran</label>
                                        <div class="label-switch hidden">
                                            <span id="check">Cek Anggaran</span>
                                            <span id="uncheck">Tidak Cek Anggaran</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- END FORM INPUT -->
    <!-- JAVASCRIPT  -->
    <script src="{{ asset('asset_dore/js/vendor/jquery.validate/sai-validate-custom.js') }}"></script>
    <script src="{{ asset('asset_baru/js/helper.js') }}"></script>
    <script>
        // var $iconLoad = $('.preloader');
        var $status_aktif = false;
        var $status_cek = false;
        $('#saku-form > .col-12').addClass('mx-auto col-lg-6');
        $('#modal-preview > .modal-dialog').css({
            'max-width': '600px'
        });
        setHeightForm();
        $optionJenis1 = [{
            value: 'Neraca',
            text: 'Neraca'
        }]
        $optionJenis2 = [{
            value: 'Pendapatan',
            text: 'Pendapatan'
        }, {
            value: 'Beban',
            text: 'Beban'
        }]

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        function isCheckedAktif() {
            if ($status_aktif) {
                $('#status-aktif').prop('checked', true)
                $('label[for="status-aktif"]').html($('#active').html());
            } else {
                $('#status-aktif').prop('checked', false)
                $('label[for="status-aktif"]').html($('#unactive').html());
            }
        }

        function isCheckedAnggaran() {
            if ($status_cek) {
                $('#status-anggaran').prop('checked', true)
                $('label[for="status-anggaran"]').html($('#check').html());
            } else {
                $('#status-anggaran').prop('checked', false)
                $('label[for="status-anggaran"]').html($('#uncheck').html());
            }
        }

        $('#status-aktif').click(function() {
            $status_aktif = !$status_aktif
            isCheckedAktif()
        })

        $('#status-anggaran').click(function() {
            $status_cek = !$status_cek
            isCheckedAnggaran()
        })

        $('.selectize').selectize();
        //EVENT DROPDOWN//
        var jenis = $('#jenis').selectize();
        $('#modul').change(function() {
            var select = jenis[0];
            var control = select.selectize;
            control.clearOptions();
            var value = $(this).val();
            var option = null;
            if (value == "A" || value == "P") {
                option = $optionJenis1;
            } else {
                option = $optionJenis2
            }

            control.addOption(option);
            // $.each(option, function (i, item) {
            // });
        })

        // PLUGIN SCROLL di bagian preview dan form input
        var scroll = document.querySelector('#content-preview');
        var psscroll = new PerfectScrollbar(scroll);
        // END PLUGIN SCROLL di bagian preview dan form input


        //LIST DATA
        var action_html =
            `<a href="#" class="table-action ta-mr-10 btn-edit">
            <img alt="edit-icon" src="{{ asset('asset_dore/icon/fi-br-edit-alt.svg') }}">
            <div class="tooltip-action">
                Editor untuk merubah isi data yang sudah dibuat.
            </div>
        </a>
        <a href="#" class="table-action btn-delete">
            <img alt="edit-icon" src="{{ asset('asset_dore/icon/fi-br-trash.svg') }}">
            <div class="tooltip-action">
                Hapus data yang sudah di input, cek dahulu sebelum aksi ini dilakukan.
            </div>
        </a>`;
        var dataTable = generateTableServer(
            "table-data",
            "{{ url('gl-master/masakun-list') }}",
            [{
                    'targets': 3,
                    data: null,
                    'defaultContent': action_html,
                    'className': 'text-center'
                },
                {
                    "targets": 0,
                    "createdCell": function(td, cellData, rowData, row, col) {
                        if (rowData.status == "baru") {
                            $(td).parents('tr').addClass('selected');
                            $(td).addClass('last-add');
                        }
                    }
                },
                {
                    "targets": [2],
                    "visible": false,
                    "searchable": false
                }
            ],
            [{
                    data: 'kode_akun'
                },
                {
                    data: 'nama'
                },
                {
                    data: 'tgl_input'
                },
            ],
            "{{ url('admin-auth/sesi-habis') }}",
            [
                [2, "desc"]
            ]
        );

        $.fn.DataTable.ext.pager.numbers_length = 5;

        $("#searchData").on("keydown", function(event) {
            var code = (event.keyCode ? event.keyCode : event.which);
            var nxt = ['nama'];
            if (code == 13 || code == 40) {
                dataTable.search($(this).val()).draw();
            }
        });

        $("#page-count-listdata").on("change", function(event) {
            var selText = $(this).val();
            dataTable.page.len(parseInt(selText)).draw();
        });

        $('#searchData').attr('placeholder', 'Search...(Enter to Submit)');
        // END LIST DATA

        // BUTTON TAMBAH
        $('#saku-datatable').on('click', '#btn-tambah', function() {
            $('#row-id').hide();
            isCheckedAktif()
            isCheckedAnggaran()
            $('#id_edit').val('');
            $('#judul-form').html('Tambah Data Akun');
            $('#btn-update').attr('id', 'btn-save');
            $('#btn-save').attr('type', 'submit');
            $('#form-tambah')[0].reset();
            $('#form-tambah').validate().resetForm();
            $('#method').val('post');
            $('#kode_akun').attr('readonly', false);
            $('#saku-datatable').hide();
            $('#saku-form').show();
            fixedHeaderForm();
        });
        // END BUTTON TAMBAH

        // BUTTON KEMBALI
        $('#saku-form').on('click', '#btn-kembali', function() {
            var kode = null;
            msgDialog({
                id: kode,
                type: 'keluar'
            });
        });

        $('#saku-form').on('click', '#btn-update', function() {
            var kode = $('#kode_akun').val();
            msgDialog({
                id: kode,
                type: 'edit'
            });
        });

        // END BUTTON KEMBALI

        //BUTTON SIMPAN /SUBMIT
        $('#form-tambah').validate({
            ignore: [],
            rules: {
                kode_akun: {
                    required: true,
                    maxlength: 10
                },
                nama: {
                    required: true,
                    maxlength: 50
                },
            },
            errorElement: "label",
            submitHandler: function(form) {
                var parameter = $('#id_edit').val();
                var id = $('#kode_akun').val();
                if (parameter == "edit") {
                    var url = "{{ url('gl-master/masakun') }}/" + id;
                    var pesan = "updated";
                    var text = "Perubahan data " + id + " telah tersimpan";
                } else {
                    var url = "{{ url('gl-master/masakun') }}";
                    var pesan = "saved";
                    var text = "Data tersimpan dengan kode " + id;
                }

                var formData = new FormData(form);

                if ($status_aktif) {
                    formData.append('blok', '0')
                } else {
                    formData.append('blok', '1')
                }

                if ($status_cek) {
                    formData.append('budget', '1')
                } else {
                    formData.append('budget', '0')
                }

                for (var pair of formData.entries()) {
                    console.log(pair[0] + ', ' + pair[1]);
                }

                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: formData,
                    async: false,
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(result) {
                        if (result.data.status) {
                            dataTable.ajax.reload();
                            var kode = $('#kode_akun').val();
                            $('#row-id').hide();
                            $('#form-tambah')[0].reset();
                            $('#form-tambah').validate().resetForm();
                            $('[id^=label]').html('');
                            $('#id_edit').val('');
                            $('#judul-form').html('Tambah Data Akun');
                            $('#method').val('post');
                            $('#kode_akun').attr('readonly', false);
                            msgDialog({
                                id: kode,
                                type: 'simpan'
                            });
                            last_add("kode_akun", kode);
                        } else if (!result.data.status && result.data.message === "Unauthorized") {

                            window.location.href = "{{ url('/admin-auth/sesi-habis') }}";

                        } else {
                            if (result.data.kode == "-" && result.data.jenis != undefined) {
                                msgDialog({
                                    id: id,
                                    type: result.data.jenis,
                                    text: 'Kode akun sudah digunakan'
                                });
                            } else {

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!',
                                    footer: '<a href>' + result.data.message + '</a>'
                                })
                            }
                        }
                    },
                    fail: function(xhr, textStatus, errorThrown) {
                        alert('request failed:' + textStatus);
                    }
                });
                // $('#btn-simpan').html("Simpan").removeAttr('disabled');
            },
            errorPlacement: function(error, element) {
                var id = element.attr("id");
                $("label[for=" + id + "]").append("<br/>");
                $("label[for=" + id + "]").append(error);
            }
        });
        // END BUTTON SIMPAN

        // BUTTON HAPUS DATA
        function hapusData(id) {
            $.ajax({
                type: 'DELETE',
                url: "{{ url('gl-master/masakun') }}/" + id,
                dataType: 'json',
                async: false,
                success: function(result) {
                    if (result.data.status) {
                        dataTable.ajax.reload();
                        showNotification("top", "center", "success", 'Hapus Data', 'Data Akun (' + id +
                            ') berhasil dihapus ');
                        $('#modal-pesan-id').html('');
                        $('#table-delete tbody').html('');
                        $('#modal-pesan').modal('hide');
                    } else if (!result.data.status && result.data.message == "Unauthorized") {
                        window.location.href = "{{ url('admin-auth/sesi-habis') }}";
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!',
                            footer: '<a href>' + result.data.message + '</a>'
                        });
                    }
                }
            });
        }

        $('#saku-datatable').on('click', '.btn-delete', function(e) {
            var kode = $(this).closest('tr').find('td').eq(0).html();
            msgDialog({
                id: kode,
                type: 'hapus'
            });
        });

        // END BUTTON HAPUS

        // BUTTON EDIT
        $('#saku-datatable').on('click', '.btn-edit', function() {
            var id = $(this).closest('tr').find('td').eq(0).html();
            // $iconLoad.show();
            $('#form-tambah').validate().resetForm();

            $('#btn-save').attr('type', 'button');
            $('#btn-save').attr('id', 'btn-update');

            $('#judul-form').html('Edit Data Akun');
            $.ajax({
                type: 'GET',
                url: "{{ url('gl-master/masakun') }}/" + id,
                dataType: 'json',
                async: false,
                success: function(res) {
                    var result = res.data;
                    if (result.status) {
                        $('#id_edit').val('edit');
                        $('#method').val('put');
                        $('#kode_akun').attr('readonly', true);
                        $('#kode_akun').val(id);
                        $('#id').val(id);
                        $('#nama').val(result.data[0].nama);
                        $('#modul')[0].selectize.setValue(result.data[0].modul);
                        $('#modul').trigger('change');
                        $('#jenis')[0].selectize.setValue(result.data[0].jenis);
                        $('#kode_curr').val(result.data[0].kode_curr);
                        // $('#blok')[0].selectize.setValue(result.data[0].block);
                        // $('#budget')[0].selectize.setValue(parseInt(result.data[0].status_gar));
                        $('#account')[0].selectize.setValue(result.data[0].normal);

                        if (result.data[0].block == 0) {
                            $status_aktif = true
                            isCheckedAktif()
                        } else {
                            $status_aktif = false
                            isCheckedAktif()
                        }

                        if (result.data[0].status_gar == 0) {
                            $status_cek = false
                            isCheckedAnggaran()
                        } else {
                            $status_cek = true
                            isCheckedAnggaran()
                        }

                        $('#saku-datatable').hide();
                        $('#saku-form').show();
                        fixedHeaderForm();
                    } else if (!result.status && result.message == 'Unauthorized') {
                        window.location.href = "{{ url('admin-auth/sesi-habis') }}";
                    }
                    // $iconLoad.hide();
                }
            });
        });
        // END BUTTON EDIT

        // HANDLER untuk enter dan tab
        $('#kode_akun,#nama').keydown(function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            var nxt = ['kode_akun', 'nama'];
            if (code == 13 || code == 40) {
                e.preventDefault();
                var idx = nxt.indexOf(e.target.id);
                idx++;
                if (idx == 15) {
                    console.log('No event')
                    // var akun = $('#akun_hutang').val();
                    // getAkun(akun);
                } else {
                    $('#' + nxt[idx]).focus();
                }
            } else if (code == 38) {
                e.preventDefault();
                var idx = nxt.indexOf(e.target.id);
                idx--;
                if (idx != -1) {
                    $('#' + nxt[idx]).focus();
                }
            }
        });


        // PREVIEW saat klik di list data

        $('#table-data tbody').on('click', 'td', function(e) {
            if ($(this).index() != 2) {

                var id = $(this).closest('tr').find('td').eq(0).html();
                var data = dataTable.row(this).data();
                var modul = '';
                var block = '';
                var gar = '';
                var normal = '';
                if (data.modul == 'A') {
                    modul = "Aktiva"
                } else if (data.modul == 'P') {
                    modul = "Passiva"
                } else {
                    modul = "Laba Rugi"
                }

                if (data.block == "0") {
                    block = "Unblock"
                } else {
                    block = "Block"
                }

                if (data.status_gar == "0") {
                    gar = "Uncheck"
                } else {
                    gar = "Check"
                }

                if (data.normal == "D") {
                    normal = "Debet"
                } else {
                    normal = "Kredit"
                }
                var html = `<tr>
                <td style='border:none'>Kode Akun</td>
                <td style='border:none'>` + id + `</td>
            </tr>
            <tr>
                <td>Nama Akun</td>
                <td>` + data.nama + `</td>
            </tr>
            <tr>
                <td>Modul</td>
                <td>` + modul + `</td>
            </tr>
            <tr>
                <td>Jenis</td>
                <td>` + data.jenis + `</td>
            </tr>
            <tr>
                <td>Currency</td>
                <td>` + data.kode_curr + `</td>
            </tr>
            <tr>
                <td>Status Block</td>
                <td>` + block + `</td>
            </tr>
            <tr>
                <td>Status Budget</td>
                <td>` + gar + `</td>
            </tr>
            <tr>
                <td>Normal Account</td>
                <td>` + normal + `</td>
            </tr>
            `;
                $('#table-preview tbody').html(html);

                $('#modal-preview-id').text(id);
                $('#modal-preview').modal('show');
            }
        });

        $('.modal-header').on('click', '#btn-delete2', function(e) {
            var id = $('#modal-preview-id').text();
            $('#modal-preview').modal('hide');
            msgDialog({
                id: id,
                type: 'hapus'
            });
        });

        $('.modal-header').on('click', '#btn-edit2', function() {
            var id = $('#modal-preview-id').text();
            // $iconLoad.show();
            $('#form-tambah').validate().resetForm();
            $('#judul-form').html('Edit Data Akun');

            $('#btn-save').attr('type', 'button');
            $('#btn-save').attr('id', 'btn-update');
            $.ajax({
                type: 'GET',
                url: "{{ url('gl-master/masakun') }}/" + id,
                dataType: 'json',
                async: false,
                success: function(res) {
                    var result = res.data;
                    if (result.status) {
                        $('#id_edit').val('edit');
                        $('#method').val('put');
                        $('#kode_akun').attr('readonly', true);
                        $('#kode_akun').val(id);
                        $('#id').val(id);
                        $('#nama').val(result.data[0].nama);
                        $('#modul')[0].selectize.setValue(result.data[0].modul);
                        $('#modul').trigger('change');
                        $('#jenis')[0].selectize.setValue(result.data[0].jenis);
                        $('#kode_curr').val(result.data[0].kode_curr);
                        // $('#blok')[0].selectize.setValue(result.data[0].block);
                        // $('#budget')[0].selectize.setValue(parseInt(result.data[0].status_gar));
                        $('#account')[0].selectize.setValue(result.data[0].normal);

                        if (result.data[0].block == 0) {
                            $status_aktif = true
                            isCheckedAktif()
                        } else {
                            $status_aktif = false
                            isCheckedAktif()
                        }

                        if (result.data[0].status_gar == 0) {
                            $status_cek = false
                            isCheckedAnggaran()
                        } else {
                            $status_cek = true
                            isCheckedAnggaran()
                        }

                        $('#saku-datatable').hide();
                        $('#saku-form').show();
                        $('#modal-preview').modal('hide');
                        fixedHeaderForm();

                    } else if (!result.status && result.message == 'Unauthorized') {
                        window.location.href = "{{ url('admin-auth/sesi-habis') }}";
                    }
                    // $iconLoad.hide();
                }
            });
        });

        $('.modal-header').on('click', '#btn-cetak', function(e) {
            e.stopPropagation();
            $('.dropdown-ke1').addClass('hidden');
            $('.dropdown-ke2').removeClass('hidden');
            console.log('ok');
        });

        $('.modal-header').on('click', '#btn-cetak2', function(e) {
            // $('#dropdownAksi').dropdown('toggle');
            e.stopPropagation();
            $('.dropdown-ke1').removeClass('hidden');
            $('.dropdown-ke2').addClass('hidden');
        });
    </script>