@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Eventos do calendário</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">{{ $calendar->name }} ({{ $calendar->year }})</p>
        </div>
        <a href="{{ route('calendarios.index') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700">Voltar</a>
    </div>

    @if (session('success'))
        <div class="rounded-lg border border-success-200 bg-success-50 px-4 py-3 text-sm text-success-700">
            {{ session('success') }}
        </div>
    @endif

    <x-common.component-card title="Adicionar evento">
        <form method="post" action="{{ route('calendarios.eventos.store', $calendar) }}" class="grid gap-4 md:grid-cols-4">
            @csrf
            <div>
                <label class="mb-1.5 block text-sm text-gray-600">Data</label>
                <div class="relative">
                    <input type="date" name="date" required class="h-10 w-full rounded-lg border border-gray-200 px-3 pr-10 text-sm" data-datepicker />
                    <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500" aria-label="Abrir calendário">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M8 2v2M16 2v2M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    </button>
                </div>
            </div>
            <div class="md:col-span-2">
                <label class="mb-1.5 block text-sm text-gray-600">Título</label>
                <input type="text" name="title" required class="h-10 w-full rounded-lg border border-gray-200 px-3 text-sm" />
            </div>
            <div>
                <label class="mb-1.5 block text-sm text-gray-600">Tipo</label>
                <select name="type" class="h-10 w-full rounded-lg border border-gray-200 px-3 text-sm">
                    <option value="evento">Evento</option>
                    <option value="feriado">Feriado</option>
                    <option value="recesso">Recesso</option>
                </select>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="is_school_day" value="1" checked class="h-4 w-4 rounded border-gray-300 text-brand-500" />
                <span class="text-sm text-gray-600">Dia letivo</span>
            </div>
            <div class="md:col-span-3"></div>
            <div>
                <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white w-full">Adicionar</button>
            </div>
        </form>
    </x-common.component-card>

    <x-common.component-card title="Importar feriados nacionais">
        <form method="post" action="{{ route('calendarios.eventos.importar', $calendar) }}" class="flex flex-wrap items-center justify-between gap-3">
            @csrf
            <div class="text-sm text-gray-600">
                Importa automaticamente os feriados nacionais do ano {{ $calendar->year }}.
            </div>
            <button class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Importar</button>
        </form>
    </x-common.component-card>

    <x-common.component-card title="Eventos cadastrados">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="text-left text-gray-500">
                    <tr>
                        <th class="pb-3">Data</th>
                        <th class="pb-3">Título</th>
                        <th class="pb-3">Tipo</th>
                        <th class="pb-3">Dia letivo</th>
                        <th class="pb-3 text-right">Ações</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700">
                    @forelse ($events as $event)
                        <tr class="border-t border-gray-100">
                            <td class="py-3">{{ $event->date->format('d/m/Y') }}</td>
                            <td class="py-3 font-medium text-gray-900">{{ $event->title }}</td>
                            <td class="py-3">{{ ucfirst($event->type) }}</td>
                            <td class="py-3">{{ $event->is_school_day ? 'Sim' : 'Não' }}</td>
                            <td class="py-3 text-right">
                                <form method="post" action="{{ route('calendarios.eventos.destroy', [$calendar, $event]) }}" onsubmit="return confirm('Remover evento?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-700">Excluir</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-6 text-center text-sm text-gray-500">Nenhum evento cadastrado.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $events->links() }}
        </div>
    </x-common.component-card>
</div>

<script>
    document.querySelectorAll('[data-datepicker] + button').forEach((button) => {
        button.addEventListener('click', () => {
            const input = button.parentElement.querySelector('[data-datepicker]');
            if (input && input.showPicker) {
                input.showPicker();
            } else if (input) {
                input.focus();
                input.click();
            }
        });
    });
</script>
@endsection