<?= $this->extend('template/layout') ?>

<?= $this->section('title') ?>Data Layanan <?= env('app.name') ?><?= $this->endSection() ?>

<!-- main section start-->
<?= $this->section('main') ?>
<?php
    $uri      = current_url(true);
    $segment1 = $uri->setSilent()->getSegment(1);
    $segment2 = $uri->setSilent()->getSegment(2);
    $segment3 = $uri->setSilent()->getSegment(3);
?>
<!-- Breadcumb -->
<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);"><?= env('app.name') ?></a></li>
    <li class="breadcrumb-item"><?= ucfirst($segment1) ?></li>
    <li class="breadcrumb-item">Data Produk</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="row">
    <div class="col-xl-7">
        <div id="panel-1" class="panel">
            <div class="panel-hdr border-faded border-top-1 border-right-0 border-left-0 shadow-0">
                <h2>Data Produk</h2>
                <div class="panel-toolbar pr-3">
                    <ul class="nav nav-pills border-bottom-0" role="tablist">
                        <li class="nav-item">
                            <?= form_button('reload', '<i class="fal fa-sync"></i>', 'reload_datagrid_mlay()') ?>&nbsp;
                        </li>
                        <li class="nav-item">
                            <?= form_button('read', '<i class="fal fa-eye"></i>', 'show_mlay()') ?>&nbsp;
                        </li>
                        <?php if ($rekam == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('create', '<i class="fal fa-plus"></i>', 'new_mlay()') ?>&nbsp;
                        </li>
                        <?php } ?>
                        <?php if ($ubah == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('update', '<i class="fal fa-edit"></i>', 'edit_mlay()') ?>&nbsp;
                        </li>
                        <?php } ?>
                        <?php if ($hapus == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('delete', '<i class="fal fa-trash-alt"></i>', 'delete_mlay()') ?>
                        </li>
                        <?php } ?>
                    </ul>
                </div>
            </div><!-- end panel hdr -->

            <div class="panel-container show">
                <div class="panel-content">
                    <div id="panelfit-1" data-options="border:false">
                        <!-- grid start -->
                        <table id="datagrid_mlay" toolbar="#toolbar_mlay" url="<?= site_url('referensi/pdklayanan/datagrid_mlay') ?>" data-options="nowrap:true,striped:false,ctrlSelect:true,rownumbers:true,pagination:true,multiSort:true,remoteFilter:true,remoteSort:true,pageSize:10,pageList:[10,20,50,100],clientPaging:false,fit:true">
                            <thead data-options="frozen:true">
                                <tr>
                                    <th data-options="field:'ck',checkbox:true"></th>
                                </tr>
                            </thead>
                            <thead>
                                <tr>
                                    <th data-options="field:'uraian',sortable:true,width:400">Nama Produk</th>
                                    <th data-options="field:'sla',sortable:true,width:100">SLA</th>
                                    <th data-options="field:'satuan',sortable:true,width:200">Satuan</th>
                                    <th data-options="field:'status',sortable:true,formatter:formatCheckbox,align:'center',width:75">Status</th>
                                </tr>
                            </thead>
                        </table>
                        <!-- grid end -->
                    </div>
                </div>
            </div><!-- end panel main content -->
        </div>
    </div>

    <div class="col-xl-5">
        <div id="panel-2" class="panel">
            <div class="panel-hdr border-faded border-top-1 border-right-0 border-left-0 shadow-0">
                <h2>Data Syarat Produk</h2>
                <div class="panel-toolbar pr-3">
                    <ul class="nav nav-pills border-bottom-0" role="tablist">
                        <li class="nav-item">
                            <?= form_button('reload', '<i class="fal fa-sync"></i>', 'reload_datagrid_clay()') ?>&nbsp;
                        </li>
                        <li class="nav-item">
                            <?= form_button('read', '<i class="fal fa-eye"></i>', 'show_clay()') ?>&nbsp;
                        </li>
                        <?php if ($rekam == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('create', '<i class="fal fa-plus"></i>', 'new_clay()') ?>&nbsp;
                        </li>
                        <?php } ?>
                        <?php if ($ubah == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('update', '<i class="fal fa-edit"></i>', 'edit_clay()') ?>&nbsp;
                        </li>
                        <?php } ?>
                        <?php if ($hapus == 1) { ?>
                        <li class="nav-item">
                            <?= form_button('delete', '<i class="fal fa-trash-alt"></i>', 'delete_clay()') ?>
                        </li>
                        <?php } ?>
                    </ul>
                </div>
            </div><!-- end panel hdr -->

            <div class="panel-container show">
                <div class="panel-content">
                    <div id="panelfit-2" data-options="border:false">
                        <!-- grid start -->
                        <table id="datagrid_clay" toolbar="#toolbar_clay" url="<?= site_url('referensi/pdklayanan/datagrid_clay') ?>" data-options="nowrap:true,striped:false,ctrlSelect:true,rownumbers:true,pagination:true,multiSort:true,remoteFilter:true,remoteSort:true,pageSize:10,pageList:[10,20,50,100],clientPaging:false,fit:true" style="min-height: 300px;">
                            <thead data-options="frozen:true">
                                <tr>
                                    <th data-options="field:'ck',checkbox:true"></th>
                                </tr>
                            </thead>
                            <thead>
                                <tr>
                                    <th data-options="field:'slayanan',sortable:true,width:350">Dokumen</th>
                                    <th data-options="field:'berkas',sortable:true,width:150,formatter:formatBerkasButton,align:'center'">Berkas</th>
                                </tr>
                            </thead>
                        </table>
                        <!-- grid end -->
                    </div>
                </div>
            </div><!-- end panel main content -->
        </div>
    </div>
