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


<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                <div class="row">
                    <div class="col-12">
                        <div id="segmentos">
                            <!-- Contenido de Hogares -->
                            <div class="row">
                                <div class="col-lg-12 margin-tb">
                                <div class="pull-left">
                                    <h2>Listado de hogares</h2>
                                </div>
                                <div class="pull-right">
                                    <a class="btn btn-outline-dark" href="{{ route('survey.show') }}"><i class='bx bxs-user-plus'></i> Nuevo hogar</a>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
		<!-- Filtros -->
    		<div class="card mb-4">
       		    <div class="card-body">
	                <form id="filter-form">
	                    <div class="form-row">
	                        <div class="col-md-4">
            		            <label for="from_date">Fecha desde:</label>
                        	    <input type="date" class="form-control" id="from_date" name="from_date">
                    		</div>
                    		<div class="col-md-4">
                   		     <label for="to_date">Fecha hasta:</label>
                   		     <input type="date" class="form-control" id="to_date" name="to_date">
                    		</div>
                    		<div class="col-md-4 align-self-end">
                    		    <button type="button" class="btn btn-primary btn-block" id="apply-filters">Aplicar filtros</button>
                    		</div>
                	    </div>
            		</form>
        	    </div>
    		</div>
		<div class="card">
                    <div class="card-body">
			<table id="households-table" class="table table-bordered table-hover">
                	    <thead>
                      		<tr>
                          	    <th>Correlativo Segmento</th>
                        	    <th>Departamento</th>
                            	    <th>Municipio</th>
                        	    <th>Distrito</th>
                        	    <th>Área</th>
                        	    <th>Número de Casa</th>
                    		    <th>Opciones</th>
                    		</tr>
                	    </thead>
                	    <tbody>
                	        <!-- Los datos se cargarán aquí dinámicamente -->
            		    </tbody>
            		</table>
                    </div>
    		</div>
	    </div>
	</div>
     </div>
</div>

@endsection

<!-- Script para inicializar el DataTable -->
@push('scripts')
<script>
    $(document).ready(function () {
        const userId = {{ Auth::user()->id }};
        
        // Inicializar DataTable
        const table = $('#households-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("api.households") }}',
                data: function (d) {
                    d.from_date = $('#from_date').val();
                    d.to_date = $('#to_date').val();
                },
            },
            columns: [
                { data: 'correlativo_segmento', name: 'correlativo_segmento' },
                { data: 'department', name: 'department' },
                { data: 'muni', name: 'muni' },
                { data: 'distrito', name: 'distrito' },
                { data: 'area', name: 'area' },
                { data: 'num_casa', name: 'num_casa' },
                {
                    data: 'id',
                    render: function (data, type, row) {
                        return `
                            <div class="btn-group">
                                <button class="btn btn-sm btn-info" onclick="viewHousehold(${data})" data-toggle="tooltip" title="Ver Información">
                                    <i class="bx bx-show"></i>
                                </button>
                                <button class="btn btn-sm btn-warning" onclick="editHousehold(${data})" data-toggle="tooltip" title="Modificar Información de Hogar">
                                    <i class="bx bx-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="replaceHousehold(${data})" data-toggle="tooltip" title="Sustituir Hogar">
                                    <i class="bx bx-refresh"></i>
                                </button>
                            </div>
                        `;
                    },
                },
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json',
            },
        });

        // Aplicar filtros
        $('#apply-filters').on('click', function () {
            table.ajax.reload();
        });

        // Funciones para manejar las opciones
        window.viewHousehold = function (id) {
            window.location.href = `/households/${id}`;
        };

        window.editHousehold = function (id) {
            window.location.href = `/households/${id}/edit`;
        };

        window.replaceHousehold = function (id) {
            // Lógica para abrir una ventana modal o redirigir para reemplazar el hogar
            alert(`Reemplazar hogar con ID: ${id}`);
        };
    });
</script> 
@endpush