@extends('AdminLte.template')

<!--Title-->
@section('title')
Leave Entitlements Report
@endsection
<!--Title Close-->

<!--External CSS-->
@section('ExternalCss')
@parent
@endsection
<!--External CSS Close--> 

@section('Content')

<div class="col-md-12 txtCenter">
    <h3>Leave Entitlements Report</h3>
    <br/>
    {{ Form::open(['action' => 'HrmsRegisterReportController@LeaveEntLeaveTypeOutput','autocomplete' => 'off']) }}
     
    <div class="row row-no-gutters ">
        <div class="col-md-2"><label class="">
                <label class="inputType">Leave Type :</label>
            <select name="leavetype" id="leavetype" class="inputType borderNone borderBottom blue noPadding" required>
                <option disabled selected value> Select </option>     
                @foreach($leaveType as $key =>$leaveType)
                <option value="-"></option>
                @endforeach
            </select>
        </div>   
        <div class="col-md-3"><label class="">
                <label class="inputType">Leave Period :</label>
            <select name="leaveperiod" id="leaveperiod" class="inputType borderNone borderBottom blue noPadding" required>
                            </select>
        </div>
        <div class="col-md-2"> 
            <label class="inputType">Type<span >:</span></label>
            <input type="radio" id="summary" name="flag" value="S" class="line" style="background: blue;"/>Summary
            <input type="radio" id="detail" name="flag" value="D" class="line" checked /> Detail
        </div>
        <div class="col-md-3">
            <label class="inputType">Employee Name:</label>
            <input type="text" class="text-line employee_auto" placeholder="Enter Employee Name"  autocomplete="off" style="border: none; border-bottom: 1px solid black; text-transform: uppercase;width: 50%; margin-left: 0px;" id="employeename"  name="employeename"/>
            <input type="hidden" class="text-line employee_auto" placeholder="Enter Employee Name"  autocomplete="off" style="border: none; border-bottom: 1px solid black; text-transform: uppercase;width: 50%; margin-left: 0px;" id="employeeId"  name="employeeId"/>
        </div>
        <div class="col-md-2">
            <label class="inputType">Modified:</label>
            <input type="month" class="text-line department_auto" placeholder="Enter Department Name"  autocomplete="off" style="border: none; border-bottom: 1px solid black;text-transform: uppercase;width: 50%; margin-left: 0px;" id="Modified"  name="Modified"/>
        </div>
    </div>
    <br>
    <br>
    <button name="Submit"  id="btnSubmit" class="btn btn-success btn-sm">Submit</button>
    {{ Form::close() }}
</div>
@endsection

<!--Bootstrap Modals-->      
@section('BootstrapModals')
@endsection
<!--Bootstrap Modals Close-->

<!--External JS-->
@section('ExternalJs')
<script>
    $(document).on('focus', '#employeename', function (e) {
        e.preventDefault();
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: PROJECT_BASE_URL + "/HrmsSearch/employeeSearch",
                    dataType: "JSON",
                    method: 'POST',
                    data: {"_token": CSRF_TOKEN, searchTerm: request.term},
                    success: function (data) {
                        var test = $.map(data, function (item) {
                            employeeData = item.split("|");
                            employeeId=employeeData[0];
                            employeeName = employeeData[1];
                            employeeDetail = +employeeName;
                            return {
                                label: employeeId + ' / ' + employeeName,
                                value: employeeName,
                                data: employeeData
                            };
                        });
                        response(test);
                    }
                });
            },
            select: function (event, ui) {
                employeeId = ui.item.data[0];
                employeeName = ui.item.data[1];

                employeeDetail = employeeName;
                $('#name').val(employeeDetail);
                $('#employeeId').val(employeeId);
            },
        });
    });
</script>
@endsection