</div>

<!-- MODAL MODUL -->
<div id="modal-mlay" class="modal fade default-example-modal-left" data-backdrop="static" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-left">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4" id="mod-ptitle"></h5>
            </div>
            
            <div id="form-konten-mlay"></div>            
        </div>
    </div>
</div><!-- END MODAL MODUL -->

<!-- MODAL MENU -->
<div id="modal-clay" class="modal fade default-example-modal-right" data-backdrop="static" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-right">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4" id="mod-ktitle"></h5>
            </div>
            
            <div id="form-konten-clay"></div>            
        </div>
    </div>
</div><!-- END MODAL MENU -->

<?= $this->endSection() ?>
<!-- main section end-->

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>

<script type="text/javascript" src="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/jquery.easyui.min.js') ?>"></script>
<script type="text/javascript" src="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/datagrid-filter-1.0.6/datagrid-filter.js') ?>"></script>

<script type="text/javascript">
   $(document).ready(function () {
        adjustpanelfit();
    })

    $(window).resize(function() {
        adjustpanelfit();
    });

    function adjustpanelfit(){
        var height = $(window).height();
        $('#panelfit-1, #panelfit-2').panel({
            height:height - 520
        });
    }

    // Formatter untuk checkbox
    function formatCheckbox(value, row, index) {
        return `<input type="checkbox" ${value == 1 ? 'checked' : ''} disabled>`;
    }
</script>

