<?php
include("conexion.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
}

// Obtener datos del usuario actual
$id_usuario = $_SESSION['id_usuario'];
$usuario = $conexion->query("SELECT * FROM usuarios_sistema WHERE id_usuario = $id_usuario")->fetch_assoc();
$rol_actual = $usuario['rol'];
$id_empresa_usuario = $usuario['id_empresa'];

// Consultar las series de baja para la empresa del usuario
$query = "SELECT * FROM series_baja WHERE id_empresa = ?";
$stmt = $conexion->prepare($query);
$stmt->bind_param("i", $id_empresa_usuario);
$stmt->execute();
$result = $stmt->get_result();

?>

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

 <!-- Í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 doa y serie de baja</div>
        <div class="flex justify-between items-center mb-4">

            <!-- Buscador -->
            <div class="flex items-center">
                <input type="text" placeholder="Buscar Serie o Serie Baja..." id="search" 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>
                <button onclick="document.getElementById('modalGuias').classList.remove('hidden')" class="bg-blue-600 text-white px-4 py-2 rounded">
    Ver Guías Registradas
</button>
            </div>
        </div>
<form id="formAsignarProveedor" method="POST">
    <div class="mb-4">

    
          <button type="button" onclick="seleccionarTodo()" class="bg-blue-500 text-white px-4 py-2 rounded ml-4">
        Seleccionar Todo
    </button>
    </div>

    <!-- Tabla de Resultados -->
    <table class="w-full table-auto" id="tablaGuias">
        <thead>
            <tr class="bg-blue-600 text-white">
                <th class="p-3">Seleccionar</th>
                <th class="p-3 text-left">Serie</th>
                <th class="p-3 text-left">Técnico</th>
                <th class="p-3 text-left">Pedido</th>
                <th class="p-3 text-left">Fecha</th>
                <th class="p-3 text-left">Estado</th>
                 <th class="p-3 text-left">Accion</th>
            </tr>
        </thead>
        <tbody>
            <!-- Las filas se llenarán con JavaScript -->
        </tbody>
    </table>

    <div class="mt-4">
        <label for="proveedor" class="block">Nombre del Proveedor:</label>
        <input type="text" name="proveedor" id="proveedor" required class="border rounded p-2 w-full">
        <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded mt-2">Asignar y Guardar</button>
    </div>
</form>

<!-- Paginación -->
<div id="paginacion" class="mt-4 flex justify-center">
    <!-- Los botones de paginación se llenarán con JavaScript -->
</div>

<script>
// Función para cargar las series de baja con búsqueda (sin paginación)
function cargarSeriesBaja() {
    const search = document.getElementById('search').value;

    const xhr = new XMLHttpRequest();
    xhr.open('GET', `listar_guias_chatarra.php?search=${search}`, true);
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.onload = function() {
        if (xhr.status === 200) {
            try {
                const data = JSON.parse(xhr.responseText);
                mostrarSeriesBaja(data.series_baja);
            } catch (error) {
                console.error('Error al parsear la respuesta JSON', error);
            }
        } else {
            console.error('Error al cargar las series de baja');
        }
    };

    xhr.send();
}

