@extends('layouts.app')
@section('title')
Unit Layanan
@endsection
@section('content')
<section class="section">
    <div class="card rounded">
        <div class="card-header">
            <h4>Unit Layanan</h4>
            <div class="card-header-action">
                <button type="button" class="btn btn-primary btn-add">Unit Layanan<span class="ml-2 fas fa-plus"></span></button>
            </div>
        </div>
    </div>
    <div class="section-body">
       <div class="card">
            <div class="card-body p-0">
                {!! $dataTable->table(['width' => '100%', 'class' => 'table table-striped table-bordered table-hover']) !!}
            </div>
        </div>
    </div>    
</section>
@endsection
@section('modal')
<div id="unitModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Unit Layanan</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>
            <form method="POST" id="unitForm" action="">
                <input type="hidden" name="_token" value="">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label for="cCode">Kode Wilayah Kearsipan Unit Layanan <span class="required">*</span></label>
                            <br>
                            <input type="text" class="form-control" name="code" id="cCode" placeholder="Kode Wilayah Kearsipan" required>
                        </div>
                        <div class="form-group col-lg-6">
                            <label for="cType">Tipe Unit Layanan <span class="required">*</span></label>
                            <br>
                            <select class="form-control" name="type" id="cType" placeholder="Pilih Tipe Unit Layanan" required></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cName">Nama Lengkap <span class="required">*</span></label>
                        <input id="cName" type="text" name="nm" class="form-control" maxlength="255" minlength="3" required>
                    </div>
                    <div class="form-group">
                        <label for="cSurname">Singkatan Unit Layanan <span class="required">*</span></label>
                        <input id="cSurname" type="text" name="snm" class="form-control" minlength="3" maxlength="50" required>
                    </div>
                    <div class="form-group">
                        <label for="cParent">Induk Unit Layanan</label>
                        <br>
                        <select class="form-control" name="parent_id" id="cParent" placeholder="Pilih Induk Unit Layanan"></select>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="text-right">
                        <button type="button" class="btn btn-warning mr-3" data-dismiss="modal"><span class="fas fa-times mr-2"></span>Tutup</button>
                        <button type="submit" class="btn btn-primary" data-loading-text="<span class='spinner-border spinner-border-sm'></span> Menyimpan ..."><span class="fa fa-window-restore mr-2"></span>Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="detailUnitModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Unit Layanan</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-lg-6">
                        <label>Kode Wilayah Kearsipan Unit Layanan</label>
                        <p class="mb-0" id="dCode"></p>
                    </div>
                    <div class="form-group col-lg-6">
                        <label>Tipe Unit Layanan</label>
                        <p class="mb-0" id="dType"></p>
                    </div>
                </div>
                <div class="form-group">
                    <label>Nama</label>
                    <p class="mb-0" id="dName"></p>
                </div>
                <div class="form-group">
                   <label>Singkatan Unit Layanan</label>
                    <p class="mb-0" id="dSurname"></p>
                </div>
                <div class="form-group d-none">
                    <label>Induk Unit Layanan</label>
                    <p class="mb-0" id="dParent"></p>
                </div>
            </div>
            <div class="modal-footer">
                <div class="text-center">
                    <button type="button" class="btn btn-warning" data-dismiss="modal"><span class="fas fa-check-double mr-3"></span>OK</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('css')
