@extends('layouts.main')

@section('content')
<div class="container">
    <h4 class="mb-3">Listado de Personal de Apoyo</h4>

    <div class="mb-3 d-flex justify-content-between">
        <!-- Botón Filtros -->
    	<button id="btnFiltrosCard" class="btn btn-purple">
            <i class='bx bx-filter'></i> Filtros
    	</button>

    	<!-- Botón Nueva Coordinación -->
    	<a href="{{ route('coordination.create') }}" class="btn btn-outline-purple">
            <i class='bx bx-plus'></i> Nueva Coordinación
    	</a>
    </div>
    <div class="card">
    <div class="card-header bg-purple text-white d-flex justify-content-between align-items-center" 
         data-toggle="collapse" data-target="#filtrosCardBody" style="cursor:pointer;">
        <span>Filtros</span>
        <i class='bx bx-down-arrow' id="iconoFiltros"></i>
    </div>
    <div id="filtrosCardBody" class="collapse">
        <div class="card-body">
                <div class="row">
                    <!-- Correlativo Segmento -->
                    <div class="col-md-2 mb-2">
                        <label>Correlativo Segmento</label>
                        <select id="filtroSegmento" class="form-control">
                            <option value="">Todos</option>
                            @foreach(array_unique(array_column($personal, 'correlativo_segmento')) as $seg)
                                <option value="{{ $seg }}">{{ $seg }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Supervisor -->
                    <div class="col-md-2 mb-2">
                        <label>Supervisor</label>
                        <select id="filtroSupervisor" class="form-control">
                            <option value="">Todos</option>
                            @foreach(array_unique(array_column($personal, 'supervisor')) as $sup)
                                <option value="{{ $sup }}">{{ $sup }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Equipo -->
                    <div class="col-md-2 mb-2">
                        <label>Equipo</label>
                        <select id="filtroEquipo" class="form-control">
                            <option value="">Todos</option>
                            @foreach(array_unique(array_column($personal, 'equipo')) as $eq)
                                <option value="{{ $eq }}">{{ $eq }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Institución -->
                    <div class="col-md-2 mb-2">
                        <label>Institución</label>
                        <select id="filtroInstitucion" class="form-control">
                            <option value="">Todas</option>
                            @foreach(array_unique(array_column($personal, 'institucion')) as $inst)
                                <option value="{{ $inst }}">{{ $inst }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Cargo -->
                    <div class="col-md-2 mb-2">
                        <label>Cargo</label>
                        <select id="filtroCargo" class="form-control">
                            <option value="">Todos</option>
                            @foreach(array_unique(array_column($personal, 'cargo')) as $cargo)
                                <option value="{{ $cargo }}">{{ $cargo }}</option>
                            @endforeach
                        </select>
                    </div>
                </div> <!-- row -->
            </div> <!-- card-body -->
        </div> <!-- collapse -->
    </div> <!-- card -->

 

    <!-- TABLA -->
    <table id="tabla-personal" class="table table-hover responsive nowrap">
        <thead class="thead-dark">
            <tr>
                <th>Segmento</th>
                <th>Supervisor</th>
                <th>Equipo</th>
                <th>#</th>
                <th>Nombre completo</th>
                <th>Institución</th>
                <th>Cargo</th>
                <th>Teléfono móvil</th>
                <th>Correo electrónico</th>
            </tr>
        </thead>
        <tbody>
        @forelse($personal as $p)
            <tr>
                <td>{{ $p['correlativo_segmento'] }}</td>
                <td>{{ $p['supervisor'] }}</td>
                <td>{{ $p['team'] }}</td>
                <td>{{ $p['numero'] }}</td>
                <td>{{ $p['nombre'] }}</td>
                <td>{{ $p['institucion'] }}</td>
                <td>{{ $p['cargo'] }}</td>
                <td>{{ $p['telefono'] }}</td>
                <td>{{ $p['correo'] }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="9" class="text-center">
                    No hay personal de apoyo registrado
                </td>
            </tr>
        @endforelse
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var table = $('#tabla-personal').DataTable({
        language: {
                    url: '//cdn.datatables.net/plug-ins/2.1.8/i18n/es-MX.json'
                },
                aaSorting: [],
                responsive: true,

                columnDefs: [{
                        responsivePriority: 1,
                        targets: 0
                    },
                    {
                        responsivePriority: 2,
                        targets: -1
                    }
                ]
    });
    // **Resetear selects y búsqueda de DataTable al cargar**
    $('#filtroSegmento').val('');
    $('#filtroSupervisor').val('');
    $('#filtroEquipo').val('');
    $('#filtroInstitucion').val('');
    $('#filtroCargo').val('');

    table.columns().search('').draw();

    // Cambiar icono Boxicons al colapsar o expandir
    $('#btnFiltrosCard').on('click', function() {
        $('#filtrosCardBody').slideToggle();
        $('#iconoFiltros').toggleClass('bx-down-arrow bx-up-arrow');
    });

    // Filtros dinámicos
    $('#filtroSegmento').on('change', function () { table.column(0).search(this.value).draw(); });
    $('#filtroSupervisor').on('change', function () { table.column(1).search(this.value).draw(); });
    $('#filtroEquipo').on('change', function () { table.column(2).search(this.value).draw(); });
    $('#filtroInstitucion').on('change', function () { table.column(5).search(this.value).draw(); });
    $('#filtroCargo').on('change', function () { table.column(6).search(this.value).draw(); });
});
</script>
@endpush