@extends('layouts.app')
@section('title', 'Employee Attendance')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Employee Attendance</h1>
            <p class="text-sm text-ink-muted">Clock in and out, track worked time, and manage daily staff attendance.</p>
        </div>
        @if ($manage)
            <button class="btn-primary btn-sm" x-data x-on:click="$dispatch('open-modal-add-attendance')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Record attendance</button>
        @endif
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="card p-5 lg:col-span-1">
            <p class="text-xs uppercase tracking-wide text-ink-muted">My attendance — {{ \Illuminate\Support\Carbon::parse($date)->format('d M Y') }}</p>
            @if ($today)
                <div class="mt-4 space-y-2 text-sm">
                    <div class="flex justify-between"><span>Status</span><strong>{{ ucfirst($today->status) }}</strong></div>
                    <div class="flex justify-between"><span>Clock in</span><strong>{{ $today->clock_in?->format('H:i') ?? '—' }}</strong></div>
                    <div class="flex justify-between"><span>Clock out</span><strong>{{ $today->clock_out?->format('H:i') ?? '—' }}</strong></div>
                    <div class="flex justify-between"><span>Worked</span><strong>{{ $today->worked_hours }}</strong></div>
                </div>
            @else
                <p class="mt-4 text-sm text-ink-muted">You have no attendance record for today.</p>
            @endif
            <div class="mt-5 flex gap-2">
                @if (! $today || ! $today->clock_in)
                    <form method="POST" action="{{ route('attendance.clock-in') }}">@csrf<button class="btn-primary">Clock in</button></form>
                @elseif (! $today->clock_out)
                    <form method="POST" action="{{ route('attendance.clock-out') }}">@csrf<button class="btn-primary">Clock out</button></form>
                @else
                    <span class="text-sm text-emerald-700 font-medium self-center">Day completed</span>
                @endif
            </div>
        </div>

        @if ($manage)
            <div class="card p-5 lg:col-span-2">
                <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-3 items-end">
                    <div><label class="field-label">Date</label><input type="date" name="date" value="{{ $date }}" class="input"></div>
                    <div><label class="field-label">Employee</label><select name="user_id" class="input"><option value="">All employees</option>@foreach($employees as $employee)<option value="{{ $employee->id }}" @selected(request('user_id')==$employee->id)>{{ $employee->name }}</option>@endforeach</select></div>
                    <div><label class="field-label">Status</label><select name="status" class="input"><option value="">All</option>@foreach(['present','absent','leave','off'] as $status)<option value="{{ $status }}" @selected(request('status')===$status)>{{ ucfirst($status) }}</option>@endforeach</select></div>
                    <button class="btn-secondary">Filter</button>
                </form>
            </div>
        @endif
    </div>

    @if ($manage)
    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Employee</th><th>Role</th><th>Status</th><th>Clock in</th><th>Clock out</th><th>Worked</th><th>Notes</th><th></th></tr></thead>
            <tbody>
            @forelse($records as $record)
                <tr>
                    <td class="font-medium">{{ $record->user->name }}</td>
                    <td>{{ $record->user->role?->name ?? '—' }}</td>
                    <td><x-badge :color="$record->status === 'present' ? 'emerald' : ($record->status === 'leave' ? 'amber' : 'slate')">{{ ucfirst($record->status) }}</x-badge></td>
                    <td>{{ $record->clock_in?->format('H:i') ?? '—' }}</td>
                    <td>{{ $record->clock_out?->format('H:i') ?? '—' }}</td>
                    <td>{{ $record->worked_hours }}</td>
                    <td>{{ $record->notes ?: '—' }}</td>
                    <td class="text-right"><button class="btn-ghost btn-sm" x-data x-on:click="$dispatch('open-modal-edit-{{ $record->id }}')">Edit</button></td>
                </tr>
            @empty
                <tr><td colspan="8" class="text-center text-ink-muted py-8">No attendance records for this date.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <x-modal id="add-attendance" title="Record employee attendance">
        <form method="POST" action="{{ route('attendance.store') }}" id="add-attendance-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Employee</label><select name="user_id" class="input" required>@foreach($employees as $employee)<option value="{{ $employee->id }}">{{ $employee->name }} — {{ $employee->role?->name }}</option>@endforeach</select></div>
            <div><label class="field-label">Date</label><input type="date" name="attendance_date" value="{{ $date }}" class="input" required></div>
            <div class="grid grid-cols-2 gap-3"><div><label class="field-label">Clock in</label><input type="datetime-local" name="clock_in" class="input"></div><div><label class="field-label">Clock out</label><input type="datetime-local" name="clock_out" class="input"></div></div>
            <div><label class="field-label">Status</label><select name="status" class="input"><option value="present">Present</option><option value="absent">Absent</option><option value="leave">Leave</option><option value="off">Off</option></select></div>
            <div><label class="field-label">Notes</label><textarea name="notes" class="input" rows="2"></textarea></div>
        </form>
        <x-slot:footer><button class="btn-secondary" x-on:click="open=false">Cancel</button><button form="add-attendance-form" class="btn-primary">Save</button></x-slot:footer>
    </x-modal>

    @foreach($records as $record)
    <x-modal id="edit-{{ $record->id }}" title="Edit attendance — {{ $record->user->name }}">
        <form method="POST" action="{{ route('attendance.update', $record) }}" id="edit-attendance-{{ $record->id }}" class="space-y-4">
            @csrf @method('PUT')
            <div><label class="field-label">Date</label><input type="date" name="attendance_date" value="{{ $record->attendance_date->format('Y-m-d') }}" class="input" required></div>
            <div class="grid grid-cols-2 gap-3"><div><label class="field-label">Clock in</label><input type="datetime-local" name="clock_in" value="{{ $record->clock_in?->format('Y-m-d\\TH:i') }}" class="input"></div><div><label class="field-label">Clock out</label><input type="datetime-local" name="clock_out" value="{{ $record->clock_out?->format('Y-m-d\\TH:i') }}" class="input"></div></div>
            <div><label class="field-label">Status</label><select name="status" class="input">@foreach(['present','absent','leave','off'] as $status)<option value="{{ $status }}" @selected($record->status===$status)>{{ ucfirst($status) }}</option>@endforeach</select></div>
            <div><label class="field-label">Notes</label><textarea name="notes" class="input" rows="2">{{ $record->notes }}</textarea></div>
        </form>
        <x-slot:footer><button class="btn-secondary" x-on:click="open=false">Cancel</button><button form="edit-attendance-{{ $record->id }}" class="btn-primary">Save changes</button></x-slot:footer>
    </x-modal>
    @endforeach
    @endif
</div>
@endsection