@extends('layouts.app')

@section('title', 'Shift Management')

@section('content')
<div class="space-y-6">
    <header class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div><p class="text-xs font-bold uppercase tracking-[.18em] text-emerald-600">Employees & HR</p><h1 class="mt-1 text-3xl font-bold text-slate-950">Shift management</h1><p class="mt-1 text-sm text-slate-500">Effective-dated day, night, split and flexible schedules with employee, department and branch assignment history.</p></div>
        <a href="{{ route('app.attendance.index') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-bold text-slate-700">Open attendance</a>
    </header>

    @if(auth()->check() && auth()->user()->hasPermission('shifts.manage'))
    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
        <h2 class="text-lg font-bold text-slate-950">Create a shift</h2>
        <form method="POST" action="{{ route('app.shifts.store') }}" class="mt-4 grid gap-3 md:grid-cols-4">
            @csrf
            <label class="text-xs font-semibold text-slate-700">Shift name<input name="name" required class="erp-input mt-1" placeholder="Dubai Day Shift"></label>
            <label class="text-xs font-semibold text-slate-700">Code<input name="code" required class="erp-input mt-1" placeholder="DXB-DAY"></label>
            <label class="text-xs font-semibold text-slate-700">Type<select name="type" class="erp-input mt-1">@foreach(['day','night','split','flexible'] as $type)<option value="{{ $type }}">{{ ucfirst($type) }}</option>@endforeach</select></label>
            <label class="text-xs font-semibold text-slate-700">Branch<select name="branch_id" class="erp-input mt-1"><option value="">All branches</option>@foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach</select></label>
            <label class="text-xs font-semibold text-slate-700">Start<input type="time" name="start_time" class="erp-input mt-1"></label>
            <label class="text-xs font-semibold text-slate-700">End<input type="time" name="end_time" class="erp-input mt-1"></label>
            <label class="text-xs font-semibold text-slate-700">Grace minutes<input type="number" name="grace_minutes" value="10" min="0" class="erp-input mt-1"></label>
            <label class="text-xs font-semibold text-slate-700">Break minutes<input type="number" name="break_minutes" value="60" min="0" class="erp-input mt-1"></label>
            <label class="text-xs font-semibold text-slate-700">Minimum OT minutes<input type="number" name="minimum_overtime_minutes" value="30" min="0" class="erp-input mt-1"></label>
            <label class="text-xs font-semibold text-slate-700">OT multiplier<input type="number" step=".01" name="overtime_multiplier" value="1.25" min="1" class="erp-input mt-1"></label>
            <label class="flex items-center gap-2 self-end rounded-xl border border-slate-200 px-3 py-3 text-xs font-semibold"><input type="checkbox" name="is_active" value="1" checked> Active</label>
            <button class="self-end rounded-xl bg-emerald-600 px-4 py-3 text-sm font-bold text-white">Create shift</button>
            <div class="md:col-span-4 flex flex-wrap gap-3 rounded-xl bg-slate-50 p-3">@foreach(['monday','tuesday','wednesday','thursday','friday','saturday','sunday'] as $day)<label class="flex items-center gap-1.5 text-xs text-slate-600"><input type="checkbox" name="applicable_days[]" value="{{ $day }}" @checked($day !== 'sunday')>{{ ucfirst(substr($day,0,3)) }}</label>@endforeach</div>
        </form>
    </section>
    @endif

    <section class="space-y-4">
        @forelse($shifts as $shift)
        <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                <div><div class="flex items-center gap-2"><h2 class="text-lg font-bold text-slate-950">{{ $shift->name }}</h2><span class="rounded-full px-2 py-1 text-[10px] font-bold uppercase {{ $shift->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">{{ $shift->is_active ? 'Active' : 'Inactive' }}</span></div><p class="mt-1 text-sm text-slate-500">{{ $shift->code }} · {{ ucfirst($shift->type) }} · {{ $shift->start_time ?: 'Flexible' }}–{{ $shift->end_time ?: 'Flexible' }} · {{ $shift->break_minutes }} min break</p></div>
                <div class="flex flex-wrap gap-2 text-xs"><span class="rounded-lg bg-slate-100 px-3 py-2">{{ $shift->assignments->count() }} assignment(s)</span><span class="rounded-lg bg-amber-50 px-3 py-2 text-amber-700">{{ $shift->grace_minutes }} min grace</span><span class="rounded-lg bg-emerald-50 px-3 py-2 text-emerald-700">OT × {{ $shift->overtime_multiplier }}</span></div>
            </div>
            @if(auth()->check() && auth()->user()->hasPermission('shifts.manage'))
            <form method="POST" action="{{ route('app.shifts.assign', $shift) }}" class="mt-4 grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 md:grid-cols-6">
                @csrf
                <select name="employee_id" class="erp-input"><option value="">Employee (optional)</option>@foreach($employees as $employee)<option value="{{ $employee->id }}">{{ $employee->employee_code }} · {{ $employee->full_name }}</option>@endforeach</select>
                <select name="department_id" class="erp-input"><option value="">Department (optional)</option>@foreach($departments as $department)<option value="{{ $department->id }}">{{ $department->name }}</option>@endforeach</select>
                <select name="branch_id" class="erp-input"><option value="">Branch (optional)</option>@foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach</select>
                <input type="date" name="effective_from" value="{{ today()->format('Y-m-d') }}" required class="erp-input">
                <input type="date" name="effective_to" class="erp-input">
                <button class="rounded-xl bg-slate-900 px-3 py-2 text-xs font-bold text-white">Assign shift</button>
            </form>
            @endif
            @if($shift->assignments->isNotEmpty())<div class="mt-4 flex flex-wrap gap-2">@foreach($shift->assignments->take(12) as $assignment)<span class="rounded-full border border-slate-200 px-3 py-1 text-[11px] text-slate-600">{{ $assignment->employee?->full_name ?? $assignment->department?->name ?? $assignment->branch?->name }} · from {{ $assignment->effective_from->format('d M Y') }}</span>@endforeach</div>@endif
        </article>
        @empty
        <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-12 text-center"><h2 class="font-bold text-slate-900">No shifts configured</h2><p class="mt-1 text-sm text-slate-500">Create the first working schedule to connect attendance and overtime calculations.</p></div>
        @endforelse
        {{ $shifts->links() }}
    </section>
</div>
@endsection