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

    <div class="container-fluid py-4">
        <!-- Contenedor 1: Hogares y Miembros -->
        <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">Coordinación Local</h5>
                        <p class="card-text">
                            Personal de apoyo registrado:
                            <span class="badge badge-info">{{ $personalCount ?? 0 }}</span>
                        </p>

                        @if (($personalCount ?? 0) > 0)
                            <p><span class="badge badge-success">En proceso</span></p>
                        @else
                            <p><span class="badge badge-warning">Pendiente</span></p>
                        @endif

                        <!-- Botón para ir al formulario -->
                        <a href="{{ route('coordination.create') }}" class="btn btn-outline-primary">
                            <i class="bx bxs-user-plus"></i> Agregar Personal
                        </a>

                        <!-- Botón para ver listado -->
                        <a href="{{ route('coordination.index') }}" class="btn btn-outline-dark ml-2">
                            <i class="bx bx-list-ul"></i> Ver listado
                        </a>
                    </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