<?php
session_start();  
// Verificar si el usuario está logueado
if (!isset($_SESSION['id_usuario'])) {
    // Redirigir al usuario a la página de login si no está autenticado
    header("Location: login.php");
    exit(); // Asegúrate de que el script se detenga después de la redirección
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>nn</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.4/tailwind.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

<!-- partial:index.partial.html -->
<div class="relative bg-gray-100 min-h-screen flex" id="app">
 <?php include 'menu.php' ?>
<div class="w-full " style="margin-left: 50px;">

        <?php include 'user.php' ?>
    <div class="px-16 bg-header flex items-center">
      <div class="filter-menu h-12 px-4 py-3 rounded-full bg-gray-200 w-1/2 flex justify-between items-center">
        <span class="text-white text-xs">Mostrar solo: </span>
        <div class="options flex items-center py-2">
          <button class="text-xs font-thin p-1 border-2 text-white rounded-full w-24 hover:bg-white hover:text-black mr-4">Todos</button>
           <button class="text-xs flex items-center justify-between opacity-50 font-thin py-1 border-2 text-white rounded-full w-26 hover:bg-white hover:text-black mr-4 px-2">
             Confirmados
             <img class="pl-1 h-4 w-4" src="https://image.flaticon.com/icons/svg/443/443138.svg"/>
          </button>
           <button class="text-xs flex items-center justify-between opacity-50 font-thin py-1 border-2 text-white rounded-full w-26 hover:bg-white hover:text-black mr-4 px-4">
             Pendientes
             <img class="pl-1 h-4 w-4" src="https://image.flaticon.com/icons/svg/189/189106.svg"/>
          </button>
            <button class="text-xs flex items-center justify-between opacity-50 font-thin py-1 border-2 text-white rounded-full w-26 hover:bg-white hover:text-black px-2">
             Cancelados
             <img class="pl-1 h-3 w-3" src="https://image.flaticon.com/icons/svg/579/579006.svg"/>
          </button>
        </div>
      </div>
<div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
  <!-- Contenedor para cargar el archivo Excel -->
  <div class="bg-green-500 hover:bg-green-400 cursor-pointer flex justify-center items-center rounded-full w-full text-white">
    <label for="archivo_excel" class="flex justify-center items-center rounded-full w-full text-white px-4 py-2 transition duration-300">
      <i class="fas fa-file-excel h-4 w-4 mr-3"></i> <!-- Ícono de Excel de Font Awesome -->
      <span class="font-hairline">Cargar Excel</span>
    </label>
    <input type="file" id="archivo_excel" name="archivo_excel" class="hidden" accept=".xlsx, .xls" required />
  </div>
</div>

<div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
  <!-- Nombre del archivo seleccionado -->
  <div id="fileName" class="flex justify-center items-center rounded-full w-full text-white px-4 py-2 transition duration-300 hidden">
    <i class="fas fa-file-excel h-5 w-5 text-green-500 mr-2"></i>
    <span id="selectedFileName">No se ha seleccionado ningún archivo</span>
  </div>
</div>

<div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
  <!-- Botón Procesar, inicialmente oculto -->
  <button id="processButton" class="flex justify-center items-center rounded-full w-full text-white px-4 py-2 transition duration-300 hidden">
    Procesar
  </button>

  <!-- Indicador de carga -->
  <div id="loadingIndicator" class="hidden flex justify-center items-center mt-4">
    <div class="spinner-border animate-spin inline-block w-8 h-8 border-4 border-solid border-gray-200 border-t-blue-500 rounded-full" role="status">
      <span class="sr-only">Cargando...</span>
    </div>
  </div>
</div>

<!-- Mensaje de confirmación o error -->
<div id="mensaje" class="mt-3 text-sm text-gray-500 dark:text-gray-300"></div>

    </div>
    <div class="bg-header flex  px-16 pt-4 items-baseline">
    <h4 class="text-xl font-bold text-white w-1/2">Hoy</h4>  
      <p class="w-48 italic text-sm opacity-75 text-white font-hairline text-right">Reunión en 19 minutos</p>
    </div>
  <header class="h-16  bg-header w-full  rounded-bl-full">
</header>
    <app-klatsch v-bind:klatsch="today"></app-klatsch> 
<div class="flex px-8 items-center today-card bg-white shadow-lg ml-16 h-28 rounded-custom border-l-8 border-blue-500">
  <div class="flex justify-between items-center w-full gap-8">
    
    <!-- Confirmados -->
    <div class="flex flex-col items-center text-center">
      <div class="h-12 w-12 rounded-full flex items-center justify-center bg-green-500 text-white hover:bg-green-600 transition duration-300 shadow-lg">
        <i class="fas fa-check text-lg"></i>
      </div>
      <div class="mt-2">
        <span class="text-2xl font-semibold text-gray-900" id="terminados">5</span>
        <span class="text-sm text-gray-500 block">Liquidados</span>
      </div>
    </div>

    <!-- Pendientes -->
    <div class="flex flex-col items-center text-center">
      <div class="h-12 w-12 rounded-full flex items-center justify-center bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300 shadow-lg">
        <i class="fas fa-clock text-lg"></i>
      </div>
      <div class="mt-2">
        <span class="text-2xl font-semibold text-gray-900" id="pendientes">3</span>
        <span class="text-sm text-gray-500 block">Pendiente</span>
      </div>
    </div>

  </div>
</div>


    <div class="px-16 pt-8 content">
      <div class="h-2 border-gray-200 border-t-2 w-2/3"></div>

  </div>
      <div class="klatsch-grid">
    <app-klatsch v-for="kl in upcoming" v-bind:klatsch="kl"></app-klatsch>
       <!-- Sección de Tabla -->
  
    </div>
<div class="mx-4 py-3 px-8 bg-white shadow-lg ml-16 rounded-lg" style="border-left: 8px solid #572073;">
    <div class="w-full"> <div class="font-extrabold text-xl text-gray-900 mb-4">Lista de Pedidos</div>
        <div class="flex justify-between items-center mb-4">

            <!-- Buscador -->
            <div class="flex items-center">
                <input type="text" placeholder="Buscar..." id="searchInput" class="px-4 py-2 border border-gray-300 rounded-lg text-sm w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500" oninput="buscarTrabajos()">
            </div>
            
            <!-- Botones Exportar con íconos -->
            <div class="flex items-center">
                <!-- Botón Exportar Excel -->
                <a href="excel_liquidados.php?export=excel"  class="flex items-center bg-green-500 text-white py-2 px-6 rounded-lg hover:bg-green-700 focus:outline-none mr-2">
                    <!-- Ícono de Excel -->
                    <i class="fas fa-file-excel h-4 w-4 mr-3"></i>
                    Exportar Excel
                </a>
                <!-- Botón Nuevo: Exportar PDF -->
                <a  href="excel_liquidados.php?export=excel" class="flex items-center bg-blue-500 text-white py-2 px-6 rounded-lg hover:bg-blue-700 focus:outline-none">
                    <!-- Ícono de PDF -->
                    <i class="fas fa-file-pdf h-4 w-4 mr-3"></i>
                    Exportar PDF
                </a>
            </div>
        </div>

       


<!-- Botones de acción con íconos -->
<div class="action-buttons">
    <button onclick="seleccionarTodo()" class="btn btn-action">
        <i class="fas fa-check-square"></i> Seleccionar Todo
    </button>
    <button onclick="cambiarResidencia()" class="btn btn-action">
        <i class="fas fa-home"></i> Cambiar a Residencial/Condominio
    </button>
</div>

    <!-- Tabla para mostrar los trabajos -->
 <table id="trabajosTable" class="table align-items-center mb-0">
    <thead>
        <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Seleccionar</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pedido</th>
        
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Cuadrilla</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Datos</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Direccion</th>
             
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Imagenes</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Opciones</th>
            
        </tr>
    </thead>
    <tbody>
        <!-- Los resultados se cargarán aquí -->
    </tbody>
</table>
<div id="pagination">
    <button onclick="cambiarPagina(1)" class="pagination-btn first">Primera</button>
    <button onclick="cambiarPagina(currentPage - 1)" class="pagination-btn prev" ${currentPage === 1 ? 'disabled' : ''}>Anterior</button>
    <span class="page-info">Página: <span id="currentPage">1</span></span>
    <button onclick="cambiarPagina(currentPage + 1)" class="pagination-btn next">Siguiente</button>
    <button onclick="cambiarPagina(lastPage)" class="pagination-btn last">Última</button>
</div>

    </div>
</div>


  </div>

</div> 

    </div>
</body>
</html>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subir Excel y Listar Seriales</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
<!-- SweetAlert2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

<!-- Agrega estos enlaces de estilo y script para SweetAlert2 -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.8/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.8/dist/sweetalert2.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style >

/* Estilo para botones comunes */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

.btn i {
    margin-right: 8px;
}

/* Estilo para el botón de exportar */
.btn-export {
    background-color: #28a745;
}

.btn-export:hover {
    background-color: #218838;
}

/* Estilo para el campo de búsqueda */
.search-container {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.search-input {
    padding: 10px;
    font-size: 16px;
    width: 250px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding-right: 30px;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
}

/* Estilo para los botones de acción */
.action-buttons {
    margin-top: 20px;
}

.btn-action {
    font-size: 16px;
    background-color: #28a745;
}

.btn-action:hover {
    background-color: #218838;
}

</style>


<style >#pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.pagination-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-size: 16px;
}

.pagination-btn:hover {
    background-color: #0056b3;
}

.pagination-btn:disabled {
    background-color: #c0c0c0;
    cursor: not-allowed;
}

.page-info {
    font-size: 16px;
    margin: 0 15px;
}

.first, .last {
    font-weight: bold;
}

.pagination-btn:focus {
    outline: none;
}

.pagination-btn:active {
    background-color: #004085;
}

#currentPage {
    font-weight: bold;
}
.foto-y-botones {
    display: flex;
    flex-direction: row; /* Mostrar en una fila */
    align-items: center;
    gap: 12px; /* Espacio entre la imagen y los botones */
    flex-wrap: wrap; /* Por si no entra todo en pantallas pequeñas */
}

