@extends('layouts.main')
@section('content')

    <div class="container-fluid py-4">
    <div class="row g-4">
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-body text-center">

                    <h5 class="card-title mb-3">Cartografía</h5>

                    <p class="card-text mb-1">
                        Segmentos:
                        <span class="badge bg-info">
                            {{ $segmentsCount ?? 0 }}
                        </span>
                    </p>

                    <p class="card-text mb-3">
                        Estructuras elegibles:
                        <span class="badge bg-primary">
                            {{ $eligibleStructuresCount ?? 0 }}
                        </span>
                    </p>

                    <!-- Botón lista de segmentos -->
                    <a href="{{ route('mapping.index') }}" class="btn btn-outline-primary">
                        <i class="bx bx-map"></i> Ver Segmentos
                    </a>
                    <a href="{{ route('coordination.index') }}" class="btn btn-outline-primary">
                        <i class="bx bx-map"></i> Coordinación local
                    </a>
                    <!-- Botón lista de estructuras -->
                    <a href="{{ route('mapping.index') }}" class="btn btn-outline-dark ml-2">
                        <i class="bx bx-home"></i> Estructuras
                    </a>

                </div>
            </div>
        </div>
<!-- PANEL ENCUESTADORES -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-body">

                    <!-- Header -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Encuestadores</h5>
                        <a href="{{ route('mapping.index') }}" class="btn btn-sm btn-primary">
                            + Asignar
                        </a>
                    </div>

                    <!-- Filtro Segmento -->
                    <div class="mb-3">
                        <select class="form-select form-select-sm">
                            <option value="">Todos los segmentos</option>
                            @foreach ($segments as $segment)
                                <option value="{{ $segment['correlativo_segmento'] }}">
                                    {{ $segment['correlativo_segmento'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <hr>

                    <!-- Lista de Encuestadores -->
                    @forelse ($encuestadores as $encuestador)

                        <div class="mb-4">

                            <div class="fw-semibold">
                                {{ $encuestador['name'] }}
                            </div>

                            <div class="text-muted small mb-2">
                                {{ $encuestador['total'] }} estructuras asignadas
                            </div>

                            @php
                                $total = max($encuestador['total'], 1);
                                $pctCompletadas = ($encuestador['completadas'] / $total) * 100;
                                $pctPendientes = ($encuestador['pendientes'] / $total) * 100;
                            @endphp

                            <!-- Barra de progreso -->
                            <div class="progress mb-2" style="height: 6px;">
                                <div class="progress-bar bg-success"
                                     style="width: {{ $pctCompletadas }}%">
                                </div>
                                <div class="progress-bar bg-warning"
                                     style="width: {{ $pctPendientes }}%">
                                </div>
                            </div>

                            <!-- Detalle -->
                            <div class="d-flex gap-3 small text-muted">
                                <span>
                                    <strong class="text-dark">
                                        {{ $encuestador['completadas'] }}
                                    </strong> completadas
                                </span>
                                <span>
                                    <strong class="text-dark">
                                        {{ $encuestador['pendientes'] }}
                                    </strong> pendientes
                                </span>
                                <span>
                                    <strong class="text-dark">
                                        {{ $encuestador['sin_asignar'] ?? 0 }}
                                    </strong> sin asignar
                                </span>
                            </div>

                        </div>

                        <hr>

                    @empty
                        <p class="text-muted text-center">
                            No hay encuestadores disponibles
                        </p>
                    @endforelse

                </div>
            </div>
        </div>

    </div>
</div>

           /* <div class="col-lg-6 col-md-12">
                <div id="segmentos">

                    <!-- Contenido de Hogares -->
                    <div class="card shadow-sm rounded-4 p-3 h-100">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h2 class="fw-bold mb-0">Gestión local</h2>
                            <a class="btn btn-outline-dark oval-button" href="{{ route('assignments.create') }}">
                                <i class='bx bxs-user-plus'></i> Nueva Gestión local
                            </a>
                        </div>

                        <div id="segmentos">
                            <div id="segmentsTableLoader" class="skeleton-table">
                                @for ($i = 0; $i < 8; $i++)
                                    <!-- simular 8 filas -->
                                    <div class="skeleton-table__row d-flex">
                                        @for ($j = 0; $j < 8; $j++)
                                            <!-- 8 columnas -->
                                            <div class="skeleton-block skeleton-effect-wave skeleton-table__cell"
                                                style="height:20px; flex:1; margin:4px;"></div>
                                        @endfor
                                    </div>
                                @endfor
                            </div>

                            <table id="segmentsTable" class="table table-hover responsive nowrap"
                                style="width:100%; display:none;">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Segmento</th>
                                        <th>Hogar</th>
                                        <th>Departamento</th>
                                        <th>Municipio</th>
                                        <th>Encuestador</th>
                                        <th>Equipo</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($segments as $index => $segment)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $segment['correlativo_segmento'] }}</td>
                                            <td>{{ $segment['departamento'] }}</td>
                                            <td>{{ $segment['departamento'] }}</td>
                                            <td>{{ $segment['municipio'] }}</td>
                                            <td>
                                                <i class="{{ $segment['icon'] }}"
                                                    title="{{ $segment['isAssigned'] ? 'Asignado' : 'No asignado' }}"></i>
                                            </td>
                                            <td>{{ $segment['municipio'] }}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-icon" type="button"
                                                        id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true"
                                                        aria-expanded="false">
                                                        <i class="bx bx-dots-horizontal-rounded" data-toggle="tooltip"
                                                            data-placement="top" title="Acciones"></i>
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                                        <a class="dropdown-item text-secondary"
                                                            href="{{ route('coordinador.view', ['correlativo_segmento' => $segment['correlativo_segmento']]) }}"><i
                                                                class="bx bxs-show mr-2"></i> Ver información</a>
                                                        <a class="dropdown-item text-secondary" href="#"><i
                                                                class="bx bxs-edit mr-2"></i> Editar información</a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card shadow-sm rounded-4 p-3 h-100">
                    <h5 class="fw-bold">Income vs Expense</h5>
                    <canvas id="incomeChart"></canvas>
                </div>
            </div>
            <!-- Tarjeta 3 -->
             <div class="col-lg-3 col-md-6">
                <div class="card shadow-sm rounded-4 p-3 h-100">
                    <h5 class="fw-bold">My Meetings</h5>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">App Project - 6:45PM</li>
                        <li class="list-group-item">User Research - 8:00PM</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row g-4 mt-2">
            <!-- Tarjeta 4 (ancha) -->
            <div class="col-lg-8">
                <div class="card shadow-sm rounded-4 p-3 h-100">
                    <h5 class="fw-bold">Invoice Overview</h5>
                    <div class="progress mb-2" style="height: 20px;">
                        <div class="progress-bar bg-danger" style="width: 70%;">Overdue</div>
                    </div>
                    <div class="progress mb-2" style="height: 20px;">
                        <div class="progress-bar bg-warning" style="width: 50%;">Not Paid</div>
                    </div>
                </div>
            </div>
        </div>
	
    </div>
*/

@endsection

<!-- Script para inicializar el DataTable -->
@push('scripts')
    <script>
        $(document).ready(function() {
            let table = $('#segmentsTable').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
                    }
                ],
                initComplete: function() {
                    // Cuando DataTable termina de cargar
                    $('#segmentsTableLoader').hide();
                    $('#segmentsTable').show();
                }

            });

            $(".dataTables_filter input")
                .attr("placeholder", "Buscar aqui...")
                .css({
                    width: "300px",
                    display: "inline-block"
                });

            // Inicializar tooltips manualmente
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
@endpush