@extends('layouts.app')

@section('contenido')

<style>
    .premio-form-card {
        background: white;
        border-radius: 22px;
        padding: 24px;
        box-shadow: 0 10px 26px rgba(0,0,0,.07);
    }

    .premio-title {
        color: #003c2f;
        font-weight: 950;
    }

    .form-control,
    .form-select {
        border-radius: 12px;
    }

    .btn-world {
        border-radius: 12px;
        font-weight: 900;
    }
</style>

<div class="premio-form-card">
    <h2 class="premio-title">Nuevo premio</h2>
    <p class="text-muted">
        Registra un premio para uno de los 10 primeros lugares.
    </p>

    @if($errors->any())
        <div class="alert alert-danger rounded-4 fw-bold">
            {{ $errors->first() }}
        </div>
    @endif

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

        <div class="mb-3">
            <label class="form-label fw-bold">Lugar premiado</label>
            <select name="position" class="form-select" required>
                <option value="">Seleccione lugar</option>
                @for($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}" @selected(old('position') == $i)>
                        {{ $i }}° lugar
                    </option>
                @endfor
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Título del premio</label>
            <input type="text"
                   name="titulo"
                   value="{{ old('titulo') }}"
                   class="form-control"
                   placeholder="Ej: Celular, Trofeo, Efectivo, Camiseta oficial"
                   required>
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Descripción</label>
            <textarea name="descripcion"
                      class="form-control"
                      rows="4"
                      placeholder="Detalle del premio">{{ old('descripcion') }}</textarea>
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Monto opcional</label>
            <input type="number"
                   step="0.01"
                   min="0"
                   name="monto"
                   value="{{ old('monto') }}"
                   class="form-control"
                   placeholder="Ej: 500">
        </div>

        <div class="form-check mb-4">
            <input class="form-check-input"
                   type="checkbox"
                   name="activo"
                   value="1"
                   id="activo"
                   checked>

            <label class="form-check-label fw-bold" for="activo">
                Mostrar premio en la portada
            </label>
        </div>

        <div class="d-flex gap-2">
            <button class="btn btn-success btn-world">
                Guardar premio
            </button>

            <a href="{{ route('admin.premios.index') }}" class="btn btn-outline-secondary btn-world">
                Cancelar
            </a>
        </div>
    </form>
</div>

@endsection