@extends('hr_main')
@section('title', '| '.$data['pageTitle'])
@section('content')
    <div class="row add-data-form">
        <div class="col-md-1"></div>

        <div class="col-md-12 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;"></div>
            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel-heading">
                                <div class="panel-title">{!! $data['pageTitle'] !!}</div>
                            </div>
                            <div class="panel-body">

                                @php
                                    $searchElements = [
                                            ['element' => 'branchId', 'col' => 2,  'name' => 'branchId', 'attributes' => ['print_order' => '1']],
                                            ['element' => 'custom', 'col' => 2, 'type' => 'select', 'name' => 'positionId', 'id' => 'positionId', 'options' => $data['positions'], 'label' => 'Designation:', 'attributes' => ['print_order' => '3']],
                                            ['element' => 'custom', 'col' => 2, 'type' => 'text', 'name' => 'emp_name_code', 'id' => 'emp_name_code', 'label' => 'Employee Name Or Code:', 'attributes' => ['print_order' => '3']],
                                            ['element' => 'dateFrom', 'col' => 2, 'type' => 'text', 'name' => 'dateFrom', 'attributes' => ['print_order' => '1']],
                                            ['element' => 'dateTo', 'col' => 2, 'type' => 'text', 'name' => 'dateTo', 'attributes' => ['print_order' => '1']]
                                        ];
                                @endphp

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

                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <table class="table table-striped table-bordered table-condensed first-col-dark"  id="datatable">
                                            <thead>
                                            <tr>
                                                <th>SL#</th>
                                                <th>Photo</th>
                                                <th>Name In English</th>
                                                <th>Employee Id</th>
                                                <th>Branch</th>
                                                <th>Department</th>
                                                <th>Designation</th>
                                                <th>Job Duration</th>
                                                <th>Paid Date</th>
                                                <th>Action</th>
                                            </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-1"></div>
    </div>
@endsection

@section('footerAssets')
<script>

    $(document).ready(function() {   
        $('#positionId, #fillBranchId').select2();

        var dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "lengthChange": false,
            "language": 
            {
                "processing": $('#loadingModal').show(),
            },
            "pageLength": 1000,
            "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": "employee_photo"
                },
                {   
                    "className": 'dt-body-left',
                    "data": "employee_name"
                },
                {   
                    "className": 'dt-body-center',
                    "data": "employee_id"
                },
                {    
                    "className": 'dt-body-left',
                    "data": "emp_branch_name"
                },
                {   
                    "className": 'dt-body-left',
                    "data": "emp_department_name"
                },
	            {   
                    "className": 'dt-body-left',
                    "data": "emp_designation_name"
                },
	            {   
                    "className": 'dt-body-center',
                    "data": "job_duration"
                },
                {   
                    "className": 'dt-body-center',
                    "data": "paid_date"
                },
                {   
                    "className": 'dt-body-center',
                    "data": "actionButtons"
                },
            ]
        });

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

</script>
@endsection