@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="" style="">
                <div class="">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-title">
                                <h2>{!! $data['pageTitle'] !!}</h2>
                            </div>

                            <div class="panel-options">
                                <a href="{!! $data['addBtnUrl'] !!}" class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-plus-sign addIcon"></i>{!! $data['addBtnLabel'] !!}</a>
                            </div>
                        </div>
                        <div class="panel-body panelBodyView">

                            <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' => 'branchId', 'col' => 2, 'name' => 'branchId', 'attributes' => ['print_order' => '1']],
                                    ['element' => 'custom', 'type' => 'select', 'name' => 'status', 'label' => 'Status',
                                    'options'=>[
                                        'All'       => 'All',
                                        'Pending'   => 'Pending',
                                        'Canceled'  => 'Canceled',
                                        'Approved'  => 'Approved'
                                    ], 'id' => 'status'],
                                     ['element' => 'dateRange'],
                                    ['element' => 'custom', 'type' => 'text', 'name' => 'employeeId', 'label' => 'Employee ID', 'id' => 'employeeId'],
                                ];
                            @endphp

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

                            <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable">
                                <thead>
                                    <tr>
                                        <th width="30">SL#</th>
                                        <th class="text-center">Resign Date</th>
                                        <th class="text-center">Expected Effect Date</th>
                                        <th class="text-center">Effect Date</th>
                                        <th class="text-center">Job Duration</th>
                                        <th class="text-left">Employee Name</th>
                                        <th class="text-center">Employee ID</th>
                                        <th class="text-center">Recruitment Type</th>
                                        <th class="text-center">Position</th>
                                        <th class="text-left">Branch</th>
                                        <th class="text-left">Reason</th>
                                        <th class="text-left">Notice Type</th>
                                        <th class="text-center">Status</th>
                                        <th style="width: 80px" class="text-center">Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footerAssets')
    <script>
        $(document).ready(function() {
            $('#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-center',
                        "data": "resign_date"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "expected_effect_date"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "effect_date"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "jobDuration"
                    },
                    {
                        "className": 'dt-body-left',
                        "data": "empName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "empId"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "recruiteType"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "position"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "branchName"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "reasonList"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "emp_notice_type"
                    },
                    {
                        "className": 'dt-body-center',
                        "data": "status"
                    },

                    {
                        "className": 'dt-body-center',
                        "data": "id"
                    }
                ],
                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row) {
                        var updateUrl = `./resignInfo/update/${row.id}`;
                        var deleteUrl = `./resignInfo/delete`;
                        var viewUrl = `./resignInfo/view/${row.id}`;
                        var approvedUrl = `./resignInfo/cancel/${row.id}`;

                        var disabled = row.status === 'Pending' ? '' : 'disabled';

                        var buttons = '';
                        buttons +=
                            `<a href="${viewUrl}" class="btn btn-xs btn-success" title="View"><i class="fa fa-eye"></i></a>`
                        buttons +=
                            `<a href="${updateUrl}" class="btn btn-xs btn-info" title="Update"><i class="fa fa-pencil"></i></a>`;
                        if (row.status === 'Pending') {
                            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 (row.status == 'Approved') {
                            buttons +=
                                `<a href="${approvedUrl}" class="btn btn-xs btn-danger" title="Cancel"><i class="fa fa-ban"></i></a>`;
                        }
                        return buttons;
                    }
                }]

            });

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

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