@extends('layouts.epelcon')
@section('title', 'Duty Roster')

@section('content')
<div x-data="{ assign: false, shifts: false }">
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Duty Roster</h1>
            <p class="text-sm text-slate-500">Week of {{ $weekStart->format('j M') }} – {{ $weekStart->copy()->addDays(6)->format('j M Y') }}.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('epelcon.hr.roster', ['week' => $weekStart->copy()->subWeek()->toDateString()]) }}" class="rounded-xl bg-white px-3 py-2.5 text-sm font-bold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50">←</a>
            <a href="{{ route('epelcon.hr.roster') }}" class="rounded-xl bg-white px-3 py-2.5 text-sm font-bold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50">This week</a>
            <a href="{{ route('epelcon.hr.roster', ['week' => $weekStart->copy()->addWeek()->toDateString()]) }}" class="rounded-xl bg-white px-3 py-2.5 text-sm font-bold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50">→</a>
            <button @click="shifts = true" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50">Shifts</button>
            <button @click="assign = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Assign shift</button>
        </div>
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[980px] text-sm">
            <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                <th class="px-4 py-3">Employee</th>
                @foreach ($days as $day)
                    <th class="px-3 py-3 text-center {{ $day->isToday() ? 'text-indigo-600' : '' }}">{{ $day->format('D') }}<br><span class="font-normal">{{ $day->format('j/n') }}</span></th>
                @endforeach
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @forelse ($employees as $employee)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3">
                        <p class="font-bold text-slate-800">{{ $employee->name }}</p>
                        <p class="text-[11px] text-slate-400">{{ $employee->department->name ?? '' }}</p>
                    </td>
                    @foreach ($days as $day)
                        @php $entries = $rosters->get($employee->id . '|' . $day->toDateString(), collect()); @endphp
                        <td class="px-3 py-3 text-center {{ $day->isToday() ? 'bg-indigo-50/40' : '' }}">
                            @forelse ($entries as $entry)
                                <span class="inline-block rounded-full bg-indigo-100 px-2.5 py-1 text-[10px] font-bold text-indigo-700" title="{{ $entry->notes }}">{{ $entry->shift->name ?? '—' }}</span>
                            @empty
                                <span class="text-slate-300">—</span>
                            @endforelse
                        </td>
                    @endforeach
                </tr>
            @empty
                <tr><td colspan="8" class="px-4 py-10 text-center text-slate-400">No active employees.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4 flex flex-wrap gap-2">
        @foreach ($shifts as $shift)
            <span class="rounded-full bg-white px-3 py-1.5 text-xs font-bold text-slate-600 ring-1 ring-slate-200">{{ $shift->name }} · {{ substr($shift->starts_at, 0, 5) }}–{{ substr($shift->ends_at, 0, 5) }}</span>
        @endforeach
    </div>

    {{-- Assign shift modal --}}
    <div x-cloak x-show="assign" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="assign = false"></div>
        <div x-show="assign" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Assign shift</h2>
            <form method="POST" action="{{ route('epelcon.hr.roster.store') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Employee</span>
                    <select name="employee_id" required class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($employees as $employee)<option value="{{ $employee->id }}">{{ $employee->name }}</option>@endforeach
                    </select></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Shift</span>
                    <select name="duty_shift_id" required class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($shifts as $shift)<option value="{{ $shift->id }}">{{ $shift->name }} ({{ substr($shift->starts_at, 0, 5) }}–{{ substr($shift->ends_at, 0, 5) }})</option>@endforeach
                    </select></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Date</span>
                    <input type="date" name="date" value="{{ today()->toDateString() }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Notes</span>
                    <input name="notes" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="assign = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Assign</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Shifts management modal --}}
    <div x-cloak x-show="shifts" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="shifts = false"></div>
        <div x-show="shifts" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Duty shifts</h2>
            <div class="mb-4 space-y-2">
                @forelse ($shifts as $shift)
                    <div class="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2.5">
                        <p class="text-sm font-bold text-slate-800">{{ $shift->name }}</p>
                        <span class="text-xs font-bold text-slate-500">{{ substr($shift->starts_at, 0, 5) }} – {{ substr($shift->ends_at, 0, 5) }}</span>
                    </div>
                @empty
                    <p class="py-4 text-center text-sm text-slate-400">No shifts yet — add one below.</p>
                @endforelse
            </div>
            <form method="POST" action="{{ route('epelcon.hr.shifts.store') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Shift name</span>
                    <input name="name" required placeholder="e.g. Morning" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="grid grid-cols-2 gap-4">
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Starts</span>
                        <input type="time" name="starts_at" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Ends</span>
                        <input type="time" name="ends_at" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="shifts = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Close</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Add shift</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
