{{-- CSS --}}
<link rel="stylesheet" href="{{ asset('master-new.css?version=_').time() }}" />
<link rel="stylesheet" href="{{ asset('form-new.css?version=_').time() }}" />

<!-- LIST DATA -->
<x-list-data judul="Data Akun Aktiva Tetap" tambah="true" :thead="array('Kode','Nama','Umur (Thn)','Persentase','Akun Aktap','Akun BP','Akun Akumulasi','Aksi')" :thwidth="array(10,20,5,10,10,10,10,10)" :thclass="array('','','','','','','','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">
                <div class="card-body form-header" style="padding-top:0.5rem;padding-bottom:0.5rem;">
                    <h6 id="judul-form" style="position:absolute;top:15px"></h6>
                    <button type="button" id="btn-kembali" aria-label="Kembali" class="btn btn-back">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <button type="submit" class="btn btn-primary btn-save float-right"><i class="fa fa-save"></i> Simpan</button>
                </div>
                <div class="separator mb-2"></div>
                <div class="card-body pt-3 form-body">
                    <input 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 class="form-row">
                        <div class="form-group col-md-6 col-sm-12">
                            <label for="kode_klpakun">Kode Kelompok</label>
                            <input type="text" class="form-control" id="kode_klpakun" name="kode_klpakun">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12 col-sm-12">
                            <label for="nama">Nama Kelompok</label>
                            <input type="text" class="form-control" id="nama" name="nama">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6 col-sm-12">
                            <label for="umur">Umur</label>
                            <input type="text" class="form-control currency" id="umur" name="umur" value="0">
                        </div>
                        <div class="form-group col-md-6 col-sm-12">
                            <label for="nama">Persentase</label>
                            <input type="text" class="form-control currency" id="persen" name="persen" value="0" readonly>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6 col-sm-12">
                            <label for="kode_akun">Akun Aktiva Tetap</label>
                            <div class="input-group">
                                <div class="input-group-prepend hidden" style="border: 1px solid #d7d7d7;">
                                    <span class="input-group-text info-code_kode_akun" readonly="readonly" title="" data-toggle="tooltip" data-placement="top" ></span>
                                </div>
                                <input type="text" class="cbbl form-control inp-label-kode_akun" id="kode_akun" name="kode_akun" value="" title="" readonly>
                                <span class="info-name_kode_akun hidden">
                                    <span id="label_kode_akun"></span> 
                                </span>
                                <i class="simple-icon-close float-right info-icon-hapus hidden" style="cursor: pointer;"></i>
                                <i class="simple-icon-magnifier search-item2" id="search_kode_akun"></i>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-sm-12">
                            <label for="akun_bp">Akun Beban Susut</label>
                            <div class="input-group">
                                <div class="input-group-prepend hidden" style="border: 1px solid #d7d7d7;">
                                    <span class="input-group-text info-code_akun_bp" readonly="readonly" title="" data-toggle="tooltip" data-placement="top" ></span>
                                </div>
                                <input type="text" class="cbbl form-control inp-label-akun_bp" id="akun_bp" name="akun_bp" value="" title="" readonly>
                                <span class="info-name_akun_bp hidden">
                                    <span id="label_akun_bp"></span> 
                                </span>
                                <i class="simple-icon-close float-right info-icon-hapus hidden" style="cursor: pointer;"></i>
                                <i class="simple-icon-magnifier search-item2" id="search_akun_bp"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6 col-sm-12">
                            <label for="akun_deprs">Akun Akumulasi</label>
                            <div class="input-group">
                                <div class="input-group-prepend hidden" style="border: 1px solid #d7d7d7;">
                                    <span class="input-group-text info-code_akun_deprs" readonly="readonly" title="" data-toggle="tooltip" data-placement="top" ></span>
                                </div>
                                <input type="text" class="cbbl form-control inp-label-akun_deprs" id="akun_deprs" name="akun_deprs" value="" title="" readonly>
                                <span class="info-name_akun_deprs hidden">
                                    <span id="label_akun_deprs"></span> 
                                </span>
                                <i class="simple-icon-close float-right info-icon-hapus hidden" style="cursor: pointer;"></i>
                                <i class="simple-icon-magnifier search-item2" id="search_akun_deprs"></i>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-sm-12">
                            <label for="flag_susut">Status</label>
                            <select class="form-control selectize" name="flag_susut" id="flag_susut">
                                <option value="0" selected>NONSUSUT</option>
                                <option value="1">SUSUT</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<button id="trigger-bottom-sheet" style="display:none">Bottom ?</button>
