@extends('layouts.kaiadmin.master')

@section('template_title')
    Crear Servicio
@endsection

@section('content')
    <section class="content container-fluid"> 
        <div class="row">
            <div class="col-md-12">

                @includeif('partials.errors')

                @if(session('success'))
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Éxito!',
                                text: '{{ session('success') }}',
                                showConfirmButton: false,
                                timer: 2500
                            });
                        });
                    </script>
                @endif

                @if(session('error'))
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: '{{ session('error') }}',
                                showConfirmButton: false,
                                timer: 2500
                            });
                        });
                    </script>
                @endif

                <div class="card-deck mt-4">
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-primary text-white">
                            <span class="card-title">Datos del Servicio Nuevo</span>
                        </div>
                        <div class="card-body">
                            <form id="servicioForm" method="POST" action="{{ route('servicios.store') }}" role="form" enctype="multipart/form-data">
                                @csrf

                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="no_solicitud" class="form-label">No. Solicitud</label>
                                            <div class="input-group">
                                              <input type="text" id="no_solicitud" name="no_solicitud" class="form-control" 
                                                     inputmode="numeric" pattern="[0-9]*" required>
                                              <span class="input-group-text" id="year-suffix"></span>
                                            </div>
                                          </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="no_boleta" class="form-label">No. Boleta</label>
                                            <input type="text" id="no_boleta" name="no_boleta" class="form-control">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="fecha" class="form-label">Fecha</label>
                                            <input type="date" id="fecha" name="fecha" class="form-control" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="concategoriaservicio" class="form-label">Categoria Servicio</label>
                                            <select id="concategoriaservicio" name="concategoriaservicio" class="form-control" required>
                                                <option value="">-- Seleccionar --</option>
                                                @foreach($concategoriaservicio as $concategoriaservicio)
                                                    <option value="{{ $concategoriaservicio->CatCotServicio }}">{{ $concategoriaservicio->CatDescripcion }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <label for="serdireccion" class="form-label">Dirección</label>
                                            <input type="text" id="serdireccion" name="serdireccion" class="form-control" required>
                                        </div>
                                    </div>
                                    
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="departamentos" class="form-label">Departamento</label>
                                                <select id="departamentos" name="departamentos" class="form-control" required>
                                                    <option value="">-- Seleccionar --</option>
                                                    @foreach($departamentos as $departamento)
                                                        <option value="{{ $departamento->id }}">{{ $departamento->departamento }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            
                                            <div class="col-md-6 mb-3">
                                                <label for="municipio" class="form-label">Municipio</label>
                                                <select id="municipio" name="municipio" class="form-control" required disabled>
                                                    <option value="">-- Seleccionar --</option>
                                                </select>
                                                <input type="hidden" id="codigo_postal" name="codigo_postal">
                                            </div>
                                        </div>   
    
                                      
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label for="medidor" class="form-label">Medidor</label>
                                            <input type="text" id="medidor" name="medidor" class="form-control" required>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="voltaje" class="form-label">Voltaje</label>
                                            <select id="voltaje" name="voltaje" class="form-control" required>
                                                <option value="">-- Seleccionar --</option>
                                                @foreach($voltajes as $voltaje)
                                                    <option value="{{ $voltaje->ConVolCodigo }}">{{ $voltaje->ConVolDescripcion }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="tipo_servicio" class="form-label">Tipo de Servicio</label>
                                            <select id="usrserviciopoblacion" name="usrserviciopoblacion" class="form-control" required>
                                                <option value="">-- Seleccionar --</option>
                                                @foreach($serviciopoblacion as $serviciopoblacion)
                                                    <option value="{{ $serviciopoblacion->id}}">{{ $serviciopoblacion->usrServicioPoblacion}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 mb-6">
                                            <label for="multiplicador" class="form-label">Multiplicador</label>
                                            <input type="number" step="1" id="multiplicador" name="multiplicador" class="form-control" required>
                                        </div>
                                        <div class="col-md-3 mb-6">
                                            <label for="demanda_contratada" class="form-label">Demanda Contratada</label>
                                            <input type="number" step="0.01" id="demanda_contratada" name="demanda_contratada" class="form-control">
                                        </div>
                                        <div class="col-md-3 mb-6">
                                            <label for="participacion_punta" class="form-label">Participación en Punta</label>
                                            <div class="form-check form-switch">
                                                <input type="checkbox" 
                                                       class="form-check-input" 
                                                       id="participacion_punta" 
                                                       name="participacion_punta"
                                                       {{ old('participacion_punta') ? 'checked' : '' }}>
                                                <label class="form-check-label" for="participacion_punta">
                                                    <span id="checkbox-text">{{ old('participacion_punta') ? 'Sí' : 'No' }}</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-6">
                                            <label for="no_ot" class="form-label">No. de OT</label>
                                            <input type="text" id="no_ot" name="no_ot" class="form-control">
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="tarifabloque" class="form-label">Tarifa Bloque</label>
                                            <select id="tarifabloque" name="tarifabloque" class="form-control" required>
                                                <option value="">-- Seleccionar --</option>
                                                @foreach($tarifabloques as $tarifabloque)
                                                    <option value="{{ $tarifabloque->TarifaBloqueId}}">{{ $tarifabloque->TarifaBloqueNombre}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>

                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
                            <span class="card-title">Datos del Propietario</span>
                            <button type="button" class="btn btn-primary" onclick="buscarPropietario()">
                                Buscar Propietario
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="container mt-4">
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <label for="nombre" class="form-label">Nombre</label>
                                        <input type="text" id="nombre" name="nombre" class="form-control" required readonly>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <label for="direccion" class="form-label">Dirección</label>
                                        <input type="text" id="direccion" name="direccion" class="form-control" readonly>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="dpi" class="form-label">DPI</label>
                                        <input type="text" id="dpi" name="dpi" class="form-control" required readonly>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="nit" class="form-label">NIT</label>
                                        <input type="text" id="nit" name="nit" class="form-control" readonly>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="telefono" class="form-label">Teléfono</label>
                                        <input type="text" id="telefono" name="telefono" class="form-control" readonly>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">Correo Electrónico</label>
                                        <input type="email" id="email" name="email" class="form-control" readonly>
                                    </div>
                                    </div>
                                    <input type="hidden" id="UsrUsuarioIdeem" name="UsrUsuarioIdeem">
                                    <input type="hidden" id="UsrUsuarioDocumentoId_UsrDoctoIdentificacionId" name="UsrUsuarioDocumentoId_UsrDoctoIdentificacionId">
                                </div>

                                <div>
                                    <button type="submit" class="btn btn-primary mt-4">Guardar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>

document.getElementById('participacion_punta').addEventListener('change', function() {
    const textSpan = document.getElementById('checkbox-text');
    textSpan.textContent = this.checked ? 'Sí' : 'No';
}); 

document.addEventListener('DOMContentLoaded', function() {
    const departamentosSelect = document.getElementById('departamentos');
    const municipioSelect = document.getElementById('municipio');
    const codigoPostalInput = document.getElementById('codigo_postal');

    // Deshabilitar el select de municipios inicialmente
    municipioSelect.disabled = true;

    departamentosSelect.addEventListener('change', function() {
        const departamentoId = this.value;
        
        // Limpiar y deshabilitar el select de municipios si no hay departamento seleccionado
        municipioSelect.innerHTML = '<option value="">-- Seleccionar --</option>';
        codigoPostalInput.value = ''; // Limpiar código postal
        
        if (!departamentoId) {
            municipioSelect.disabled = true;
            return;
        }

        // Habilitar el select de municipios
        municipioSelect.disabled = false;

        // Hacer la petición AJAX para obtener los municipios
        fetch(`/get-municipios/${departamentoId}`)
            .then(response => response.json())
            .then(municipios => {
                municipios.forEach(municipio => {
                    const option = document.createElement('option');
                    option.value = municipio.id;
                    option.textContent = municipio.municipio;
                    municipioSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error:', error);
                municipioSelect.disabled = true;
            });
    });

    // Agregar evento para cuando cambie el municipio
    municipioSelect.addEventListener('change', function() {
        const municipioId = this.value;
        
        if (!municipioId) {
            codigoPostalInput.value = '';
            return;
        }

        // Hacer la petición AJAX para obtener el código postal
        fetch(`/get-codigo-postal/${municipioId}`)
            .then(response => response.json())
            .then(data => {
                codigoPostalInput.value = data.codigoPostal;
            })
            .catch(error => {
                console.error('Error:', error);
                codigoPostalInput.value = '';
            });
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const noSolicitudInput = document.getElementById('no_solicitud');
    const yearSuffix = document.getElementById('year-suffix');
    const currentYear = new Date().getFullYear().toString().slice(-2);
    
    yearSuffix.textContent = `-${currentYear}`;
    
    noSolicitudInput.addEventListener('input', function() {
        // Remover caracteres no numéricos
        this.value = this.value.replace(/\D/g, '');
        
        // Limitar a 3 dígitos
        if (this.value.length > 3) {
            this.value = this.value.slice(0, 3);
        }
    });

    // Formatear con ceros solo cuando el campo pierde el foco
    noSolicitudInput.addEventListener('blur', function() {
        if (this.value.length > 0) {
            this.value = this.value.padStart(3, '0');
        }
    });
});

async function getTiposDocumento() {
    try {
        const response = await fetch('/tipos-documento', {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        return await response.json();
    } catch (error) {
        console.error('Error al obtener tipos de documento:', error);
        return [];
    }
}

function crearNuevoUsuario() {
    getTiposDocumento().then(tiposDocumento => {
        const tiposDocumentoOptions = tiposDocumento
            .map(tipo => `<option value="${tipo.UsrDoctoIdentificacionId}">${tipo.UsrDoctoIdentificacion}</option>`)
            .join('');

        Swal.fire({
            title: 'Crear Nuevo Usuario',
            html: `
                <form id="nuevoUsuarioForm" class="text-left">
                    <div class="mb-3">
                        <label class="form-label">Nombres</label>
                        <input type="text" id="UsrUsuarioNombres" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Apellidos</label>
                        <input type="text" id="UsrUsuarioApellidos" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Dirección</label>
                        <input type="text" id="UsrUsuarioDireccion" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tipo de Documento</label>
                        <select id="UsrUsuarioDocumentoId_UsrDoctoIdentificacionId" class="form-select" required>
                            <option value="">Seleccione un tipo</option>
                            ${tiposDocumentoOptions}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Número de Identificación</label>
                        <input type="number" id="UsrUsuarioNumeroIdentificacion" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">NIT</label>
                        <input type="text" id="UsrUsuarioNIT" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Telefono</label>
                        <input type="number" id="UsrUsuarioTelefono" class="form-control" required>
                    </div>
                </form>
            `,
            showCancelButton: true,
            confirmButtonText: 'Guardar',
            cancelButtonText: 'Cancelar',
            didOpen: () => {
                const modal = Swal.getPopup();
                modal.querySelector('.swal2-confirm').classList.add('btn', 'btn-primary');
                modal.querySelector('.swal2-cancel').classList.add('btn', 'btn-secondary');
            },
            preConfirm: () => {
                // Get form values
                const formData = {
                    UsrUsuarioNombres: document.getElementById('UsrUsuarioNombres').value,
                    UsrUsuarioApellidos: document.getElementById('UsrUsuarioApellidos').value,
                    UsrUsuarioDireccion: document.getElementById('UsrUsuarioDireccion').value,
                    UsrUsuarioDocumentoId_UsrDoctoIdentificacionId: document.getElementById('UsrUsuarioDocumentoId_UsrDoctoIdentificacionId').value,
                    UsrUsuarioNumeroIdentificacion: document.getElementById('UsrUsuarioNumeroIdentificacion').value,
                    UsrUsuarioNIT: document.getElementById('UsrUsuarioNIT').value,
                    UsrUsuarioTelefono: document.getElementById('UsrUsuarioTelefono').value
                };

                // Validate required fields
                if (!formData.UsrUsuarioNombres || !formData.UsrUsuarioApellidos || 
                    !formData.UsrUsuarioDireccion || !formData.UsrUsuarioDocumentoId_UsrDoctoIdentificacionId ||
                    !formData.UsrUsuarioNumeroIdentificacion || !formData.UsrUsuarioTelefono) {
                    Swal.showValidationMessage('Por favor complete todos los campos requeridos');
                    return false;
                }

                // Send AJAX request
                return fetch('/usuarios/guardar', {  // <- Cambiada de /usuarios/store
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(formData)
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Error al guardar el usuario');
                    }
                    return response.json();
                })
                .catch(error => {
                    Swal.showValidationMessage(error.message);
                });
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    icon: 'success',
                    title: 'Usuario guardado exitosamente',
                    showConfirmButton: false,
                    timer: 1500
                });
                // Optionally refresh the page or update the UI
            }
        });
    });
}


function buscarPropietario() {
    Swal.fire({
        title: 'Buscar Propietario',
        html: `
            <div class="mb-3">
                <input type="text" id="searchInput" class="swal2-input" placeholder="Buscar por nombre, DPI o NIT">
            </div>
            <div id="resultados" style="max-height: 300px; overflow-y: auto;">
                <table class="table table-hover table-bordered" style="display: none;" id="tablaResultados">
                    <thead class="table-light">
                        <tr>
                            <th>Nombres</th>
                            <th>Apellidos</th>
                            <th>DPI</th>
                            <th>NIT</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div id="noResultados" class="text-center p-3" style="display: none;">
                    No se encontraron resultados
                </div>
            </div>
        `,
        width: '900px',
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: 'Crear Nuevo',
        cancelButtonText: 'Cerrar',
        didOpen: () => {
            const searchInput = document.getElementById('searchInput');
            const tabla = document.getElementById('tablaResultados');
            const noResultados = document.getElementById('noResultados');
            
            searchInput.addEventListener('input', function() {
                if (searchInput.value.trim() === '') {
                    tabla.style.display = 'none';
                    noResultados.style.display = 'none';
                    return;
                }
    
                fetch(`/buscar-usuarios?q=${searchInput.value}`, {
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(response => response.json())
                .then(data => {
                    const tbody = tabla.querySelector('tbody');
                    
                    if (data.length > 0) {
                        tbody.innerHTML = data.map(usuario => `
                            <tr>
                                <td>${usuario.UsrUsuarioNombres || '-'}</td>
                                <td>${usuario.UsrUsuarioApellidos || '-'}</td>
                                <td>${usuario.UsrUsuarioNumeroIdentificacion || '-'}</td>
                                <td>${usuario.UsrUsuarioNIT || '-'}</td>
                                <td class="text-center">
                                    <button 
                                        class="btn btn-sm btn-primary"
                                        onclick='seleccionarUsuario(${JSON.stringify(usuario)})'
                                    >
                                        Seleccionar
                                    </button>
                                </td>
                            </tr>
                        `).join('');
                        tabla.style.display = 'table';
                        noResultados.style.display = 'none';
                    } else {
                        tabla.style.display = 'none';
                        noResultados.style.display = 'block';
                    }
                });
            });
        }
    }).then((result) => {
        if (result.isConfirmed) {
            crearNuevoUsuario();
        }
    });
}
        
function seleccionarUsuario(usuario) {
    // Primero hacemos una petición para obtener el teléfono del usuario
    fetch(`/get-usuario-telefono/${usuario.UsrUsuarioIdeem}`, {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        // Rellenar los campos del formulario
        document.getElementById('nombre').value = `${usuario.UsrUsuarioNombres || ''} ${usuario.UsrUsuarioApellidos || ''}`.trim();
        document.getElementById('direccion').value = usuario.UsrUsuarioDireccion || '';
        document.getElementById('dpi').value = usuario.UsrUsuarioNumeroIdentificacion || '';
        document.getElementById('nit').value = usuario.UsrUsuarioNIT || '';
        document.getElementById('telefono').value = data.telefono || ''; 
      //  document.getElementById('email').value = usuario.UsrUsuarioEmail || '';
        
        // Agregar campos ocultos para los IDs
        let hiddenInputIdeem = document.getElementById('UsrUsuarioIdeem');
        if (!hiddenInputIdeem) {
            hiddenInputIdeem = document.createElement('input');
            hiddenInputIdeem.type = 'hidden';
            hiddenInputIdeem.id = 'UsrUsuarioIdeem';
            hiddenInputIdeem.name = 'UsrUsuarioIdeem';
            document.querySelector('form').appendChild(hiddenInputIdeem);
        }
        hiddenInputIdeem.value = usuario.UsrUsuarioIdeem;
        
        let hiddenInputDocId = document.getElementById('UsrUsuarioDocumentoId_UsrDoctoIdentificacionId');
        if (!hiddenInputDocId) {
            hiddenInputDocId = document.createElement('input');
            hiddenInputDocId.type = 'hidden';
            hiddenInputDocId.id = 'UsrUsuarioDocumentoId_UsrDoctoIdentificacionId';
            hiddenInputDocId.name = 'UsrUsuarioDocumentoId_UsrDoctoIdentificacionId';
            document.querySelector('form').appendChild(hiddenInputDocId);
        }
        hiddenInputDocId.value = usuario.UsrUsuarioDocumentoId_UsrDoctoIdentificacionId;
        
        // Cerrar el modal
        Swal.close();
    })
    .catch(error => {
        console.error('Error al obtener el teléfono:', error);
        // En caso de error, seguimos con el resto de la función pero sin teléfono
        seleccionarUsuarioSinTelefono(usuario);
    });
}

// Función auxiliar en caso de error al obtener el teléfono
function seleccionarUsuarioSinTelefono(usuario) {
    document.getElementById('nombre').value = `${usuario.UsrUsuarioNombres || ''} ${usuario.UsrUsuarioApellidos || ''}`.trim();
    document.getElementById('direccion').value = usuario.UsrUsuarioDireccion || '';
    document.getElementById('dpi').value = usuario.UsrUsuarioNumeroIdentificacion || '';
    document.getElementById('nit').value = usuario.UsrUsuarioNIT || '';
    document.getElementById('telefono').value = '';
 //   document.getElementById('email').value = usuario.UsrUsuarioEmail || '';
    
    // Resto del código para los campos ocultos...
    let hiddenInputIdeem = document.getElementById('UsrUsuarioIdeem');
    if (!hiddenInputIdeem) {
        hiddenInputIdeem = document.createElement('input');
        hiddenInputIdeem.type = 'hidden';
        hiddenInputIdeem.id = 'UsrUsuarioIdeem';
        hiddenInputIdeem.name = 'UsrUsuarioIdeem';
        document.querySelector('form').appendChild(hiddenInputIdeem);
    }
    hiddenInputIdeem.value = usuario.UsrUsuarioIdeem;
    
    let hiddenInputDocId = document.getElementById('UsrUsuarioDocumentoId_UsrDoctoIdentificacionId');
    if (!hiddenInputDocId) {
        hiddenInputDocId = document.createElement('input');
        hiddenInputDocId.type = 'hidden';
        hiddenInputDocId.id = 'UsrUsuarioDocumentoId_UsrDoctoIdentificacionId';
        hiddenInputDocId.name = 'UsrUsuarioDocumentoId_UsrDoctoIdentificacionId';
        document.querySelector('form').appendChild(hiddenInputDocId);
    }
    hiddenInputDocId.value = usuario.UsrUsuarioDocumentoId_UsrDoctoIdentificacionId;
    
    Swal.close();
}

    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('servicioForm');

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevenir el envío automático del formulario

            Swal.fire({
                title: '¿Estás seguro?',
                text: "¿Deseas guardar los datos del servicio?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, guardar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Si el usuario confirma, enviar el formulario de manera tradicional
                    form.submit();
                }
            });
        });
    });

        </script>
@endsection