@extends('layouts.master')

@section('title', 'Jabatan')

@section('content-header','Manajemen Jabatan')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-user-tag"></i> Tambah Jabatan</h3>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <form role="form" id="form-jabatan" method="POST" action="{{ url('user/jabatan/simpan') }}">
                {{ csrf_field() }}
                <div class="card-body">
                    <div class="form-group">
                        <label>Unit Kerja :</label>
                        <select id="unitkerja" name="unitkerja" class="form-control select2bs4" data-placeholder="Unit Kerja" data-dropdown-css-class="select2-success" style="width: 100%;">
                            <option></option>
                            @foreach(Silaras\Model\UnitKerja::where('aktif','1')->get() as $unitKerja)
                            <option value="{{$unitKerja->id}}">{{$unitKerja->unitkerja}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="inputJabatan">Jabatan :</label>
                        <input type="text" class="form-control" id="inputJabatan" name="jabatan" placeholder="Jabatan">
                    </div>
                    <div class="form-group">
                        <label for="inputKeterangan">Keterangan :</label>
                        <input type="text" class="form-control" id="inputKeterangan" name="keterangan" placeholder="Keterangan">
                    </div>
                    <div class="form-group">
                        <label>Level :</label>
                        <select name="level" class="form-control select2bs4" data-placeholder="Level Jabatan" data-dropdown-css-class="select2-danger" style="width: 100%;">
                            <option></option>
                            @foreach(Silaras\Model\Level::all() as $level)
                            <option value="{{$level->id}}">{{$level->level}}</option>
                            @endforeach
                        </select>
                    </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-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-user-tag"></i> Data Jabatan</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-jabatan" class="table table-bordered table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>No.</th>
                                <th>Jabatan</th>
                                <th>Unit Kerja</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot class="thead-dark">
                            <tr>
                                <th>No.</th>
                                <th>Jabatan</th>
                                <th>Unit Kerja</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 Jabatan</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>Unit Kerja :</label>
                    <select id="edit-unitkerja" name="editunitkerja" class="form-control select2Modal" data-placeholder="Unit Kerja" data-dropdown-css-class="select2-success" style="width: 100%;">
                        <option></option>
                        @foreach(Silaras\Model\UnitKerja::where('aktif','1')->get() as $unitKerja)
                        <option value="{{$unitKerja->id}}">{{$unitKerja->unitkerja}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-jabatan">Jabatan :</label>
                    <input type="text" class="form-control" id="edit-jabatan" name="editjabatan" placeholder="Jabatan">
                </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 class="form-group">
                    <label>Level :</label>
                    <select id="edit-level" name="editlevel" class="form-control select2Modal" data-placeholder="Unit Kerja" data-dropdown-css-class="select2-danger" style="width: 100%;">
                        <option></option>
                        @foreach(Silaras\Model\Level::all() as $level)
                        <option value="{{$level->id}}">{{$level->level}}</option>
                        @endforeach
                    </select>
                </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 Jabatan <strong id="nonaktif-jabatan"></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 Jabatan <strong id="aktif-jabatan"></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>
<!-- Select2 -->
<script src="{{asset('plugins/select2/js/select2.full.min.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';
        $('.select2bs4').select2();
        $('.select2Modal').select2();

        $('#form-jabatan').validate({
            ignore: [],
            rules: {
                'unitkerja': {
                    required: true,
                },
                'jabatan': {
                    required: true,
                    remote: {
                        url: "{{ url('user/jabatan/ajax/cek-unik') }}",
                        type: "post",
                        data: {
                            unitkerja: function() {
                                return $( "#unitkerja" ).val();
                            }
                        }
                    }
                },
                'keterangan': {
                    required: true,
                },
                'level': {
                    required: true,
                }
            },
            messages: {
                'jabatan': {
                    remote: jQuery.validator.format("Jabatan {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",
        });

        $(document).on("change", ".select2bs4", function() {
            $('#form-jabatan').valid();
        });

        var oTable = $("#table-jabatan").DataTable({
            "ajax": {
                url: "{{ url('user/jabatan/ajax/tabel-jabatan') }}",
                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": 2 },
                { "searchable": false, "targets": 3 },
                { "searchable": false, "targets": 4 },
            ]
        });

        $("#table-jabatan_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/jabatan/ajax/data-jabatan') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("jabatan")
                },
                success: function(dt){
                    $("#nonaktif-data").hide();
                    if (dt == "error") {
                        $("#edit-title").text("ERROR");
                        $("#edit-id").val('');
                        $("#edit-jabatan").val('');
                        $("#edit-Keterangan").val('');
                        $("#edit-unitkerja").val('').trigger('change');
                        $("#edit-level").val('').trigger('change');
                    } else {
                        $("#edit-title").text("Edit Jabatan");
                        $("#edit-id").val(dt.id);
                        $("#edit-jabatan").val(dt.jabatan);
                        $("#edit-Keterangan").val(dt.keterangan);
                        $("#edit-unitkerja").val(dt.unitkerja['id']).trigger('change');
                        $("#edit-level").val(dt.level['id']).trigger('change');
                    }
                }
            });
        });
        $("#edit-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/jabatan/ajax/edit-jabatan') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    _method: "PATCH",
                    id: $("#edit-id").val(),
                    jabatan: $("#edit-jabatan").val(),
                    keterangan: $("#edit-Keterangan").val(),
                    unitkerja: $("#edit-unitkerja").val(),
                    level: $("#edit-level").val()
                },
                success: function(ret){
                    if (ret == "error") {
                        $(document).Toasts('create', {
                            class: 'bg-danger',
                            title: 'Gagal',
                            autohide: true,
                            delay: 1500,
                            body: 'Gagal Edit Data Jabatan.',
                            icon: 'far fa-times-circle fa-lg',
                        });
                    } else {
                        $(document).Toasts('create', {
                            class: 'bg-success',
                            title: 'Sukses',
                            autohide: true,
                            delay: 1500,
                            body: 'Sukses Edit Data Jabatan.',
                            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-jabatan").val('');
            $("#edit-Keterangan").val('');
            $("#edit-unitkerja").val('').trigger('change');
            $("#edit-level").val('').trigger('change');
        });

        $("#nonaktif-data").hide();
        $("#nonaktif-modal").on("show.bs.modal", function(e) {
            var button = $(e.relatedTarget);
            // console.log(button.data("bap"));
            $.ajax({
                url: "{{ url('user/jabatan/ajax/data-jabatan') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("jabatan")
                },
                success: function(dt){
                    $("#nonaktif-data").hide();
                    if (dt == "error") {
                        $("#nonaktif-title").text("ERROR");
                        $("#nonaktif-id").val('');
                        $("#nonaktif-jabatan").text('');
                        $("#nonaktif-keterangan").text('');
                        $("#nonaktif-data").hide();
                        
                    } else {
                        $("#nonaktif-title").text("Non-Aktifkan Jabatan");
                        $("#nonaktif-id").val(dt.id);
                        $("#nonaktif-jabatan").text(dt.jabatan);
                        $("#nonaktif-keterangan").text(dt.keterangan);
                        $("#nonaktif-data").show('fast');
                    }
                }
            });
        });
        $("#nonaktif-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/jabatan/ajax/nonaktif-jabatan') }}",
                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 Jabatan.',
                            icon: 'far fa-times-circle fa-lg',
                        });
                    } else {
                        $(document).Toasts('create', {
                            class: 'bg-success',
                            title: 'Sukses',
                            autohide: true,
                            delay: 1500,
                            body: 'Sukses Menonaktifkan Data Jabatan.',
                            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/jabatan/ajax/data-jabatan') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("jabatan")
                },
                success: function(dt){
                    $("#aktif-data").hide();
                    if (dt == "error") {
                        $("#aktif-title").text("ERROR");
                        $("#aktif-id").val('');
                        $("#aktif-jabatan").text('');
                        $("#aktif-keterangan").text('');
                        $("#aktif-data").hide();
                        
                    } else {
                        $("#aktif-title").text("Aktifkan Jabatan");
                        $("#aktif-id").val(dt.id);
                        $("#aktif-jabatan").text(dt.jabatan);
                        $("#aktif-keterangan").text(dt.keterangan);
                        $("#aktif-data").show('fast');
                    }
                }
            });
        });
        $("#aktif-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/jabatan/ajax/aktif-jabatan') }}",
                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 Jabatan.',
                            icon: 'far fa-times-circle fa-lg',
                        });
                    } else {
                        $(document).Toasts('create', {
                            class: 'bg-success',
                            title: 'Sukses',
                            autohide: true,
                            delay: 1500,
                            body: 'Sukses Mengaktifkan Data Jabatan.',
                            icon: 'far fa-check-circle fa-lg',
                        });
                        oTable.ajax.reload();
                    }
                }
            });
            $("#aktif-modal").modal("hide");
        });
    });
</script>
@endsection