@extends('layouts.app')

@section('style')

@endsection

@section('content')
<div class="container profile_update">

    <div class="row">
            <div class="col-md-12">
              <div class="mb-4">
                <ul class="nav nav-tabs" role="tablist">
                  @include('Attendance::nav_bar')
                </ul>
              </div>
            </div>
            <div class="col-md-12">
              <div class="row">
                <div class="col-lg-12">
                  <div class="card">
                    <div class="card-body">
                      <div class="profile_update mb-3">
                        <!--form class="" action="#" method="post">
                          <div class="form-row">
                            <div class="form-group col-sm">
                              <label for="" class="input-label">Select Employee</label>
                              <select id="" class="form-control" name="">
                                <option value="">Select</option>
                                <option value="1">Employee 1</option>
                                <option value="2">Employee 2</option>
                                <option value="3">Employee 3</option>
                              </select>
                            </div>
                            <div class="form-group col-sm">
                              <label for="" class="input-label">Select Time Base</label>
                              <select id="time_base_select" class="form-control" name="">
                                <option value="1" selected>Daily</option>
                                <option value="2">Weekly</option>
                                <option value="3">Monthly</option>
                              </select>
                            </div>
                            <div class="form-group col-sm select_week d-none">
                              <label for="" class="input-label">Select Week</label>
                              <select class="form-control" name="">
                                <option value="">Select</option>
                                <option value="1">2021-12-05 - 2021-12-09</option>
                                <option value="1">2021-11-28 - 2021-12-02</option>
                                <option value="1">2021-11-21 - 2021-11-25</option>
                                <option value="1">2021-11-14 - 2021-11-18</option>
                              </select>
                            </div>
                            <div class="form-group col-sm select_month d-none">
                              <label for="" class="input-label">Select Month</label>
                              <select class="form-control" name="">
                                <option value="">Select</option>
                                <option value="1">January</option>
                                <option value="1">February</option>
                                <option value="1">March</option>
                                <option value="1">April</option>
                              </select>
                            </div>
                            <div class="form-group col-sm">
                              <label for="" class="input-label">Select Status</label>
                              <select class="form-control" name="">
                                <option value="">Select</option>
                                <option value="1">Normal</option>
                                <option value="1">Absence</option>
                                <option value="1">Half Day</option>
                                <option value="1">Late In</option>
                              </select>
                            </div>
                            <div class="form-group col-sm">
                              <button type="button" class="btn btn-warning bg-white border border-warning text-warning mt-5" name="button">Reset</button>
                              <button type="button" class="btn btn-primary border border-primary mt-5" name="button">Filter</button>
                            </div>
                          </div>
                        </form-->
                      </div>
                      <div class="table-responsive">
                        <table class="table table-bordered">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                              <th>Employee ID</th>
                              <th>Employee type</th>
                              <th>Status</th>
                              <th>In Time</th>                              
                            </tr>
                          </thead>
                          <tbody>
                            @if((isset($data)) && (count($data) > 0))
                            @foreach($data as $value)
                            <tr>                               
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $value['emp_name'] ?? '' }}</td>
                                <td>{{ $value['emp_id'] ?? '' }}</td>
                                <td>{{ $value['emp_type'] ?? '' }}</td>
                                <td>
                                  <span class="badge {{ $value['status'] == 'Present' ? 'badge-success' : ($value['status'] == 'Late In' ? 'badge-warning' : ($value['status'] == 'Half Day' ? 'badge-primary' : ($value['status'] == 'Absent' ? 'badge-danger' : ($value['status'] == 'Applied' ? 'badge-purple' : 'badge-info'))))}}">{{ $value['status'] ?? '' }}</span>
                                </td>
                                <td>{{ $value['in_time'] ?? '00:00' }}</td>
                              </tr>
                              @endforeach
                            @endif
                            
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">
  $(window).on('load', function(){
    $('#preloader').fadeOut('slow',function(){$(this).remove();});
  });
  $(document).ready(function() {
    'use strict';
    /*-------------------------------------
    Sticky NabBar
    -------------------------------------*/
    $(window).on('scroll', function () {
      var scroll = $(window).scrollTop();

      if (scroll >= 1) {
        $('.ugf-nav-wrap').addClass('fixed');
      } else {
        $('.ugf-nav-wrap').removeClass('fixed');
      }
    });
    //
    // Time Base Selection
    //
    $('#time_base_select').on('change', function() {
      if($(this).val() === '1') {
          $('.select_week').addClass('d-none');
          $('.select_month').addClass('d-none');
      } else if($(this).val() === '2') {
          $('.select_week').removeClass('d-none');
          $('.select_month').addClass('d-none');
      } else if($(this).val() === '3') {
          $('.select_month').removeClass('d-none');
          $('.select_week').addClass('d-none');
      } else {
        $('.select_week').addClass('d-none');
        $('.select_month').addClass('d-none');
      }
    });
  });
</script>
@endsection