// Función para mostrar las series en la tabla
// Función para mostrar las series en la tabla
function mostrarSeriesBaja(seriesBaja) {
    const tablaBody = document.getElementById('tablaGuias').getElementsByTagName('tbody')[0];
    tablaBody.innerHTML = ''; // Limpiar la tabla antes de mostrar nuevas series

    if (seriesBaja.length === 0) {
        tablaBody.innerHTML = '<tr><td colspan="6" class="text-center p-3">No se encontraron resultados</td></tr>';
        return;
    }

    seriesBaja.forEach(serie => {
        const fila = document.createElement('tr');
        fila.classList.add('border-b', 'hover:bg-gray-100');
        fila.innerHTML = `
            <td class="p-3">
                <input type="checkbox" name="seleccionados[]" value="${serie.id}|${
                    serie.serie && serie.serie.trim() !== '' ? serie.serie : (serie.serie_baja ?? '')
                }">
            </td>

            <td class="p-3">
                ${
                    serie.serie_baja && serie.serie_baja.trim() !== ''
                        ? `<span class="text-yellow-500">${serie.serie_baja}</span>`
                        : `<span class="text-red-600">${serie.serie ?? 'Sin Serie'}</span>`
                }
            </td>
            <td class="p-3">
                ${serie.nombre_tecnico ? serie.nombre_tecnico : `${serie.nombres} ${serie.apellido_paterno} ${serie.apellido_materno}`}
            </td>
            <td class="p-3">${serie.trabajo_id_hidden}</td>
            <td class="p-3">${serie.fecha}</td>
            <td class="p-3">${serie.estado}</td>
            <td class="p-3">
    ${serie.estado === 'llegada' 
        ? `<button class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded" onclick="marcarDevuelto(${serie.id})">Técnico Entregó</button>`
        : `<span>${serie.estado}</span>`
    }
</td>

        `;
        tablaBody.appendChild(fila);
    });
}

function seleccionarTodo() {
    const checkboxes = document.querySelectorAll('input[type="checkbox"][name="seleccionados[]"]');
    checkboxes.forEach(checkbox => checkbox.checked = true);
}

// Evento de búsqueda en tiempo real
document.getElementById('search').addEventListener('input', function() {
    cargarSeriesBaja();
});
function marcarDevuelto(id) {
    Swal.fire({
        title: '¿Estás seguro?',
        text: '¿Confirmas que el técnico entregó la serie?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, confirmar'
    }).then((result) => {
        if (result.isConfirmed) {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'marcar_devuelto.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function () {
                if (xhr.status === 200) {
                    try {
                        const res = JSON.parse(xhr.responseText);
                        if (res.success) {
                            Swal.fire({
                                title: 'Actualizado',
                                text: 'Estado actualizado a DEVUELTO',
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                cargarSeriesBaja(); // recargar la tabla
                            });
                        } else {
                            Swal.fire('Error', res.message, 'error');
                        }
                    } catch (error) {
                        console.error('Respuesta inválida:', error);
                        Swal.fire('Error', 'Ocurrió un problema al procesar la respuesta.', 'error');
                    }
                } else {
                    Swal.fire('Error', 'Error en la solicitud al servidor', 'error');
                }
            };

            xhr.send('id=' + id);
        }
    });
}



// Cargar las series de baja al inicio
window.onload = function() {
    cargarSeriesBaja();
};
</script>




<div id="modalGuias" class="fixed inset-0 bg-opacity-50 flex justify-center items-center z-50 hidden px-4">
    <div class="bg-white w-full max-w-6xl rounded-lg shadow-lg p-6 relative">
        <button onclick="document.getElementById('modalGuias').classList.add('hidden')" class="absolute top-2 right-2 text-gray-500 hover:text-red-600">
            ✖
        </button>
        <h2 class="text-2xl font-bold mb-4 text-blue-700 text-center">Guías Registradas</h2>

        <div class="flex gap-4">
            <!-- Tabla de Guías -->
            <div class="w-1/2 overflow-x-auto border-r pr-4">
                <table class="table-auto w-full border">
                    <thead class="bg-blue-600 text-white">
                        <tr>
                            <th class="p-3 text-left">#</th>
                            <th class="p-3 text-left">Proveedor</th>
                            <th class="p-3 text-left">Fecha</th>
                            <th class="p-3 text-left">Usuario</th>
                            <th class="p-3 text-left">Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        include("conexion.php");
                        $id_usuario = $_SESSION['id_usuario'] ?? 0;
                        $usuario = $conexion->query("SELECT id_empresa FROM usuarios_sistema WHERE id_usuario = $id_usuario")->fetch_assoc();
                        $id_empresa = $usuario['id_empresa'] ?? 0;
                        $guias = $conexion->query("
                            SELECT g.*, u.nombre_usuario 
                            FROM guias_salida_devolucion g
                            JOIN usuarios_sistema u ON u.id_usuario = g.id_usuario
                            WHERE g.id_empresa = $id_empresa
                            ORDER BY g.fecha_registro DESC
                        ");

                        while ($row = $guias->fetch_assoc()):
                        ?>
                        <tr class="border-b hover:bg-gray-100">
                            <td class="p-3"><?php echo $row['id_guia']; ?></td>
                            <td class="p-3"><?php echo htmlspecialchars($row['nombre_proveedor']); ?></td>
                            <td class="p-3"><?php echo $row['fecha_registro']; ?></td>
                            <td class="p-3"><?php echo htmlspecialchars($row['nombre_usuario']); ?></td>
                            <td class="p-3">
                                <button onclick="verDetalleGuia(<?php echo $row['id_guia']; ?>)" class="bg-green-600 text-white px-3 py-1 rounded">
                                    Ver Detalle
                                </button>
                            </td>
                        </tr>
                        <?php endwhile; ?>
                    </tbody>
                </table>
            </div>

            <!-- Detalle de la Guía -->
            <div class="w-1/2 bg-gray-50 p-4 rounded border h-[500px] overflow-y-auto" id="detalleGuiaContainer">
                <p class="text-gray-500 text-center mt-20">Selecciona una guía para ver el detalle aquí</p>
            </div>
        </div>
    </div>
</div>
<script>
function verDetalleGuia(idGuia) {
    fetch('detalle_guia_chatarra.php?id_guia=' + idGuia)
        .then(res => res.json())
        .then(data => {
            const container = document.getElementById('detalleGuiaContainer');

            if (data.error) {
                container.innerHTML = `<p class="text-red-600">${data.error}</p>`;
                return;
            }

            const { info, series } = data;

            let html = `
                <div class="mb-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-semibold text-blue-700 text-lg">Detalle de Guía</h3>
                        <div class="space-x-2">
                            <button onclick="imprimirDetalle()" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded">🖨 Imprimir</button>
                            <button onclick="descargarPDF()" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">⬇ PDF</button>
                        </div>
                    </div>
                    <div id="contenidoParaImprimir">
                        <p><strong>Proveedor:</strong> ${info.nombre_proveedor}</p>
                        <p><strong>Registrado por:</strong> ${info.nombres}</p>
                        <p><strong>Fecha:</strong> ${info.fecha_registro}</p>

                        <h4 class="mt-4 font-semibold text-blue-700">Series incluidas:</h4>
                        <table class="table-auto w-full border mt-2">
                            <thead class="bg-blue-600 text-white">
                                <tr>
                                    <th class="p-2">ID Serie</th>
                                    <th class="p-2">Tipo</th>
                                    <th class="p-2">Serie Baja</th> <!-- Añadimos columna para serie_baja -->
                                </tr>
                            </thead>
                            <tbody>`;

            if (series.length > 0) {
                series.forEach(item => {
                    // Comprobamos si existe serie o serie_baja, y mostramos solo uno
                    let serieDisplay = item.serie ? item.serie : (item.serie_baja ? item.serie_baja : 'N/A');
                    html += `<tr class="border-b hover:bg-gray-100">
                                <td class="p-2">${item.id_serie}</td>
                                <td class="p-2">${item.tipo_serie}</td>
                                <td class="p-2">${serieDisplay}</td>
                            </tr>`;
                });
            } else {
                html += `<tr><td colspan="3" class="text-center p-4">No hay series registradas</td></tr>`;
            }

            html += `</tbody></table>
                    </div>
                </div>
            `;

            container.innerHTML = html;
        })
        .catch(() => {
            document.getElementById('detalleGuiaContainer').innerHTML = `<p class="text-red-600">Error al obtener datos</p>`;
        });
}

function imprimirDetalle() {
    const contenido = document.getElementById('contenidoParaImprimir').innerHTML;
    const ventana = window.open('', '', 'height=600,width=800');
    ventana.document.write('<html><head><title>Detalle de Guía</title>');
    ventana.document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">');
    ventana.document.write('</head><body class="p-6">');
    ventana.document.write(contenido);
    ventana.document.write('</body></html>');
    ventana.document.close();
    ventana.print();
}

function descargarPDF() {
    alert("Aquí puedes integrar jsPDF o html2pdf si deseas descargar el PDF automáticamente.");
    // Puedes usar librerías como html2pdf.js o jspdf para generar y descargar un PDF
}
</script>



<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
 $("#formAsignarProveedor").on("submit", function(e) {
    e.preventDefault();

    // Verificar si al menos una serie está seleccionada
    if ($("input[name='seleccionados[]']:checked").length === 0) {
        Swal.fire({
            icon: 'warning',
            title: 'Atención',
            text: 'Debe seleccionar al menos una serie'
        });
        return;
    }

    // Verificar qué datos están siendo seleccionados y enviar solo el ID de la serie
    let seleccionados = [];
    $("input[name='seleccionados[]']:checked").each(function() {
        let serie = $(this).val().split('|')[0]; // Obtener solo el ID de la serie (antes del |)
        seleccionados.push(serie); // Guardar solo el ID
    });

    console.log("Series seleccionadas (solo IDs):", seleccionados); // Ver los IDs en la consola

    // Ahora creamos un nuevo objeto con los datos correctos
    $.ajax({
        url: "asignar_proveedor.php",
        type: "POST",
        data: {
            seleccionados: seleccionados, // Enviar solo los IDs seleccionados
            proveedor: $("input[name='proveedor']").val() // Obtener el proveedor
        },
        dataType: "json",
        success: function(response) {
            if (response.success) {
                // Mostrar un solo mensaje de éxito con la información de la guía
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    html: `
                        ${response.message}<br><br>
                        <strong>Total seleccionados:</strong> ${response.total_seleccionados}<br>
                        <strong>Válidos:</strong> ${response.validos}<br>
                        <strong>No válidos:</strong> ${response.no_validos}
                    `
                });
            } else {
                let errores = response.errors ? response.errors.join("\n") : response.message;
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: errores // Muestra los errores si no todos los estados son 'devueltos'
                });
            }
        },
        error: function(xhr, status, error) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: "Error en la solicitud AJAX: " + error
            });
        }
    });
});

</script>

    </div>
</div>


  </div>

</div> 

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


<?php
$stmt->close();
$conexion->close();
?>
