@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>

                    <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' => 'custom', 'type'  => 'text', 'name'   =>  'employeeId', 'label' => 'Employee Name or ID', 'id' => 'employeeId',  'placeholder' => 'Employee Name or ID'],
                                ['element' => 'dateFrom', 'col' => 2, 'label'       =>  'Issue Date From ', 'placeholder' => 'Issue Date From'],
                                ['element' => 'dateTo', 'col'   => 2, 'label'       =>  'Issue Date To',  'placeholder' => 'Issue Date To'],
//                                ['element' => 'status', 'col'   => 1, 'name'        =>  'status']
                            ];
                        @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 style="width:4%;">SL#</th>
                                    <th style="width:10%">Employee</th>
                                    <th style="width:15%">Print Content</th>
                                    <th style="width:10%">Issue Date</th>
                                    <th style="width:10%">Date Of Validity</th>
                                    <th style="width:10%">Print By</th>
                                    <th style="width:10%">Print Date</th>
                                    <th style="width:10%">Print Amount</th>
                                    <th style="width:10%">Print Type</th>
                                    <th style="width:10%">Remarks</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    $(document).ready(function()
    {
        var dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "language":
            {
                "processing": $('#loadingModal').show(),
            },
            "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": "emp_name"
                },
                {
                    "className": 'dt-body-left',
                    "data": "print_content"
                },
                {
                    "className": 'dt-body-center',
                    "data": "issue_date"
                },
                {
                    "className": 'dt-body-center',
                    "data": "date_of_validity"
                },
                {
                    "className": 'dt-body-left',
                    "data": "print_person"
                },
                {
                    "className": 'dt-body-center',
                    "data": "print_date"
                },
                {
                    "className": 'dt-body-right',
                    "data": "print_amount"
                },
                {
                    "className": 'dt-body-center',
                    "data": "print_type"
                },
                {
                    "className": 'dt-body-center',
                    "data": "remarks"
                },
            ]
        });

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

        });

    });

</script>
@endsection