@extends('layouts.app')

@section('contenido')

<style>
    .premios-admin-page {
        background: #f4f7fa;
        padding-bottom: 40px;
    }

    .premios-hero {
        background:
            linear-gradient(135deg, rgba(0,60,47,.96), rgba(0,137,95,.88)),
            url('{{ asset("img/estadio.jpg") }}');
        background-size: cover;
        background-position: center;
        color: white;
        border-radius: 26px;
        padding: 28px;
        box-shadow: 0 16px 40px rgba(0,0,0,.16);
        margin-bottom: 20px;
    }

    .premios-hero h2 {
        font-weight: 950;
        font-size: 34px;
        margin: 0;
    }

    .premios-card {
        background: white;
        border-radius: 22px;
        padding: 20px;
        box-shadow: 0 10px 26px rgba(0,0,0,.07);
    }

    .premio-table th {
        background: #003c2f;
        color: white;
    }

    .premio-lugar {
        display: inline-flex;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: #ffd166;
        color: #003c2f;
        font-weight: 950;
    }

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

<div class="premios-admin-page">

    <div class="premios-hero">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h2>Administrar premios</h2>
                <p class="mb-0">
                    Registra los premios para los primeros 10 lugares del ranking general.
                </p>
            </div>

            <a href="{{ route('admin.premios.create') }}" class="btn btn-warning btn-world">
                Nuevo premio
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success rounded-4 fw-bold">
            {{ session('success') }}
        </div>
    @endif

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

    <div class="premios-card">
        <div class="table-responsive">
            <table class="table table-hover align-middle premio-table">
                <thead>
                    <tr>
                        <th>Lugar</th>
                        <th>Premio</th>
                        <th>Descripción</th>
                        <th>Monto</th>
                        <th>Estado</th>
                        <th width="190">Acciones</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($premios as $premio)
                        <tr>
                            <td>
                                <span class="premio-lugar">{{ $premio->position }}</span>
                            </td>

                            <td>
                                <strong>{{ $premio->titulo }}</strong>
                            </td>

                            <td>
                                {{ $premio->descripcion ?: 'Sin descripción' }}
                            </td>

                            <td>
                                @if($premio->monto !== null)
                                    Bs {{ number_format((float) $premio->monto, 2, ',', '.') }}
                                @else
                                    -
                                @endif
                            </td>

                            <td>
                                @if($premio->activo)
                                    <span class="badge bg-success">Activo</span>
                                @else
                                    <span class="badge bg-secondary">Oculto</span>
                                @endif
                            </td>

                            <td>
                                <div class="d-flex gap-2 flex-wrap">
                                    <a href="{{ route('admin.premios.edit', $premio) }}"
                                       class="btn btn-sm btn-primary btn-world">
                                        Editar
                                    </a>

                                    <form method="POST"
                                          action="{{ route('admin.premios.destroy', $premio) }}"
                                          onsubmit="return confirm('¿Eliminar este premio?')">
                                        @csrf
                                        @method('DELETE')

                                        <button class="btn btn-sm btn-danger btn-world">
                                            Eliminar
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted fw-bold py-4">
                                No hay premios registrados todavía.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection