<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require 'vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
use PhpOffice\PhpSpreadsheet\Style\Alignment;
use PhpOffice\PhpSpreadsheet\Style\Border;
use PhpOffice\PhpSpreadsheet\Style\Fill;

require 'conexion.php'; // Conexión a la base de datos

// Consulta para obtener los datos
$sql = "SELECT tf.*, 
    u.numero_cuadrilla AS cuadrilla,
    u.email AS correo_usuario,
    CONCAT(u.nombres, ' ', u.apellido_paterno, ' ', u.apellido_materno) AS nombre_usuario,
    h.herramienta, 
    h.cantidad,
    tf.trabajo_id_hidden AS pedido,
    tf.fecha_creacion  AS fecha_creacion,
    tf.serie_nueva AS serie_nueva,
    tf.serie_baja AS serie_baja,
    tf.cto AS cto_real,
    tf.metraje_termino AS drop2,  -- Renombramos 'drop' con comillas invertidas
    tf.foto_metraje_inicio AS fotoinicio,       -- Foto Drop Inicial
    tf.foto_metraje_termino AS fotofinal,         -- Foto Drop Final
    tf.comentario AS comentarios,  
    u.bodega,                    -- Este campo es importante para la columna Bodega
    tr.distrito AS distrito,     -- Agregamos el campo distrito de la tabla trabajos
    tr.paquete AS plan           -- Agregamos el campo plan (paquete) de la tabla trabajos
FROM trabajos_formulario tf
LEFT JOIN herramientas h ON tf.id = h.trabajo_id
LEFT JOIN usuarios u ON tf.user_id = u.id
LEFT JOIN trabajos tr ON tf.trabajo_id_hidden = tr.valida_cod_pedido
ORDER BY tf.id DESC;";



$result = $conn->query($sql);

// Cabeceras fijas definidas
$headers = [
    "Fecha/Hora", "Liquida", "Bodega", "TECNICO", "N° CUADRILLA", "PERFIL", "Pedido", "N° DOC", 
    "Nombres Cliente", "Dirección Cliente", "Distrito", "Fecha Atención", "Escenario", "Plan", 
    "CTO", "Tipo de Servicio", "Serie ONT - Nueva", "Serie ONT - Averiada", "Drop", "Foto Drop Inicial", 
    "Foto Final Drop", "Conectores SC/APC", "Pach Cord", "Roseta Óptica", "Cinta Doble Contacto (cm)", 
    "Clevys", "Hebillas", "Cinta Banding", "Tarugos", "Anclaje Tipo P", "Cintillo Rotulador", 
    "TEMPLADORES TIPO P", "Cintillo Num 20", "Grapas", "Cinta Aislante (cm)", "Número de Boleta", 
    "Foto Boleta"
];

// Recolecta las herramientas únicas
$tools = [];
while ($row = $result->fetch_assoc()) {
    if ($row['herramienta'] && !in_array($row['herramienta'], $tools)) {
        $tools[] = $row['herramienta'];
    }
}

// Agregar herramientas como cabeceras dinámicamente (solo herramientas únicas)
foreach ($tools as $tool) {
    if (!in_array($tool, $headers)) {
        $headers[] = $tool;  // Asegura que cada herramienta sea única
    }
}

// Mover la columna "Comentarios" al final
$headers[] = 'Comentarios';