@include('layouts.datatables_css')
@endpush
@push('js')
@include('layouts.datatables_js')
{!! $dataTable->scripts() !!}
<script type="text/javascript">
    $(document).ready(function () {
        var token = $('meta[name=csrf-token]').attr('content');
        var units = {!! json_encode($units) !!};
        var types = {!! json_encode($types) !!};

        function initOptions() {
            $('#cParent').append(new Option('Pilih Induk Unit Layanan', ''));
            for (var k in units) {
                $('#cParent').append(new Option(units[k]['unit'], units[k]['id']));
            }

            $('#cType').append(new Option('Pilih Tipe Unit Layanan', ''));
            for (var k1 in types) {
                $('#cType').append(new Option(types[k1], k1));
            }

            $('#cParent').select2();

            $('span.select2.select2-container').css('width', '100%');
        }

        function resetOptions() {
            $('#cParent').val(null).trigger('change');
            $('#cType').val(null).trigger('change');
        }

        function refreshDTB(isKeepPage) {
            if (isDTB(window.LaravelDataTables["dataTableBuilder"])) {
                if (isKeepPage) {
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, false);
                } else {
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, true);
                }
            }
        }

        initOptions();

        $(document).on('show.bs.modal', '#unitModal', function (e) {
            $('span.select2.select2-container').css('width', '100%');
        });

        $(document).on('click', '.btn-add', function (e) {
            e.preventDefault();

            let mdl = $('#unitModal');
            mdl.find('h5.modal-title').text('Tambah Unit Layanan');
            mdl.find('form').attr('method', 'post');
            mdl.find('form').attr('action', '{{ route('units.store') }}');
            mdl.find('input[name=_token]').val(token);
            mdl.find('#cUnit').val(null).trigger('change');
            mdl.find('#cRole').val(null).trigger('change');
            mdl.modal('show');
        });

        $('#dataTableBuilder').on('click', '.btn-show', function (e) {
            let tr = $(this).closest('tr');
            let row = window.LaravelDataTables["dataTableBuilder"].rows(tr.data('index')).data();

            if (row) {
                let r = row[0];
                let mdl = $('#detailUnitModal');
                mdl.find('#dCode').text(r.code);
                mdl.find('#dType').text(r.type);
                mdl.find('#dName').text(r.nm);

                if (r.parent_id != 0) {
                    mdl.find('#dParent').removeClass('d-none');
                    mdl.find('#dParent').text(r.parent);
                } else {
                    mdl.find('#dParent').addClass('d-none');
                }

                mdl.find('#dSurname').text(r.snm);
                mdl.modal('show');
            } else {
                iziToast.warning({
                    title: 'Galat!',
                    message: 'Data Unit Layanan tidak ditemukan!',
                    position: 'topRight'
                });
            }
        });

        $('#dataTableBuilder').on('click', '.btn-edit', function (e) {
            let tr = $(this).closest('tr');
            let row = window.LaravelDataTables["dataTableBuilder"].rows(tr.data('index')).data();

            if (row) {
                let r = row[0];
                let mdl = $('#unitModal');
                mdl.find('h5.modal-title').text('Edit Unit Layanan');
                mdl.find('form').attr('method', 'put');
                mdl.find('form').attr('action', $(this).attr('href'));
                mdl.find('input[name=_token]').val(token);
                mdl.find('#cCode').val(r.code);
                mdl.find('#cType').val(r.type_id).trigger('change');
                mdl.find('#cName').val(r.nm);

                if (r.parent_id) {
                    mdl.find('#cParent').val(r.parent_id).trigger('change');
                } else {
                    mdl.find('#cParent').val(null).trigger('change');
                }
                
                mdl.find('#cSurname').val(r.snm);                
                mdl.modal('show');
            } else {
                iziToast.warning({
                    title: 'Galat!',
                    message: 'Data Unit Layanan tidak ditemukan!',
                    position: 'topRight'
                });
            }
        });

        $(document).on('submit', '#unitForm', function (e) {
            e.preventDefault();
            
            var f = $(this);

            if (f.attr('action') && (f.attr('method') == 'post' || f.attr('method') == 'put')) {
                var bLoader = f.find('button[type=submit]');
                var p = new FormData(f.get(0));
                var t = f.attr('method');

                if (f.attr('method') == 'put') {
                    p.append('_method', 'put');
                    t = 'post';
                }

                $.ajax({
                    url: f.attr('action'),
                    type: t,
                    data: p,
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        bLoader.button('loading');
                    },
                    success: function success(r) {
                        bLoader.button('reset');
                        
                        if (r.success) {
                            f.closest('div.modal').modal('hide');
                            f.get(0).reset();

                            resetOptions();
                            refreshDTB(false);

                            let m = r.message ? r.message : 'Data berhasil disimpan.';
                            iziToast.success({title: 'OK', message: m, position: 'topRight'});
                        } else {
                            let m = r.message ? r.message : 'Data gagal disimpan!';
                            iziToast.warning({title: 'Galat!', message: m, position: 'topRight'});
                        }
                    },
                    error: function error(r) {
                        bLoader.button('reset');
                        iziToast.error({title: 'Server Error!', message: 'Data gagal disimpan!', position: 'topRight'});
                    }
                });
            } else {
                iziToast.warning({title: 'Galat!', message: 'Something Error!', position: 'topRight'});
            }

            return false;
        });

        $(document).on('submit', 'form.form-destroy', function (e) {
            e.preventDefault();

            var f = $(this);
            if (f.attr('action') && f.attr('method') == 'delete') {
                var bLoader = f.find('button[type=submit]');
                
                $.ajax({
                    url: f.attr('action'),
                    type: f.attr('method'),
                    beforeSend: function () {
                        bLoader.button('loading');
                    },
                    success: function success(r) {
                        bLoader.button('reset');
                        
                        if (r.success) {
                            refreshDTB(false);

                            let m = r.message ? r.message : 'Data berhasil dihapus.';
                            iziToast.success({title: 'OK', message: m, position: 'topRight'});
                        } else {
                            let m = r.message ? r.message : 'Data gagal dihapus!';
                            iziToast.warning({title: 'Galat!', message: m, position: 'topRight'});
                        }
                    },
                    error: function error(r) {
                        bLoader.button('reset');
                        iziToast.error({title: 'Server Error!', message: 'Data gagal dihapus!', position: 'topRight'});
                    }
                });
            } else {
                iziToast.warning({title: 'Galat!', message: 'Something Error!', position: 'topRight'});
            }

            return false;
        });
    });
</script>
@endpush