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

<div class="dashboard-container">
    <!-- Contenedor 1: Hogares y Miembros -->
    <div class="container-horizontal">
    <div class="row py-5">
    <div class="col-12">
    <div id="segmentos">
            <!-- Contenido de Hogares -->
            <h1>Segmentos Asignados</h1>
    <table id="segmentsTable" class="table table-hover responsive nowrap" style="width:100%">
        <thead>
            <tr>
                <th>No</th>
                <th>Correlativo Segmento</th>
		<th>Departamento</th>
		<th>Municipio</th>
		<th>Hogares completos</th>
		<th>Coordinacion local</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['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>
@endsection
<!-- Script para inicializar el DataTable -->
@push('scripts')
<script>
$(document).ready(function() {
    $('#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
      	   }
    	]
    });

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

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