if (isset($_GET['export']) && $_GET['export'] == 'excel') {
    $spreadsheet = new Spreadsheet();
    $sheet = $spreadsheet->getActiveSheet();
    $sheet->fromArray($headers, NULL, 'A1');

    // Estilo para las cabeceras
    $headerStyle = [
        'font' => [
            'bold' => true,
            'color' => ['argb' => 'FFFFFF'],  // Color de texto blanco
            'size' => 12
        ],
        'alignment' => [
            'horizontal' => Alignment::HORIZONTAL_CENTER,
            'vertical' => Alignment::VERTICAL_CENTER,
        ],
        'fill' => [
            'fillType' => Fill::FILL_SOLID,
            'startColor' => ['argb' => 'A8C9E7'],  // Color celeste para el fondo
        ],
        'borders' => [
            'allBorders' => [
                'borderStyle' => Border::BORDER_THIN,  // Bordes finos
                'color' => ['argb' => '000000'],  // Color negro para los bordes
            ],
        ]
    ];
    
    // Aplicar el estilo a las cabeceras (primera fila)
    $sheet->getStyle('A1:' . $sheet->getHighestColumn() . '1')->applyFromArray($headerStyle);

    // Organizar los trabajos
    $trabajos = [];
    $result->data_seek(0);
    
    // Organizar los trabajos y sus herramientas
    while ($row = $result->fetch_assoc()) {
        $trabajoId = $row['id'];
        if (!isset($trabajos[$trabajoId])) {
            $trabajos[$trabajoId] = [
                'datos' => $row,
                'herramientas' => [],
                'cantidades' => []
            ];
        }

        // Asociar las herramientas y cantidades al trabajo
        if ($row['herramienta']) {
            $trabajos[$trabajoId]['herramientas'][] = $row['herramienta'];
            $trabajos[$trabajoId]['cantidades'][] = $row['cantidad'];
        }
    }

    // Insertar los datos en el archivo Excel
    $rowNum = 2;  // Inicia en la fila 2 (después de las cabeceras)
    foreach ($trabajos as $trabajo) {
        $row = $trabajo['datos'];
        $data = array_fill(0, count($headers), ""); // Crear un array con el mismo tamaño que las cabeceras

        // Asignar los datos generales del trabajo
           $data[0] = isset($row["fecha_creacion"]) ? date("d/m/Y H:i", strtotime($row["fecha_creacion"])) : "";

        $data[1] = htmlspecialchars($row["liquida"] ?? "");
        $data[2] = htmlspecialchars($row["bodega"] ?? "");
        $data[3] = htmlspecialchars($row["nombre_usuario"] ?? "");
        $data[4] = htmlspecialchars($row["cuadrilla"] ?? "");
        $data[5] = htmlspecialchars($row["perfil"] ?? "");
        $data[6] = htmlspecialchars($row["pedido"] ?? "");
        $data[7] = htmlspecialchars($row["dni"] ?? "");
        $data[8] = htmlspecialchars($row["cliente"] ?? "");
        $data[9] = htmlspecialchars($row["direccion"] ?? "");
        $data[10] = htmlspecialchars($row["distrito"] ?? "");
        $data[11] = isset($row["created_at"]) ? date("d/m/Y", strtotime($row["created_at"])) : "";
        $data[12] = htmlspecialchars($row["escenario"] ?? "");
        $data[13] = htmlspecialchars($row["plan"] ?? "");
        $data[14] = htmlspecialchars($row["cto_real"] ?? "");
        $data[15] = htmlspecialchars($row["tipo_servicio"] ?? "");
        $data[16] = htmlspecialchars($row["serie_nueva"] ?? "");
        $data[17] = htmlspecialchars($row["serie_baja"] ?? "");
        $data[18] = htmlspecialchars($row["drop2"] ?? "");
         $data[19] = htmlspecialchars($row["fotoinicio"] ?? "");  // Foto Drop Inicial
    $data[20] = htmlspecialchars($row["fotofinal"] ?? ""); 
    // Foto Drop Final
        // Asignar las herramientas y sus cantidades en las columnas correspondientes
        foreach ($tools as $tool) {
            // Buscar la posición de la herramienta en las cabeceras
            $toolColumnIndex = array_search($tool, $headers);
            if ($toolColumnIndex !== false) {
                // Encontrar el índice de la herramienta en el trabajo actual
                $toolIndex = array_search($tool, $trabajo['herramientas']);
                if ($toolIndex !== false) {
                    $data[$toolColumnIndex] = htmlspecialchars($trabajo['cantidades'][$toolIndex]);
                }
            }
        }

        // Insertar el comentario en la última columna (comentarios)
        $data[count($headers) - 1] = htmlspecialchars($row["comentarios"] ?? "");

        // Insertar los datos de la fila en la hoja
        $sheet->fromArray($data, NULL, 'A' . $rowNum);
        $rowNum++;
    }

    // Ajustar automáticamente el ancho de las columnas según el contenido
    foreach ($headers as $index => $header) {
        $column = \PhpOffice\PhpSpreadsheet\Cell\Coordinate::stringFromColumnIndex($index + 1);
        $sheet->getColumnDimension($column)->setAutoSize(true);
    }

    // Guardar el archivo Excel
    $writer = new Xlsx($spreadsheet);
    $fileName = "datos_trabajos.xlsx";
    header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    header('Content-Disposition: attachment; filename="' . $fileName . '"');
    $writer->save('php://output');
}
?>