.foto-y-botones a.foto-link img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.foto-y-botones a.foto-link img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.foto-y-botones .mt-2 {
    display: flex;
    gap: 6px;
    margin-top: 0; /* Elimina margen si está al lado */
}

.foto-y-botones button {
    padding: 5px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.foto-y-botones button:hover {
    transform: translateY(-1px);
}

</style>
<!-- Modal para ver y descargar fotos -->
<div class="modal" id="fotoModal" tabindex="-1" aria-labelledby="fotoModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fotoModalLabel">Ver Foto</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img id="modalFoto" src="" alt="Foto" style="width: 100%; height: auto;">
      </div>
      <div class="modal-footer">
        <a id="downloadBtn" class="btn btn-primary" href="#" download>Descargar</a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS y Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<!-- Incluir jQuery desde un CDN (reemplaza la URL por la versión que prefieras) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Agregar SweetAlert2 en tu archivo HTML -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Pedido</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editPedidoForm">
                    <input type="hidden" id="editId" name="id">

                    <div class="form-group">
                        <label>Cliente</label>
                        <input type="text" class="form-control" id="editCliente" name="cliente">
                    </div>
                    
                    <div class="form-group">
                        <label>DNI</label>
                        <input type="text" class="form-control" id="editDni" name="dni">
                    </div>

                    <div class="form-group">
                        <label>Dirección</label>
                        <textarea class="form-control" id="editDireccion" name="direccion"></textarea>
                    </div>

                    <div class="form-group">
                        <label>CTO</label>
                        <input type="text" class="form-control" id="editCto" name="cto">
                    </div>

                    <div class="form-group">
                        <label>Tipo Servicio</label>
                        <input type="text" class="form-control" id="editTipoServicio" name="tipo_servicio">
                    </div>

                         <div class="form-group">
    <label>Serie Nueva</label>
    <div class="d-flex">
        <input type="text" class="form-control" id="editSerieNueva" name="serie_nueva">
        <button type="button" class="btn btn-warning ml-2" onclick="liberarSerie()">Liberar Serie</button>
    </div>
</div>
<div class="form-group">
    <label>Vincular Serie</label>
    <div class="input-group">
        <input type="text" class="form-control" id="buscarSerie" placeholder="Buscar serie..." onkeyup="buscarSerie()">
        <button type="button" class="btn btn-primary" onclick="vincularSerie()">Vincular</button>
    </div>
    <ul id="resultadosSerie" class="list-group mt-2" style="max-height: 150px; overflow-y: auto;"></ul>
</div>
                    <div class="form-group">
                        <label>Serie Baja</label>
                        <input type="text" class="form-control" id="editSerieBaja" name="serie_baja">
                    </div>

                    <div class="form-group">
                        <label>Metraje Inicio</label>
                        <input type="number" class="form-control" id="editMetrajeInicio" name="metraje_inicio">
                    </div>

                    <div class="form-group">
                        <label>Metraje Término</label>
                        <input type="number" class="form-control" id="editMetrajeTermino" name="metraje_termino">
                    </div>

                    <div class="form-group">
                        <label>Comentario</label>
                        <textarea class="form-control" id="editComentario" name="comentario"></textarea>
                    </div>

                    <div class="form-group">
                        <label>N° Boleta</label>
                        <input type="text" class="form-control" id="editBoleta" name="n_boleta">
                    </div>

                    <div class="form-group">
                        <label>Escenario</label>
                        <input type="text" class="form-control" id="editEscenario" name="escenario">
                    </div>

                    <div class="form-group">
                        <label>Usuario ID</label>
                        <input type="number" class="form-control" id="editUserId" name="user_id" disabled>
                    </div>

                    <div class="form-group">
                        <label>Fecha Creación</label>
                        <input type="text" class="form-control" id="editFecha" name="fecha_creacion" disabled>
                    </div>
                    
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardarEdicion()">Guardar Cambios</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="herramientasModal" tabindex="-1" aria-labelledby="herramientasModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="herramientasModalLabel">Ferreteria del Pedido</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered" id="tablaHerramientas">
          <thead>
            <tr>
              <th>Ferreteria</th>
              <th>Cantidad</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>

        <div class="mt-3">
          <label>Nuevo Ferreteria</label>
          <select id="nuevaHerramienta" class="form-select">
            <option disabled selected>Selecciona una</option>
            <option value="Conectores SC/APC" data-max="2">Conectores SC/APC</option>
            <option value="Roseta Óptica" data-max="1">Roseta Óptica</option>
            <option value="Patch Cord" data-max="1">Patch Cord</option>
            <option value="Acoplador" data-max="1">Acoplador</option>
            <option value="Cintillo Num 20" data-max="15">Cintillo Num 20</option>
            <option value="Cintillo Rotulador" data-max="1">Cintillo Rotulador</option>
            <option value="Grapas" data-max="30">Grapas</option>
            <option value="Templadores Tipo P" data-max="15">Templadores Tipo P</option>
            <option value="Anclaje Tipo P" data-max="1">Anclaje Tipo P</option>
            <option value="Cinta Aislante" data-max="50">Cinta Aislante</option>
            <option value="Cinta Doble Contacto" data-max="10">Cinta Doble Contacto</option>
            <option value="Clevys (Portalínea + Aislador)" data-max="2">Clevys (Portalínea + Aislador)</option>
            <option value="Hebillas" data-max="4">Hebillas</option>
            <option value="RJ45" data-max="2">RJ45</option>
            <option value="Tarugos" data-max="1">Tarugos</option>
            <option value="UTP" data-max="100">UTP</option>
          </select>

          <input type="number" id="cantidadHerramienta" class="form-control mt-2" placeholder="Cantidad">
          <button class="btn btn-success mt-2" onclick="agregarHerramienta()">Agregar</button>
        </div>
      </div>
    </div>
  </div>
</div>

    <script>
let currentPage = 1; // Página actual
function cargarTrabajos(searchTerm = '', page = 1) {
    fetch(`getTrabajos.php?searchTerm=${searchTerm}&page=${page}`)
        .then(response => response.json())
        .then(data => {
            const tbody = document.querySelector('#trabajosTable tbody');
            tbody.innerHTML = '';  // Limpiar tabla antes de agregar nuevos datos
            data.forEach(trabajo => {
                const tr = document.createElement('tr');
                tr.classList.add("border-b"); // Añadir borde inferior

                tr.innerHTML = `
                    <td class="align-middle text-center">
                        <input type="checkbox" class="seleccion-trabajo" value="${trabajo.id}">
                    </td>
                  
                     <td class="align-middle" style="text-align: left; font-size: 12px;">
<p class="text-xs font-weight-bold mb-0" >
    Cliente: ${trabajo.cliente}
</p>
                        <p class="text-xs font-weight-bold mb-0">Pedido: ${trabajo.pedido}</p>
                       
                    </td>
                    <td class="align-middle">
                        <p class="text-xs font-weight-bold mb-0">${trabajo.nombre_usuario}</p>
                    </td>
                    
                    <!-- Agrupar serie_nueva, serie_baja, y cto_real en una sola celda -->
                    <td class="align-middle" style="text-align: left; font-size: 12px;">
<p class="text-xs font-weight-bold mb-0" style="background-color: yellow; display: inline;">
    Tipo de Servicio: ${trabajo.tipo_servicio}
</p>
                        <p class="text-xs font-weight-bold mb-0">Serie Nueva: ${trabajo.serie_nueva}</p>
                        <p class="text-xs font-weight-bold mb-0">Serie Baja: ${trabajo.serie_baja}</p>
                        <p class="text-xs font-weight-bold mb-0">CTO Real: ${trabajo.cto_real}</p>
                        <p class="text-xs font-weight-bold mb-0">Fecha de Registro: ${trabajo.fecha_creacion}</p>
                    </td>
                    <td class="align-middle text-xs text-secondary mb-0" style="text-align: left; font-size: 12px;">
    ${trabajo.direccion_cliente 
        ? trabajo.direccion_cliente.split(',').map(line => {
            // Dividir cada línea en bloques de 10 caracteres
            let chunks = line.trim().match(/.{1,20}/g);
            return chunks.map(chunk => `<p class="text-xs font-weight-bold mb-0">${chunk}</p>`).join('');
        }).join('') 
        : '<p class="mb-0">Dirección no disponible</p>'}
</td>

                    <!-- Agrupar fotos y botones en una sola celda -->
                  <!-- Columna con fotos -->
    <td class="align-middle text-center">
      <div class="foto-y-botones">

    <!-- Foto de inicio -->
    ${trabajo.foto_metraje_inicio ? 
        `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_metraje_inicio}">
            <i class="fas fa-image fa-2x text-primary"></i>
        </a>` 
        : 'No disponible'}

    <!-- Foto de término -->
    ${trabajo.foto_metraje_termino ? 
        `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_metraje_termino}">
            <i class="fas fa-image fa-2x text-success"></i>
        </a>` 
        : 'No disponible'}

    <!-- Foto de boleta -->
    ${trabajo.foto_boleta ? 
        `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_boleta}">
            <i class="fas fa-image fa-2x text-warning"></i>
        </a>` 
        : 'No disponible'}

</div>

    </td>

  <!-- Columna con menú de acciones -->
<td class="align-middle text-center">
    <div class="dropdown">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-ellipsis-v"></i>
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item text-danger" href="#" onclick="anularPedido(${trabajo.id})">Anular Pedido</a></li>
            <li><a class="dropdown-item text-warning" href="#" onclick="editarPedido(${trabajo.id})">Editar</a></li>
            <li><a class="dropdown-item text-info" href="#" onclick="abrirModalHerramientas(${trabajo.id})">Ferretería</a></li>
        </ul>
    </div>
</td>

                `;
                tbody.appendChild(tr);
            });

            // Añadir evento de clic a las imágenes para abrir el modal
            const fotoLinks = document.querySelectorAll('.foto-link');
            fotoLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    const fotoUrl = link.getAttribute('data-foto');
                    document.getElementById('modalFoto').src = fotoUrl;
                    document.getElementById('downloadBtn').href = fotoUrl;
                    const fotoModal = new bootstrap.Modal(document.getElementById('fotoModal'));
                    fotoModal.show();
                });
            });
        })
        .catch(error => console.error('Error al cargar los trabajos:', error));
}
// Función para liberar una serie con SweetAlert2
function liberarSerie() {
    const serie = document.getElementById("editSerieNueva").value;
    const pedidoId = document.getElementById("editId").value; // Obtener el ID del pedido

    if (!serie.trim()) {
        Swal.fire({
            icon: 'warning',
            title: 'Campo vacío',
            text: 'Por favor, ingrese una serie antes de liberarla.',
        });
        return;
    }

    Swal.fire({
        title: '¿Estás seguro?',
        text: `Vas a liberar la serie: ${serie}`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí, liberar',
        cancelButtonText: 'Cancelar',
    }).then((result) => {
        if (result.isConfirmed) {
            fetch('liberarSerie.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `serie=${encodeURIComponent(serie)}&pedido_id=${encodeURIComponent(pedidoId)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Serie liberada',
                        text: 'La serie ha sido liberada exitosamente.',
                    });
                    document.getElementById("editSerieNueva").value = ""; // Limpia el campo
                    cargarTrabajos(); // Recargar la lista de trabajos
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudo liberar la serie. Intenta de nuevo.',
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error de conexión',
                    text: 'Hubo un problema al comunicarse con el servidor.',
                });
            });
        }
    });
}
let trabajoActualId = null;

