@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    @php
        $moduleIdHr = \App\ConstValue::MODULE_ID_HR;
        $functionCodeSecurityInterest = \App\ConstValue::FUNCTION_CODE_SECURITY_DEPOSIT_INTEREST;
        $subFunctionIdCreate = \App\ConstValue::SUB_FUNCTION_ID_CREATE;
        $subFunctionIdEdit = \App\ConstValue::SUB_FUNCTION_ID_EDIT;
        $subFunctionIdDelete = \App\ConstValue::SUB_FUNCTION_ID_DELETE;
        $subFunctionIdView = \App\ConstValue::SUB_FUNCTION_ID_VIEW;
        $subFunctionIdApprove = \App\ConstValue::SUB_FUNCTION_ID_APPROVE;
    @endphp
    <div class="row">
        <div class="col-md-12">
            <div class="viewTitle" style="border-bottom: 1px solid white;"></div>
        </div>

        <div class="col-md-12">
            <div class="panel panel-default panel-border">
                <div class="panel-heading" style="padding-bottom:0px">
                    <div class="panel-title">
                        {!! $data['pageTitle'] !!}
                    </div>

                    <div class="panel-options">
                        @if (Auth::user()->canSee($moduleIdHr, $functionCodeSecurityInterest, $subFunctionIdCreate))
                            <a href="{!! $data['addBtnUrl'] !!}" class="btn btn-white pull-right"><i
                                    class="fa fa-plus-circle"></i> New</a>
                        @endif
                    </div>
                </div>
                <div class="panel-body">



                    <div class="panel-options pull-right">
                        <a href="{{ url($data['resetUrl']) }}" class="btn btn-white btn-icon"><i
                                class="fa fa-refresh"></i></a>
                    </div>

                    @php
                        $searchElements = [['element' => 'project', 'col' => 2, 'attributes' => ['print_order' => '1']], ['element' => 'custom', 'type' => 'text', 'name' => 'fromMonth', 'label' => 'From Month', 'id' => 'fromMonth'], ['element' => 'custom', 'type' => 'text', 'name' => 'toMonth', 'label' => 'To Month', 'id' => 'toMonth']];
                    @endphp

                    @include('partials.searchPanel.main', [
                        'searchElements' => $searchElements,
                        'buttonLevel' => 'Search',
                    ])


                    <table class="table table-striped table-bordered table-condensed text-primary" id="datatable">
                        <thead>
                            <tr>
                                <th width="30">SL#</th>
                                <th>Company</th>
                                <th>Project</th>
                                <th>From Month</th>
                                <th>To Month</th>
                                <th>Generate By</th>
                                <th>Approved By</th>
                                <th style="width: 80px">Action</th>
                            </tr>
                        </thead>
                    </table>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('footerAssets')
    <script>
        $(document).ready(function() {

            $("#fromMonth").datepicker({
                format: "mm-yyyy",
                startView: "months",
                minViewMode: "months",
                autoclose: true,
                afterShow: function() {
                    $(".ui-datepicker select").select2();
                }
            });

            $("#toMonth").datepicker({
                format: "mm-yyyy",
                startView: "months",
                minViewMode: "months",
                autoclose: true,
                afterShow: function() {
                    $(".ui-datepicker select").select2();
                }
            });

            // auto complete off 
            $('#fromMonth').attr('autocomplete', 'off');
            $('#toMonth').attr('autocomplete', 'off');


            $('#fillBranchId').select2();
            var dataTable = $('#datatable').DataTable({
                "sDom": "ltipr", // For removing default Search bar //
                "processing": true,
                "serverSide": true,
                "ordering": false,
                "language": {
                    "processing": $('#loadingModal').show(),
                },
                "pageLength": 50,
                "ajax": {
                    "url": "{{ Request::url() }}",
                    "type": "POST",
                    "data": function(d) {
                        var inputs = {};

                        $.each($('form').serializeArray(), function() {
                            inputs[this.name] = this.value;
                        });

                        d._token = "{{ csrf_token() }}";
                        d.filter = inputs;
                    }
                },

                "columns": [{
                        "data": "sl"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "companyName"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "projectName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "fromMonth"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "toMonth"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "generatedBy"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "approvedBy"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "id"
                    }
                ],
                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row) {
                        var viewUrl = row?.btnUrls?.viewUrl ? row?.btnUrls.viewUrl : '';
                        var approvalUrl = row?.btnUrls?.approveUrl ? row?.btnUrls.approveUrl :
                            '';
                        var deleteUrl = row?.btnUrls?.deleteUrl ? row?.btnUrls.deleteUrl : '';

                        var buttons = '';
                        if (viewUrl !== '') {
                            buttons +=
                                `<a href="${viewUrl}" class="btn btn-xs btn-white" title="View"><i class="fa fa-eye"></i></a>`;
                        }
                        if (deleteUrl !== '') {
                            buttons +=
                                `<a href="${deleteUrl}" data-id="${row.id}" class="btn btn-xs btn-danger delete-action" title="Delete"><i class="fa fa-times"></i></a>`;
                        }
                        if (approvalUrl !== '') {
                            buttons +=
                                `<a href="${approvalUrl}" class="btn btn-xs btn-secondary" onclick="return confirm('Are you sure, you want to approve?')" title="Approve"><i class="fa fa-check-circle"></i></a>`;
                        }

                        return buttons;
                    }
                }]


            });

            $("#searchForm").submit(function(e) {
                e.preventDefault();
                dataTable.draw();

            });
        });
    </script>
@endsection