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

    <div class="nota-importante">
        <h5><i class="material-icons" style="font-size: 16px; vertical-align: middle;">warning</i> Nota Importante</h5>
        <p style="margin: 0; font-size: 13px;">
            Los números asignados se visualizan dependiendo de la "RIFA ACTIVA"
        </p>
        <p style="margin: 5px 0 0 0; font-size: 14px;">
            <span class="rifa-activa">RIFA ACTIVA ACTUAL:</span> {{ $dataRifa->nombre }}
        </p>
    </div>

    <div class="clientes-container">
        <div class="clientes-header">
            <div class="clientes-title">
                <h2>Listado de Clientes</h2>
                <div class="clientes-count">{{ count($clientes) }} Clientes registrados</div>
            </div>
            <div>
                <a class="btn btn-nuevo-cliente" href="{{ url('clientes/create') }}">
                    <i class="material-icons">add_circle</i> Nuevo Cliente
                </a>
                <a class="btn btn-enviar-correo" href="{{ url('correos') }}">
                    <i class="material-icons">email</i> Enviar Correo
                </a>
            </div>
        </div>

        <div class="filtros-section">
            <h3 class="filtros-titulo">Filtro de búsqueda</h3>
            <form action="{{ url('clientes') }}" method="get">
                <div class="row align-items-end">
                    <div class="col-lg-4">
                        <label for="">Correo Electrónico</label>
                        <input type="text" class="form-control" value="{{@$_GET['correo'] == "" ? "" : @$_GET['correo']}}"
                               name="correo" placeholder="Buscar por correo...">
                    </div>

                    <div class="col-lg-4">
                        <label for="">Número Telefónico</label>
                        <input type="text" name="celular" value="{{@$_GET['celular'] == "" ? "" : @$_GET['celular']}}"
                               class="form-control" placeholder="Buscar por teléfono...">
                    </div>

                    <div class="col-lg-2">
                        <button type="submit" class="btn btn-buscar w-100">
                            <i class="material-icons" style="font-size: 18px; vertical-align: middle;">search</i> Buscar
                        </button>
                    </div>

                    <div class="col-lg-2">
                        <a href="{{url('clientes')}}" class="btn btn-limpiar w-100">
                            <i class="material-icons" style="font-size: 18px; vertical-align: middle;">clear</i> Limpiar
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <div class="tabla-clientes">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th style="width: 40px;">#</th>
                        <th>NOMBRE COMPLETO</th>
                        <th>CELULAR</th>
                        <th>CORREO</th>
                        <th>FECHA REGISTRO</th>
                        <th class="text-center" style="width: 130px;">ACCIÓN</th>
                    </tr>
                </thead>
                <tbody id="staff02">
                    @forelse ($clientes as $client)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $client->nombre }} {{ $client->apellido }}</td>
                            <td>{{ $client->celular }}</td>
                            <td>{{ $client->correo }}</td>
                            <td>{{ $client->fechaRegistro }}</td>
                            <td>
                                <div class="action-icons">
                                    <a href="{{ url('clientes/' . $client->id . '/numeroAsignados?estado=CL') }}"
                                       class="action-btn view" title="Ver Números Comprados">
                                        <i class="material-icons">visibility</i>
                                    </a>
                                    <a href="{{ url('clientes/' . $client->id . '/edit') }}"
                                       class="action-btn edit" title="Editar">
                                        <i class="material-icons">edit</i>
                                    </a>
                                    <a href="#" class="action-btn delete" title="Eliminar"
                                       onclick="if(confirm('¿Estás seguro de que deseas eliminar este cliente?')){document.getElementById('delete-form-{{ $client->id }}').submit(); return false;}">
                                        <i class="material-icons">delete</i>
                                    </a>
                                    <form id="delete-form-{{ $client->id }}"
                                        action="{{ route('clientes.destroy', $client->id) }}" method="POST"
                                        style="display: none;">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center" style="padding: 40px;">
                                <i class="material-icons" style="font-size: 48px; color: #cbd5e0;">person_off</i>
                                <p style="margin: 10px 0 0 0; color: #a0aec0;">Sin resultados</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

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