{{------------------------------------------ Template ------------------------------------------}}
@extends('admin.template.template')
{{------------------------------------------- Title --------------------------------------------}}
@section('title')
<title>Admin | {{ config('app.name') }}</title>
@endsection
{{------------------------------------------ page-css ------------------------------------------}}
@section('page-css')

@endsection
{{------------------------------------------- navbar -------------------------------------------}}
@section('navbar')
  @include('admin.template.navbar')
@endsection
{{------------------------------------------ subtitle ------------------------------------------}}
@section('subtitle')
            <h1 class="m-0">Employee</h1>
@endsection
{{----------------------------------------- Breadcrumb -----------------------------------------}}
@section('breadcrumb')
            <li class="breadcrumb-item"><a href="{{asset('/admin')}}">Administrator</a></li>
            <li class="breadcrumb-item"><a href="#">Post</a></li>
            <li class="breadcrumb-item active"><a href="{{asset('/news')}}">Employee</a></li>
@endsection
{{------------------------------------------ Content ------------------------------------------}}
@section('content')

        <!-- Default box -->
        <div class="card">
          <div class="card-header">
            <a class="btn btn-success btn-sm" href="javascript:void(0)" id="create_btn"><i class="fas fa-plus-square"></i></a>
          </div>
          <div class="card-body">
            <!-- Table -->
            <table class="table table-bordered table-sm data-table" cellspacing="0" width="100%">
                <thead class="bg-secondary text-white">
                    <tr>
                        <th class="text-center">#</th>
                        <th class="text-center">Photo</th>
                        <th class="text-center">Register Number</th>
                        <th class="text-center">Name</th>
                        <th class="text-center">Position</th>
                        <th class="text-center">Category</th>
                        <th class="text-center">Rank</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>  
          </div>
          <!-- /.card-body -->
          <div class="card-footer">
            &nbsp;
          </div>
          <!-- /.card-footer-->
        </div>
        <!-- /.card -->

        <!-- ModalCreate -->
        <div class="modal fade" id="news_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
              <form action="{{ route('employee.store') }}" method="POST" id="employee_form" name="employee_form" enctype="multipart/form-data">
                <input type="hidden" name="_method" id="_method" value="POST">
                <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                <div class="modal-header">
                  <h5 class="modal-title" id="title_modal"></h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="productunit" class="form-label">ID</label>
                                <input type="text" class="form-control" id="id" name="id" placeholder="Input Code" Readonly>
                                <span class="text-danger error-text id_err"></span>
                            </div>
                            <div class="mb-3">
                              <div class="text-center">
                                  <img id="output" class="img-fluid img-thumbnail" src="{{asset('images/jpg.png')}}" alt="User profile picture" style="height:270px;">
                              </div>
                            </div>
                            <div class="mb-3">
                                <label for="photo" class="form-label">Photo</label>
                                <input type="file" name="photo" id="photo" class="form-control" onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])">
                                <span class="text-danger error-text photo_err"></span>
                            </div>
                              <div class="mb-3">
                                  <label for="registernumber" class="form-label">Register Number</label>
                                  <input type="text" class="form-control" id="registernumber" name="registernumber" placeholder="Input Register Number">
                                  <span class="text-danger error-text registernumber_err"></span>
                              </div>
                              <div class="mb-3">
                                <label for="registerdate" class="form-label mt-2">Register Date</label>
                                <input type="text" class="form-control datepicker" data-date-format="yyyy-mm-dd" id="registerdate" name="registerdate" placeholder="Input Register Date" autocomplete="off">
                                <span class="text-danger error-text registerdate_err"></span>
                              </div>
                              <div class="mb-3">
                                  <label for="name" class="form-label">Name</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="Input Name">
                                <span class="text-danger error-text name_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="gender" class="form-label mt-2">Gender</label>
                                <select class="form-select" id="gender" name="gender">
                                    <option value="">Please select one option</option> 
                                    <option value="Male">Male</option> 
                                    <option value="Female">Female</option> 
                                </select>
                                <span class="text-danger error-text gender_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="dateofbirth" class="form-label mt-2">Date of Birth</label>
                                <input type="text" class="form-control datepicker" data-date-format="yyyy-mm-dd" id="dateofbirth" name="dateofbirth" placeholder="Input Date of Birth" autocomplete="off">
                                <span class="text-danger error-text dateofbirth_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="placeofbirth" class="form-label">Place of Birth</label>
                                <input type="text" class="form-control" id="placeofbirth" name="placeofbirth" placeholder="Input Place of Birth">
                                <span class="text-danger error-text placeofbirth_err"></span>
                            </div>
                            
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="position" class="form-label mt-2">Position</label>
                                <select class="form-select" id="position" name="position">
                                    <option value="">Please select one option</option> 
                                    <option value="Analis Perencanaan, Evaluasi Dan Pelaporan">Analis Perencanaan, Evaluasi Dan Pelaporan</option>
                                    <option value="Analis Perkara Peradilan">Analis Perkara Peradilan</option>
                                    <option value="Analis Sdm Aparatur">Analis Sdm Aparatur</option>
                                    <option value="Bakti">Bakti</option>
                                    <option value="Hakim Pratama">Hakim Pratama</option>
                                    <option value="Hakim Pratama Muda">Hakim Pratama Muda</option>
                                    <option value="Juru Sita Pengganti">Juru Sita Pengganti</option>
                                    <option value="Jurusita Pengganti">Jurusita Pengganti</option>
                                    <option value="Kasubbag Kepegawaian Organisasi Dan Tata Laksana">Kasubbag Kepegawaian Organisasi Dan Tata Laksana</option>
                                    <option value="Kasubbag Umum Dan Keuangan">Kasubbag Umum Dan Keuangan</option>
                                    <option value="Ketua">Ketua</option>
                                    <option value="Panitera">Panitera</option>
                                    <option value="Panitera Muda Hukum">Panitera Muda Hukum</option>
                                    <option value="Panitera Muda Perdata">Panitera Muda Perdata</option>
                                    <option value="Panitera Muda Pidana">Panitera Muda Pidana</option>
                                    <option value="Panitera Pengganti">Panitera Pengganti</option>
                                    <option value="Pengadministrasi Registrasi Perkara">Pengadministrasi Registrasi Perkara</option>
                                    <option value="Pengelola Perkara">Pengelola Perkara</option>
                                    <option value="Pengelola Sistem Dan Jaringan">Pengelola Sistem Dan Jaringan</option>
                                    <option value="Pramubakti">Pramubakti</option>
                                    <option value="Satpam">Satpam</option>
                                    <option value="Sekretaris">Sekretaris</option>
                                    <option value="Supir">Supir</option>
                                    <option value="Wakil">Wakil</option>
                                </select>
                                <span class="text-danger error-text position_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="positiondate" class="form-label mt-2">Position Start Date</label>
                                <input type="text" class="form-control datepicker" data-date-format="yyyy-mm-dd" id="positiondate" name="positiondate" placeholder="Input Date of Birth" autocomplete="off">
                                <span class="text-danger error-text positiondate_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="rank" class="form-label mt-2">Rank</label>
                                <select class="form-select" id="rank" name="rank">
                                    <option value="">Please select one option</option> 
                                    <option value="Pembina">Pembina</option>
                                    <option value="Penata">Penata</option>
                                    <option value="Penata Muda">Penata Muda</option>
                                    <option value="Penata Muda Tk.1">Penata Muda Tk.1</option>
                                    <option value="Penata Tk.1">Penata Tk.1</option>
                                    <option value="Pengatur">Pengatur</option>

                                </select>
                                <span class="text-danger error-text rank_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="grade" class="form-label mt-2">Grade</label>
                                <select class="form-select" id="grade" name="grade">
                                    <option value="">Please select one option</option> 
                                    <option value="II C">II C</option>
                                    <option value="III A">III A</option>
                                    <option value="III B">III B</option>
                                    <option value="III C">III C</option>
                                    <option value="III D">III D</option>
                                    <option value="IV A">IV A</option>
                                </select>
                                <span class="text-danger error-text grade_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="educational" class="form-label mt-2">Educational</label>
                                <textarea class="form-control" rows="3" id="educational" name="educational" placeholder="Input Description"></textarea>
                                <span class="text-danger error-text educational_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="positionhistory" class="form-label mt-2">Position History</label>
                                <textarea class="form-control" rows="3" id="positionhistory" name="positionhistory" placeholder="Input Description"></textarea>
                                <span class="text-danger error-text positionhistory_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="lasteducation" class="form-label mt-2">Last Education</label>
                                <select class="form-select" id="lasteducation" name="lasteducation">
                                    <option value="">Please select one option</option> 
                                    <option value="SMA Sederajad">SMA Sederajad</option> 
                                    <option value="D1">D1</option> 
                                    <option value="D3">D3</option> 
                                    <option value="S1">S1</option> 
                                    <option value="S2">S2</option> 
                                </select>
                                <span class="text-danger error-text lasteducation_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="category" class="form-label mt-2">Category</label>
                                <select class="form-select" id="category" name="category[]" multiple="multiple">
                                    <option value="">Please select one option</option> 
                                    <option value="Pegawai">Pegawai</option> 
                                    <option value="Ketua">Ketua</option> 
                                    <option value="Wakil">Wakil</option> 
                                    <option value="Hakim">Hakim</option> 
                                    <option value="Panitera">Panitera</option> 
                                    <option value="Sekretaris">Sekretaris</option> 
                                    <option value="Pejabat Struktural Kesekretariatan">Pejabat Struktural Kesekretariatan</option> 
                                    <option value="Pejabat Struktural Kepaniteraan">Pejabat Struktural Kepaniteraan</option> 
                                    <option value="Pejabat Fungsional Kesekretariatan">Pejabat Fungsional Kesekretariatan</option> 
                                    <option value="Pejabat Fungsional Kepaniteraan">Pejabat Fungsional Kepaniteraan</option> 
                                    <option value="Honorer">Honorer</option> 
                                </select>
                                <span class="text-danger error-text category_err"></span>
                            </div>
                            <div class="mb-3">
                                <label for="status" class="form-label mt-2">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="">Please select one option</option> 
                                    <option value="Active">Active</option> 
                                    <option value="Non-Active">Non-Active</option> 
                                </select>
                                <span class="text-danger error-text status_err"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="submit" class="btn btn-primary" id="save_btn" value="">Save</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
        </div>
