@extends('intranet/layout2')
@section('title', 'Configuracion')

@section('content2')
    <div class="container-fluid py-2" id="iddivlistadousuario">
        <!-- Encabezado -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
            <div>
                <h5 class="fw-bold mb-1">Configuración</h5>
            </div>
        </div>

        <div class="card shadow-sm mb-3">
            <div class="card-header bg-primary text-white">
                <i class="fas fa-map-marked-alt me-2"></i> Nivel de Alcance por Departamento
            </div>
            <div class="card-body">
                <h6>esta informacion es proprocionada por la ONPE</h6>
                <div class="accordion" id="accordionAlcancePartidoJS">
                    <!-- Aquí JS insertará los departamentos -->
                </div>
            </div>
        </div>
        <!-- Accordion -->
        <div class="accordion" id="accordionExample">
            <!-- Segundo item del acordeón -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Elemento 2: Configuración avanzada
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Aquí se configuran las opciones avanzadas del sistema, como permisos, roles y más.
                    </div>
                </div>
            </div>

            <!-- Tercer item del acordeón -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Elemento 3: Información adicional
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Esta sección contiene información adicional que puede ser útil para los administradores.
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{--    @livewire('dashboard.dashboard')--}}
@endsection