@extends('layouts.app')
@section('page-title', 'Attendance Management')

@push('styles')
<style>
.status-badge {
    display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600;
}
.s-P       { background:#dcfce7; color:#166534; }
.s-A       { background:#fee2e2; color:#991b1b; }
.s-Late    { background:#fef9c3; color:#854d0e; }
.s-CL      { background:#dbeafe; color:#1e40af; }
.s-ML      { background:#f3e8ff; color:#6b21a8; }
.s-SPWP    { background:#ffedd5; color:#9a3412; }
.s-SPWOP   { background:#fce7f3; color:#9d174d; }
.s-Weekend { background:#f1f5f9; color:#475569; }
.s-Holiday { background:#ecfdf5; color:#065f46; }
</style>
@endpush

@section('content')
<div class="page-header">
    <h1><i class="fas fa-calendar-check" style="color:#0097c4"></i> Attendance Management</h1>
    <div class="flex gap-2">
        <a href="{{ route('attendance.bulk') }}" class="btn btn-outline">
            <i class="fas fa-list-check"></i> Bulk Entry
        </a>
        <a href="{{ route('attendance.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add Record
        </a>
    </div>
</div>

<!-- Filters -->
<form method="GET">
    <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:16px;margin-bottom:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;">
        <div style="flex:1;min-width:180px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Employee</label>
            <select name="employee_id" class="form-control">
                <option value="">All Employees</option>
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected':'' }}>{{ $emp->name }}</option>
                @endforeach
            </select>
        </div>
        <div style="flex:1;min-width:130px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">From Date</label>
            <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
        </div>
        <div style="flex:1;min-width:130px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">To Date</label>
            <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
        </div>
        <div style="flex:1;min-width:120px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Status</label>
            <select name="status" class="form-control">
                <option value="">All</option>
                @foreach(['P','A','Late','CL','ML','SPWP','SPWOP','Weekend','Holiday'] as $s)
                    <option value="{{ $s }}" {{ request('status') === $s ? 'selected':'' }}>{{ $s }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex gap-2" style="flex-shrink:0;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
            <a href="{{ route('attendance.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
        </div>
    </div>
</form>

<!-- Status Legend -->
<div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
    <span style="font-size:0.75rem;font-weight:600;color:#64748b;margin-right:4px;">Legend:</span>
    @foreach(['P'=>'Present','A'=>'Absent','Late'=>'Late','CL'=>'Casual Leave','ML'=>'Maternity Leave','SPWP'=>'SPWP','SPWOP'=>'SPWOP','Weekend'=>'Weekend','Holiday'=>'Holiday'] as $code => $label)
        <span class="status-badge s-{{ $code }}">{{ $code }} - {{ $label }}</span>
    @endforeach
</div>

<div class="card">
    <div class="card-header"><i class="fas fa-table"></i> Attendance Records ({{ $attendances->total() }})</div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr><th>#</th><th>Employee</th><th>Department</th><th>Date</th><th>Day</th><th>Status</th><th>Actions</th></tr>
            </thead>
            <tbody>
                @forelse($attendances as $att)
                <tr>
                    <td>{{ $att->id }}</td>
                    <td>
                        <div style="font-weight:600;">{{ $att->employee->name }}</div>
                        <div style="font-size:0.75rem;color:#64748b;">{{ $att->employee->rg_id }}</div>
                    </td>
                    <td>{{ $att->employee->department?->name ?? '—' }}</td>
                    <td>{{ $att->date->format('d M Y') }}</td>
                    <td style="color:#64748b;font-size:0.85rem;">{{ $att->date->format('l') }}</td>
                    <td><span class="status-badge s-{{ $att->status }}">{{ $att->status }}</span></td>
                    <td>
                        <div class="flex gap-2">
                            <a href="{{ route('attendance.edit', $att) }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                            <form method="POST" action="{{ route('attendance.destroy', $att) }}" onsubmit="return confirm('Delete?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center" style="padding:30px;color:#94a3b8;">No attendance records found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($attendances->hasPages())
        <div style="padding:16px;">{{ $attendances->links() }}</div>
    @endif
</div>
@endsection