@extends('payroll.employee_frontend.layouts.employee')
@section('content')
<section>
  <div class="col-12 mt-4">
    <h2 class="page-title text-center">{{__('obs.late')}} {{__('obs.history')}}</h2>
    <div class="mb-2 heading-border"></div>
  </div>
</section>
<section class="px-3  pt-3 pt-lg-5 row">

  <div class="col-12 mb-4">
    <div class="blu-card d-flex flex-wrap">
      <div class="col-12 col-md-6">
        <h5 class="mb-3 card-in-h">
          <i class="fa fa-calendar mr-2 text-primary" aria-hidden="true"></i>
          {{__('obs.late')}} {{__('obs.history')}}
        </h5>
      </div>
      <div class="col-12 col-md-6 text-left text-md-right">
        <a class="btn btn-success" href="{{route('employee.late.create')}}" >{{__('obs.create')}} {{__('obs.new')}} {{__('obs.late')}}</a>

      </div>
      <div class="col-12 table-responsive">


        <table class="table table-bordered table-hover">
          <thead class="thead-blu">
            <tr>

              <th>{{__('obs.date')}}</th>
              <th>{{__('obs.in')}} {{__('obs.time')}}</th>

              <th>{{__('obs.purpose')}}</th>
              <th>{{__('obs.status')}}</th>
            </tr>
          </thead>
          <tbody>

            @foreach ($lates as $late)
            <tr class="att-status-row">

              <td>{{$late->date}}</td>
              <td>{{$late->expected_in_time}}</td>
              <td>{{$late->purpose}} </td>

              <td>
                @if($late->approve_status ==1)
                <span class="badge badge-primary">Pending</span>
                {{-- <a href="{{ route('employee.leave.edit', ['id' => $leave->id]) }}"class="btn btn-warning btn-sm">{{__('obs.edit')}}</a> --}}
                @elseif($late->approve_status ==2)
                <span class="badge badge-success">Approved</span>
                @elseif ($late->approve_status ==0)
                <span class="badge badge-danger">Rejected</span>
                @endif
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

</section>




@endsection