<!--
=========================================================
* Soft UI Dashboard 3 - v1.1.0
=========================================================

* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://www.creative-tim.com/license)
* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="76x76" href="https://cybernovasystems.com/prueba/pago/imagenes/logocofi.jpg">
  <link rel="icon" type="image/png" href="https://cybernovasystems.com/prueba/pago/imagenes/logocofi.jpg">
  <title>
Qodifica
  </title>
  <!--     Fonts and icons     -->
  <link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
  <!-- Nucleo Icons -->
  <link href="https://demos.creative-tim.com/soft-ui-dashboard/assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="https://demos.creative-tim.com/soft-ui-dashboard/assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons -->
  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
  <!-- CSS Files -->
  <link id="pagestyle" href="assets/css/soft-ui-dashboard.css?v=1.1.0" rel="stylesheet" />
  <!-- Nepcha Analytics (nepcha.com) -->
  <!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
  <script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
</head>

<body class="g-sidenav-show  bg-gray-100">
  <head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    
.icon-sm:not(.active) i {
    top: 2px;
    color: black;
    font-size: 0.65rem;
}
  </style>
</head>
<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 " id="sidenav-main">
  <div class="sidenav-header">
    <i class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i>
    <a class="navbar-brand m-0" href="https://qodifica.com/Qodifica/personal.php" target="_blank">
      <img src="https://cybernovasystems.com/prueba/pago/imagenes/logocofi.jpg" class="navbar-brand-img h-100" alt="main_logo">
      <span class="ms-1 font-weight-bold">Sistema de Liquidaciones</span>
    </a>
  </div>
  <hr class="horizontal dark mt-0">
  <div class="collapse navbar-collapse  w-auto " id="sidenav-collapse-main">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link " href="https://qodifica.com/Qodifica/personal.php">
          <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
            <i class="fas fa-tachometer-alt"></i>
          </div>
          <span class="nav-link-text ms-1">Personal</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://qodifica.com/Qodifica/trabajos.php">
          <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
            <i class="fas fa-table"></i>
          </div>
          <span class="nav-link-text ms-1">Trabajos</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="https://qodifica.com/Qodifica/series.php">
          <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
            <i class="fas fa-credit-card"></i>
          </div>
          <span class="nav-link-text ms-1">Series</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="https://qodifica.com/Qodifica/lista_trabajos_liquidados.php">
          <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
            <i class="fas fa-check-circle"></i>
          </div>
          <span class="nav-link-text ms-1">Trabajos Liquidados</span>
        </a>
      </li>
    </ul>
  </div>