<script type="text/javascript">
    /*datagrid modul =====================================*/
    var datagrid_mlay = $('#datagrid_mlay').datagrid({
        queryParams: {
            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
        },
        onDblClickRow : function(index,row){
            show_child();
        }
    });
    datagrid_mlay.datagrid('enableFilter');

    /*reload datagrid modul*/
    function reload_datagrid_mlay()
    {
        $('#datagrid_mlay').datagrid('removeFilterRule');
        $('#datagrid_mlay').datagrid('load');
    }

    function show_mlay()
    {
        var row = $('#datagrid_mlay').datagrid('getSelected');
        if (row) {
            var id_mlay = row.id;
            $('#mod-ptitle').html('Detail Layanan');
            $('#form-konten-mlay').load('<?= base_url('referensi/pdklayanan/show_mlay/') ?>' + id_mlay);
            $('#modal-mlay').modal('show');
        } else {
            $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }

    function show_clay()
    {
        var row = $('#datagrid_clay').datagrid('getSelected');
        if (row) {
            var id_clay = row.id;
            $('#mod-ktitle').html('Detail Syarat Layanan');
            $('#form-konten-clay').load('<?= base_url('referensi/pdklayanan/show_clay/') ?>' + id_clay);
            $('#modal-clay').modal('show');
        } else {
            $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }

    function formatBerkasButton(value, row, index) {
        if (value && value !== '0') {
            return '<a href="<?= base_url('referensi/pdklayanan/view_pdf/') ?>' + row.eberkas + '" target="_blank" class="btn btn-xs btn-default"><i class="fal fa-file-pdf mr-1"></i> Lihat PDF</a>';
        } else {
            return '<span class="text-muted">Tidak ada berkas</span>';
        }
    }

    //double klik row prov tarik data kako
    function show_child()
    {
        var row = $('#datagrid_mlay').datagrid('getSelected');
        if (row) {
            var id_mlay = row.id;
            $.ajax({
                url: '<?= base_url('referensi/pdklayanan/datagrid_clay') ?>',
                type: "post",
                dataType: 'json',
                data: {
                    id_mlay: id_mlay,
                    "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                },
                error: function (xhr, status, message) {
                    $.messager.alert(status,message,'warning');
                },
                success: function(res) {
                    $('#datagrid_clay').datagrid('loadData', res);
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }

    /*datagrid menu =====================================*/
    var datagrid_clay = $('#datagrid_clay').datagrid({
        queryParams: {
            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
        },
        onDblClickRow : function(index,row){
            show_menu();
        }
    });
    datagrid_clay.datagrid('enableFilter');

    /*reload datagrid menu*/
    function reload_datagrid_clay()
    {
        $('#datagrid_clay').datagrid('removeFilterRule');
        $('#datagrid_clay').datagrid('load');
    }   
</script>

<?php if ($rekam == 1) { ?>
<!-- FUNCTION REKAM -->
<script type="text/javascript">
    //tampilkan form rekam prov
    function new_mlay()
    {
        $('#mod-ptitle').html('Rekam Layanan');
        $('#form-konten-mlay').load('<?= $link_rekam_mlay ?>');
        $('#modal-mlay').modal('show');
    }

    //tampilkan form rekam kako
    function new_clay()
    {
        $('#mod-ktitle').html('Rekam Syarat Layanan');
        $('#form-konten-clay').load('<?= $link_rekam_clay ?>');
        $('#modal-clay').modal('show');
    }
</script>
<?php } ?>

<?php if ($ubah == 1) { ?>
<!-- FUNCTION UBAH -->
<script type="text/javascript">
    //tampilkan form edit prov
    function edit_mlay()
    {
        var row = $('#datagrid_mlay').datagrid('getSelected');
        if (row) {
          var id_mlay = row.id;
          $('#mod-ptitle').html('Edit Layanan');
          $('#form-konten-mlay').load('<?= $link_ubah_mlay ?>' + id_mlay);
          $('#modal-mlay').modal('show');
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }

    //tampilkan form edit kako
    function edit_clay()
    {
        var row = $('#datagrid_clay').datagrid('getSelected');
        if (row) {
          var id_clay = row.id;
          $('#mod-ktitle').html('Edit Syarat Layanan');
          $('#form-konten-clay').load('<?= $link_ubah_clay ?>' + id_clay);
          $('#modal-clay').modal('show');
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    }
</script>
<?php } ?>

<?php if ($hapus == 1) { ?>
<!-- FUNCTION HAPUS -->
<script type="text/javascript">
    //Hapus Modul
    function delete_mlay()
    {
        var rows = $('#datagrid_mlay').datagrid('getSelections');
        var ids = [];
        for(var j=0;j<rows.length;j++){
            ids[j] = rows[j].id;
        }
        if (ids.length > 0) {
            $.messager.confirm('<?= lang('App.delete') ?>', '<?= lang('App.delete') ?> ' + rows.length + ' data ?', function(r){
                if (r){
                    $.ajax({
                        url: '<?= $link_hapus_mlay ?>',
                        type: "post",
                        dataType: 'json',
                        data: {
                            ids: ids,
                            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                        },
                        error: function (xhr, status, message) {
                            $.messager.alert(status,message,'warning');
                        },
                        success: function(res) {
                            $('#datagrid_mlay').datagrid('reload');
                            $('#datagrid_clay').datagrid('reload');
                            toastr.success(res.message, 'Updated!!', {timeOut: 3000});
                        }
                    });
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    } //End Hapus Modul

    //Hapus Menu
    function delete_clay()
    {
        var rows = $('#datagrid_clay').datagrid('getSelections');
        var ids = [];
        for(var j=0;j<rows.length;j++){
            ids[j] = rows[j].id;
        }
        if (ids.length > 0) {
            $.messager.confirm('<?= lang('App.delete') ?>', '<?= lang('App.delete') ?> ' + rows.length + ' data ?', function(r){
                if (r){
                    $.ajax({
                        url: '<?= $link_hapus_clay ?>',
                        type: "post",
                        dataType: 'json',
                        data: {
                            ids: ids,
                            "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                        },
                        error: function (xhr, status, message) {
                            $.messager.alert(status,message,'warning');
                        },
                        success: function(res) {
                            $('#datagrid_clay').datagrid('reload');
                            toastr.success(res.message, 'Updated!!', {timeOut: 3000});
                        }
                    });
                }
            });
        } else {
          $.messager.alert('<?= lang('App.warning') ?>','<?= lang('App.select_data') ?>','warning');
        }
    } //End Hapus Menu
</script>
<?php } ?>

<?= $this->endSection() ?>
<!-- pageScripts section end-->