@extends('layouts.staff')

@section('header')
    <h2 class="font-semibold text-xl text-white">My Attendance Records</h2>
@endsection

@section('content')
<div class="flex justify-between mb-4">
    <h3 class="text-lg font-semibold">My Attendance History</h3>
    <a href="{{ route('attendance.create') }}"
       class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
       + Check In
    </a>
</div>

<!-- Info Banner -->
<div class="mb-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
    <p class="text-sm text-blue-800">
        <strong>📋 Note:</strong> Showing attendance records for the current and previous month.
        Older records are securely stored in the database and retained for 6 years.
    </p>
</div>

@if (session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded mb-3">
        {{ session('success') }}
    </div>
@endif

<!-- Date Range Filter -->
<div class="mb-4 flex gap-2 items-center flex-wrap">
    <label class="font-semibold">Filter by Date Range:</label>
    <input type="date" id="startDate" class="px-3 py-2 border border-gray-300 rounded"
           value="{{ $startDate }}" placeholder="Start Date">
    <span class="text-gray-600">to</span>
    <input type="date" id="endDate" class="px-3 py-2 border border-gray-300 rounded"
           value="{{ $endDate }}" placeholder="End Date">
    <button onclick="filterByDateRange()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
        Filter
    </button>
    @if($startDate || $endDate)
        <a href="{{ route('attendance.index') }}" class="px-3 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
            Clear Filter
        </a>
    @endif
</div>

<!-- TODAY'S ATTENDANCE HIGHLIGHT -->
@php
    $todayAttendance = $attendances->items() ? collect($attendances->items())->firstWhere('attendance_date', function($date) {
        return $date->isToday();
    }) : null;
@endphp

@if($todayAttendance)
<div class="mb-6 p-4 bg-yellow-50 border-2 border-yellow-400 rounded-lg shadow-md">
    <div class="flex items-center justify-between">
        <div>
            <h3 class="text-lg font-bold text-yellow-900">🎯 TODAY'S STATUS</h3>
            <p class="text-sm text-yellow-700 mt-2">
                <strong>Check-In:</strong>
                <span class="font-semibold text-green-600">{{ $todayAttendance->check_in_time->format('H:i') }}</span>

                @if($todayAttendance->hasCheckedOut())
                    | <strong>Check-Out:</strong>
                    <span class="font-semibold text-red-600">{{ $todayAttendance->check_out_time->format('H:i') }}</span>
                    | <strong>Duration:</strong>
                    <span class="font-semibold text-blue-600">{{ $todayAttendance->getFormattedDuration() }}</span>
                    | <span class="inline-block px-2 py-1 bg-green-200 text-green-800 text-xs font-bold rounded">✓ COMPLETED</span>
                @else
                    | <span class="inline-block px-2 py-1 bg-orange-200 text-orange-800 text-xs font-bold rounded">⏳ IN PROGRESS</span>
                    <a href="{{ route('attendance.checkout-form', $todayAttendance->id) }}"
                       class="ml-4 inline-block px-4 py-1 bg-green-600 text-white text-sm font-semibold rounded hover:bg-green-700 transition">
                        → Check Out Now
                    </a>
                @endif
            </p>
        </div>
    </div>
</div>
@endif

<div class="bg-white shadow rounded-lg overflow-hidden">
    <table class="w-full text-left border-collapse">
        <thead class="bg-gray-100 border-b">
            <tr>
                <th class="py-3 px-4">Employee No</th>
                <th class="py-3 px-4">Date</th>
                <th class="py-3 px-4">Check-In Time</th>
                <th class="py-3 px-4">Check-Out Time</th>
                <th class="py-3 px-4">Duration</th>
                
            </tr>
        </thead>
        <tbody>
            @forelse($attendances as $attendance)
            @php
                $isToday = $attendance->attendance_date->isToday();
                $rowClass = $isToday ? 'bg-yellow-100 border-l-4 border-yellow-500 font-semibold' : 'hover:bg-gray-50';
                $hasCheckedOut = $attendance->hasCheckedOut();
            @endphp
            <tr class="border-b {{ $rowClass }}">
                <td class="py-2 px-4">
                    <span class="font-semibold text-indigo-600">{{ $attendance->user->employee?->employee_no ?? 'N/A' }}</span>
                </td>
                <td class="py-2 px-4">
                    {{ $attendance->attendance_date->format('M d, Y') }}
                    @if($isToday)
                        <span class="ml-2 inline-block px-3 py-1 bg-yellow-300 text-yellow-900 text-xs font-bold rounded-full">
                            🎯 TODAY
                        </span>
                    @endif
                </td>
                <td class="py-2 px-4">
                    <span class="font-semibold text-green-600">{{ $attendance->check_in_time->format('H:i') }}</span>
                </td>
                <td class="py-2 px-4">
                    @if($hasCheckedOut)
                        <span class="font-semibold text-red-600">{{ $attendance->check_out_time->format('H:i') }}</span>
                    @else
                        <span class="text-gray-400 italic">Not checked out</span>
                    @endif
                </td>
                <td class="py-2 px-4">
                    @if($hasCheckedOut)
                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full font-semibold">
                            {{ $attendance->getFormattedDuration() }}
                        </span>
                    @else
                        <span class="text-gray-400 italic">-</span>
                    @endif
                </td>
                <td class="py-2 px-4 text-right">
                    @if($isToday && !$hasCheckedOut)
                        <a href="{{ route('attendance.checkout-form', $attendance->id) }}"
                           class="inline-block px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700 transition font-semibold">
                            Check Out
                        </a>
                    @else
                        <span class="text-gray-400 text-xs">-</span>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="text-center py-4 text-gray-500">
                    No attendance records found.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">
    {{ $attendances->links() }}
</div>

<script>
function filterByDateRange() {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;

    let url = "{{ route('attendance.index') }}";

    if (startDate || endDate) {
        url += "?";
        if (startDate) url += "start_date=" + startDate;
        if (startDate && endDate) url += "&";
        if (endDate) url += "end_date=" + endDate;
    }

    window.location.href = url;
}

// Allow Enter key to trigger filter
document.getElementById('endDate')?.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') filterByDateRange();
});
</script>
@endsection