
<!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;">

    <div class="h-24 bg-header flex justify-between items-start px-16 pt-4">
      <h2 class="text-4xl text-white font-bold">Trabajos</h2>
      <div class="flex items-center">
        <img class="h-12 w-12 mr-4 rounded-full border-2 border-blue-500" src="captura.png"
/>
        <h4 class="text-white font-thin">nina</h4>
      </div>
    </div>
    <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>

 <!-- Ícono de bloqueo si no es 'logistico' -->
    <div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
        <i class="fas fa-lock h-5 w-5 text-red-500 mr-2"></i>
        <span>No tienes permisos</span>
    </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="buscarCodigo" 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" onkeyup="cargarTrabajos()">
            </div>
            
            <!-- Botones Exportar con íconos -->
            <div class="flex items-center">
                <!-- Botón Exportar Excel -->
                <a href="exportar_excel_seriado.php"  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 -->
                <button 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
                </button>
            </div>
        </div>

       
 
   


<table class='min-w-full table-auto'>
    <thead>
        <tr>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>ID</th>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>Cod. Pedido</th>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>Cliente / DNI</th>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>Direcci�n</th>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>CTO</th>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>Fecha de Gestion</th>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>Fecha Registro</th>
            <th class='px-4 py-2 text-left text-sm text-gray-600'>Estado</th>
        </tr>
    </thead>
    <tbody id="tablaTrabajos">
        <!-- Los trabajos se insertar�n aqu� din�micamente -->
    </tbody>
</table>

<!-- Paginaci�n -->
<div id="paginacion" class="mt-3">
    <!-- Los botones de paginaci�n se insertar�n aqu� -->
</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>


<script>
  // Detectar cuando se selecciona un archivo
  document.getElementById('archivo_excel').addEventListener('change', function (e) {
    const fileName = e.target.files[0]?.name || "No se ha seleccionado ningún archivo";
    document.getElementById('selectedFileName').textContent = fileName;

    // Si se selecciona un archivo, mostrar el nombre del archivo y el botón de procesar
    document.getElementById('fileName').classList.remove('hidden');
    document.getElementById('processButton').classList.remove('hidden');
  });

  // Manejar el clic en el botón Procesar
  document.getElementById('processButton').addEventListener('click', function () {
    // Validar si se ha seleccionado un archivo
    const archivo = document.getElementById('archivo_excel').files[0];
    if (!archivo) {
      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'Por favor selecciona un archivo Excel.',
        confirmButtonText: 'Aceptar'
      });
      return;
    }

    // Mostrar el mensaje de carga con SweetAlert
    Swal.fire({
      title: 'Cargando...',
      text: 'Procesando tu solicitud, por favor espera.',
      allowOutsideClick: false,
      didOpen: () => {
        Swal.showLoading(); // Muestra el cargando
      }
    });

    // Crear FormData con el archivo
    var formData = new FormData();
    formData.append('archivo_excel', archivo);

    $.ajax({
      url: 'procesar_trabajos.php', // URL del servidor para procesar los datos
      type: 'POST',
      data: formData,
      contentType: false, // No establecer el contentType, ya que FormData se encarga de esto
      processData: false, // No procesar los datos (necesario para FormData)
      success: function (response) {
        // Ocultar el mensaje de error o éxito si ya estaba visible
        document.getElementById('mensaje').classList.add('hidden');

        // Convertir la respuesta a JSON
        try {
          var jsonResponse = JSON.parse(response);

          // Comprobar el estado de la respuesta y mostrar el mensaje adecuado
          if (jsonResponse.status === "success") {
            Swal.fire({
              icon: 'success',
              title: '¡Éxito!',
              text: jsonResponse.message,
              confirmButtonText: 'Aceptar'
            });

            // Resetear el formulario y ocultar elementos
            document.getElementById('archivo_excel').value = ''; // Limpiar el archivo seleccionado
            document.getElementById('fileName').classList.add('hidden');
            document.getElementById('processButton').classList.add('hidden');
            document.getElementById('selectedFileName').textContent = ''; // Limpiar el nombre del archivo

            // Mostrar el mensaje de éxito
            document.getElementById('mensaje').textContent = jsonResponse.message;
            document.getElementById('mensaje').classList.remove('hidden'); // Mostrar el mensaje

          } else {
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: jsonResponse.message,
              confirmButtonText: 'Aceptar'
            });

            // Mostrar el mensaje de error
            document.getElementById('mensaje').textContent = jsonResponse.message;
            document.getElementById('mensaje').classList.remove('hidden'); // Mostrar el mensaje
          }
        } catch (e) {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Hubo un problema al procesar la respuesta del servidor.',
            confirmButtonText: 'Aceptar'
          });
          document.getElementById('mensaje').textContent = 'Hubo un problema al procesar la respuesta del servidor.';
          document.getElementById('mensaje').classList.remove('hidden'); // Mostrar el mensaje
        }
      },
      error: function () {
        // Ocultar el mensaje de error o éxito si ya estaba visible
        document.getElementById('mensaje').classList.add('hidden');

        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Hubo un problema con la solicitud. Intenta nuevamente.',
          confirmButtonText: 'Aceptar'
        });
        document.getElementById('mensaje').textContent = 'Hubo un problema con la solicitud. Intenta nuevamente.';
        document.getElementById('mensaje').classList.remove('hidden'); // Mostrar el mensaje
      }
    });
  });
