@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Novo calendário</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">Defina o ano letivo e período.</p>
    </div>

    <x-common.component-card title="Cadastro do calendário">
        <form method="post" action="{{ route('calendarios.store') }}" class="space-y-5">
            @csrf
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Nome *</label>
                    <input type="text" name="name" value="{{ old('name') }}" required class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm" />
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Ano *</label>
                    <input type="number" name="year" value="{{ old('year', date('Y')) }}" min="2000" required class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm" />
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Início *</label>
                    <div class="relative">
                        <input type="date" name="start_date" value="{{ old('start_date') }}" required class="h-11 w-full rounded-lg border border-gray-300 px-4 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>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Fim *</label>
                    <div class="relative">
                        <input type="date" name="end_date" value="{{ old('end_date') }}" required class="h-11 w-full rounded-lg border border-gray-300 px-4 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>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Dias letivos *</label>
                    <input type="number" name="required_days" value="{{ old('required_days', 200) }}" min="1" required class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm" />
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="active" value="1" checked class="h-4 w-4 rounded border-gray-300 text-brand-500" />
                    <span class="text-sm text-gray-600">Ativo</span>
                </div>
            </div>

            <div class="flex gap-3">
                <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white">Salvar</button>
                <a href="{{ route('calendarios.index') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700">Cancelar</a>
            </div>
        </form>
    </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