@extends('../padre.padre')

@section('contenido') 
<div class="d-flex justify-content-center">
  <h1>GESTIÓN DE DOMICILIARIOS</h1>
  @include('menu.botonRegresar')
</div>

<!-- Formulario para agregar/editar domiciliarios -->
<div class="card mt-4">
    <div class="card-header">
        <h5 id="tituloFormulario">Agregar Nuevo Domiciliario</h5>
    </div>
    <div class="card-body">
        <form id="formDomiciliario">
            <input type="hidden" id="idDomiciliario" name="idDomiciliario" value="">
            
            <div class="row">
                <div class="col-md-3">
                    <label for="ccDomi">Cédula: <span class="text-danger">*</span></label>
                    <input type="text" id="ccDomi" name="ccDomi" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label for="nombreDomi">Nombre: <span class="text-danger">*</span></label>
                    <input type="text" id="nombreDomi" name="nombreDomi" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label for="apellidoDOm">Apellido:</label>
                    <input type="text" id="apellidoDOm" name="apellidoDOm" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="telDomi">Teléfono:</label>
                    <input type="text" id="telDomi" name="telDomi" class="form-control">
                </div>
            </div>
            
            <div class="row mt-3">
                <div class="col-md-6">
                    <label for="direeDomi">Dirección:</label>
                    <input type="text" id="direeDomi" name="direeDomi" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="otroDatodomi1">Otro Dato 1:</label>
                    <input type="text" id="otroDatodomi1" name="otroDatodomi1" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="otroDatodomi2">Otro Dato 2:</label>
                    <input type="text" id="otroDatodomi2" name="otroDatodomi2" class="form-control">
                </div>
            </div>
            
            <div class="row mt-3">
                <div class="col-md-12">
                    <button type="submit" id="btnGuardar" class="btn btn-primary">Guardar Domiciliario</button>
                    <button type="button" id="btnCancelar" class="btn btn-secondary" style="display: none;">Cancelar</button>
                    <button type="reset" class="btn btn-warning">Limpiar Formulario</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Tabla de domiciliarios existentes -->
<div class="card mt-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5>Lista de Domiciliarios</h5>
        <div>
            <button type="button" id="btnDebug" class="btn btn-warning btn-sm me-2" onclick="debugTabla()">
                <i class="fas fa-bug"></i> Debug
            </button>
            {{-- <button type="button" id="btnCrearTabla" class="btn btn-info btn-sm" onclick="crearTabla()">
                <i class="fas fa-database"></i> Crear Tabla
            </button> --}}
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-bordered" id="tablaDomiciliarios">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Cédula</th>
                        <th>Nombre</th>
                        <th>Apellido</th>
                        <th>Teléfono</th>
                        <th>Dirección</th>
                        <th>Otro Dato 1</th>
                        <th>Otro Dato 2</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody id="cuerpoTabla">
                    <!-- Los datos se cargarán dinámicamente -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
// Variables globales
let modoEdicion = false;
let domiciliarioEditando = null;

// Cargar domiciliarios al iniciar
document.addEventListener('DOMContentLoaded', function() {
    cargarDomiciliarios();
});