</script>

<script>
$(document).ready(function () {
    window.cargarTrabajos = function(pagina = 1) {
        const busqueda = $('#buscarCodigo').val();

        $.ajax({
            url: 'listar_trabajos.php',
            type: 'GET',
            dataType: 'json',
            data: { pagina, busqueda },
            success: function (data) {
                const trabajosPorPagina = 15;
                const totalPaginas = Math.ceil(data.total_trabajos / trabajosPorPagina);

                $('#tablaTrabajos').empty();
                $('#pendientes').text(data.pendientes);
                $('#terminados').text(data.terminados);
                $('#paginacion').empty();

                data.trabajos.forEach(trabajo => {
                    let direccionCorta = trabajo.direccion.split(' ').slice(0, 8).join(' ') +
                        (trabajo.direccion.split(' ').length > 8 ? '...' : '');

                    let programacionFecha = '';

// Verificamos si `trabajo.programacion` tiene el formato "dd/mm/yyyy"
if (trabajo.programacion) {
    const partes = trabajo.programacion.split('/'); // Intentamos separar por "/"
    
    // Si tiene 3 partes, asumimos que es "dd/mm/yyyy"
    if (partes.length === 3) {
        programacionFecha = `${partes[2]}-${partes[1]}-${partes[0]}`; // Convertimos a "yyyy-mm-dd"
    } else {
        // Si no tiene 3 partes, asumimos que ya está en formato "yyyy-mm-dd"
        const fechaValida = /^\d{4}-\d{2}-\d{2}$/.test(trabajo.programacion);
        if (fechaValida) {
            programacionFecha = trabajo.programacion; // Ya está en formato correcto
        } else {
            // Si no es ninguno de los dos formatos, puedes agregar una validación o mensaje de error
            console.error("Formato de fecha no válido");
        }
    }
}
                    let registroFecha = '';
                    if (trabajo.fecha_registro) {
                        registroFecha = trabajo.fecha_registro.split(' ')[0]; // yyyy-mm-dd
                    }

                    $('#tablaTrabajos').append(`
                        <tr class='border-t border-gray-200'>
                            <td class='px-4 py-2 text-sm'>${trabajo.id}</td>
                            <td class='px-4 py-2 text-sm'>${trabajo.valida_cod_pedido}</td>
                            <td class="align-middle">
                                <p class="text-xs font-weight-bold mb-0">${trabajo.cliente}</p>
                                <p class="text-xs text-secondary mb-0">${trabajo.dni}</p>
                            </td>
                            <td class="align-middle">
                                <p class="text-xs font-weight-bold mb-0">${direccionCorta}</p>
                                <p class="text-xs text-secondary mb-0">Instalador: ${trabajo.tecnico}</p>
                            </td>
                            <td class="align-middle">
                                <p class="text-xs font-weight-bold mb-0">${trabajo.tipo_servicio}</p>
                                <p class="text-xs text-secondary mb-0">${trabajo.paquete}</p>
                            </td>
                            <td class='px-4 py-2 text-sm'>
                                <input type="date" class="form-control form-control-sm fecha-programacion" data-id="${trabajo.id}" value="${programacionFecha}">
                            </td>
                            <td class='px-4 py-2 text-sm'>
                                <input type="date" class="form-control form-control-sm fecha-registro" data-id="${trabajo.id}" value="${registroFecha}">
                            </td>
                            <td class='px-4 py-2 text-sm'>${trabajo.estado}</td>
                            <td class='px-4 py-2 text-sm'>
                                <button class='bg-red-500 text-white py-1 px-4 rounded-full hover:bg-red-700 focus:outline-none ml-2 eliminar' data-id="${trabajo.id}">Eliminar</button>
                            </td>
                        </tr>
                    `);
                });

                let maxBotones = 5;
                let inicio = Math.max(1, pagina - Math.floor(maxBotones / 2));
                let fin = Math.min(totalPaginas, inicio + maxBotones - 1);

               if (pagina > 1) {
    $('#paginacion').append(`
        <button class="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-300 ml-2" onclick="cargarTrabajos(${pagina - 1})">
            Anterior
        </button>
    `);
}

for (let i = inicio; i <= fin; i++) {
    $('#paginacion').append(`
        <button class="btn btn-sm bg-blue-500 text-white py-1 px-3 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 mx-1 ${pagina === i ? 'bg-blue-600 text-white' : ''}" onclick="cargarTrabajos(${i})">
            ${i}
        </button>
    `);
}

if (pagina < totalPaginas) {
    $('#paginacion').append(`
        <button class="btn btn-sm bg-gray-500 text-white py-1 px-3 rounded-full hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-300 mx-1" onclick="cargarTrabajos(${pagina + 1})">
            Siguiente
        </button>
    `);
}


                // Botón eliminar
                $('.eliminar').click(function () {
                    let idTrabajo = $(this).data('id');

                    Swal.fire({
                        title: "¿Estás seguro?",
                        text: "Esta acción no se puede deshacer.",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#d33",
                        cancelButtonColor: "#3085d6",
                        confirmButtonText: "Sí, eliminar",
                        cancelButtonText: "Cancelar"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: 'eliminar_trabajo.php',
                                type: 'POST',
                                data: { id: idTrabajo },
                                success: function () {
                                    Swal.fire("Eliminado", "El trabajo ha sido eliminado.", "success");
                                    cargarTrabajos();
                                },
                                error: function () {
                                    Swal.fire("Error", "No se pudo eliminar el trabajo.", "error");
                                }
                            });
                        }
                    });
                });

                // Actualizar programación
                $('.fecha-programacion').change(function () {
                    const id = $(this).data('id');
                    const fecha = $(this).val(); // yyyy-mm-dd

                    $.ajax({
                        url: 'actualizar_fecha.php',
                        type: 'POST',
                        data: { id, tipo: 'programacion', fecha },
                        success: function () {
                            Swal.fire("Actualizado", "Fecha de programación actualizada.", "success");
                        },
                        error: function () {
                            Swal.fire("Error", "No se pudo actualizar la fecha de programación.", "error");
                        }
                    });
                });

                // Actualizar fecha de registro
                $('.fecha-registro').change(function () {
                    const id = $(this).data('id');
                    const fecha = $(this).val();

                    $.ajax({
                        url: 'actualizar_fecha.php',
                        type: 'POST',
                        data: { id, tipo: 'registro', fecha },
                        success: function () {
                            Swal.fire("Actualizado", "Fecha de registro actualizada.", "success");
                        },
                        error: function () {
                            Swal.fire("Error", "No se pudo actualizar la fecha de registro.", "error");
                        }
                    });
                });
            }
        });
    };

    // Llamada inicial para cargar los trabajos
    cargarTrabajos(1);
    
   
});
</script>

</body>
</html>
  