function abrirModalHerramientas(trabajoId) {
    trabajoActualId = trabajoId;
    fetch(`getHerramientas.php?trabajo_id=${trabajoId}`)
        .then(response => response.json())
        .then(data => {
            const tbody = document.querySelector('#tablaHerramientas tbody');
            tbody.innerHTML = '';
            data.forEach(h => {
                tbody.innerHTML += `
                    <tr>
                        <td>${h.herramienta}</td>
                        <td><input type="number" class="form-control" value="${h.cantidad}" onchange="actualizarCantidad(${h.id}, this.value)"></td>
                        <td><button class="btn btn-danger btn-sm" onclick="eliminarHerramienta(${h.id})">Eliminar</button></td>
                    </tr>
                `;
            });

            const modal = new bootstrap.Modal(document.getElementById('herramientasModal'));
            modal.show();
        });
}

function actualizarCantidad(id, nuevaCantidad) {
    fetch(`updateHerramienta.php`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ id, cantidad: nuevaCantidad })
    }).then(() => {
        Swal.fire({
            title: '¡Éxito!',
            text: 'La cantidad ha sido actualizada.',
            icon: 'success',
            confirmButtonText: 'Cerrar'
        });
    });
}

function eliminarHerramienta(id) {
    fetch(`deleteHerramienta.php`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ id })
    }).then(() => {
        abrirModalHerramientas(trabajoActualId);
        Swal.fire({
            title: '¡Eliminado!',
            text: 'La Ferreteria ha sido eliminada.',
            icon: 'success',
            confirmButtonText: 'Cerrar'
        });
    });
}

