@extends('admin.adminlayouts.adminlayout')

@section('head')
<!-- BEGIN PAGE LEVEL STYLES -->
{!! HTML::style("assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css") !!}
{!! HTML::style("assets/global/plugins/bootstrap-datepicker/css/datepicker3.css") !!}
<!-- BEGIN THEME STYLES -->
@stop

@section('mainarea')
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    Edit Attendance
</h3>
<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="{{route('admin.dashboard.index')}}">Home</a>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <a href="{{ route('admin.attendances.index') }}">Attendance</a>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <a href="">Update attendance</a>
        </li>
    </ul>
</div>
<!-- END PAGE HEADER-->

<style>
.twitter-typeahead{
    margin-top: 3px;
}
</style>

<!-- BEGIN PAGE CONTENT-->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        {{--INCLUDE ERROR MESSAGE BOX--}}
        @include('admin.common.error')
        {{--END ERROR MESSAGE BOX--}}

        <div class="row">
            <div class="col-md-4 form-group">
                {!! Form::open(['route'=>["admin.attendances.create"],'class'=>'form-horizontal','method'=>'GET']) !!}
                <div class="input-group input-medium date date-picker" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                    <input type="text" class="form-control" name="date" readonly placeholder="Select another date">
                    <span class="input-group-btn">
                        <button class="btn blue" type="submit"><i class="fa fa-calendar"></i> Edit</button>
                    </span>
                </div>
                {!! Form::close() !!}
            </div>
        </div>

        <hr>
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-edit"></i>
                    @if(isset($todays_holidays->date))
                        Holiday, {{ date('d M Y', strtotime($todays_holidays->date)) }}
                    @else
                        Mark Attendance
                    @endif
                </div>

                <!-- Add Employee Search Bar on the right -->
                <div class="col-md-4 pull-right">
                    <input type="text" class="form-control" id="employee-search" placeholder="Search Employee">
                </div>
            </div>

            <div class="portlet-body form">
                @if(isset($todays_holidays->date))
                    <div class="note note-info">
                        <h4 class="block">{{ date('D', strtotime($todays_holidays->date)) }}</h4>
                        <p>Holiday on the occasion of {{ $todays_holidays->occassion }}</p>
                    </div>
                @elseif(count($employees) == 0)
                    <hr>
                    <div class="note note-warning">
                        <h4 class="block">Employees Missing</h4>
                        <p>Please add some employees to the database</p>
                    </div>
                    <hr>
                @else
                    <div class="form-body">
                        <h3 class="form-section">Date {{ date('d-M-Y', strtotime($date)) }}</h3>

                        <div class="form-group">
                            <label class="col-md-1 control-group" style="padding-left: 0px;">EmployeeID</label>
                            <label class="col-md-2 control-group" style="padding-left: 0px;">Name</label>
                            <label class="col-md-2 control-group" style="padding-left: 0px;">Status</label>
                            <label class="col-md-1 control-group">WFH</label>
                            <label class="col-md-2 control-group leaveType" id="leaveTypeLabel" style="visibility: hidden;">Type of leave</label>
                            <label class="col-md-2 control-group halfLeaveType" id="halfDayLabel" style="display: none;">Half Day Leave Type</label>
                            <label class="col-md-2 control-group reason" id="reasonLabel" style="visibility: hidden;">Reason</label>
                        </div>

                        <br><br>

                        @foreach($employees as $employee)
                        {!! Form::open(['route'=>["admin.attendances.update", $date],'class'=>'form-horizontal','method'=>'PATCH']) !!}
                        <div class="form-group">
                            <label class="col-md-1 control-group">{{ $employee->employeeID }} </label>
                            <label class="col-md-2 control-group">{{ $employee->fullName }} </label>

                            <div class="col-md-2">
                                <input type="checkbox" id="checkbox{{ $employee->employeeID }}" onchange="toggleFields('{{ $employee->employeeID }}');" class="make-switch" name="checkbox[{{ $employee->employeeID }}]" data-on-color="success" data-on-text="P" data-off-text="A" data-off-color="danger" 
                                {{ isset($attendanceArray[$employee->employeeID]['status']) && $attendanceArray[$employee->employeeID]['status'] == 'present' ? 'checked' : '' }}>
                                <input type="hidden" name="employees[]" value="{{ $employee->employeeID }}">
                            </div>

                            <div class="col-md-1">
                                <input type="checkbox" id="wfh{{ $employee->employeeID }}" class="make-switch" name="wfh[{{ $employee->employeeID }}]" data-on-color="success" data-on-text="Yes" data-off-text="No" data-off-color="danger" 
                                {{ isset($attendanceArray[$employee->employeeID]['wfh']) && $attendanceArray[$employee->employeeID]['wfh'] ? 'checked' : '' }}>
                                <input type="hidden" name="employees[]" value="{{ $employee->employeeID }}">
                            </div>

                            <div class="col-md-2 leaveType" id="leaveType{{ $employee->employeeID }}" style="visibility: hidden;">
                                {!! Form::select('leaveType['.$employee->employeeID.']', ['' => 'Select Leave Type'] + $leaveTypes, $attendanceArray[$employee->employeeID]['leaveType'] ?? null, ['class' => 'form-control', 'id' => 'leaveTypeSelect'.$employee->employeeID, 'onchange' => 'toggleHalfDay('.$employee->employeeID.', this.value)']) !!}
                            </div>

                            <div class="col-md-1 halfLeaveType" id="halfLeaveType{{ $employee->employeeID }}" style="display:none;">
                                {!! Form::select('halfDayType['.$employee->employeeID.']', $leaveTypeWithoutHalfDay, $attendanceArray[$employee->employeeID]['halfDayType'] ?? null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="col-md-2 reason" id="reason{{ $employee->employeeID }}" style="visibility: hidden;">
                                <input type="text" class="form-control" name="reason[{{ $employee->employeeID }}]" placeholder="Absent Reason" value="{{ $attendanceArray[$employee->employeeID]['reason'] ?? '' }}">
                            </div>

                            <div class="col-md-1">
                                <button type="submit" class="btn green"><i class="fa fa-edit"></i> Submit</button>
                            </div>
                        </div>
                        {!! Form::close() !!}
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
<!-- END PAGE CONTENT-->
@stop

@section('footerjs')
<!-- BEGIN PAGE LEVEL PLUGINS -->
{!! HTML::script("https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.3.1/typeahead.bundle.min.js") !!}
{!! HTML::script("assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js") !!}
{!! HTML::script("assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js") !!}
{!! HTML::script("assets/admin/pages/scripts/components-pickers.js") !!}
<!-- END PAGE LEVEL PLUGINS -->

<script>
    jQuery(document).ready(function() {
        // Initialize bootstrap-switch plugin for checkboxes
        $('.make-switch').bootstrapSwitch();
        ComponentsPickers.init();

        // Employee search auto-suggest using Typeahead
        var employees = {!! json_encode($employees) !!};
        var employeeNames = employees.map(function(employee) {
            return employee.fullName + ' (' + employee.employeeID + ')';
        });

        var employeeSearch = $('#employee-search');
        employeeSearch.typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            name: 'employees',
            source: function(query, process) {
                return process(employeeNames);
            }
        });

        // Check initial states to toggle fields accordingly
        @foreach($employees as $employee)
            toggleFields('{{ $employee->employeeID }}');
        @endforeach
    });

    function toggleFields(id) {
        var checkbox = $('#checkbox' + id);
        if (!checkbox.bootstrapSwitch('state')) {  // If A (Absent) is selected
            $('#leaveTypeLabel').css("visibility", "visible");
            $('#reasonLabel').css("visibility", "visible");
            $('#leaveType' + id).css("visibility", "visible");
            $('#reason' + id).css("visibility", "visible");
        } else {  // If P (Present) is selected
            $('#leaveType' + id).css("visibility", "hidden");
            $('#reason' + id).css("visibility", "hidden");
            $('#halfLeaveType' + id).hide();
        }
    }

    function toggleHalfDay(id, value) {
        if (value === 'half day') {
            $('#halfLeaveType' + id).css("visibility", "visible");
        } else {
            $('#halfLeaveType' + id).css("visibility", "hidden");
        }
    }
</script>
@stop