@extends('layouts.master')

@section('title', 'Users')

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

@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')
<!-- Default box -->
<div class="card card-danger">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-users"></i> Data User</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>
    </div>
    <div class="card-body">
        <div class="mailbox-controls">
            <a href="{{ url('user/tambah') }}" class="btn btn-info"><i class="fas fa-user-plus"></i> Tambah User</a>
        </div>
        <table id="table-user" class="table table-bordered table-hover">
            <thead class="thead-dark">
                <tr>
                    <th>No.</th>
                    <th>NIP</th>
                    <th>Nama</th>
                    <th>Kota</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot class="thead-dark">
                <tr>
                    <th>No.</th>
                    <th>NIP</th>
                    <th>Nama</th>
                    <th>Kota</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- /.card-body -->
    <div class="card-footer">
        <a href="{{ url('user/tambah') }}" class="btn btn-info"><i class="fas fa-user-plus"></i> Tambah User</a>
    </div>
    <!-- /.card-footer-->
</div>
<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 User</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 User <strong id="nonaktif-nip"></strong></h4>
                <p><span id="nonaktif-nama"></span></p>
                <p><span id="nonaktif-kota"></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 User</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 User <strong id="aktif-nip"></strong></h4>
                <p><span id="aktif-nama"></span></p>
                <p><span id="aktif-kota"></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();

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

        $("#table-user_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();
        });

        $("#nonaktif-data").hide();
        $("#nonaktif-modal").on("show.bs.modal", function(e) {
            var button = $(e.relatedTarget);
            // console.log(button.data("bap"));
            $.ajax({
                url: "{{ url('user/ajax/data-user') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("user")
                },
                success: function(dt){
                    $("#nonaktif-data").hide();
                    if (dt == "error") {
                        $("#nonaktif-title").text("ERROR");
                        $("#nonaktif-id").val('');
                        $("#nonaktif-nip").text('');
                        $("#nonaktif-nama").text('');
                        $("#nonaktif-kota").text('');
                        $("#nonaktif-data").hide();
                        
                    } else {
                        $("#nonaktif-title").text("Non-Aktifkan User");
                        $("#nonaktif-id").val(dt.user.id);
                        $("#nonaktif-nip").text(dt.user.nip);
                        $("#nonaktif-nama").text(dt.user.nama);
                        $("#nonaktif-kota").text(dt.kota.keterangan);
                        $("#nonaktif-data").show('fast');
                    }
                }
            });
        });
        $("#nonaktif-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/ajax/nonaktif-user') }}",
                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/ajax/data-user') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("user")
                },
                success: function(dt){
                    $("#aktif-data").hide();
                    if (dt == "error") {
                        $("#aktif-title").text("ERROR");
                        $("#aktif-id").val('');
                        $("#aktif-nip").text('');
                        $("#aktif-nama").text('');
                        $("#aktif-kota").text('');
                        $("#aktif-data").hide();
                        
                    } else {
                        $("#aktid-title").text("Aktifkan User");
                        $("#aktif-id").val(dt.user.id);
                        $("#aktif-nip").text(dt.user.nip);
                        $("#aktif-nama").text(dt.user.nama);
                        $("#aktif-kota").text(dt.kota.keterangan);
                        $("#aktif-data").show('fast');
                    }
                }
            });
        });
        $("#aktif-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('user/ajax/aktif-user') }}",
                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