@extends('layouts.base')
@section('content')
    <div class="page-inner">

        @include('partials.bread-crumbs')


        <div class="row">
            <div class="col-md-12">
                <form id="searchForm" name="searchForm">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ trans('labels.search') }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="dateFrom">{{ trans('labels.date_from') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control datepicker" id="dateFrom" name="dateFrom"
                                            autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="dateTo">{{ trans('labels.date_to') }} <span
                                                class="required-label">*</span></label>
                                        <input type="text" class="form-control datepicker" id="dateTo" name="dateTo"
                                            autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employee_no">{{ trans('labels.employee_no') }} </label>

                                        <input type="text" class="form-control" id="employeeNo" name="employeeNo"
                                            autocomplete="off">
                                    </div>
                                </div>

                                
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="location">{{ trans('labels.location') }} </label>
                                        <select id="location" name="location" class="form-control" autocomplete="off">
                                            <option value="">{{ trans('labels.select_all') }}</option>
                                            @foreach ($locations as $location)
                                                <option value="{{ $location->id }}">{{ $location->location_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeDepartment">{{ trans('labels.employee_department') }} </label>
                                        <select id="employeeDepartment" name="employeeDepartment" class="form-control"
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select_all') }}</option>
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->id }}">{{ $department->description }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="employeeDesignation">{{ trans('labels.employee_designation') }}
                                        </label>
                                        <select id="employeeDesignation" name="employeeDesignation" class="form-control"
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select_all') }}</option>
                                            @foreach ($designations as $designation)
                                                <option value="{{ $designation->id }}">{{ $designation->description }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label for="noPayType">{{ trans('labels.no_pay_type') }} </label>
                                        <select id="noPayType" name="noPayType" class="form-control" autocomplete="off"
                                            autocomplete="off">
                                            <option value="">{{ trans('labels.select_all') }}</option>
                                            @foreach (trans('constants.no_pay_type') as $k => $v)
                                                <option value="{{ $k }}">{{ $v }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <button class="btn btn-primary btn-lg mt-2 pull-right" id="btnSearch" type="button">
                                        <i class="fas fa-search"></i> &nbsp;
                                        {{ trans('labels.search_button') }}
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
                <div class="card ">
                    <div class="card-header">
                        <div class="align-items-center">
                            <h4 class="card-title">{{ trans('labels.search_result') }}</h4>
                        </div>
                    </div>

                    <div class="card-body" style="display:block">

                        <div class="table-responsive">
                            <table id="tblData" class="display table">
                                <thead>
                                    <tr>
                                        <th style="width:25px;">#</th>
                                        <th>{{ trans('labels.date') }} </th>
                                        <th>{{ trans('labels.employee') }} </th>
                                        <th>{{ trans('labels.employee_no') }} </th>
                                        <th>{{ trans('labels.location') }} </th>
                                        <th>{{ trans('labels.department') }} </th>
                                        <th>{{ trans('labels.designation') }} </th>
                                        <th>{{ trans('labels.no_pay_type') }} </th>
                                        <th>{{ trans('labels.status') }} </th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div class="card-footer">
                        <div class="row">


                            <div class="col-md-12">
                                @can('attendance_report_print')
                                    <div style="margin-bottom:50px;">
                                        <button type="button" class="btn btn-success dropdown-toggle pull-right"
                                            data-toggle="dropdown" aria-expanded="false" id="btnPrint">
                                            <i class="fas fa-download"></i>&nbsp; {{ trans('labels.export_button') }}
                                        </button>
                                        <ul class="dropdown-menu" id="reportPrintOptions"
                                            style="padding-left:5px;padding-right:5px;"></ul>

                                    </div>
                                @endcan

                            </div>
                        </div>
                    </div>

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


@section('custom_scripts')
    <script type="text/javascript" src="{{ asset('js/xhr.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/services/constant.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/report/no-pay-detail-report.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/datatables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugin/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugin/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugin/jszip/jszip.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugin/pdfmake/pdfmake.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugin/pdfmake/vfs_fonts.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugin/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugin/datatables-buttons/js/buttons.print.min.js') }}"></script>
@endsection