function agregarHerramienta() {
    const select = document.getElementById('nuevaHerramienta');
    const herramienta = select.value;
    const max = parseInt(select.selectedOptions[0].dataset.max);
    const cantidad = parseInt(document.getElementById('cantidadHerramienta').value);

    if (cantidad > max) {
        Swal.fire({
            title: '¡Error!',
            text: `La cantidad máxima para esta herramienta es ${max}.`,
            icon: 'error',
            confirmButtonText: 'Cerrar'
        });
        return;
    }

    fetch(`addHerramienta.php`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ trabajo_id: trabajoActualId, herramienta, cantidad })
    }).then(() => {
        abrirModalHerramientas(trabajoActualId);
        Swal.fire({
            title: '¡Añadido!',
            text: 'Una Ferreteria ha sido añadida.',
            icon: 'success',
            confirmButtonText: 'Cerrar'
        });
    });
}

function buscarSerie() {
    let query = document.getElementById("buscarSerie").value;

    if (query.length < 3) {
        document.getElementById("resultadosSerie").innerHTML = "";
        return;
    }

    fetch(`buscarSerie.php?serie=${query}`)
        .then(response => response.json())
        .then(data => {
            let resultados = document.getElementById("resultadosSerie");
            resultados.innerHTML = "";

            if (data.length > 0) {
                data.forEach(serie => {
                    let item = document.createElement("li");
                    item.className = "list-group-item list-group-item-action";
                    item.textContent = serie.serie;
                    item.onclick = function() {
                        document.getElementById("buscarSerie").value = serie.serie;
                        document.getElementById("resultadosSerie").innerHTML = "";
                    };
                    resultados.appendChild(item);
                });
            } else {
                resultados.innerHTML = `<li class="list-group-item text-danger">No se encontraron series.</li>`;
            }
        })
        .catch(error => console.error("Error al buscar series:", error));
}
function vincularSerie() {
    let serie = document.getElementById("buscarSerie").value;
    let pedidoId = document.getElementById("editId").value;

    if (!serie.trim()) {
        Swal.fire({
            icon: "warning",
            title: "Serie Vacía",
            text: "Por favor, selecciona una serie válida.",
        });
        return;
    }

    Swal.fire({
        title: "¿Vincular Serie?",
        text: `Se vinculará la serie: ${serie} al pedido #${pedidoId}`,
        icon: "question",
        showCancelButton: true,
        confirmButtonText: "Sí, vincular",
        cancelButtonText: "Cancelar",
    }).then((result) => {
        if (result.isConfirmed) {
            fetch("vincularSerie.php", {
                method: "POST",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                body: `serie=${encodeURIComponent(serie)}&pedido_id=${encodeURIComponent(pedidoId)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: "success",
                        title: "Serie Vinculada",
                        text: "La serie ha sido vinculada correctamente.",
                    });
                    document.getElementById("editSerieNueva").value = serie;
                    document.getElementById("buscarSerie").value = "";
                    document.getElementById("resultadosSerie").innerHTML = "";
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: data.message || "No se pudo vincular la serie. Intenta de nuevo.", // Muestra el mensaje del backend
                    });
                }
            })
            .catch(error => {
                console.error("Error:", error);
                Swal.fire({
                    icon: "error",
                    title: "Error de conexión",
                    text: "Hubo un problema al comunicarse con el servidor.",
                });
            });
        }
    });
}
// Función para cambiar de página
function cambiarPagina(page) {
    currentPage = page;
    const searchTerm = document.querySelector('#searchInput').value;
    cargarTrabajos(searchTerm, currentPage);
}

// Llamada inicial
cargarTrabajos('', currentPage);

function anularPedido(trabajoId) {
    if (confirm("¿Estás seguro de que quieres anular este pedido?")) {
        $.ajax({
            url: 'anular_pedido.php',  // Archivo PHP para manejar la anulación
            type: 'POST',
            data: { trabajo_id: trabajoId },
            dataType: 'json', // Asegúrate de que la respuesta sea JSON
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'Aceptar'
                    }).then(() => {
                        cargarTrabajos();  // Volver a cargar la tabla
                    });
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: response.message,
                        icon: 'error',
                        confirmButtonText: 'Aceptar'
                    });
                }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    title: 'Error',
                    text: "Hubo un error al anular el pedido. " + error,
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                });
            }
        });
    }
}

function editarPedido(trabajoId) {
    $.ajax({
        url: 'getPedido.php',
        type: 'GET',
        data: { id: trabajoId },
        dataType: 'json',
        success: function(trabajo) {
            $("#editId").val(trabajo.id);
            $("#editCliente").val(trabajo.cliente);
            $("#editDni").val(trabajo.dni);
            $("#editDireccion").val(trabajo.direccion);
            $("#editCto").val(trabajo.cto);
            $("#editTipoServicio").val(trabajo.tipo_servicio);
            $("#editSerieNueva").val(trabajo.serie_nueva);
            $("#editSerieBaja").val(trabajo.serie_baja);
            $("#editMetrajeInicio").val(trabajo.metraje_inicio);
            $("#editMetrajeTermino").val(trabajo.metraje_termino);
            $("#editComentario").val(trabajo.comentario);
            $("#editBoleta").val(trabajo.n_boleta);
            $("#editEscenario").val(trabajo.escenario);
            $("#editUserId").val(trabajo.user_id);
            $("#editFecha").val(trabajo.fecha_creacion);

            $("#editModal").modal("show");
        },
        error: function() {
            Swal.fire("Error", "No se pudo cargar el pedido.", "error");
        }
    });
}
function guardarEdicion() {
    // Captura los datos del formulario
    let formData = $("#editPedidoForm").serialize();

    // 📌 Log para ver los datos que se están enviando
    console.log("Datos enviados:", formData);

    $.ajax({
        url: 'editar_pedido.php',  // URL del archivo PHP que procesará la solicitud
        type: 'POST',              // Método POST para enviar datos al servidor
        data: formData,            // Los datos del formulario
        dataType: 'json',          // Esperamos una respuesta en formato JSON
        success: function(response) {
            // 📌 Log para ver la respuesta del servidor
            console.log("Respuesta del servidor:", response);

            // Verifica si la respuesta es exitosa
            Swal.fire({
                title: response.success ? "Éxito" : "Error", // Título dinámico según el resultado
                text: response.message,                     // Mensaje de la respuesta
                icon: response.success ? "success" : "error",  // Icono basado en el resultado
                confirmButtonText: "Aceptar"               // Texto del botón
            }).then(() => {
                if (response.success) {
                    // Si la edición fue exitosa, cerrar el modal y cargar los trabajos
                    $("#editModal").modal("hide");
                    cargarTrabajos();  // Asegúrate de que esta función esté definida
                }
            });
        },
        error: function(xhr, status, error) {
            // 📌 Log para ver detalles del error si la solicitud falla
            console.error("Error en la petición AJAX:", status, error); // Mostrar detalles del error
            console.error("Respuesta completa del servidor:", xhr.responseText); // Ver el cuerpo de la respuesta del servidor

            // Mostrar un mensaje de error en caso de que la actualización falle
            Swal.fire("Error", "No se pudo actualizar el pedido.", "error");
        }
    });
}
// Función para cerrar el modal
$('.close').click(function() {
    $('#editModal').modal('hide');
});



        // Función para realizar la búsqueda al escribir en el input
        function buscarTrabajos() {
            const searchTerm = document.getElementById('searchInput').value;
            cargarTrabajos(searchTerm);
        }

        // Función para seleccionar todos los checkboxes
        function seleccionarTodo() {
            document.querySelectorAll('.seleccion-trabajo').forEach(checkbox => {
                checkbox.checked = true;
            });
        }

        // Función para cambiar residencia
        function cambiarResidencia() {
            const seleccionados = Array.from(document.querySelectorAll('.seleccion-trabajo:checked'))
                .map(checkbox => checkbox.value);
            
            if (seleccionados.length === 0) {
                alert("Seleccione al menos un trabajo.");
                return;
            }

            const nuevoEscenario = confirm("¿Cambiar a Residencial? (Aceptar para Residencial, Cancelar para Condominio)") 
                                    ? "Residencial" 
                                    : "Condominio";

            fetch('actualizarResidencia.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ ids: seleccionados, escenario: nuevoEscenario })
            })
            .then(response => response.json())
            .then(data => {
                alert(data.mensaje);
                cargarTrabajos(); // Recargar la tabla
            })
            .catch(error => console.error('Error al actualizar:', error));
        }

        // Cargar todos los trabajos por defecto cuando la página se carga
        window.onload = function() {
            cargarTrabajos();
        };
    </script>
          <style>
          /* Estilos para los checkboxes */
.seleccion-trabajo {
    width: 20px;        /* Ajusta el tamaño del checkbox */
    height: 20px;       /* Ajusta el tamaño del checkbox */
    margin: 0;          /* Elimina márgenes por defecto */
    padding: 0;         /* Elimina padding */
    cursor: pointer;   /* Cambia el cursor al pasar sobre el checkbox */
}

table#trabajosTable td {
    vertical-align: middle; /* Asegura que los contenidos de las celdas estén alineados al centro */
}

table#trabajosTable td input[type="checkbox"] {
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste para mejorar la alineación dentro de la celda */
table#trabajosTable td.align-middle {
    vertical-align: middle;
    text-align: center;
}

                </style>
