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

@section('content')
    <div class="card">
        <div class="card-body">
            <x-section-header action="list" :icon="$icon" :label="$label" />

            <div class="row mt-4">
                <div class="col-sm-12 col-md-6">
                    <a href="{{ route('finance.presence.create') }}" class="btn btn-primary btn-sm">
                        <i class="mdi mdi-plus-box"></i> &nbsp;Buat Kehadiran
                    </a>
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#import-modal">
                        <i class="mdi mdi-plus-box"></i> &nbsp;Import Kehadiran
                    </button>
                </div>

                <div class="col-sm-6 col-md-3">
                    <x-form.date-picker id="year" label="Tahun" picker-type="year" :old="date('Y')" />
                </div>
                <div class="col-sm-6 col-md-3">
                    <x-form.select id="month" label="Bulan" :option="$option['month']" :old="date('m')" />

                </div>
            </div>
            <hr />
            <div class="table-responsive">
                <table class="table" id="table-payroll">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>Jumlah Kehadiran</th>
                            <th>Jumlah Absen</th>
                            <th>Jumlah Lembur</th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="import-modal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
        aria-hidden="true">
        <form method="POST" action="{{ route('finance.presence.import') }}" enctype="multipart/form-data">
            @csrf
            <div class="modal-dialog modal-lg role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="importModalLabel">Import</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <a href="{{ route('finance.presence.excel.import') }}" class="btn btn-info btn-sm"><i
                                class="mdi mdi-file-excel"></i>&nbsp;Template Excel</a>
                        <hr />
                        <x-form.input-file name="files" id="files" label="Input File" required />
                        @if ($notes->count() > 0)
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Tanggal</th>
                                        <th>Nama File</th>
                                        <th>Catatan</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($notes->get() as $item)
                                        <tr>
                                            <td>{{ $item->created_at }}</td>
                                            <td>{{ $item->filename }}</td>
                                            <td>
                                                @foreach ($item->notes as $note)
                                                    {{ $note }}<br />
                                                @endforeach
                                            </td>
                                            <td>{{ $item->status_label }}</td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        @endif

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary " data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Import</button>
                    </div>
                </div>
            </div>
        </form>
    </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 src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"
        type="text/javascript"></script>

    <script>
        let year = "{{ date('Y') }}"
        let month = "{{ date('n') }}"
        var error = "{{ @$errors->main->first() }}"
        $(document).ready(function() {
            if (error != "")
                setNotiffail(error)
            window.LaravelDataTables = window.LaravelDataTables || {}
            window.LaravelDataTables["table-payroll"] = $("#table-payroll").DataTable({
                dom: 'fltpr',
                language: {
                    search: "",
                    searchPlaceholder: "Pencarian...",
                    lengthMenu: "_MENU_ Data"
                },
                ajax: {
                    url: "{{ route('finance.presence.datatable') }}",
                    type: "POST",
                    data: (d) => {
                        d.year = year,
                        d.month = month,
                        d._token = token
                    }
                },
                processing: true,
                serverSide: true,
                deferRender: true,
                ordering: true,
                order: [
                    [1, 'desc']
                ],
                aLengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                drawCallback: function() {
                    $(".set-tooltip").tooltip({
                        container: "body"
                    })
                },
                columns: [{
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                    },
                    {
                        data: "dates",
                        class: "align-top",
                        render: (data, type, row) => row.dates
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: (data, type, row) => row.presence
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: (data, type, row) => row.absen
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: (data, type, row) => row.overtime
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: (data, type, row) => row.view
                    },

                ]
            })

            $($.fn.dataTable.tables(true)).css('width', '100%')

            $("#year").change(function() {
                year = $("#year").val()

                window.LaravelDataTables["table-payroll"].ajax.reload()
            })

            $("#month").change(function() {
                month = $("#month").val()

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