@stop
{{------------------------------------------ Page js ------------------------------------------}}
@section('page-js')
<script type="text/javascript">
    $(function(){
        $.ajaxSetup({headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
        //<!-- Function Validation -->
        function printErrorMsg(msg) {
            $.each( msg, function( key, value ) {
            console.log(key+' | '+value);
            $('.'+key+'_err').text(value);
            $('#'+key).addClass( "is-invalid" );
            });
        }

        //<!-- Clear Form -->
        function ClearForm() {
            $('#employee_form')[0].reset();
            $('#category').data('selectize').setValue('');
            $('#gender').data('selectize').setValue('');
            $('#position').data('selectize').setValue('');
            $('#grade').data('selectize').setValue('');
            $('#_method').val('POST');
            $("#output").attr("src",'{{asset("images/profileX.jpg")}}');
            $('#_method').val('POST');
        }

        //Clear is Invalid
        function ClearInvalid() {
            $(".form-control").removeClass("is-invalid");
            $('.error-text').text('');
        }

        $('.form-select').selectize();
        $('.datepicker').datepicker({
                // orientation: "bottom",
                autoclose: true,
                format: "yyyy-mm-dd",
                todayBtn: true,
                todayHighlight: true
            });

        //<!-- Table -->
        var table = $('.data-table').DataTable({
            responsive: true, 
            processing: true,
            serverSide: true,
            ajax: "{{ route('employee.index') }}",
            columns : [
                {data:'DT_RowIndex',name:'DT_RowIndex'},
                {data:'xphoto',name:'xphoto'},
                {data:'registernumber',name:'registernumber'},
                {data:'name',name:'name'},
                {data:'position',name:'position'},
                {data:'xcategory',name:'xcategory'},
                {data:'rank',name:'rank'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            columnDefs: [
                {
                targets     : 0, 
                className   : 'dt-body-center',
                width       : '60px'
                },
                {
                targets     : 1, 
                className   : 'dt-body-center',
                width       : '60px'
                },
                {
                targets     : 2, 
                className   : 'dt-body-center',
                width       : '150px'
                },
                {
                targets     : 3, 
                className   : 'dt-body-center',
                },
                {
                targets     : 4,
                className   : 'dt-body-center',
                width       : '150px'
                },
                {
                targets     : 5,
                className   : 'dt-body-center',
                width       : '250px'
                },
                {
                targets     : 6,
                className   : 'dt-body-center',
                width       : '100px'
                },
                {
                targets     : 7,
                className   : 'dt-body-center',
                width       : '100px'
                },
            ],
        });

        //<!-- Button Create -->
        $('#create_btn').click(function () {
            ClearForm();
            ClearInvalid();
            $('#news_modal').modal('show');
            $('#title_modal').html("Create");
            $('#news').focus()
            $('#save_btn').val('create');
        });

        //<!-- Button Save -->
        $('#employee_form').submit(function(e) {
            e.preventDefault();
            ClearInvalid();

            if($('#save_btn').val()  =='create'){
                let formData = new FormData(this);
                $.ajax({
                    type:'POST',
                    url: "{{ route('employee.store') }}",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if ($.isEmptyObject(data.error)) {
                            $('#employee_form').trigger("reset");
                            $('#news_modal').modal('hide');
                            table.draw();
                            Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Data created successfully!',
                            showConfirmButton: false,
                            timer: 1500
                            });
                        } else {
                            printErrorMsg(data.error)
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                });
            }
            else if($('#save_btn').val() =='update'){
                var id = $('#id').val();
                var urlupdate = '{{ route("employee.update", ":id") }}';
                urlupdate = urlupdate.replace(':id', id);
                let formData = new FormData(this);
                $.ajax({
                    type:'POST',
                    url: urlupdate,
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if ($.isEmptyObject(data.error)) {
                            $('#employee_form').trigger("reset");
                            $('#news_modal').modal('hide');
                            table.draw();
                            Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Data created successfully!',
                            showConfirmButton: false,
                            timer: 1500
                            });
                        } else {
                            printErrorMsg(data.error)
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                });
            }
        });

        //<!-- Button Edit -->
        $('body').on('click', '.edit', function () {
            ClearInvalid();
            $('#save_btn').val('update');
            $('#_method').val('PUT');
            var id = $(this).data('id');
            var urledit = '{{ route("employee.edit", ":id") }}';
            urledit = urledit.replace(':id', id);
            $.get(urledit, function (data) {
                $('#news_modal').modal('show');
                $('#id').val(data.id);
                $('#registernumber').val(data.registernumber);
                $('#registerdate').val(data.registerdate);
                $('#name').val(data.name);
                $('#gender').data('selectize').setValue(data.gender);
                $("#output").attr("src",'{{ asset("images/employees") }}/'+ data.photo);
                $('#placeofbirth').val(data.placeofbirth);
                $('#dateofbirth').val(data.dateofbirth);
                $('#position').data('selectize').setValue(data.position);
                $('#positiondate').val(data.positiondate);
                $('#rank').data('selectize').setValue(data.rank);
                $('#grade').data('selectize').setValue(data.grade);
                $('#educational').val(data.educational);
                $('#positionhistory').val(data.positionhistory);
                $('#lasteducation').data('selectize').setValue(data.lasteducation);
                $('#category').data('selectize').setValue(data.category);
                $('#status').data('selectize').setValue(data.status);
                $('#title_modal').html("Edit");
                
            })
        });

        //<!-- Button Delete -->
        $('body').on('click', '.delete', function (){
        var id = $(this).data("id");
        var urldestroy = '{{ route("employee.destroy", ":id") }}';
        urldestroy = urldestroy.replace(':id', id);
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
            type: "DELETE",
            url: urldestroy,
            success: function (data) {
                table.draw();
                Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Data deleted successfully!',
                showConfirmButton: false,
                timer: 1500
                });
            },
            error: function (data) {
                console.log('Error:', data);
            }
            });
        }
        })
        });

    });
</script>
@endsection