<?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.perfil AS perfil,
    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,
    tr.programacion AS programacion,
    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 con correcciones ortográficas y estandarización
$headers = [
    "FECHA LIQUIDADOR", 
    "BODEGA", 
    "TECNICO", 
    "N° K", 
    "PERFIL", 
    "PEDIDO", 
    "N° DOC", 
    "CLIENTE", 
    "DIRECCION", 
    "DISTRITO", 
    "F. ATENCION", 
    "ESCENARIO", 
    "PLAN", 
    "CTO", 
    "TIPO DE SERVICIO", 
    "ONT NUEVA", 
    "ONT AVERIADA",  // Corregido: "ONT AVERIADA"
    "DROP", 
    "CONECTORES SC/APC",  // Corregido: "CONECTORES SC/APC"
    "PATCH CORD",  // Corregido: "PATCH CORD"
      "ACOPLADOR",
    "ROSETA ÓPTICA",  // Corregido: "ROSETA ÓPTICA"
    "CINTA DOBLE CONTACTO (CM)",
    "CLEVYS", 
    "HEBILLAS", 
    "CINTA BANDING", 
    "TARUGOS", 
    "ANCLAJE TIPO P", 
    "CINTILLO ROTULADOR", 
    "TEMPLADORES TIPO P", 
    "CINTILLO NUM 20",  // Corregido: "CINTILLO NUM 20"
    "GRAPAS", 
    "CINTA AISLANTE",
];

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

// Agregar herramientas como cabeceras dinámicamente (solo herramientas únicas)
foreach ($tools as $tool) {
    if (!in_array(strtolower($tool), array_map('strtolower', $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["bodega"] ?? "");
        $data[2] = htmlspecialchars($row["nombre_usuario"] ?? "");
        $data[3] = htmlspecialchars($row["cuadrilla"] ?? "");
        $data[4] = htmlspecialchars($row["perfil"] ?? "");
        $data[5] = htmlspecialchars($row["pedido"] ?? "");
        $data[6] = htmlspecialchars($row["dni"] ?? "");
        $data[7] = htmlspecialchars($row["cliente"] ?? "");
        $data[8] = htmlspecialchars($row["direccion"] ?? "");
        $data[9] = htmlspecialchars($row["distrito"] ?? "");
        $data[10] = htmlspecialchars($row["programacion"] ?? "");
        $data[11] = htmlspecialchars($row["escenario"] ?? "");
        $data[12] = htmlspecialchars($row["plan"] ?? "");
        $data[13] = htmlspecialchars($row["cto_real"] ?? "");
        $data[14] = htmlspecialchars($row["tipo_servicio"] ?? "");
        $data[15] = htmlspecialchars($row["serie_nueva"] ?? "");
        $data[16] = htmlspecialchars($row["serie_baja"] ?? "");
        $data[17] = htmlspecialchars($row["drop2"] ?? "");

        // Asignar las herramientas y sus cantidades en las columnas correspondientes
        foreach ($tools as $tool) {
            $toolColumnIndex = array_search(strtolower($tool), array_map('strtolower', $headers));
            if ($toolColumnIndex !== false) {
                $toolIndex = array_search($tool, $trabajo['herramientas']);
                $data[$toolColumnIndex] = $toolIndex !== false ? $trabajo['cantidades'][$toolIndex] : "";
            }
        }

        // Insertar el comentario en la última columna (comentarios)
        $data[count($headers) - 1] = htmlspecialchars($row["comentarios"] ?? "");
        // Escribir 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);
    }
    // Generar el archivo Excel
    $writer = new Xlsx($spreadsheet);
    $fileName = 'Reporte_trabajos_' . date('Ymd_His') . '.xlsx';
    $writer->save($fileName);

    // Forzar la descarga del archivo generado
    header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    header('Content-Disposition: attachment;filename="' . $fileName . '"');
    header('Cache-Control: max-age=0');
    readfile($fileName);
    exit();
}
?>



<!--
=========================================================
* 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</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>
       <!-- Nuevo campo de menú "Bloqueados" -->
      <li class="nav-item">
        <a class="nav-link" href="https://qodifica.com/Qodifica/trabajos_bloqueado.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-lock"></i>
          </div>
          <span class="nav-link-text ms-1">Bloqueados</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>

    <!-- 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 class="btn btn-export">
        <i class="fas fa-file-excel"></i> Exportar a Excel
    </button>
</a>

<!-- Campo de búsqueda con ícono -->
<div class="search-container">
    <input type="text" id="searchInput" class="search-input" placeholder="Buscar por nombre, pedido, serie nueva o dirección" oninput="buscarTrabajos()">
    <i class="fas fa-search search-icon"></i>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                    <!-- Agrupar fotos y botones en una sola celda -->
                    <td class="align-middle text-center">
                        <div class="foto-y-botones">
                            <!-- Foto de inicio -->
                            ${trabajo.foto_metraje_inicio ? 
                                `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_metraje_inicio}">
                                    <img src="https://qodifica.com/formulario/${trabajo.foto_metraje_inicio}" alt="Foto de inicio" style="width: 50px; height: 50px;">
                                </a>` 
                                : 'No disponible'}

                            <!-- Foto de término -->
                            ${trabajo.foto_metraje_termino ? 
                                `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_metraje_termino}">
                                    <img src="https://qodifica.com/formulario/${trabajo.foto_metraje_termino}" alt="Foto de término" style="width: 50px; height: 50px;">
                                </a>` 
                                : 'No disponible'}
  <!-- Foto de término -->
                            ${trabajo.foto_boleta ? 
                                `<a href="#" class="foto-link" data-foto="https://qodifica.com/formulario/${trabajo.foto_boleta}">
                                    <img src="https://qodifica.com/formulario/${trabajo.foto_boleta}" alt="Foto de término" style="width: 50px; height: 50px;">
                                </a>` 
                                : 'No disponible'}
                            <!-- Botones de acción -->
                            <div class="mt-2">
                                <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>
                                <button class="btn btn-info btn-sm" onclick="abrirModalHerramientas(${trabajo.id})">Ferreteria</button>

                            </div>
                        </div>
                    </td>
                `;
                tbody.appendChild(tr);
            });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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





