@extends('layouts.master')

@section('title', 'Unit Kerja')

@section('content-header','Manajemen Unit Kerja')

@section('plugin-styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css')}}">
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="card card-outline card-success">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-tag"></i> Tambah Unit Kerja</h3>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <form role="form" id="form-unit-kerja" method="POST" action="{{ url('user/unit-kerja/simpan') }}">
                {{ csrf_field() }}
                <div class="card-body">
                    <div class="form-group">
                        <label for="inputUnitKerja">Unit Kerja :</label>
                        <input type="text" class="form-control" id="inputUnitKerja" name="unitkerja" placeholder="Unit Kerja">
                    </div>
                    <div class="form-group">
                        <label for="inputKeterangan">Keterangan :</label>
                        <input type="text" class="form-control" id="inputKeterangan" name="keterangan" placeholder="Keterangan">
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="reset" class="btn btn-default">Batal</button>
                    <button type="submit" class="btn btn-info float-right">Simpan</button>
                </div>
                <!-- /.card-footer-->
                </form>
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
        <div class="col-md-8">
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-tags"></i> Data Unit Kerja</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" id="btn-refresh"data-toggle="tooltip" data-trigger="hover" data-original-title="Refresh"><i class="fas fa-sync-alt"></i></button>
                    </div>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="table-unit-kerja" class="table table-bordered table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>No.</th>
                                <th>Unit Kerja</th>
                                <th>Keterangan</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot class="thead-dark">
                            <tr>
                                <th>No.</th>
                                <th>Unit Kerja</th>
                                <th>Keterangan</th>
                                <th>status</th>
                                <th>Aksi</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.container-fluid -->
<div class="modal fade" id="edit-modal">
    <div class="modal-dialog">
        <div class="modal-content bg-warning">
            <div class="modal-header">
                <h4 class="modal-title" id="edit-title">Edit Unit Kerja</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            </div>
            <form role="form">
            <input type="hidden" name="id" id="edit-id">
            <div class="modal-body">
                <div class="form-group">
                    <label for="edit-UnitKerja">Unit Kerja :</label>
                    <input type="text" class="form-control" id="edit-UnitKerja" name="editunitkerja" placeholder="Unit Kerja">
                </div>
                <div class="form-group">
                    <label for="edit-Keterangan">Keterangan :</label>
                    <input type="text" class="form-control" id="edit-Keterangan" name="editketerangan" placeholder="Keterangan">
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-outline-dark" id="edit-data">Simpan</button>
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="nonaktif-modal">
    <div class="modal-dialog">
        <div class="modal-content bg-danger">
            <div class="modal-header">
                <h4 class="modal-title" id="nonaktif-title">Non Aktifkan Data</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id" id="nonaktif-id">
                <h4>Non Aktifkan Unit Kerja <strong id="nonaktif-unit"></strong></h4>
                <p><span id="nonaktif-keterangan"></span></p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-outline-light" id="nonaktif-data">Non Aktifkan</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="aktif-modal">
    <div class="modal-dialog">
        <div class="modal-content bg-success">
            <div class="modal-header">
                <h4 class="modal-title" id="aktif-title">Aktifkan Data</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id" id="aktif-id">
                <h4>Aktifkan Unit Kerja <strong id="aktif-unit"></strong></h4>
                <p><span id="aktif-keterangan"></span></p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-outline-light" id="aktif-data">Aktifkan</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endsection

@section('plugin-scripts')
<!-- DataTables -->
<script src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js')}}"></script>
<!-- JQuery Validate -->
<script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-validation/localization/messages_id.min.js') }}"></script>
@endsection