<script src="{{ asset('asset_dore/js/vendor/jquery.validate/sai-validate-custom.js') }}"></script>
<script src="{{ asset('helper.js') }}"></script>
<script type="text/javascript">
    $('#saku-form > .col-12').addClass('mx-auto col-lg-6');
    setHeightForm();

    var bottomSheet = new BottomSheet("country-selector");
    document.getElementById("trigger-bottom-sheet").addEventListener("click", bottomSheet.activate);
    window.bottomSheet = bottomSheet;

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

    $('.selectize').selectize();

    $('.currency').inputmask("numeric", {
        radixPoint: ",",
        groupSeparator: ".",
        digits: 2,
        autoGroup: true,
        rightAlign: true
    });

    var scroll = document.querySelector('#content-preview');
    var psscroll = new PerfectScrollbar(scroll);

    var scrollform = document.querySelector('.form-body');
    new PerfectScrollbar(scrollform);

    //LIST DATA
    var action_html = "<a href='#' title='Edit' id='btn-edit'><i class='simple-icon-pencil' style='font-size:18px'></i></a> &nbsp;&nbsp;&nbsp; <a href='#' title='Hapus'  id='btn-delete'><i class='simple-icon-trash' style='font-size:18px'></i></a>";
    var dataTable = generateTable(
        "table-data",
        "{{ url('aktap-master/fa-akun') }}", 
        [
            {'targets': 7, 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, 
                'className': 'text-right',
                'render': $.fn.dataTable.render.number( '.', ',', 0, '' ) 
            },
            {   
                'targets': 3, 
                'className': 'text-right',
                'render': $.fn.dataTable.render.number( '.', ',', 2, '' ) 
            },
            {
                "targets": [4,5,6],
                "visible": false,
                "searchable": false
            }
        ],
        [
            { data: 'kode_klpakun' },
            { data: 'nama' },
            { data: 'umur' },
            { data: 'persen' },
            { data: 'akun' },
            { data: 'bp' },
            { data: 'deprs' },
        ],
        "{{ url('admin-auth/sesi-habis') }}",
        [[2 ,"desc"]]
    );

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

    $("#searchData").on("keyup", function (event) {
        dataTable.search($(this).val()).draw();
    });

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

    // Form //
    $('#saku-datatable').on('click', '#btn-tambah', function(){
        $('#kode_klpakun').attr('readonly', false);
        $('#form-tambah')[0].reset();
        $('#form-tambah').validate().resetForm();
        $('#judul-form').html('Form Data Akun Aktiva Tetap');
        $('#method').val('post');
        $('#id_edit').val('');
        $('#btn-update').attr('id','btn-save');
        $('#btn-save').attr('type','submit');
        $('#saku-datatable').hide();
        $('#saku-form').show();
        removeInfoField('kode_akun');
        removeInfoField('akun_bp');
        removeInfoField('akun_deprs');
    });

    $('#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_klpakun').val();
        msgDialog({
            id:kode,
            type:'edit'
        });
    });

    $('#umur').change(function(){
        var umur = toNilai($(this).val());
        var persen = 100/umur;
        console.log(persen);
        if(umur == 0 || umur == '') {
            persen = 0;
        }
        $('#persen').val(number_format(persen,'-','-'));
    });

    $('#form-tambah').on('click', '.search-item2', function(){
        var id = $(this).closest('div').find('input').attr('name');
        var options = {}
        switch(id){
            case 'kode_akun':
                options = {
                    id : id,
                    header : ['Kode', 'Nama'],
                    url : "{{ url('aktap-master/fa-akun-masakun') }}",
                    columns : [
                        { data: 'kode_akun' },
                        { data: 'nama' }
                    ],
                    judul : "Daftar Akun",
                    pilih : "akun",
                    jTarget1 : "text",
                    jTarget2 : "text",
                    target1 : ".info-code_"+id,
                    target2 : ".info-name_"+id,
                    target3 : "",
                    target4 : "",
                    width : ["30%","70%"],
                }
            break;
            case 'akun_bp':
                options = {
                    id : id,
                    header : ['Kode', 'Nama'],
                    url : "{{ url('aktap-master/fa-akun-masakun') }}",
                    columns : [
                        { data: 'kode_akun' },
                        { data: 'nama' }
                    ],
                    judul : "Daftar Akun",
                    pilih : "akun",
                    jTarget1 : "text",
                    jTarget2 : "text",
                    target1 : ".info-code_"+id,
                    target2 : ".info-name_"+id,
                    target3 : "",
                    target4 : "",
                    width : ["30%","70%"],
                }
            break;
            case 'akun_deprs':
                options = {
                    id : id,
                    header : ['Kode', 'Nama'],
                    url : "{{ url('aktap-master/fa-akun-masakun') }}",
                    columns : [
                        { data: 'kode_akun' },
                        { data: 'nama' }
                    ],
                    judul : "Daftar Akun",
                    pilih : "akun",
                    jTarget1 : "text",
                    jTarget2 : "text",
                    target1 : ".info-code_"+id,
                    target2 : ".info-name_"+id,
                    target3 : "",
                    target4 : "",
                    width : ["30%","70%"],
                }
            break;
        }
        showInpFilterBSheet(options);
    });

    // Simpan //
    $('#form-tambah').validate({
        ignore:[],
        errorElement: "label",
        submitHandler: function(form) {
            var parameter = $(form).find('#id_edit').val();
            var kode = $(form).find('#kode_klpakun').val();
            
            var formData = new FormData(form);
            for(var pair of formData.entries()) {
                console.log(pair[0]+ ', '+ pair[1]); 
            }

            if(parameter != "") { 
                var url = "{{ url('aktap-master/fa-akun') }}/"+kode;
                var pesan = "updated";
                var text = "Perubahan data "+kode+" telah tersimpan";                
            } else {
                var url = "{{ url('aktap-master/fa-akun') }}";
                var pesan = "saved";
                var text = "Data tersimpan dengan kode "+kode;
            }

            $.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();
                        $('#form-tambah')[0].reset();
                        $('#form-tambah').validate().resetForm();
                        $('[id^=label]').html('');
                        $('#id_edit').val('');
                        $('#judul-form').html('Form Data Akun Aktiva Tetap');
                        $('#method').val('post');
                        $('#kode_klpakun').attr('readonly', false);
                        removeInfoField('kode_akun');
                        removeInfoField('akun_bp');
                        removeInfoField('akun_deprs');
                        msgDialog({
                            id:kode,
                            type:'simpan'
                        });
                        last_add("kode_klpakun",kode);
                    }else if(!result.data.status && result.data.message === "Unauthorized"){
                        window.location.href = "{{ url('/admin-auth/sesi-habis') }}";
                    }else {
                        msgDialog({
                            id: '-',
                            type: 'warning',
                            title: 'Oops...',
                            text: result.data.message
                        });
                    }
                },
                error: function(xhr, status, error) {
                    var error = JSON.parse(xhr.responseText);
                    try {
                        var detail = Object.values(error.errors);
                    } catch (error) {
                        var detail = '';
                    }
                    if(xhr.status == 422){
                        var keys = Object.keys(error.errors);
                        var tab =  $('#'+keys[0]).parents('.tab-pane').attr('id');
                        $('a[href="#'+tab+'"]').click();
                        $('#'+keys[0]).addClass('error');
                        $('#'+keys[0]).parent('.input-group').addClass('input-group-error');
                        $("label[for='"+keys[0]+"']").append("<br/>");
                        $("label[for='"+keys[0]+"']").append('<label id="'+keys[0]+'-error" class="error" for="'+keys[0]+'">'+detail[0]+'</label>');
                        $('#'+keys[0]).focus();
                    }
                    
                    msgDialog({
                        id: '-',
                        type: 'warning',
                        title: 'Oops...',
                        text: JSON.stringify(error.message) + (typeof detail === 'object ' ? '<br/> '+detail[0] : '')
                    });
                },
                fail: function(xhr, textStatus, errorThrown){
                    alert('request failed:'+textStatus);
                }
            });
        },
        errorPlacement: function (error, element) {
            var id = element.attr("id");
            $("label[for="+id+"]").append("<br/>");
            $("label[for="+id+"]").append(error);
        }
    });

    
    // Edit
    $('#saku-datatable').on('click', '#btn-edit', function(){
        var id= $(this).closest('tr').find('td').eq(0).html();
        $('#form-tambah').validate().resetForm();
        removeInfoField('kode_akun');
        removeInfoField('akun_bp');
        removeInfoField('akun_deprs');
        $('#btn-save').attr('type','button');
        $('#btn-save').attr('id','btn-update');
        $('#judul-form').html('Form Data Akun Aktiva Tetap');
        editData(id);
    });

    function editData(kode) {
        $.ajax({
            type: 'GET',
            url: "{{ url('aktap-master/fa-akun') }}/"+kode,
            dataType: 'json',
            success:function(result){
                if(result.status){
                    var data = result.daftar[0];
                    $('#id_edit').val('edit');
                    $('#method').val('put');
                    $('#kode_klpakun').attr('readonly', true);
                    $('#id').val(kode);
                    $('#kode_klpakun').val(data.kode_klpakun);
                    $('#nama').val(data.nama);
                    $('#umur').val(parseFloat(data.umur));
                    $('#persen').val(number_format(data.persen,'-','-'));
                    $('#flag_susut')[0].selectize.setValue(data.flag_susut);
                    $('#saku-datatable').hide();
                    $('#modal-preview').modal('hide');
                    $('#saku-form').show();
                    showInfoField('kode_akun',data.kode_akun,data.nama_akun);
                    showInfoField('akun_bp',data.akun_bp,data.nama_bp);
                    showInfoField('akun_deprs',data.akun_deprs,data.nama_deprs);
                }
                else if(!result.status && result.message == 'Unauthorized'){
                    window.location.href = "{{ url('admin-auth/sesi-habis') }}";
                }
            }
        });   
    }

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

    function hapusData(id){
        $.ajax({
            type: 'DELETE',
            url: "{{ url('aktap-master/fa-akun') }}/"+id,
            dataType: 'json',
            async:false,
            success:function(result){
                if(result.data.status){
                    dataTable.ajax.reload();                    
                    showNotification("top", "center", "success",'Hapus Data','Data Akun Aktiva Tetap ('+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>'
                    });
                }
            }
        });
    }

    // PREVIEW saat klik di list data
    $('#table-data tbody').on('click','td',function(e){
        if($(this).index() != 4){

            var id = $(this).closest('tr').find('td').eq(0).html();
            
            var data = dataTable.row(this).data();
            var kode = data.kode_klpakun;
            var nama = data.nama;
            var umur = data.umur; 
            var persen = data.persen;
            var akun = data.akun;
            var deprs = data.deprs;
            var bp = data.bp;
            var status = data.status;
            var html = `
            <div class="preview-header" style="display:block;height:39px;padding: 0 1.75rem" >
                <h6 style="position: absolute;" id="preview-judul">Preview Data</h6>
                <span id="preview-nama" style="display:none"></span><span id="preview-id" style="display:none">`+id+`</span> 
                <div class="dropdown d-inline-block float-right">
                    <button type="button" id="dropdownAksi" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding: 0.2rem 1rem;border-radius: 1rem !important;" class="btn dropdown-toggle btn-light">
                    <span class="my-0">Aksi <i style="font-size: 10px;" class="simple-icon-arrow-down ml-3"></i></span>
                    </button>
                    <div class="dropdown-menu dropdown-aksi" aria-labelledby="dropdownAksi" x-placement="bottom-start" style="position: absolute; will-change: transform; top: -10px; left: 0px; transform: translate3d(0px, 37px, 0px);">
                        <a class="dropdown-item dropdown-ke1" href="#" id="btn-delete2"><i class="simple-icon-trash mr-1"></i> Hapus</a>
                        <a class="dropdown-item dropdown-ke1" href="#" id="btn-edit2"><i class="simple-icon-pencil mr-1"></i> Edit</a>
                        <a class="dropdown-item dropdown-ke1" href="#" id="btn-cetak"><i class="simple-icon-printer mr-1"></i> Cetak</a>
                        <a class="dropdown-item dropdown-ke2 hidden" href="#" id="btn-cetak2" style="border-bottom: 1px solid #d7d7d7;"><i class="simple-icon-arrow-left mr-1"></i> Cetak</a>
                        <a class="dropdown-item dropdown-ke2 hidden" href="#" id="btn-excel"> Excel</a>
                        <a class="dropdown-item dropdown-ke2 hidden" href="#" id="btn-pdf"> PDF</a>
                        <a class="dropdown-item dropdown-ke2 hidden" href="#" id="btn-print"> Print</a>
                    </div>
                </div>
            </div>
            <div class='separator'></div>
            <div class='preview-body' style='padding: 0 1.75rem;height: calc(75vh - 56px); position:sticky'>
                <table class="table table-prev mt-2" width="100%">
                    
                </table>
            </div>`;

            $('#content-bottom-sheet').html(html);
            var det = "";
            det += "<tr>";
            det += "<td style='border: none;'>Kode Kelompok Akun</td>"
            det += "<td style='border: none;'>"+kode+"</td>"
            det += "</tr>";
            det += "<tr>";
            det += "<td>Nama Akun Kelompok Akun</td>"
            det += "<td>"+nama+"</td>"
            det += "</tr>";
            det += "<tr>";
            det += "<td>Umur</td>"
            det += "<td>"+number_format(umur)+" tahun</td>"
            det += "</tr>";
            det += "<tr>";
            det += "<td>Persentase</td>"
            det += "<td>"+number_format(persen,'-','-')+"%</td>"
            det += "</tr>";
            det += "<tr>";
            det += "<td>Akun Aktiva Tetap</td>"
            det += "<td>"+akun+"</td>"
            det += "</tr>";
            det += "<td>Akun BP</td>"
            det += "<td>"+bp+"</td>"
            det += "</tr>";
            det += "<td>Akun Depresiasi</td>"
            det += "<td>"+deprs+"</td>"
            det += "</tr>";
            det += "<td>Status</td>"
            det += "<td>"+status+"</td>"
            det += "</tr>";
            $('.table-prev').html(det);
            $('.c-bottom-sheet__sheet').css({ "width":"70%","margin-left": "15%", "margin-right":"15%"});

            $('.preview-header').on('click','#btn-delete2',function(e){
                var id = $('#preview-id').text();
                $('.c-bottom-sheet').removeClass('active');
                msgDialog({
                    id:id,
                    type:'hapus'
                });
            });

            $('.preview-header').on('click', '#btn-edit2', function(){
                var id= $('#preview-id').text();
                $('#judul-form').html('Edit Data Akun Aktiva Tetap');
                $('#form-tambah')[0].reset();
                $('#form-tambah').validate().resetForm();
                
                $('#btn-save').attr('type','button');
                $('#btn-save').attr('id','btn-update');
                $('.c-bottom-sheet').removeClass('active');
                editData(id);
            });

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

            $('.preview-header').on('click','#btn-cetak2',function(e){
                e.stopPropagation();
                $('.dropdown-ke1').removeClass('hidden');
                $('.dropdown-ke2').addClass('hidden');
            });

            $('#trigger-bottom-sheet').trigger("click");
        }
    });

    // HANDLER untuk enter dan tab
    $('#kode_klpakun,#nama,#umur,#persen,#kode_akun,#akun_bp,#akun_deprs,#flag_susut').keydown(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        var nxt = ['kode_klpakun','nama','umur','persen','kode_akun','akun_bp','akun_deprs','flag_susut'];
        if (code == 13 || code == 40) {
            e.preventDefault();
            var idx = nxt.indexOf(e.target.id);
            idx++;
            $('#'+nxt[idx]).focus();
        }else if(code == 38){
            e.preventDefault();
            var idx = nxt.indexOf(e.target.id);
            idx--;
            if(idx != -1){ 
                $('#'+nxt[idx]).focus();
            }
        }
    });
</script>