@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') }}">Attendace</a>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <a href="">Update attendace</a>
        </li>
    </ul>

</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->

        {{--INLCUDE 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 class="col-md-4 form-group">
            </div>
            <div class="col-md-4 form-group text-right">
            </div>
        </div>
        <hr>
        <div class="portlet box blue">
            <div class="portlet-title">
            
                <div class="tools">
                </div>
            </div>
            

            <div class="portlet-body form">

                <!-- BEGIN FORM-->
                {{-- {!! Form::open(['route'=>["admin.attendances.update",$date],'class'=>'form-horizontal','method'=>'PATCH']) !!} --}}
                <div class="form-body">
                    <h3 class="form-section">{{\App\Models\Employee::getdatabyname($employees)}}</h3>
                    <div class="form-group">
                        <label class="col-md-1 control-group">Date</label>
                        <label class="col-md-1 control-group">Status1</label>
                        <label class="col-md-1 control-group">WFH </label>
                        <label class="col-md-1 control-group leaveType" id="leaveTypeLabel" style="display: contents;">Type of leave </label>
                        <label class="col-md-1 control-group"><span class="halfLeaveType" id="halfDayLabel">halfDay leave</span> </label>
                        <label class="col-md-2 control-group halfTimeTypeLabel" id="halfTimeLabel">halfDay Time</label>
                        <label class="col-md-2 control-group reason" id="reasonLabel">Reason </label>
                    </div>
                    </br>
                    </br>
                    
                   @for ($i = $now; $i >= $last; $i--)
                   
                    <div class="form-group data_item" style="margin-bottom: 40px !important;"> 
                        <input class="col-md-1 control-group" type="hidden" value="{{date('d-M-Y',strtotime(now()))}}">
                        <label class="col-md-1 control-group">{{$i}}</label> 
                        <div class="col-md-1">
                        <input type="checkbox" id="checkbox{{$employees}}" onchange="showHide('{{$employees}}');return false;" class="make-switch" name="checkbox[{{$employees}}]" checked data-on-color="success" data-on-text="P" data-off-text="A" data-off-color="danger">
                        <input type="hidden" name="employees[]" value="{{$employees}}">
                        </div>
  
                         <div class="col-md-1">
                            <input type="checkbox" id="wfh{{$employees}}" class="make-switch" name="wfh[{{$employees}}]" data-on-color="success" data-on-text="Yes" data-off-text="No" data-off-color="danger" verified_id="{{isset($employee)}}" {{ isset($employee->employeeID['wfh'])? 'checked' : '' }} >
                            <input type="hidden" class="product_id" name="employees[]" value="{{$employees}}">
                        </div>
                        <div class="col-md-1">
                        </div>
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control reason" id="reason{{$employees}}" name="reason[{{$employees}}]" placeholder="Absent Reason" value="{{ $employees['reason'] ?? ''}}">
                        </div>
                        <div class="col-md-1">
                            <button type="submit" class="btn green"><i class="fa fa-edit"></i> Submit</button>
                        </div>
                    </div>
                  
                    @endfor

                    <!-- END FORM-->
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
    <!-- END PAGE CONTENT-->
    @stop

    @section('footerjs')

    <!-- BEGIN PAGE LEVEL PLUGINS -->
    {!! 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() {
            ComponentsPickers.init();

        });

    </script>
    <script>
        $('.leaveType').hide();
        $('.reason').hide();
        $('.halfLeaveType').hide();
        $('.halfTimeType').hide();
        $('.halfTimeTypeLabel').hide();

	$(document).ready(function(){
 	 $(".leaveType").change(function(){
 	 
 	 var id = $(this).closest('.data_item').find('.product_id').val();console.log(id);
 	 
 	  var value = $(this).closest('.data_item').find('#leaveType' + id).val();
 	 
 	   if (value === 'half day') {
             $('#halfDayLabel').show(100);
             $('#halfLeaveType' + id).show(100);
             $('#halfTimeLabel').show(100);
             $('#halfDayTime' + id).show(100);
            } else {
             $('#halfLeaveType' + id).hide(100);
             $('#halfDayTime' + id).hide(100);
            }
  	});
	});



        function showHide(id) {
            $('#leaveTypeLabel').show(100);
            $('#reasonLabel').show(100);


            if ($('#checkbox' + id + ':checked').val() == 'on') {
                $('#leaveType' + id).hide(1000);
                $('#reason' + id).hide(1000);

            } else {
                $('#leaveType' + id).show(100);
                $('#reason' + id).show(500);
            }
        }

 

    </script>
    @stop