</aside>
  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur" navbar-scroll="true">
      <div class="container-fluid py-1 px-3">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pagina</a></li>
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Modulo</li>
          </ol>
          <h6 class="font-weight-bolder mb-0">Trabajos</h6>
        </nav>
        <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
          <div class="ms-md-auto pe-md-3 d-flex align-items-center">
            
          </div>
          <ul class="navbar-nav  justify-content-end">
            <li class="nav-item d-flex align-items-center">
              <a class="btn btn-outline-primary btn-sm mb-0 me-3" target="_blank" href="https://www.creative-tim.com/builder?ref=navbar-soft-ui-dashboard">Version 1</a>
            </li>
            <li class="nav-item d-flex align-items-center">
              <a href="javascript:;" class="nav-link text-body font-weight-bold px-0">
                <i class="fa fa-user me-sm-1"></i>
                <span class="d-sm-inline d-none">Sign In</span>
              </a>
            </li>
          
              </a>
            
            </li>
          </ul>
        </div>
      </div>
    </nav>
      <div class="relative flex flex-col min-w-0 mb-6 break-words bg-white dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border">
    <div class="flex-auto p-4">
        <div class="flex flex-wrap -mx-3">
            <div class="flex-none w-full max-w-full px-3">
                <div>
                    <p class="mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60">Selecciona tu archivo Excel</p>
                     <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="archivo_excel" id="archivo_excel" accept=".xlsx, .xls" required>
        <button type="submit">Subir</button>
    </form>
    <div id="mensaje"></div> 
                </div>
            </div>
            <div class="w-4/12 max-w-full px-3 text-right flex-0">
                <div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
                    <i class="ni leading-none ni-upload text-lg relative top-3.5 text-white" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-6 col-12">
        <div class="card">
            <span class="mask bg-primary opacity-10 border-radius-lg"></span>
            <div class="card-body p-3 position-relative">
                <div class="row">
                    <div class="col-8 text-start">
                        <div class="icon icon-shape bg-white shadow text-center border-radius-2xl">
                            <i class="fa fa-tasks text-dark text-gradient text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                        <h5 class="text-white font-weight-bolder mb-0 mt-3">
                            <span id="pendientes">0</span>
                        </h5>
                        <span class="text-white text-sm">Pendientes</span>
                    </div>
                    <div class="col-4">
                        <div class="dropdown text-end mb-6">
                            <a href="javascript:;" class="cursor-pointer" id="dropdownPendientes" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-ellipsis-h text-white"></i>
                            </a>
                            <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownPendientes">
                                <li><a class="dropdown-item border-radius-md" href="javascript:;">Acción</a></li>
                                <li><a class="dropdown-item border-radius-md" href="javascript:;">Otra acción</a></li>
                                <li><a class="dropdown-item border-radius-md" href="javascript:;">Algo más</a></li>
                            </ul>
                        </div>
                        <p class="text-white text-sm text-end font-weight-bolder mt-auto mb-0">+55%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6 col-md-6 col-12 mt-4 mt-md-0">
        <div class="card">
            <span class="mask bg-dark opacity-10 border-radius-lg"></span>
            <div class="card-body p-3 position-relative">
                <div class="row">
                    <div class="col-8 text-start">
                        <div class="icon icon-shape bg-white shadow text-center border-radius-2xl">
                            <i class="fa fa-check-circle text-dark text-gradient text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                        <h5 class="text-white font-weight-bolder mb-0 mt-3">
                            <span id="terminados">0</span>
                        </h5>
                        <span class="text-white text-sm">Terminados</span>
                    </div>
                    <div class="col-4">
                        <div class="dropstart text-end mb-6">
                            <a href="javascript:;" class="cursor-pointer" id="dropdownTerminados" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-ellipsis-h text-white"></i>
                            </a>
                            <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownTerminados">
                                <li><a class="dropdown-item border-radius-md" href="javascript:;">Acción</a></li>
                                <li><a class="dropdown-item border-radius-md" href="javascript:;">Otra acción</a></li>
                                <li><a class="dropdown-item border-radius-md" href="javascript:;">Algo más</a></li>
                            </ul>
                        </div>
                        <p class="text-white text-sm text-end font-weight-bolder mt-auto mb-0">+124%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- End Navbar -->
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-12">
          <div class="card mb-4">
            <div class="card-header pb-0">
              <h6>Listado de Seriados</h6>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
              <div class="table-responsive p-0">
               <a href="?export=excel"><button>Exportar a Excel</button></a>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Listado de Trabajos</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Listado de Trabajos</h1>

    <!-- Campo de búsqueda -->
    <input type="text" id="searchInput" placeholder="Buscar por nombre, pedido, serie nueva o dirección" oninput="buscarTrabajos()">

    <!-- Botones de acción -->
    <button onclick="seleccionarTodo()">Seleccionar Todo</button>
    <button onclick="cambiarResidencia()">Cambiar a Residencial/Condominio</button>

    <!-- 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">Serie Nueva</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Serie Baja</th>
           
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">CTO Real</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Dirección Cliente</th>
        </tr>
    </thead>
    <tbody>
        <!-- Los resultados se cargarán aquí -->
    </tbody>
