@extends('dashboard.layouts.index')
@section('page_title')
@lang('global.attendance')
@stop
@section('breadcrumb')

<div class="breadcrumb-item">
    @lang('global.attendance')
</div>
@stop

@section('content')
<div class="row">
    <div class="col-12">
        <div class="col-sm-4">
            <form method="get" action="{{ route('dashboard.attendance.filter') }}">
                @csrf
                <div class="form-group  mb-4 d-flex">
                    <div class="form-group col-md-10">
                    <input type="text" class="form-control" name="daterange" value="" />
                    </div>
                    <span></span>
                        <br>
                        <div class="form-group col-md-10">
                            <select name="status" class="form-control"  aria-label=".form-select-sm example">
                                <option value="">@lang('global.select_status')</option>
                                <option value="early">Early</option>
                                <option value="late">Late</option>
                                <option value="ontime">OnTime</option>
                            </select>
                        </div>

                    <button type="submit" class="btn btn-primary btn-md ml"
                        style="margin: 10px;">Filter</button>
                </div>
            </form>
        </div>
        <div class="card">
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-striped" id="table-user">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    <i class="fas fa-th"></i>
                                </th>
                                <th>@lang("global.employee")</th>
                                <th>@lang("global.workplace")</th>
                                <th>@lang("global.user")</th>
                                <th>@lang("global.check_in")</th>
                                <th>@lang("global.check_out")</th>
                                <th>@lang("global.status")</th>
                                <th>@lang("global.note")</th>
                                <th>@lang("global.created_at")</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($model as $item)
                            @php
                            $user_information = App\Models\User\UserInformation::where('user_id',$item->employee_id)->first();
                            @endphp
                            <tr>
                                <td>{{$item->id }}</td>
                                <td>{{$item->employee ? $item->employee->name : '' }}</td>
                                <td>{{$user_information ? $user_information->workplace : '' }}</td>
                                <td>{{$item->user ? $item->user->name : '' }}</td>
                                <td>{{$item->check_in  }}</td>
                                <td>{{$item->check_out }}</td>
                                <td>
                                    @if($item->status=='ontime')
                                    <div class="badge badge-success">OnTime</div>
                                @elseif($item->status == 'late')
                                    <div class="badge badge-danger">Late</div>
                                @elseif($item->status == 'early')
                                    <div class="badge badge-warning">Early</div>
                                @endif</td>
                                <td>{{$item->note }}</td>
                                <td>{{$item->created_at }}</td>
                              </tr>
                               @endforeach
                        </tbody>

                    </table>
                </div>


            </div>
        </div>
    </div>
</div>
@stop
@push('js')
{{-- <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> --}}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

{{-- <script type="text/javascript" src="{{ asset('assets/js/datepicker.js') }}"></script> --}}

<script type="text/javascript">
    $(function() {

      $('input[name="daterange"]').daterangepicker({
          autoUpdateInput: false,
          locale: {
              cancelLabel: 'Clear'
          }
      });

      $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
      });

    });
    </script>
@endpush