@php
  $configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', __('My Attendance'))

@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/flatpickr/flatpickr.scss'
  ])
@endsection

@section('vendor-script')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/flatpickr/flatpickr.js',
    'resources/assets/vendor/libs/moment/moment.js'
  ])
@endsection

@section('page-script')
  @vite(['resources/assets/js/app/hrcore-my-attendance.js'])
  <script>
    const pageData = {
      labels: {
        search: @json(__('Search')),
        processing: @json(__('Processing...')),
        lengthMenu: @json(__('Show _MENU_ entries')),
        info: @json(__('Showing _START_ to _END_ of _TOTAL_ entries')),
        infoEmpty: @json(__('Showing 0 to 0 of 0 entries')),
        infoFiltered: @json(__('(filtered from _MAX_ total entries)')),
        emptyTable: @json(__('No attendance records found')),
        zeroRecords: @json(__('No matching records found')),
        paginate: {
          first: @json(__('First')),
          last: @json(__('Last')),
          next: @json(__('Next')),
          previous: @json(__('Previous'))
        },
        exportSuccessful: @json(__('Export Successful')),
        attendanceDataExported: @json(__('Your attendance data has been exported.')),
        loading: @json(__('Loading...')),
        failedToLoadDetails: @json(__('Failed to load attendance details.')),
        errorOccurred: @json(__('An error occurred while loading attendance details.')),
        date: @json(__('Date')),
        checkIn: @json(__('Check In')),
        checkOut: @json(__('Check Out')),
        totalHours: @json(__('Total Hours')),
        overtime: @json(__('Overtime')),
        status: @json(__('Status')),
        notes: @json(__('Notes')),
        checkInOutLogs: @json(__('Check-in/out Logs')),
        type: @json(__('Type')),
        time: @json(__('Time')),
        location: @json(__('Location')),
        hrs: @json(__('hrs'))
      }
    };
  </script>
@endsection

