@extends('admin.layout.app')
@section('title','Employee Attendance')
@push('headerscript')
    <link href="{{asset('theme/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet">
    <link href="{{asset('theme/plugins/timepicker/bootstrap-timepicker.min.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-title-box">
                        <h4 class="page-title">Employee Attendance </h4>
                        <div class="pull-right">
                            {{--                            <a href="{{route('employee-attendance.index')}}"--}}
                            {{--                               class="btn btn-custom btn-rounded waves-effect waves-light m-b-2"><i--}}
                            {{--                                    class=" mdi mdi-keyboard-backspace"></i> Back</a>--}}
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            {!! Form::open(['route'=>array('employee-attendance.store'), 'onsubmit'=>'BtnSubmit.disabled = true','method' => 'post']) !!}
            <div class="row">
                <div class="col-sm-12">
                    <div class="card-box">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="form-group col-sm-3 col-12">
                                        <label for="date">Date</label>
                                        <input type="text" name="date" id="atten_date"
                                               value="{{old('date', date('d-m-Y'))}}"
                                               class="form-control datepicker" autocomplete="off">
                                        <div class="text-danger">{{$errors->first('date')}}</div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-12 table-responsive">
                                    <table class="table table-striped dataTable" id="datatable">
                                        <thead>
                                        <tr class="text-center">
                                            <th style="width: 3%">#</th>
                                            <th style="width: 20%">Employee Name<span
                                                    class="text-danger">*</span>
                                            </th>
                                            <th style="width: 20%">Attendance<span
                                                    class="text-danger">*</span>
                                            </th>
                                            <th style="width: 20%">Clock In<span
                                                    class="text-danger">*</span>
                                            </th>
                                            <th style="width: 20%">Clock Out<span
                                                    class="text-danger">*</span>
                                            </th>
                                            <th style="width: 20%">Work Time<span
                                                    class="text-danger">*</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($employees as $employee)
                                            <tr>
                                                <td>
                                                    {{$loop->iteration}}
                                                </td>
                                                <td>
                                                    <select name="employee_id[]" id="employee_id{{$loop->iteration+10}}"
                                                            class="form-control" required="">
                                                        <option
                                                            value="{{$employee->id}}">{{$employee->name}}</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    {!! Form::select("attendance[]", ['Present'=>'Present','Holiday'=>'Holiday','Absent'=>'Absent', 'OnLeave'=>'On Leave'], old("attendance"), ['class'=>'form-control', 'required', 'id'=>'attendance'.$loop->iteration+10] ) !!}
                                                </td>
                                                <td>
                                                    <input type="text" name="clock_in[]"
                                                           id="clock_in{{$loop->iteration+10}}"
                                                           value="0"
                                                           class="form-control timepicker" required autocomplete="off">
                                                </td>
                                                <td>
                                                    <input type="text" name="clock_out[]"
                                                           id="clock_out{{$loop->iteration+10}}"
                                                           value="0"
                                                           class="form-control timepicker" required autocomplete="off">
                                                </td>
                                                <td>
                                                    <input type="text" name="work_time[]"
                                                           id="work_time{{$loop->iteration+10}}"
                                                           value="0"
                                                           class="form-control " readonly required>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="form-group text-center m-t-10">
                                    <div class="col-xs-12 m-t-20">
                                        <button type="submit"
                                                id="BtnSubmit"
                                                class="btn w-md btn-bordered btn-success waves-effect waves-light">
                                            Submit
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
@endsection
@push('footerscript')
    <script src="{{asset('theme/plugins/moment/moment.js')}}"></script>
    <script src="{{asset('theme/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{asset('theme/plugins/timepicker/bootstrap-timepicker.js')}}"></script>
    <script>
        $(window).load(function () {
            $('#atten_date').change();

            if ({{count($employees)}} == 0) {
                $('#BtnSubmit').prop('disabled', true);
            } else {
                $('#BtnSubmit').prop('disabled', false);
            }
        });
        $(".datepicker").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            endDate: "today"
        });
        $(".timepicker").timepicker({
            showMeridian: false,
        });
        $('select[id^=attendance]').on('change', function (e) {
            var lastnum = $(this).attr('id').slice(-2);
            if ($('#attendance' + lastnum).val() != 'Present') {
                $('#clock_in' + lastnum).val(0);
                $('#clock_out' + lastnum).val(0);
                $('#work_time' + lastnum).val(0);
            }
        });

        $('input[id^=clock_in], input[id^=clock_out]').on('change', function (e) {
            var lastnum = $(this).attr('id').slice(-2);
            if ($('#attendance' + lastnum).val() == 'Present') {
                var from = moment($('#clock_in' + lastnum).val(), 'HH:mm');
                var to = moment($('#clock_out' + lastnum).val(), 'HH:mm');
                var t_hour = to.diff(from, 'minutes');
                $("#work_time" + lastnum).val(moment((Math.floor(t_hour / 60) + ':' + t_hour % 60), 'HH:mm').format('HH:mm'));
            }
        });

        $('#atten_date').on('change', function () {
            var date = $('#atten_date').val();
            $.ajax({
                url: '{{url('employee-attendance/byDate')}}/' + date,
                type: 'GET',
                data: {},
                success: function (response) {
                    $.each(response, function (key, value) {
                        // $('#employee_id'+(key+10)).val(value.employee_id);
                        $('#attendance' + (key + 11)).val(value.attendance);
                        $('#clock_in' + (key + 11)).val(value.clock_in);
                        $('#clock_out' + (key + 11)).val(value.clock_out);
                        $('#work_time' + (key + 11)).val(value.work_time);
                    });
                },
                error: function () {
                }
            });
        });
    </script>
@endpush