@extends('layouts.admin', [
    'title' => 'Staff Working Hours',
    'pageTitle' => 'Staff Working Hours',
    'active' => 'staff',
])

@section('content')
    <form method="POST" action="{{ route('admin.staff.working-hours.update', $staff) }}" class="space-y-5">
        @csrf
        @method('PUT')

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-medium text-booklio-muted">Set weekly availability, breaks, and closed days for {{ $staff->name }}.</p>
                @if (session('status'))
                    <p class="mt-2 rounded-lg border border-emerald-100 bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-700">{{ session('status') }}</p>
                @endif
            </div>
            <div class="flex flex-col gap-3 sm:flex-row">
                <x-ui.button variant="secondary" href="{{ route('admin.staff.show', $staff) }}">
                    <x-ui.icon name="arrow-left" class="h-4 w-4" />
                    Back to Profile
                </x-ui.button>
                <x-ui.button type="submit">Save Working Hours</x-ui.button>
            </div>
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Weekly Schedule" padding="p-0">
                @include('admin.staff.partials.working-hours-table', ['hours' => $hours])
            </x-ui.card>

            <div class="space-y-5">
                <x-ui.card title="Staff Summary">
                    <div class="flex items-center gap-4">
                        @if ($staff->avatar_url)
                            <img src="{{ $staff->avatar_url }}" alt="{{ $staff->name }}" class="h-14 w-14 rounded-full object-cover">
                        @else
                            <div class="flex h-14 w-14 items-center justify-center rounded-full bg-blue-50 text-sm font-extrabold text-booklio-primary">{{ $staff->initials }}</div>
                        @endif
                        <div class="min-w-0">
                            <p class="truncate text-base font-extrabold">{{ $staff->name }}</p>
                            <p class="truncate text-sm font-medium text-booklio-muted">{{ $staff->role ?: 'Staff Member' }}</p>
                        </div>
                    </div>
                    <div class="mt-5 grid gap-3">
                        <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3"><span class="text-sm font-bold text-booklio-muted">Weekly hours</span><span class="text-sm font-extrabold">{{ number_format($summary['weekly_hours'], 1) }}</span></div>
                        <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3"><span class="text-sm font-bold text-booklio-muted">Working days</span><span class="text-sm font-extrabold">{{ $summary['working_days'] }}</span></div>
                        <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3"><span class="text-sm font-bold text-booklio-muted">Breaks</span><span class="text-sm font-extrabold">{{ $summary['breaks'] }}</span></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Booking Rules">
                    <div class="space-y-4">
                        <x-form.input name="slot_interval" label="Slot Interval" value="15 minutes" disabled />
                        <x-form.input name="max_daily_appointments" label="Max Daily Appointments" value="8" disabled />
                        <x-form.input name="advance_notice" label="Minimum Advance Notice" value="2 hours" disabled />
                    </div>
                    <p class="mt-3 text-xs font-medium text-booklio-muted">Booking rule persistence will be connected with appointment availability logic.</p>
                </x-ui.card>
            </div>
        </section>
    </form>
@endsection