@extends('layouts.layoutMaster')

@section('title', __('Attendances'))

<!-- Vendor Styles -->
@section('vendor-style')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
    'resources/assets/vendor/libs/select2/select2.scss',
  ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/moment/moment.js',
    'resources/assets/vendor/libs/select2/select2.js',
  ])
@endsection

@section('page-script')
  @vite([
    'resources/js/main-select2.js',
    'resources/assets/js/app/attendance-index.js',
  ])
@endsection

@section('content')
  <div class="container mt-4">
    <h4>Attendances</h4>
    <!-- Filter Section -->
    <div class="row mb-3">
      <div class="col-md-3 mb-3">
        <label for="startDate" class="form-label">Start Date</label>
        <input type="date" id="startDate" name="startDate" class="form-control"
               value="{{ request()->get('startDate', now()->format('Y-m-d')) }}">
      </div>
      <div class="col-md-3 mb-3">
        <label for="endDate" class="form-label">End Date</label>
        <input type="date" id="endDate" name="endDate" class="form-control"
               value="{{ request()->get('endDate', now()->format('Y-m-d')) }}">
      </div>
      <div class="col-md-3 mb-3">
        <label for="userId" class="form-label">Employee</label>
        <select id="userId" name="userId" class="form-select select2">
          <option value="">All Employees</option>
          @foreach($users as $user)
            <option value="{{ $user->id }}">
              {{ $user->code }} - {{ $user->getFullName() }}
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label for="status" class="form-label">Status</label>
        <select id="status" name="status" class="form-select">
          <option value="">All</option>
          <option value="present">Present</option>
          <option value="absent">Absent</option>
          <option value="late">Late</option>
          <option value="early_leave">Early Leave</option>
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label for="teamId" class="form-label">Team</label>
        <select id="teamId" name="teamId" class="form-select select2">
          <option value="">All Teams</option>
          @foreach($teams as $team)
            <option value="{{ $team->id }}">{{ $team->name }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label for="departmentId" class="form-label">Department</label>
        <select id="departmentId" name="departmentId" class="form-select select2">
          <option value="">All Departments</option>
          @foreach($departments as $department)
            <option value="{{ $department->id }}">{{ $department->name }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label for="shiftId" class="form-label">Shift</label>
        <select id="shiftId" name="shiftId" class="form-select select2">
          <option value="">All Shifts</option>
          @foreach($shifts as $shift)
            <option value="{{ $shift->id }}">{{ $shift->name }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-md-3 mb-3 d-flex align-items-end">
        <button type="button" class="btn btn-outline-primary w-100" id="attendanceRefreshBtn">
          Refresh
        </button>
      </div>
    </div>


    <!-- Attendance Summary Table -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Attendance Summary</h5>
        <div class="table-responsive">
          <table id="attendanceTable" class="table mt-3">
            <thead>
            <tr>
              <th>Id</th>
              <th>User</th>
              <th>Shift</th>
              <th>Check In Time</th>
              <th>Check Out Time</th>
              <th>Check In Address</th>
              <th>Check Out Address</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const btn = document.getElementById('attendanceRefreshBtn');
      if (!btn) return;
      btn.addEventListener('click', function () {
        if (window.$ && $.fn && $.fn.dataTable) {
          const dt = $('#attendanceTable').DataTable();
          dt.ajax.reload(null, false);
        } else {
          window.location.reload();
    }
      });
    });
  </script>
@endsection