@php
    use App\Models\Employee;
@endphp
@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($diklat))
                    @method('PUT')
                @endif

                <div class="row">
                    <div class="col-sm-12 col-md-5">
                        <x-form.date-picker label="Tanggal Diklat" picker-type="date-range" id-start="start-date"
                            id-end="end-date" name-start="start_date" name-end="end_date" :old-start="old('start_date', @$diklat->start_date)"
                            :old-end="old('end_date', @$diklat->end_date)" />
                    </div>
                    <div class="col-sm-12 col-md-7">
                        <x-form.input-text label="Tempat Diklat" id="places" name="places" :old="old('places',@$diklat->places)" />
                    </div>



                    <div class="col-sm-12">
                        <x-form.text-editor :name="'purposes'" label="Tujuan" id="purposes-require" :old="old('purposes', @$diklat->purposes)" />

                    </div>

                </div>
                <x-section-form label="Karyawan" icon="mdi mdi-account-tie" class="mb-1" />

                <div class="table-responsive">
                    <table class="table" id="table-employees">
                        <thead>
                            <tr>
                                <th>NIP</th>
                                <th>NAMA</th>
                                <th>JABATAN</th>
                                <th>BIAYA</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $old = old('employee', []);
                                $old_items = @$diklat->employees;
                                $total = 0;
                            @endphp
                            @if (empty($old))
                                @if (isset($old_items))
                                    @foreach ($old_items as $index => $i)
                                        @php
                                            $total += $i['fee'];
                                            $employee = Employee::find($i['id']);
                                        @endphp
                                        <tr>
                                            <td>
                                                <x-form.input-text type="hidden" name="employee[id][]" :old="$i['id']"
                                                    class="employee-id" />
                                                <x-form.input-group-button name="employee[nip][]" class="employee-nip"
                                                    style="cursor: pointer;background: white;"
                                                    btn-label="<i class='mdi mdi-magnify'></i>" btn-class="px-3" readonly
                                                    :old="@$employee->nip" />
                                            </td>
                                            <td>
                                                <x-form.input-text name="employee[name][]" :old="@$employee->name"
                                                    class="employee-name" readonly />
                                            </td>
                                            <td>
                                                <x-form.input-text name="employee[position][]" :old="@$employee->positionData->name"
                                                    class="employee-position" readonly />
                                            </td>
                                            <td>
                                                <x-form.input-mask mask="nominal" name="employee[fee][]" :old="$i['fee']"
                                                    class="employee-fee nominal" mask="nominal" />
                                            </td>
                                            <td>
                                                @if ($index > 0)
                                                    <button type="button" class="btn btn-danger btn-sm btn-delete">
                                                        <i class="mdi mdi-trash-can"></i>
                                                    </button>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td>
                                            <x-form.input-text type="hidden" name="employee[id][]" class="employee-id" />
                                            <x-form.input-group-button name="employee[nip][]"
                                                class="employee-nip btn-choose-employee"
                                                style="cursor: pointer;background: white;"
                                                btn-label="<i class='mdi mdi-magnify'></i>"
                                                btn-class="btn-choose-employee px-3" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-text name="employee[name][]" class="employee-name" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-text name="employee[position][]" class="employee-position"
                                                readonly />
                                        </td>
                                        <td>
                                            <x-form.input-mask mask="nominal" name="employee[fee][]"
                                                class="employee-fee nominal" mask="nominal" />
                                        </td>
                                        <td>
                                            &nbsp;
                                        </td>
                                    </tr>
                                @endif
                            @else
                                @foreach ($old['id'] as $index => $i)
                                    @php
                                        $fee = empty($old['fee'][$index])
                                            ? 0
                                            : str_replace('.', '', $old['fee'][$index]);
                                        $total += $fee;
                                    @endphp
                                    <tr>
                                        <td>
                                            <x-form.input-text type="hidden" name="employee[id][]" class="employee-id"
                                                :old="$i" />
                                            <x-form.input-group-button name="employee[nip][]"
                                                class="employee-nip btn-choose-employee"
                                                style="cursor: pointer;background: white;"
                                                btn-label="<i class='mdi mdi-magnify'></i>"
                                                btn-class="btn-choose-employee px-3" :old="$old['nip'][$index]" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-text name="employee[name][]" class="employee-name"
                                                :old="$old['name'][$index]" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-text name="employee[position][]" class="employee-position"
                                                :old="$old['position'][$index]" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-mask mask="nominal" name="employee[fee][]" :old="$fee"
                                                class="employee-fee nominal" mask="nominal" />
                                        </td>
                                        <td>
                                            @if ($index > 0)
                                                <button type="button" class="btn btn-danger btn-sm btn-delete">
                                                    <i class="mdi mdi-trash-can"></i>
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach

                            @endif

                        </tbody>
                        <tfoot>
                            @if (@$errors->has('employees'))
                                @foreach ($errors->get('employees') as $message)
                                <tr>
                                    <td colspan="9" class="text-danger">
                                        {{json_encode($message)}}
                                    </td>
                                </tr>
                                @endforeach
                            @endif
                            <tr>
                                <td colspan="9">
                                    <a href="javascript:void(0)" id="btn-add-item">
                                        <i class="mdi mdi-plus"></i> ADD
                                    </a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-12">
                    </div>
                    <div class="col-md-4 offset-md-4 col-sm-12">
                        <table class="table-padding">
                            <tr>
                                <td>Total</td>
                                <td class="divide">:</td>
                                <td>Rp</td>
                                <td class="text-right" style="min-width: 90px;" id="total">
                                    {{ number_format(@$total, 0, '', '.') }}</td>
                            </tr>
                        </table>
                    </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.diklat.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>
        let tr_employee = ""
        let total = "{{ @$total ?? 0 }}"
        $(document).ready(function() {
            window.LaravelDataTables = window.LaravelDataTables || {}

            $("#table-employees").on("click", ".btn-choose-employee", function() {
                tr_item = $(this).closest("tr")

                $("#modal-employee").modal("show")
                loadTableEmployee();
            })


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

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

                        tr_item.find(".employee-id").val(response.data.id)
                        tr_item.find(".employee-nip").val(response.data.nip)
                        tr_item.find(".employee-name").val(response.data.name)
                        tr_item.find(".employee-position").val(response.data.position)
                        tr_item.find(".employee-fee").val(0)

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


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

            $("#table-employees").on("click", ".btn-delete", function() {
                $(this).closest("tr").remove()
                setTotal();
            })

            $("#table-employees").on("blur", ".employee-fee", function() {
                tr_item = $(this).closest("tr")
                setTotal();
            })


            $("#btn-add-item").click(function() {
                $("#table-employees tbody").append('<tr>' +
                    '<td>' +
                    '<input type="hidden" name="employee[id][]" class="employee-id">' +
                    '<div class="input-group">' +
                    '<input type="text" name="employee[nip][]" class="form-control employee-nip btn-choose-employee" placeholder="....." style="cursor: pointer;background: white;" readonly /> ' +
                    '<div class="input-group-append">' +
                    '<button type="button" class="btn btn-default btn-choose-employee px-3">' +
                    '<i class="mdi mdi-magnify"></i>' +
                    '</button>' +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    "<td>" +
                    "<input type='text' name='employee[name][]' class='form-control employee-name' readonly placeholder='.....' autocomplete='off'>" +
                    "</td>" +
                    "<td>" +
                    "<input type='text' name='employee[position][]' class='form-control employee-position' readonly placeholder='.....' autocomplete='off'>" +
                    "</td>" +
                    '<td>' +
                    '<input type="text" name="employee[fee][]" class="form-control nominal-mask employee-fee" placeholder="....." />' +
                    '</td>' +
                    '<td>' +
                    '<button type="button" class="btn btn-danger btn-sm btn-delete">' +
                    '<i class="mdi mdi-trash-can"></i>' +
                    '</button>' +
                    '</td>' +
                    '</tr>')
                $(".nominal-mask").inputmask({
                    alias: "nominal"
                })
            });



            setTotal();
        })

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

        function setTotal() {
            let fee = 0;
            $(".employee-fee").each(function() {
                let p = $(this).val();
                p = (p == "") ? 0 : p.replace(/\./g, "")
                fee += parseFloat(p);
            });

            $("#total").html(moneyFormat(fee))
        }

        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
                        }
                    },
                    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