// Manejar el formulario
document.getElementById("formDomiciliario").addEventListener("submit", function(e) {
    e.preventDefault();
    
    const formData = {
        id: document.getElementById("idDomiciliario").value,
        ccDomi: document.getElementById("ccDomi").value,
        nombreDomi: document.getElementById("nombreDomi").value,
        apellidoDOm: document.getElementById("apellidoDOm").value,
        telDomi: document.getElementById("telDomi").value,
        direeDomi: document.getElementById("direeDomi").value,
        otroDatodomi1: document.getElementById("otroDatodomi1").value,
        otroDatodomi2: document.getElementById("otroDatodomi2").value
    };
    
    const url = modoEdicion ? "actualizarDomiciliario" : "crearDomiciliario";
    
    fetch(url, {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(response => {
        if (response.estado === "ok") {
            alert(response.mensaje);
            limpiarFormulario();
            cargarDomiciliarios();
        } else {
            alert("Error: " + response.mensaje);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert("Error al procesar la solicitud");
    });
});

// Función para cargar domiciliarios
function cargarDomiciliarios() {
    fetch("listarDomiciliarios")
        .then(res => {
            if (!res.ok) {
                throw new Error(`HTTP error! status: ${res.status}`);
            }
            return res.json();
        })
        .then(data => {

            console.log(data);
            
            // Verificar si hay error en la respuesta
            if (data.estado === "error") {
                alert("Error: " + data.mensaje);
                return;
            }
            
            const tbody = document.getElementById("cuerpoTabla");
            tbody.innerHTML = "";
            
            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="9" class="text-center">No hay domiciliarios registrados</td></tr>';
                return;
            }
            
            data.forEach(domiciliario => {
                const row = document.createElement("tr");
                row.innerHTML = `
                    <td>${domiciliario.iddm}</td>
                    <td>${domiciliario.ccDomi}</td>
                    <td>${domiciliario.nombreDomi}</td>
                    <td>${domiciliario.apellidoDOm || ''}</td>
                    <td>${domiciliario.telDomi || ''}</td>
                    <td>${domiciliario.direeDomi || ''}</td>
                    <td>${domiciliario.otroDatodomi1 || ''}</td>
                    <td>${domiciliario.otroDatodomi2 || ''}</td>
                    <td>
                        <button class="btn btn-sm btn-warning" onclick="editarDomiciliario(${domiciliario.iddm})">
                            <i class="fas fa-edit"></i> Editar
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="eliminarDomiciliario(${domiciliario.iddm})">
                            <i class="fas fa-trash"></i> Eliminar
                        </button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        })
        .catch(error => {
            console.error('Error:', error);
            alert("Error al cargar domiciliarios: " + error.message);
        });
}

// Función para editar domiciliario
function editarDomiciliario(id) {
    fetch(`obtenerDomiciliario/${id}`)
        .then(res => res.json())
        .then(data => {
            if (data.estado === "ok") {
                const dom = data.domiciliario;
                
                document.getElementById("idDomiciliario").value = dom.iddm;
                document.getElementById("ccDomi").value = dom.ccDomi;
                document.getElementById("nombreDomi").value = dom.nombreDomi;
                document.getElementById("apellidoDOm").value = dom.apellidoDOm || "";
                document.getElementById("telDomi").value = dom.telDomi || "";
                document.getElementById("direeDomi").value = dom.direeDomi || "";
                document.getElementById("otroDatodomi1").value = dom.otroDatodomi1 || "";
                document.getElementById("otroDatodomi2").value = dom.otroDatodomi2 || "";
                
                modoEdicion = true;
                domiciliarioEditando = id;
                
                document.getElementById("tituloFormulario").textContent = "Editar Domiciliario";
                document.getElementById("btnGuardar").textContent = "Actualizar Domiciliario";
                document.getElementById("btnCancelar").style.display = "inline-block";
                
                // Scroll al formulario
                document.getElementById("formDomiciliario").scrollIntoView({ behavior: 'smooth' });
            } else {
                alert("Error: " + data.mensaje);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert("Error al cargar datos del domiciliario");
        });
}

// Función para eliminar domiciliario
function eliminarDomiciliario(id) {
    if (confirm("¿Está seguro de que desea eliminar este domiciliario?")) {
        fetch(`eliminarDomiciliario/${id}`, {
            method: 'DELETE'
        })
        .then(res => res.json())
        .then(response => {
            if (response.estado === "ok") {
                alert(response.mensaje);
                cargarDomiciliarios();
            } else {
                alert("Error: " + response.mensaje);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert("Error al eliminar domiciliario");
        });
    }
}

// Función para cancelar edición
document.getElementById("btnCancelar").addEventListener("click", function() {
    limpiarFormulario();
});

// Función para limpiar formulario
function limpiarFormulario() {
    document.getElementById("formDomiciliario").reset();
    document.getElementById("idDomiciliario").value = "";
    
    modoEdicion = false;
    domiciliarioEditando = null;
    
    document.getElementById("tituloFormulario").textContent = "Agregar Nuevo Domiciliario";
    document.getElementById("btnGuardar").textContent = "Guardar Domiciliario";
    document.getElementById("btnCancelar").style.display = "none";
}

// Función para debug de la tabla
function debugTabla() {
    fetch("debugDomicilios")
        .then(res => res.json())
        .then(data => {
            console.log("=== DEBUG DOMICILIOS ===");
            console.log("Estructura de la tabla:", data.estructura);
            console.log("Registros encontrados:", data.registros);
            console.log("Total de registros:", data.total_registros);
            
            let mensaje = `Estructura de la tabla:\n`;
            data.estructura.forEach(campo => {
                mensaje += `- ${campo.Field} (${campo.Type})\n`;
            });
            mensaje += `\nTotal de registros: ${data.total_registros}`;
            
            alert(mensaje);
        })
        .catch(error => {
            console.error('Error:', error);
            alert("Error al hacer debug: " + error.message);
        });
}
</script>

@endsection