@extends('layouts.app')

@section('title', 'Admin - Crear Campaña')
@section('content')

<div class="p-4 w-full">
    <div class="w-full mb-6 p-4 rounded-lg shadow-md bg-white dark:bg-gray-800">
        <h1 class="text-3xl font-bold dark:text-gray-400">Crear campaña</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Completá los datos de la campaña.</p>
    </div>

    @include('../../validaciones')

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
        <form method="POST" action="{{ route('admin.campanas.store') }}" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-medium mb-1 dark:text-gray-300">Nombre</label>
                <input name="nombre" value="{{ old('nombre') }}" required
                    class="w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md dark:bg-gray-700 dark:text-white">
            </div>

            <div>
                <label class="block text-sm font-medium mb-1 dark:text-gray-300">Bases</label>
                <textarea name="bases" rows="8" required
                    class="w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md dark:bg-gray-700 dark:text-white">{{ old('bases') }}</textarea>
            </div>

            <div>
                <label class="block text-sm font-medium mb-1 dark:text-gray-300">Estado</label>
                <select name="estado"
                    class="w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md dark:bg-gray-700 dark:text-white">
                    <option value="1" @selected(old('estado', '1' )=='1' )>Activa</option>
                    <option value="0" @selected(old('estado')=='0' )>Inactiva</option>
                </select>
            </div>

            <div class="flex gap-2">
                <button type="submit" class="bg-sky-600 hover:bg-sky-700 text-white px-4 py-2 rounded">
                    Guardar
                </button>
                <a href="{{ route('admin.campanas') }}"
                    class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">
                    Volver
                </a>
            </div>
        </form>
    </div>
</div>

@endsection