@extends('front.layouts.frontlayout')

@section('head')

{!! HTML::style("assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css") !!}
{!! HTML::style("assets/global/css/components.css") !!}
{!! HTML::style("assets/global/css/plugins.css") !!}
{!! HTML::style("assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css") !!}
{!! HTML::style("https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css") !!}

@stop

@section('mainarea')
<style>
     .animated {
     
       -webkit-animation-duration: 10s;animation-duration: 10s;
       -webkit-animation-fill-mode: both;animation-fill-mode: both;
    } 
    @-webkit-keyframes fadeOut {
       0% {opacity: 1;}
       100% {opacity: 0;}
    }
    
    @keyframes fadeOut {
       0% {opacity: 1;}
       100% {opacity: 0;}
    }
    
    .fadeOut {
       -webkit-animation-name: fadeOut;
       animation-name: fadeOut;
    }
 </style>

<form action="{{route('front.storeAttendance')}}" method="post" enctype="multipart/form-data">
    {{ csrf_field() }}
<div class="col-md-9">
    @if ($message = Session::get('success'))
<div class="alert alert-success alert-block fadeOut animated">
	<button type="button" class="close" data-dismiss="alert">×</button>	
        <strong>{{ $message }}</strong>
</div>
@endif
    <!--Profile Body-->
    <div class="profile-body">
        <div class="row margin-bottom-20">
            <!--Profile Post-->
            <div class="col-sm-12">

                <div class="panel panel-grey">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-tasks"></i> Mark Today Attendance</h3>
                    </div>
                    <div class="panel-body">
                        <h3 class="form-section">Date: {{Carbon\Carbon::now()->format('d-M-Y')}}</h3>
                       
                        <div class="form-body">
                            <input type="hidden" name="date" value="{{Carbon\Carbon::now()->format('Y-m-d')}}">
                            <input type="hidden" name="updated_by" value="{{$employee->employeeID}}">
                            <div class="form-group">
                                <div class="col-md-4">
                                    <label class="ml-4">Name</label>
                                </div>

                                <div class="col-md-4">
                                    <label class="ml-4">Status</label>
                                </div>
                                <div class="col-md-4">
                                    <label class="ml-4"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-4 mt-4">
                                    <button type="submit" style="visibility: hidden;" class="btn green"><i class="fa fa-edit"></i> Submit</button>
                                </div>
                                <div class="col-md-4">
                                    <input class="control-form" type="text" name="" value="{{$employee['fullName']}}" style="border:none; font-size:16px;" readonly>
                                    <input type="hidden" name="employeeID" value="{{$employee['employeeID']}}">
                                     </div>
                                <div class="col-md-4">
                                    <input class="toggle-class" type="checkbox" name="status" data-onstyle="success" data-offstyle="success" data-toggle="toggle" data-on="P" data-off="Present" value="present" readonly>
                                </div>
                                <div class="col-md-4 mt-4">
                                    <button type="submit" class="btn green"><i class="fa fa-edit"></i> Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--End Profile Post-->

                </div>
                <!--/end row-->

                <hr>

            </div>
            <!--End Profile Body-->
        </div>

    </div>
</form>
    @stop

    @section('footerjs')
   

    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    {!! HTML::script("https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js") !!}
    {!! HTML::script("assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js") !!}
    {!! HTML::script("assets/global/plugins/datatables/media/js/jquery.dataTables.min.js") !!}
    {!! HTML::script("assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js") !!}


    <!-- END PAGE LEVEL PLUGINS -->
    <!-- END PAGE LEVEL PLUGINS -->


    @stop