@extends('layouts.app')

@section('title', 'Crear Nueva Tarea')

@section('content')
<style>
    .form-container {
        max-width: 600px;
        margin: 0 auto;
    }
    .form-group {
        margin-bottom: 25px;
    }
    .form-label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
        font-size: 1.1em;
    }
    .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 16px;
        transition: border-color 0.3s;
        font-family: inherit;
    }
    .form-control:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    textarea.form-control {
        resize: vertical;
        min-height: 120px;
    }
    .error-message {
        color: #dc3545;
        font-size: 0.9em;
        margin-top: 5px;
    }
    .form-actions {
        display: flex;
        gap: 15px;
        margin-top: 30px;
    }
    .back-link {
        display: inline-block;
        margin-bottom: 20px;
        color: #667eea;
        text-decoration: none;
        font-weight: 600;
    }
    .back-link:hover {
        text-decoration: underline;
    }
</style>

<a href="{{ route('tasks.index') }}" class="back-link">← Volver al listado</a>

<div class="form-container">
    <h2 style="margin-bottom: 30px;">Crear Nueva Tarea</h2>

    <form action="{{ route('tasks.store') }}" method="POST">
        @csrf

        {{-- Campo Título --}}
        <div class="form-group">
            <label for="titulo" class="form-label">Título de la tarea *</label>
            <input 
                type="text" 
                id="titulo"
                name="titulo" 
                class="form-control"
                value="{{ old('titulo') }}"
                placeholder="Ej: Estudiar Laravel"
                required
                maxlength="255">
            
            @error('titulo')
                <div class="error-message">{{ $message }}</div>
            @enderror
        </div>

        {{-- Campo Descripción --}}
        <div class="form-group">
            <label for="descripcion" class="form-label">Descripción (opcional)</label>
            <textarea 
                id="descripcion"
                name="descripcion" 
                class="form-control"
                placeholder="Añade detalles sobre la tarea..."
                maxlength="1000">{{ old('descripcion') }}</textarea>
            
            @error('descripcion')
                <div class="error-message">{{ $message }}</div>
            @enderror
        </div>

        {{-- Botones de acción --}}
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                💾 Guardar Tarea
            </button>
            <a href="{{ route('tasks.index') }}" class="btn btn-secondary">
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection