<?php
// Comienza la sesión antes de cualquier salida
session_start();

// Mostrar todos los errores (después de session_start)
ini_set('display_errors', 1);
error_reporting(E_ALL);

// Verificar si la sesión del usuario está activa
if (!isset($_SESSION['usuario'])) {
    header("Location: login_sistema.php");
    exit();
}

$usuario = $_SESSION['usuario'];
$nombre = $usuario['nombre'];
$cargo = $usuario['cargo'];
$foto = $usuario['foto'];
?>

<!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>
       <?php if ($cargo === 'logistico'): ?>
    <div class="ml-4 filter-menu h-12 p-btn rounded-full bg-gray-200 w-48 flex justify-between items-center">
  <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" required />
  </div>
</div>
<?php else: ?>
 <!-- Í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>
<?php endif; ?>

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

    </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="seriales_usados">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="seriales_no_usados">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 Seriados</div>
        <div class="flex justify-between items-center mb-4">

            <!-- Buscador -->
            <div class="flex items-center">
                <input type="text" placeholder="Buscar..." id="buscador" 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">
            </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 id="tablaTrabajos" class="min-w-full table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 text-left text-sm text-gray-600">Datos</th>
        <th class="px-4 py-2 text-left text-sm text-gray-600"></th>
        <th class="px-4 py-2 text-left text-sm text-gray-600"></th>
        <th class="px-4 py-2 text-left text-sm text-gray-600"></th>
       
        <th class="px-4 py-2 text-left text-sm text-gray-600">Accion</th>
      
      </tr>
    </thead>
    <tbody></tbody>
  </table>

    </div>
</div>


  </div>

</div> 

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



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

  


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




<!-- 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>
let todosLosTrabajos = [];

async function cargarTrabajosBloqueados() {
  const res = await fetch('listar_bloqueados.php');
  todosLosTrabajos = await res.json();
  mostrarTrabajos(todosLosTrabajos);
}

function mostrarTrabajos(trabajos) {
  const tbody = document.querySelector("#tablaTrabajos tbody");
  tbody.innerHTML = "";

  if (trabajos.length === 0) {
    const fila = document.createElement("tr");
    fila.innerHTML = `<td colspan="5" style="text-align: center; font-style: italic;">No hay trabajos bloqueados aún</td>`;
    tbody.appendChild(fila);
    return;
  }

  trabajos.forEach(trabajo => {
    const fila = document.createElement("tr");
    fila.classList.add("border-t", "border-gray-200");
    fila.innerHTML = `
      <td class="px-4 py-2 text-sm" style="text-align: left; font-size: 12px;">
        <div style="margin-bottom: 6px;">
          <p class="text-xs font-weight-bold mb-0">Cliente:</p>
          <p class="text-xs mb-0">${trabajo.cliente}</p>
        </div>
        <div>
          <p class="text-xs font-weight-bold mb-0">Pedido:</p>
          <p class="text-xs mb-0">${trabajo.codigo || '<span style="color: gray;">No disponible</span>'}</p>
        </div>
      </td>
      <td class="px-4 py-2 text-sm" style="text-align: left; font-size: 12px;">
        <div style="margin-bottom: 6px;">
          <p class="text-xs font-weight-bold mb-0">DNI:</p>
          <p class="text-xs mb-0">${trabajo.dni}</p>
        </div>
        <div>
          <p class="text-xs font-weight-bold mb-0">Dirección:</p>
          <p class="text-xs mb-0">${trabajo.direccion}</p>
        </div>
      </td>
      <td class="px-4 py-2 text-sm" style="text-align: left; font-size: 12px;">
        <div style="margin-bottom: 6px;">
          <p class="text-xs font-weight-bold mb-0">Distrito:</p>
          <p class="text-xs mb-0">${trabajo.distrito}</p>
        </div>
        <div>
          <p class="text-xs font-weight-bold mb-0">Técnico:</p>
          <p class="text-xs mb-0">${trabajo.tecnico}</p>
        </div>
      </td>
      <td class="px-4 py-2 text-sm" style="text-align: left; font-size: 12px;">
        <div style="margin-bottom: 6px;">
          <p class="text-xs font-weight-bold mb-0">Estado:</p>
          <p class="text-xs mb-0">${trabajo.estado}</p>
        </div>
        <div>
          <p class="text-xs font-weight-bold mb-0">Fecha:</p>
          <p class="text-xs mb-0">${trabajo.fecha_registro}</p>
        </div>
      </td>
      <td>
        <button class="desbloquear-btn" data-id="${trabajo.id}"
          style="padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">
          Desbloquear
        </button>
      </td>
    `;
    tbody.appendChild(fila);
  });

  // Eventos de desbloqueo
  document.querySelectorAll('.desbloquear-btn').forEach(boton => {
    boton.addEventListener('click', (event) => {
      const id = event.target.getAttribute('data-id');
      confirmarDesbloqueo(id, event.target);
    });
  });
}

// Filtro en tiempo real
document.getElementById("buscador").addEventListener("input", (e) => {
  const texto = e.target.value.toLowerCase();
  const filtrados = todosLosTrabajos.filter(t =>
    (t.codigo && t.codigo.toLowerCase().includes(texto)) ||
    (t.tecnico && t.tecnico.toLowerCase().includes(texto))
  );
  mostrarTrabajos(filtrados);
});




    // Función para mostrar confirmación antes de desbloquear
    function confirmarDesbloqueo(id, boton) {
      Swal.fire({
        title: '¿Estás seguro?',
        text: "¡El trabajo será desbloqueado y marcado como 'Pendiente'!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, desbloquear'
      }).then(async (result) => {
        if (result.isConfirmed) {
          desbloquearTrabajo(id, boton);  // Si confirma, desbloquear
        }
      });
    }

    // Función para desbloquear el trabajo
    async function desbloquearTrabajo(id, boton) {
      boton.disabled = true;
      const res = await fetch('desbloquear_trabajo.php', {
        method: 'POST',
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: `id=${id}`
      });

      const data = await res.json();

      // Mostrar mensaje con SweetAlert2
      Swal.fire({
        icon: 'success',
        title: '¡Desbloqueado!',
        text: data.mensaje,
        confirmButtonColor: '#007BFF'
      });

      cargarTrabajosBloqueados(); // Recargar tabla
    }

    // Cargar trabajos bloqueados al iniciar
    cargarTrabajosBloqueados();
  </script>
