@extends('layouts.app')

@section('title', 'Programar recordatorio')

@section('content')
<div class="max-w-2xl mx-auto py-6 px-4 space-y-6">
    <div>
        <a href="{{ url()->previous(route('reminders.index')) }}"
           class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary inline-flex items-center gap-1">
            <i class="fa-solid fa-arrow-left"></i> Volver
        </a>
    </div>

    <x-card>
        <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-1">Programar recordatorio</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
            Para el enlace <a href="{{ route('links.read', $link) }}" class="text-primary hover:underline">{{ $link->display_title }}</a>.
        </p>

        <form method="POST" action="{{ route('reminders.store', $link) }}" class="space-y-5">
            @csrf

            <div>
                <x-label for="title">Título</x-label>
                <x-input id="title" name="title" type="text" required maxlength="255"
                         value="{{ old('title') }}"
                         placeholder="Ej: Releer el martes por la mañana" />
                <x-error for="title" />
            </div>

            <div>
                <x-label for="remind_at">Fecha y hora</x-label>
                <x-input id="remind_at" name="remind_at" type="datetime-local" required
                         value="{{ old('remind_at', $reminder->remind_at?->format('Y-m-d\TH:i')) }}" />
                <x-error for="remind_at" />
            </div>

            <div class="flex items-center gap-3 pt-2">
                <x-button type="submit" variant="primary">Programar</x-button>
                <a href="{{ route('reminders.index') }}"
                   class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary">Cancelar</a>
            </div>
        </form>
    </x-card>
</div>
@endsection