@use('App\Models\Attendance')

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('My attendance') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />
            <x-toast :message="session('error')" icon="error" />

            <!-- Today -->
            <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                <div class="flex flex-col gap-6 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-8">
                    <div class="flex items-center gap-4">
                        <div class="grid h-14 w-14 shrink-0 place-items-center rounded-2xl bg-brand-50 text-brand-600 ring-1 ring-brand-100">
                            <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        </div>

                        <div class="min-w-0">
                            <div class="text-xl font-semibold text-gray-900">{{ $localNow->format('l, F j') }}</div>
                            <div class="text-sm text-gray-600">
                                {{ __('Office hours :start to :end', ['start' => \Carbon\Carbon::parse($schedule['start_time'])->format('g:i A'), 'end' => \Carbon\Carbon::parse($schedule['end_time'])->format('g:i A')]) }}
                                · {{ __('Your time: :time (:tz)', ['time' => $localNow->format('g:i A'), 'tz' => str_replace('_', ' ', $employee->timezone())]) }}
                            </div>

                            <div class="mt-2 flex flex-wrap items-center gap-2 text-sm">
                                @if ($today)
                                    @include('attendance.partials.status-badge', ['status' => $today->status, 'derived' => null])
                                    <span class="text-gray-700">{{ __('In :in', ['in' => $today->localCheckIn()?->format('g:i A') ?? '—']) }}</span>
                                    @if ($today->check_out_at)
                                        <span class="text-gray-700">· {{ __('Out :out', ['out' => $today->localCheckOut()->format('g:i A')]) }}</span>
                                        <span class="text-gray-700">· {{ Attendance::formatHours($today->hoursWorked()) }}</span>
                                    @endif
                                @elseif (! $isWorkingDay)
                                    <x-badge tone="gray" dot>{{ __('Weekend') }}</x-badge>
                                    <span class="text-gray-600">{{ __('No work expected today, but you can still check in if you are working.') }}</span>
                                @else
                                    <x-badge tone="amber" dot>{{ __('Not checked in yet') }}</x-badge>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="flex shrink-0 items-center gap-3">
                        @if (! $today)
                            <form method="POST" action="{{ route('attendance.check-in') }}">
                                @csrf
                                <x-primary-button class="px-6 py-3 text-base">
                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3-3l-3-3m0 0l-3 3m3-3H9" /></svg>
                                    {{ __('Check in') }}
                                </x-primary-button>
                            </form>
                        @elseif ($today->check_in_at && ! $today->check_out_at)
                            <form method="POST" action="{{ route('attendance.check-out') }}" data-confirm data-confirm-variant="success" data-confirm-title="{{ __('Check out now?') }}" data-confirm-text="{{ __('Your day will be recorded as ending at :time.', ['time' => $localNow->format('g:i A')]) }}" data-confirm-button="{{ __('Yes, check out') }}">
                                @csrf
                                <x-secondary-button class="px-6 py-3 text-base">
                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
                                    {{ __('Check out') }}
                                </x-secondary-button>
                            </form>
                        @else
                            <span class="rounded-xl bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-700 ring-1 ring-emerald-200">{{ __('Done for today') }}</span>
                        @endif
                    </div>
                </div>
            </div>

            @include('attendance.partials.summary')

            @include('attendance.partials.history', ['monthRoute' => route('attendance.mine')])

            <p class="text-sm text-gray-600">
                {{ __('Late means checking in more than :grace minutes after :start. See something wrong? Ask an administrator; only they can change attendance records.', ['grace' => $schedule['grace_minutes'], 'start' => \Carbon\Carbon::parse($schedule['start_time'])->format('g:i A')]) }}
            </p>
        </div>
    </div>
</x-app-layout>