@extends("intranet/layout2")
@section('title', 'Electoral Candidatos')

@section("content2")
    <div class="container-fluid py-2">
        <!-- Encabezado -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
            <h6 class="fw-bold mb-1">Lista de Candidatos</h6>
        </div>

        {{--modal mensaje--}}
        <div id="iddivalertacandidato" class="alert alert-warning alert-dismissible py-2 mb-2 fade show d-none" role="alert" style="padding-left: 1rem; padding-right: 1rem;">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-circle me-2"></i>
                <span id="iddivalertaCandidatoMessage"></span>
            </div>
        </div>

        <!-- Filtros y búsqueda -->
        <div class="row g-2 mb-3 align-items-end">
            <!-- Buscador pequeño -->
            <div class="col-md-auto">
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control" placeholder="Buscar..." id="txtbuscarelectoralcandidato" style="max-width: 160px;">
                    <button class="btn btn-outline-secondary" id="btnbuscarelectoralcandidato">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>

            <!-- Filtro Partido -->
            <div class="col-md-auto">
                <select class="form-select form-select-sm" id="idpartido_electoralcandidato" name="idpartido_electoralcandidato">
                    <option value="">Partido</option>
                    @forelse($partidos as $partido)
                        <option value="{{ $partido['IdPartido'] }}">{{ $partido['NombrePartido'] }}</option>
                    @empty
                        <option value="" disabled>No hay Partidos electorales</option>
                    @endforelse
                </select>
            </div>

            <!-- Filtro Departamento -->
            <div class="col-md-auto">
                <select class="form-select form-select-sm" id="iddepartamento_electoralcandidato">
                    <option value="">Departamento</option>
                    <!-- opciones dinámicas -->
                </select>
            </div>

            <!-- Filtro Provincia -->
            <div class="col-md-auto">
                <select class="form-select form-select-sm" id="idprovincia_electoralcandidato">
                    <option value="">Provincia</option>
                </select>
            </div>

            <!-- Filtro Distrito -->
            <div class="col-md-auto">
                <select class="form-select form-select-sm" id="iddistrito_electoralcandidato">
                    <option value="">Distrito</option>
                </select>
            </div>

            <!-- Selector de filas -->
            <div class="col-md-auto ms-auto">
                <select class="form-select form-select-sm" id="idfilaselectoralcandidato">
                    <option value="10">10 filas</option>
                    <option value="25">25 filas</option>
                    <option value="50">50 filas</option>
                    <option value="100">100 filas</option>
                </select>
            </div>
        </div>


        <!-- Loader animado profesional -->
        <div id="idloaderscandidatos" class="custom-loader mb-3" style="display: none;"></div>
        @livewire('electoral.electoral-candidato')
    </div>
@endsection