</table>

<!-- 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>
                        <input type="text" class="form-control" id="editSerieNueva" name="serie_nueva">
                    </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>

    <script>
// Función para cargar los trabajos desde la API
function cargarTrabajos(searchTerm = '') {
    fetch('getTrabajos.php?searchTerm=' + searchTerm)
        .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 text-center text-xs font-weight-bold mb-0">
                        ${trabajo.pedido}
                    </td>
                    <td class="align-middle">
                        <p class="text-xs font-weight-bold mb-0">${trabajo.nombre_usuario}</p>
                    </td>
                  
                    <td class="align-middle text-xs font-weight-bold mb-0">
                        ${trabajo.serie_nueva}
                    </td>
                    <td class="align-middle text-xs font-weight-bold mb-0">
                        ${trabajo.serie_baja}
                    </td>
            
                    <td class="align-middle text-xs font-weight-bold mb-0">
                        ${trabajo.cto_real}
                    </td>
                    <td class="align-middle text-xs text-secondary mb-0">
                        ${trabajo.direccion_cliente}
                    </td>
                    <!-- Mostrar las fotos con enlace para abrir en modal -->
                    <td class="align-middle text-center">
                        ${trabajo.foto_metraje_inicio ? 
                            `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_metraje_inicio}">
                                <img src="https://qodifica.com/formulario/${trabajo.foto_metraje_inicio}" alt="Foto de inicio" style="width: 50px; height: 50px;">
                            </a>` 
                            : 'No disponible'}
                    </td>
                    <td class="align-middle text-center">
                        ${trabajo.foto_metraje_termino ? 
                            `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_metraje_termino}">
                                <img src="https://qodifica.com/formulario/${trabajo.foto_metraje_termino}" alt="Foto de término" style="width: 50px; height: 50px;">
                            </a>` 
                            : 'No disponible'}
                    </td>
                     <td class="text-center">
                                <button class="btn btn-danger btn-sm" onclick="anularPedido(${trabajo.id})">Anular Pedido</button>
                                  <button class="btn btn-warning btn-sm" onclick="editarPedido(${trabajo.id})">Editar</button>
                            </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));
}
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 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>
</body>
</html>



              </div>
            </div>
          </div>
        </div>
      </div>
     
   <footer class="footer pt-3">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-lg-between">
      <div class="col-lg-6 mb-lg-0 mb-4">
        <div class="copyright text-center text-sm text-muted text-lg-start">
          © <script>
            document.write(new Date().getFullYear())
          </script>,
          hecho con <i class="fa fa-heart"></i> por
          <a href="https://www.cybernovasystems.com" class="font-weight-bold" target="_blank">CyberNovaSystems</a>
          para una web mejor.
        </div>
      </div>
      <div class="col-lg-6">
        <ul class="nav nav-footer justify-content-center justify-content-lg-end">
          <li class="nav-item">
            <a href="https://www.cybernovasystems.com" class="nav-link text-muted" target="_blank">CyberNovaSystems</a>
          </li>
          <li class="nav-item">
            <a href="https://www.cybernovasystems.com/acerca-de" class="nav-link text-muted" target="_blank">Sobre nosotros</a>
          </li>
          <li class="nav-item">
            <a href="https://www.cybernovasystems.com/blog" class="nav-link text-muted" target="_blank">Blog</a>
          </li>
          <li class="nav-item">
            <a href="https://www.cybernovasystems.com/terminos-y-condiciones" class="nav-link pe-0 text-muted" target="_blank">Licencia</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

    </div>
  </main>
  <div class="fixed-plugin">
    <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
      <i class="fa fa-cog py-2"> </i>
    </a>
    <div class="card shadow-lg ">
      <div class="card-header pb-0 pt-3 ">
        <div class="float-start">
          <h5 class="mt-3 mb-0">Soft UI Configurator</h5>
          <p>See our dashboard options.</p>
        </div>
        <div class="float-end mt-4">
          <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
            <i class="fa fa-close"></i>
          </button>
        </div>
        <!-- End Toggle Button -->
      </div>
      <hr class="horizontal dark my-1">
      <div class="card-body pt-sm-3 pt-0">
        <!-- Sidebar Backgrounds -->
        <div>
          <h6 class="mb-0">Sidebar Colors</h6>
        </div>
        <a href="javascript:void(0)" class="switch-trigger background-color">
          <div class="badge-colors my-2 text-start">
            <span class="badge filter bg-primary active" data-color="primary" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-dark" data-color="dark" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-info" data-color="info" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-success" data-color="success" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-warning" data-color="warning" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-danger" data-color="danger" onclick="sidebarColor(this)"></span>
          </div>
        </a>
        <!-- Sidenav Type -->
        <div class="mt-3">
          <h6 class="mb-0">Sidenav Type</h6>
          <p class="text-sm">Choose between 2 different sidenav types.</p>
        </div>
        <div class="d-flex">
          <button class="btn btn-primary w-100 px-3 mb-2 active" data-class="bg-transparent" onclick="sidebarType(this)">Transparent</button>
          <button class="btn btn-primary w-100 px-3 mb-2 ms-2" data-class="bg-white" onclick="sidebarType(this)">White</button>
        </div>
        <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
        <!-- Navbar Fixed -->
        <div class="mt-3">
          <h6 class="mb-0">Navbar Fixed</h6>
        </div>
        <div class="form-check form-switch ps-0">
          <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)">
        </div>
        <hr class="horizontal dark my-sm-4">
        <a class="btn bg-gradient-dark w-100" href="https://www.creative-tim.com/product/soft-ui-dashboard">Free Download</a>
        <a class="btn btn-outline-dark w-100" href="https://www.creative-tim.com/learning-lab/bootstrap/license/soft-ui-dashboard">View documentation</a>
        <div class="w-100 text-center">
          <a class="github-button" href="https://github.com/creativetimofficial/soft-ui-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star creativetimofficial/soft-ui-dashboard on GitHub">Star</a>
          <h6 class="mt-3">Thank you for sharing!</h6>
          <a href="https://twitter.com/intent/tweet?text=Check%20Soft%20UI%20Dashboard%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23bootstrap5&amp;url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fsoft-ui-dashboard" class="btn btn-dark mb-0 me-2" target="_blank">
            <i class="fab fa-twitter me-1" aria-hidden="true"></i> Tweet
          </a>
          <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/soft-ui-dashboard" class="btn btn-dark mb-0 me-2" target="_blank">
            <i class="fab fa-facebook-square me-1" aria-hidden="true"></i> Share
          </a>
        </div>
      </div>
    </div>
  </div>
  <!--   Core JS Files   -->
  <script src="../assets/js/core/popper.min.js"></script>
  <script src="../assets/js/core/bootstrap.min.js"></script>
  <script src="../assets/js/plugins/perfect-scrollbar.min.js"></script>
  <script src="../assets/js/plugins/smooth-scrollbar.min.js"></script>
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
  <!-- Github buttons -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="../assets/js/soft-ui-dashboard.min.js?v=1.1.0"></script>
</body>

</html>





