@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-6 col-md-2">
                    <x-form.date-picker id="year" label="Tahun" picker-type="year" :old="date('Y')" />
                </div>


            </div>

            <button type="button" id="btn-search" class="btn btn-dark btn-sm">
                <i class="mdi mdi-magnify"></i> &nbsp;SEARCH
            </button>
            <button type="button" id="btn-search" class="btn btn-primary btn-sm" data-toggle="modal"
                data-target="#generate-modal">
                <i class="mdi mdi-sync-circle"></i> &nbsp;GENERATE PAYROLL
            </button>
            @if (@$errors->has('detail') && $label !== false)
            @foreach ($errors->get('detail') as $message)
                <div class="alert alert-danger alert-dismissible fade show" role="alert">{{ ucfirst($message) }}</div>
            @endforeach
        @endif
            <hr />
            <div class="table-responsive mt-3">
                <table class="table" id="table-payroll">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Bulan</th>
                            <th>Total Gaji</th>
                            <th>Total Gaji Lembur</th>
                            <th>Total Uang Makan</th>
                            <th>Potongan</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th style="min-width: 120px;">#</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="generate-modal" tabindex="-1" aria-labelledby="generateModalLabel" aria-hidden="true">
        <form action="{{ route('finance.payroll.generate') }}" method="post">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="generateModalLabel">Generate</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-md-6">
                                <x-form.date-picker id="year" name='year' label="Tahun" picker-type="year" :old="date('Y')" />

                            </div>
                            <div class="col-md-6">
                                <x-form.select id="month" name='month' label="Bulan" :option="$option['month']" :old="date('m')" />
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Generate</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') }}"

        $(document).ready(function() {
            window.LaravelDataTables = window.LaravelDataTables || {}
            window.LaravelDataTables["table-payroll"] = $("#table-payroll").DataTable({
                dom: 'fltpr',
                language: {
                    search: "",
                    searchPlaceholder: "Pencarian...",
                    lengthMenu: "_MENU_ Data"
                },
                ajax: {
                    url: "{{ route('finance.payroll.datatable') }}",
                    type: "POST",
                    data: (d) => {
                        d.year = year
                        d.render = 'payment'
                        d._token = token
                    }
                },
                processing: true,
                serverSide: true,
                deferRender: true,
                ordering: true,
                pageLength: 100,
                order: [
                    [1, 'desc']
                ],

                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: "months",
                        class: "align-top",
                        render: (data, type, row) => row.month
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => `Rp. ${moneyFormat(row.total_salary)}`
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => `Rp. ${moneyFormat(row.total_salary_overtime)}`
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => `Rp. ${moneyFormat(row.total_allowance_meal)}`
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => `Rp. ${moneyFormat(row.total_salary_cuts)}`
                    },
                    {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => `Rp. ${moneyFormat(row.total)}`
                    },

                    {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => row.status_badge
                    },

                    {
                        class: "align-top",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {

                            let html = '';

                            if (row.edit)

                                html += `<a href="${row.edit}" class="btn btn-warning btn-xs set-tooltip mb-1 mr-1" title="Edit">
                                <i class="mdi mdi-file-edit"></i>
                            </a>`

                            if (row.pay)
                                html += `<a href="${row.pay}" class="btn btn-info btn-xs set-tooltip mb-1 mr-1" title="Bayar">
                                <i class="mdi mdi-cash"></i>
                            </a>`

                            if (row.generate)

                                html += `
                                 <button type="button" class="btn btn-success btn-xs set-tooltip mb-1 mr-1" title="Verifikasi" onclick="deleteConfirm('${row.generate}', false, 'table-payroll','Verifikasi payroll ini')">
                                    <i class="mdi mdi-check-all"></i>
                                </button>

                            </a>`

                            if (row.delete)

                                html += `
                                 <button type="button" class="btn btn-danger btn-xs set-tooltip mb-1 mr-1" title="Hapus" onclick="deleteConfirm('${row.delete}', false, 'table-payroll','hapus draf payroll ini')">
                                    <i class="mdi mdi-delete"></i>
                                </button>

                            </a>`

                            html += `<a href="${row.view}" class="btn btn-dark btn-xs set-tooltip mb-1 mr-1" title="Detail">
                                <i class="mdi mdi-magnify"></i>
                            </a><a href="${row.download}" class="btn btn-success btn-xs set-tooltip mb-1 mr-1" title="Print">
                                <i class="mdi mdi-printer"></i>
                            </a>`

                            return html;

                        }

                    }
                ]
            })

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

            $("#btn-search").click(function() {
                year = $("#year").val()
                month = $("#month").val()

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