@section('custom-script')
<script type="text/javascript">
    $(function() {
        'use strict';
        $('#form-unit-kerja').validate({
            rules: {
                'unitkerja': {
                    required: true,
                    remote: {
                        url: "{{ url('user/unit-kerja/ajax/cek-unik') }}",
                        type: "post"
                    }
                },
                'keterangan': {
                    required: true,
                }
            },
            messages: {
                'unitkerja': {
                    remote: jQuery.validator.format("Unit Kerja {0} sudah ada")
                }
            },
            highlight: function (input) {
                $(input).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function (input) {
                $(input).addClass('is-valid').removeClass('is-invalid');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.form-group').append(error);
            },
            errorClass : "error text-danger font-weight-light",
        });

        var oTable = $("#table-unit-kerja").DataTable({
            "ajax": {
                url: "{{ url('user/unit-kerja/ajax/tabel-unit-kerja') }}",
                type: "POST",
                data : function (dt) {
                    dt._token = "{{ csrf_token() }}"
                }
            },
            "processing": true,
            "serverSide": true,
            "order": [[ 3, "asc" ]],
            "columnDefs": [
                { "orderable": false, "targets": 0 },
                { "orderable": false, "targets": 4 },
                { "searchable": false, "targets": 0 },
                { "searchable": false, "targets": 3 },
                { "searchable": false, "targets": 4 },
            ]
        });

        $("#table-unit-kerja_filter input").unbind().bind('keyup', function(e) {
            //e.preventDefault();
            var code = e.keyCode || e.which;
            if(code == 13 && this.value !== "") {
                oTable.search( this.value ).draw();
            }
            if(this.value == "") {
                oTable.search("").draw();
            }
            // console.log(this.value);
            return;
        });

        $("#btn-refresh").on('click', function(event) {
            event.preventDefault();
            oTable.ajax.reload();
        });

        $("#edit-modal").on("show.bs.modal", function(e) {
            var button = $(e.relatedTarget);
            // console.log(button.data("bap"));
            $.ajax({
                url: "{{ url('user/unit-kerja/ajax/data-unit-kerja') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("unitkerja")
                },
                success: function(dt){
                    $("#nonaktif-data").hide();
                    if (dt == "error") {
                        $("#edit-title").text("ERROR");
                        $("#edit-id").val('');
                        $("#edit-UnitKerja").val('');
                        $("#edit-Keterangan").val('');
                        
                    } else {
                        $("#edit-title").text("Edit Unit Kerja");
                        $("#edit-id").val(dt.id);
                        $("#edit-UnitKerja").val(dt.unitkerja);
                        $("#edit-Keterangan").val(dt.keterangan);
                    }
                }
            });
        });
        $("#edit-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/unit-kerja/ajax/edit-unit-kerja') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    _method: "PATCH",
                    id: $("#edit-id").val(),
                    unitkerja: $("#edit-UnitKerja").val(),
                    keterangan: $("#edit-Keterangan").val(),
                },
                success: function(ret){
                    if (ret == "error") {
                        $(document).Toasts('create', {
                            class: 'bg-danger',
                            title: 'Gagal',
                            autohide: true,
                            delay: 1500,
                            body: 'Gagal Edit Data Unit Kerja.',
                            icon: 'far fa-times-circle fa-lg',
                        });
                    } else {
                        $(document).Toasts('create', {
                            class: 'bg-success',
                            title: 'Sukses',
                            autohide: true,
                            delay: 1500,
                            body: 'Sukses Edit Data Unit Kerja.',
                            icon: 'far fa-check-circle fa-lg',
                        });
                        oTable.ajax.reload();
                    }
                }
            });
            $("#edit-modal").modal("hide");
        });

        $("#edit-modal").on("hidden.bs.modal", function(e) {
            $("#edit-id").val('');
            $("#edit-UnitKerja").val('');
            $("#edit-Keterangan").val('');
        });

        $("#nonaktif-data").hide();
        $("#nonaktif-modal").on("show.bs.modal", function(e) {
            var button = $(e.relatedTarget);
            // console.log(button.data("bap"));
            $.ajax({
                url: "{{ url('user/unit-kerja/ajax/data-unit-kerja') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("unitkerja")
                },
                success: function(dt){
                    $("#nonaktif-data").hide();
                    if (dt == "error") {
                        $("#nonaktif-title").text("ERROR");
                        $("#nonaktif-id").val('');
                        $("#nonaktif-unit").text('');
                        $("#nonaktif-keterangan").text('');
                        $("#nonaktif-data").hide();
                        
                    } else {
                        $("#nonaktif-title").text("Hapus Unit Kerja");
                        $("#nonaktif-id").val(dt.id);
                        $("#nonaktif-unit").text(dt.unitkerja);
                        $("#nonaktif-keterangan").text(dt.keterangan);
                        $("#nonaktif-data").show('fast');
                    }
                }
            });
        });
        $("#nonaktif-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/unit-kerja/ajax/nonaktif-unit-kerja') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    _method: "PATCH",
                    id: $("#nonaktif-id").val(),
                },
                success: function(ret){
                    if (ret == "error") {
                        $(document).Toasts('create', {
                            class: 'bg-danger',
                            title: 'Gagal',
                            autohide: true,
                            delay: 1500,
                            body: 'Gagal Menonaktifkan Data Unit Kerja.',
                            icon: 'far fa-times-circle fa-lg',
                        });
                    } else {
                        $(document).Toasts('create', {
                            class: 'bg-success',
                            title: 'Sukses',
                            autohide: true,
                            delay: 1500,
                            body: 'Sukses Menonaktifkan Data Unit Kerja.',
                            icon: 'far fa-check-circle fa-lg',
                        });
                        oTable.ajax.reload();
                    }
                }
            });
            $("#nonaktif-modal").modal("hide");
        });

        $("#aktif-data").hide();
        $("#aktif-modal").on("show.bs.modal", function(e) {
            var button = $(e.relatedTarget);
            // console.log(button.data("bap"));
            $.ajax({
                url: "{{ url('user/unit-kerja/ajax/data-unit-kerja') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("unitkerja")
                },
                success: function(dt){
                    $("#aktif-data").hide();
                    if (dt == "error") {
                        $("#aktif-title").text("ERROR");
                        $("#aktif-id").val('');
                        $("#aktif-unit").text('');
                        $("#aktif-keterangan").text('');
                        $("#aktif-data").hide();
                        
                    } else {
                        $("#aktif-title").text("Aktifkan Unit Kerja");
                        $("#aktif-id").val(dt.id);
                        $("#aktif-unit").text(dt.unitkerja);
                        $("#aktif-keterangan").text(dt.keterangan);
                        $("#aktif-data").show('fast');
                    }
                }
            });
        });
        $("#aktif-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/unit-kerja/ajax/aktif-unit-kerja') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    _method: "PATCH",
                    id: $("#aktif-id").val(),
                },
                success: function(ret){
                    if (ret == "error") {
                        $(document).Toasts('create', {
                            class: 'bg-danger',
                            title: 'Gagal',
                            autohide: true,
                            delay: 1500,
                            body: 'Gagal Mengaktifkan Data Unit Kerja.',
                            icon: 'far fa-times-circle fa-lg',
                        });
                    } else {
                        $(document).Toasts('create', {
                            class: 'bg-success',
                            title: 'Sukses',
                            autohide: true,
                            delay: 1500,
                            body: 'Sukses Mengaktifkan Data Unit Kerja.',
                            icon: 'far fa-check-circle fa-lg',
                        });
                        oTable.ajax.reload();
                    }
                }
            });
            $("#aktif-modal").modal("hide");
        });
    });
</script>
@endsection