@section('content')
  <div class="container-xxl flex-grow-1 container-p-y">
    {{-- Breadcrumb --}}
    <x-breadcrumb
      :title="__('My Attendance')"
      :breadcrumbs="[
        ['name' => __('Attendance'), 'url' => ''],
        ['name' => __('My Attendance'), 'url' => '']
      ]"
    />

    {{-- Statistics Cards --}}
    <div class="row mb-4">
      <div class="col-lg-3 col-sm-6 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div class="card-info">
                <p class="card-text text-muted">{{ __('Present Days') }}</p>
                <div class="d-flex align-items-end mb-2">
                  <h4 class="card-title mb-0 me-2">{{ $statistics['present'] }}</h4>
                  <small class="text-success">({{ __('This Month') }})</small>
                </div>
              </div>
              <div class="card-icon">
                <span class="badge bg-label-success rounded p-2">
                  <i class="bx bx-check-circle bx-sm"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div class="card-info">
                <p class="card-text text-muted">{{ __('Absent Days') }}</p>
                <div class="d-flex align-items-end mb-2">
                  <h4 class="card-title mb-0 me-2">{{ $statistics['absent'] }}</h4>
                  <small class="text-danger">({{ __('This Month') }})</small>
                </div>
              </div>
              <div class="card-icon">
                <span class="badge bg-label-danger rounded p-2">
                  <i class="bx bx-x-circle bx-sm"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div class="card-info">
                <p class="card-text text-muted">{{ __('Late Arrivals') }}</p>
                <div class="d-flex align-items-end mb-2">
                  <h4 class="card-title mb-0 me-2">{{ $statistics['late'] }}</h4>
                  <small class="text-warning">({{ __('This Month') }})</small>
                </div>
              </div>
              <div class="card-icon">
                <span class="badge bg-label-warning rounded p-2">
                  <i class="bx bx-time-five bx-sm"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div class="card-info">
                <p class="card-text text-muted">{{ __('Half Days') }}</p>
                <div class="d-flex align-items-end mb-2">
                  <h4 class="card-title mb-0 me-2">{{ $statistics['half_day'] }}</h4>
                  <small class="text-info">({{ __('This Month') }})</small>
                </div>
              </div>
              <div class="card-icon">
                <span class="badge bg-label-info rounded p-2">
                  <i class="bx bx-hourglass bx-sm"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- Today's Status --}}
    <div class="row mb-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">{{ __("Today's Status") }}</h5>
            <span class="text-muted">{{ now()->format('l, F d, Y') }}</span>
          </div>
          <div class="card-body">
            @php
              $todayAttendance = $attendances->first(fn($att) => $att->date->isToday());
            @endphp
            
            @if($todayAttendance)
              <div class="row">
                <div class="col-md-3">
                  <div class="d-flex align-items-center mb-3">
                    <div class="avatar avatar-sm me-2">
                      <span class="avatar-initial rounded-circle bg-label-success">
                        <i class="bx bx-log-in"></i>
                      </span>
                    </div>
                    <div>
                      <small class="text-muted d-block">{{ __('Check In') }}</small>
                      <strong>
                        @php
                          $checkIn = $todayAttendance->attendanceLogs->where('type', 'check_in')->first();
                        @endphp
                        {{ $checkIn ? $checkIn->created_at->format('h:i A') : '--:--' }}
                      </strong>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="d-flex align-items-center mb-3">
                    <div class="avatar avatar-sm me-2">
                      <span class="avatar-initial rounded-circle bg-label-danger">
                        <i class="bx bx-log-out"></i>
                      </span>
                    </div>
                    <div>
                      <small class="text-muted d-block">{{ __('Check Out') }}</small>
                      <strong>
                        @php
                          $checkOut = $todayAttendance->attendanceLogs->where('type', 'check_out')->last();
                        @endphp
                        {{ $checkOut ? $checkOut->created_at->format('h:i A') : '--:--' }}
                      </strong>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="d-flex align-items-center mb-3">
                    <div class="avatar avatar-sm me-2">
                      <span class="avatar-initial rounded-circle bg-label-info">
                        <i class="bx bx-time"></i>
                      </span>
                    </div>
                    <div>
                      <small class="text-muted d-block">{{ __('Total Hours') }}</small>
                      @php
                        $todayHours = floor($todayAttendance->working_hours ?? 0);
                        $todayMinutes = round((($todayAttendance->working_hours ?? 0) - $todayHours) * 60);
                      @endphp
                      <strong>
                        @if($todayHours > 0)
                          {{ $todayHours }}h {{ $todayMinutes }}m
                        @else
                          {{ $todayMinutes }}m
                        @endif
                      </strong>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="d-flex align-items-center mb-3">
                    <div class="avatar avatar-sm me-2">
                      <span class="avatar-initial rounded-circle bg-label-{{ $todayAttendance->status == 'present' ? 'success' : 'warning' }}">
                        <i class="bx bx-check"></i>
                      </span>
                    </div>
                    <div>
                      <small class="text-muted d-block">{{ __('Status') }}</small>
                      <span class="badge bg-label-{{ $todayAttendance->status == 'present' ? 'success' : 'warning' }}">
                        {{ __(ucfirst($todayAttendance->status)) }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
              @if(!$checkOut)
                <div class="alert alert-warning mb-0">
                  <i class="bx bx-info-circle me-1"></i>
                  {{ __("Don't forget to check out before leaving!") }}
                </div>
              @endif
            @else
              <div class="alert alert-info mb-0">
                <i class="bx bx-info-circle me-1"></i>
                {{ __('No attendance record for today. Please check in to mark your attendance.') }}
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>

    {{-- Attendance History --}}
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">{{ __('Attendance History') }}</h5>
        <div class="d-flex gap-2">
          <input type="text" id="dateFilter" class="form-control form-control-sm flatpickr-range" 
            placeholder="{{ __('Select Date Range') }}" style="width: 200px;">
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-hover" id="attendanceTable">
            <thead>
              <tr>
                <th>{{ __('Date') }}</th>
                <th>{{ __('Day') }}</th>
                <th>{{ __('Check In') }}</th>
                <th>{{ __('Check Out') }}</th>
                <th>{{ __('Total Hours') }}</th>
                <th>{{ __('Overtime') }}</th>
                <th>{{ __('Status') }}</th>
                <th>{{ __('Actions') }}</th>
              </tr>
            </thead>
            <tbody>
              @foreach($attendances as $attendance)
                @php
                  $checkIn = $attendance->attendanceLogs->where('type', 'check_in')->first();
                  $checkOut = $attendance->attendanceLogs->where('type', 'check_out')->last();
                @endphp
                <tr>
                  <td>{{ $attendance->date->format('M d, Y') }}</td>
                  <td>{{ $attendance->date->format('l') }}</td>
                  <td>
                    @if($checkIn)
                      <span class="badge bg-label-success">
                        {{ $checkIn->created_at->format('h:i A') }}
                      </span>
                    @else
                      <span class="text-muted">--:--</span>
                    @endif
                  </td>
                  <td>
                    @if($checkOut)
                      <span class="badge bg-label-danger">
                        {{ $checkOut->created_at->format('h:i A') }}
                      </span>
                    @else
                      <span class="text-muted">--:--</span>
                    @endif
                  </td>
                  <td>
                    @if($attendance->working_hours)
                      @php
                        $hours = floor($attendance->working_hours);
                        $minutes = round(($attendance->working_hours - $hours) * 60);
                      @endphp
                      <strong>
                        @if($hours > 0)
                          {{ $hours }}h {{ $minutes }}m
                        @else
                          {{ $minutes }}m
                        @endif
                      </strong>
                    @else
                      <span class="text-muted">--</span>
                    @endif
                  </td>
                  <td>
                    @if($attendance->overtime_hours > 0)
                      @php
                        $otHours = floor($attendance->overtime_hours);
                        $otMinutes = round(($attendance->overtime_hours - $otHours) * 60);
                      @endphp
                      <span class="badge bg-label-info">
                        @if($otHours > 0)
                          +{{ $otHours }}h {{ $otMinutes }}m
                        @else
                          +{{ $otMinutes }}m
                        @endif
                      </span>
                    @else
                      <span class="text-muted">--</span>
                    @endif
                  </td>
                  <td>
                    @php
                      $statusColors = [
                        'present' => 'success',
                        'absent' => 'danger',
                        'late' => 'warning',
                        'half_day' => 'info',
                        'holiday' => 'secondary',
                        'weekend' => 'secondary'
                      ];
                    @endphp
                    <span class="badge bg-label-{{ $statusColors[$attendance->status] ?? 'primary' }}">
                      {{ __(ucfirst(str_replace('_', ' ', $attendance->status))) }}
                    </span>
                  </td>
                  <td>
                    <button class="btn btn-sm btn-label-info"
                      onclick="viewAttendanceDetails({{ $attendance->id }})"
                      data-bs-toggle="tooltip"
                      title="{{ __('View Details') }}">
                      <i class="bx bx-show"></i>
                    </button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  {{-- View Attendance Details Offcanvas --}}
  <div class="offcanvas offcanvas-end" tabindex="-1" id="viewDetailsOffcanvas" aria-labelledby="viewDetailsOffcanvasLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="viewDetailsOffcanvasLabel">{{ __('Attendance Details') }}</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div id="attendanceDetailsContent">
        <div class="text-center py-4">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">{{ __('Loading...') }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection