@extends('layouts.panel')
@section('content')
<link rel="stylesheet" href="{{ url('css/numeroAsignados.css') }}">

<div class="numeros-asignados-container">
    <!-- Header -->
    <div class="numeros-asignados-header">
        <h2 class="numeros-asignados-titulo">Módulo Números Comprados</h2>
        <p class="numeros-asignados-cliente">{{ @$cliente->nombre . ' ' . @$cliente->apellido }}</p>
    </div>

    <!-- Sección de Acciones -->
    <div class="numeros-asignados-actions">
        <div class="actions-buttons">
            @if (@$_GET['estado'] == 'CL')
                <a href="{{ url('clientes') }}" class="btn-volver">
                    <i class="material-icons">arrow_back</i>
                    Volver al Listado de Clientes
                </a>
            @else
                <a href="{{ url('numGanadores') }}" class="btn-volver">
                    <i class="material-icons">arrow_back</i>
                    Volver a Números Ganadores
                </a>
            @endif

            <form id="envioCorreoForm" action="{{ url('envioNumCorreo') }}" method="POST" style="margin: 0;">
                @csrf
                <input type="hidden" value="{{ $cliente->id }}" name="clienteId">
                <button type="submit" class="btn-enviar-correo">
                    <i class="material-icons">email</i>
                    Enviar Correo con Números Comprados
                </button>
            </form>
        </div>

        <div id="loading" class="loading-indicator">
            <div class="loading-spinner"></div>
        </div>
    </div>

    <!-- Alertas -->
    @if (session('success') || session('error'))
        <div class="alert-container">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
        </div>
    @endif

    <!-- Sección de Búsqueda -->
    <div class="numeros-search-section">
        <div class="search-input-wrapper">
            <i class="material-icons">search</i>
            <input type="number" id="buscarNumero" class="search-input" placeholder="Buscar número...">
        </div>
    </div>

    <!-- Grid de Números -->
    <div class="numeros-grid-section">
        <div class="numeros-grid">
            @foreach ($numeroGenerados as $numero)
                <div class="numeroGenerado">
                    <div class="numero-card">
                        <p class="numero-valor">
                            <span class="numero-hash">#</span>{{ $numero->numero_generado }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<script src="{{ url('js/numeroAsignados.js') }}"></script>
@endsection