@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            <h4 class="card-title mb-1 text-info">
                <i class="{{ $icon }}"></i> &nbsp;{{ $label }}
            </h4>
            <p class="card-description">
                @if (isset($vacancy))
                    Fitur untuk edit data {{ Str::lower($label) }}.
                @else
                    Fitur untuk menambah data {{ Str::lower($label) }}.
                @endif

            </p>
            <hr />
            <form method="post" action="{{ $route }}" class="form-block">
                @csrf
                @if (isset($pensiun))
                    @method('PUT')
                @endif
                <div class="row">
                    <div class="col-sm-12 col-md-5">
                        <x-form.date-picker name="date" label="Tanggal Pensiun" picker-type="date" :old="old('date', date('d-m-Y', strtotime(@$pensiun->date ?? 'now')))" />
                    </div>

                    <div class="col-md-7">
                        <x-form.input-text type="hidden" name="employee_id" id="employee-id" :old="old('employee_id', @$pensiun->employee_id)" />

                        <x-form.input-group-button name="employee_name" label="Nama Karyawan" id="employee-name"
                            class="btn-choose-employee bg-white" btn-label="<i class='mdi mdi-magnify'></i>"
                            btn-class="btn-choose-employee px-3" style="cursor: pointer;" :old="old('employee_name', @$pensiun->employee->name)" readonly />
                    </div>
                    <div class="col-sm-12" style="display: none" id="section-employee">
                        <div class="row">
                            <div class="col-md-6">
                                <x-form.input-text label="NIP Karyawan" id="employee-nip" disabled/>
                            </div>
                            <div class="col-md-6">
                                <x-form.input-text label="Jabatan Karyawan" id="employee-position" disabled/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <x-form.input-group-mask addon="Rp." :addon_position="'left'" label="Jumlah Pesangon" name="severence_pay" :old="old('severence_pay', @$pensiun->severence_pay??0)"
                            mask="nominal" />
                    </div>
                    <div class="col-md-5">
                        <x-form.input-group-mask addon="Rp." :addon_position="'left'" label="Pajax PPh" name="tax" :old="old('tax', @$pensiun->tax??0)"
                            mask="nominal" />
                    </div>
                </div>

                <hr class="mt-0" />
                <button type="button" class="btn btn-primary btn-sm btn-submit" data-loading="SAVING...">
                    <i class="mdi mdi-share-circle"></i> &nbsp;SAVE
                </button>
                <a href="{{ route('hr.pensiun.index') }}" class="btn btn-default btn-sm">
                    CANCEL
                </a>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modal-employee" tabindex="-1" aria-labelledby="modal-employeeLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-employeeLabel">
                        <i class="mdi mdi-comment-quote text-primary"></i> &nbsp;Pilih Karyawan
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pt-0">
                    <div class="table-responsive">
                        <table class="table" id="table-employee">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>NIP</th>
                                    <th>Nama</th>
                                    <th>Jabatan</th>
                                    <th>#</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript">
    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

    <script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"
        type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            $(".nominal-mask").inputmask({
                alias: "nominal"
            })
            @if(old('employee_id', @$pensiun->employee_id) != null)
            loadDataEmployee({
                    id: {{old('employee_id', @$pensiun->employee_id)}},
                    _token: token
                });
            @endif
            window.LaravelDataTables = window.LaravelDataTables || {}
            @if (empty($cuti))
                $(".btn-choose-employee").click(function() {
                    $("#modal-employee").modal("show")
                    loadTableEmployee();
                })
            @endif

            $("#table-employee").on("click", ".btn-choose", function() {
                var formData = {
                    id: $(this).data("id"),
                    _token: token
                }

                loadDataEmployee(formData);
            })



        })

        $(document).on('shown.bs.modal', function(e) {
            $($.fn.dataTable.tables(true)).css('width', '100%')
        })

        function loadDataEmployee(formData){
            $.ajax({
                    type: "POST",
                    url: "{{ route('employee.get') }}",
                    data: formData,
                    dataType: "json",
                    success: function(response) {

                        $("#employee-id").val(response.data.id)
                        $("#employee-name").val(response.data.name)
                        $("#section-employee").show();
                        $("#employee-nip").val(response.data.nip);
                        $("#employee-position").val(response.data.position);

                        $("#modal-employee").modal("hide")


                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        ajaxError(xhr.status)
                    }
                })
        }

        function loadTableEmployee() {
            if (window.LaravelDataTables["table-employee"] == undefined) {

                window.LaravelDataTables["table-employee"] = $("#table-employee").DataTable({
                    dom: 'fltpr',
                    language: {
                        search: "",
                        searchPlaceholder: "Pencarian...",
                        lengthMenu: "_MENU_ Data"
                    },
                    ajax: {
                        url: "{{ route('employee.datatable') }}",
                        type: "POST",
                        data: {
                            _token: token,
                            type:'pensiun'
                        }
                    },
                    processing: true,
                    serverSide: true,
                    deferRender: true,
                    ordering: true,
                    order: [
                        [2, 'asc']
                    ],
                    aLengthMenu: [
                        [10, 25, 50, 100],
                        [10, 25, 50, 100]
                    ],
                    drawCallback: function() {
                        $(".set-tooltip").tooltip({
                            container: "body"
                        })
                    },
                    columns: [{
                            data: null,
                            class: "align-top",
                            orderable: false,
                            searchable: false,
                            render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart +
                                1
                        },
                        {
                            data: "nip",
                            class: "align-top",
                            render: (data, type, row) => row.nip
                        },
                        {
                            data: "name",
                            class: "align-top",
                            render: (data, type, row) => row.name
                        },
                        {
                            class: "align-top",
                            render: (data, type, row) => row.position
                        },
                        {
                            class: "align-top",
                            width: "40px",
                            orderable: false,
                            searchable: false,
                            render: (data, type, row) => `<button type="button" class="btn btn-primary btn-xs btn-choose set-tooltip" title="Pilih" data-id="${row.id}">
                            <i class="mdi mdi-check-bold"></i>
                        </button>`
                        }
                    ]
                })

            } else {
                window.LaravelDataTables["table-employee"].ajax.reload()
            }
        }
    </script>
@endpush