File "computers.php"
Full Path: C:/wamp64/www/RegistroEquipos/frontend/computers/computers.php
File size: 35.59 KB
MIME-type: text/x-php
Charset: utf-8
<?php
require_once '../../backend/tempoSesion.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registro de Computadores</title>
<link rel="stylesheet" href="./computers.css?php echo time(); ?>" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery 3.x -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<!-- CSS de DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!-- JS de DataTables -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<!-- jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- jsPDF AutoTable -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link rel="icon" type="image/png" href="../img/icono.png" />
</head>
<body>
<div class="container lg-10">
<ul class="nav nav-tabs" id="mainTabs">
<li class="nav-item"><button class="nav-link" type="button" onclick="window.location.href='../menu/menu.php'">Menú</button></li>
<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dashboard-content">Dashboard</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#form-content">Formulario</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#table-content">Registros</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#inventario-content">Inventario</button></li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#otros-content" type="button">
Otros Equipos
</button>
</li>
</ul>
<div class="mt-3 text-center"><img src="../img/avicampo.jpeg" alt="Imagen" style="width:200px;"></div>
<div class="tab-content">
<!-- DASHBOARD -->
<div class="tab-pane fade show active" id="dashboard-content">
<h1 class="mt-4 text-center">Dashboard de Computadores</h1>
<!-- Tarjetas de entregados/devueltos -->
<div class="row mb-4">
<div class="col-md-6"><div class="card text-white bg-success mb-3"><div class="card-header"><i class="fas fa-check-circle"></i> Computadores Entregados</div><div class="card-body"><h2 class="card-title" id="stat-entregados">0</h2></div></div></div>
<div class="col-md-6"><div class="card text-white bg-dark mb-3"><div class="card-header"><i class="fas fa-undo-alt"></i> Computadores Devueltos</div><div class="card-body"><h2 class="card-title" id="stat-devueltos">0</h2></div></div></div>
</div>
<!-- Tarjetas de inventario -->
<div class="row mb-4">
<div class="col-md-3"><div class="card text-white bg-info mb-3"><div class="card-header"><i class="fas fa-box"></i> Disponibles</div><div class="card-body"><h2 class="card-title" id="stat-disponibles">0</h2></div></div></div>
<div class="col-md-3"><div class="card text-white bg-primary mb-3"><div class="card-header"><i class="fas fa-user-check"></i> Asignados</div><div class="card-body"><h2 class="card-title" id="stat-asignados">0</h2></div></div></div>
<div class="col-md-3"><div class="card text-white bg-warning mb-3"><div class="card-header"><i class="fas fa-tools"></i> Mantenimiento</div><div class="card-body"><h2 class="card-title" id="stat-mantenimiento">0</h2></div></div></div>
<div class="col-md-3"><div class="card text-white bg-danger mb-3"><div class="card-header"><i class="fas fa-trash"></i> Baja</div><div class="card-body"><h2 class="card-title" id="stat-baja">0</h2></div></div></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white"><i class="fas fa-chart-pie"></i> Estado de Computadores (Entregados/Devueltos)</div>
<div class="card-body"><canvas id="chartComputadores" style="max-height:300px;"></canvas></div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white"><i class="fas fa-chart-pie"></i> Inventario (Disponibles vs Asignados)</div>
<div class="card-body"><canvas id="chartInventario" style="max-height:300px;"></canvas></div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header bg-info text-white"><i class="fas fa-chart-bar"></i> Condición de Equipos en Inventario</div>
<div class="card-body"><canvas id="chartCondiciones" style="max-height:300px;"></canvas></div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<button id="btnActualizarDashboard" class="btn btn-primary btn-lg w-100"><i class="fas fa-sync-alt"></i> Actualizar Dashboard</button>
</div>
</div>
</div>
<!-- FORMULARIO -->
<div class="tab-pane fade" id="form-content">
<h1 class="mt-4 text-center">Registro de Computadores <i class="fa-solid fa-desktop"></i></h1>
<form id="formComputadores" class="mt-4">
<input type="hidden" name="id_inventario" id="id_inventario">
<!-- Fila 1: Marca, Equipo disponible, Serial -->
<div class="row mb-3">
<div class="col-md-4">
<label for="marca" class="required-field">Marca <i class="fa-solid fa-industry"></i></label>
<select id="marca" name="marca" class="form-select">
<option value="" selected disabled>Cargando marcas...</option>
</select>
</div>
<div class="col-md-4">
<label for="equipo_select" class="required-field">Equipo disponible <i class="fa-solid fa-desktop"></i></label>
<select id="equipo_select" class="form-select" disabled>
<option value="">Primero seleccione una marca</option>
</select>
</div>
<div class="col-md-4">
<label for="serial" class="required-field">Número de serie <i class="fa-solid fa-barcode"></i></label>
<input type="text" id="serial" name="serial" class="form-control" readonly />
</div>
</div>
<!-- Fila 2: RAM, Windows, ID Producto -->
<div class="row mb-3">
<div class="col-md-4">
<label for="ram" class="required-field">Memoria RAM (GB) <i class="fa-solid fa-memory"></i></label>
<input type="text" id="ram" name="ram" class="form-control" />
</div>
<div class="col-md-4">
<label for="windows" class="required-field">Licencia De Windows <i class="fa-brands fa-windows"></i></label>
<input type="text" id="windows" name="windows" class="form-control" />
</div>
<div class="col-md-4">
<label for="Idproducto" class="required-field">ID. Producto <i class="fa-solid fa-id-card"></i></label>
<input type="text" id="Idproducto" name="Idproducto" class="form-control" />
</div>
</div>
<!-- Fila 3: Office, Teléfono, Referencia -->
<div class="row mb-3">
<div class="col-md-4">
<label for="office" class="required-field">Licencia Office <i class="fa-solid fa-windows"></i></label>
<input type="text" id="office" name="office" class="form-control" />
</div>
<div class="col-md-4">
<label for="telefono" class="required-field">Teléfono <i class="fa-solid fa-phone"></i></label>
<input type="text" id="telefono" name="telefono" class="form-control" />
</div>
<div class="col-md-4">
<label for="referencia" class="required-field">Referencia/Modelo <i class="fa-solid fa-desktop"></i></label>
<input type="text" id="referencia" name="referencia" class="form-control" />
</div>
</div>
<!-- Fila 4: Software Instalado y Unidades de Red -->
<div class="row mb-3">
<div class="col-md-6">
<label for="software">Software Instalado <i class="fa-solid fa-network-wired"></i></label>
<input type="text" id="software" name="software" class="form-control" placeholder="Detalles de los software instalados.">
</div>
<div class="col-md-6">
<label for="red">Unidades De Red <i class="fa-solid fa-network-wired"></i></label>
<input type="text" id="red" name="red" class="form-control" placeholder="Detalles de las Unidades de red instaladas.">
</div>
</div>
<h5 style="text-align: center;">COMPUTADOR EQUIPOS</h5>
<!-- Fila 5: Regional, Área de trabajo, Tipo disco duro, Procesador, Tipo equipo -->
<div class="row mb-3">
<div class="col-md-4">
<label for="regional" class="required-field">Regional <i class="fa-solid fa-location-dot"></i></label>
<select id="regional" name="regional" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="Avicampo">Avicampo</option>
<option value="Pavos Del Campo">Pavos Del Campo</option>
<option value="Piku">Piku</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="col-md-4">
<label for="area_trabajo" class="required-field">Área de trabajo <i class="fa-solid fa-building"></i></label>
<select id="area_trabajo" name="area_trabajo" class="form-select">
<option value="">Seleccione...</option>
<option value="Administración">Administración</option>
<option value="Contabilidad">Contabilidad</option>
<option value="Recursos Humanos">Recursos Humanos</option>
<option value="Producción">Producción</option>
<option value="Ventas">Ventas</option>
<option value="Mantenimiento">Mantenimiento</option>
<option value="Logistica">Logística</option>
<option value="Comercial">Comercial</option>
<option value="Calidad">Calidad</option>
<option value="Tesoreria">Tesorería</option>
<option value="Abonos">Abonos</option>
<option value="Granjas">Granjas</option>
<option value="Compras">Compras</option>
<option value="Ambiental">Ambiental</option>
<option value="Sistemas">Sistemas</option>
</select>
</div>
<div class="col-md-4">
<label for="tipo_dd" class="required-field">Tipo de disco duro <i class="fa-solid fa-hard-drive"></i></label>
<select id="tipo_dd" name="tipo_dd" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="HDD">HDD (Mecánico)</option>
<option value="SSD">SSD (Estado sólido) SATA 2.5</option>
<option value="NVMe">SSD NVMe M.2</option>
<option value="Mixto (HDD+SSD)">Mixto (HDD+SSD)</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="col-md-4">
<label for="procesador" class="required-field">Procesador <i class="fa-solid fa-microchip"></i></label>
<select id="procesador" name="procesador" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="Core i3">Core i3</option>
<option value="Core i5">Core i5</option>
<option value="Core i7">Core i7</option>
<option value="Ryzen 3">Ryzen 3</option>
<option value="Ryzen 5">Ryzen 5</option>
<option value="Ryzen 7">Ryzen 7</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="col-md-4">
<label for="tipo" class="required-field">Tipo de equipo <i class="fa-solid fa-laptop"></i></label>
<select id="tipo" name="tipo" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="Portátil">Portátil</option>
<option value="All-in-One">Todo en uno</option>
<option value="Pantalla/Monitor">Pantalla/Monitor</option>
<option value="Teclados">Teclados</option>
</select>
</div>
</div>
<!-- Fila 6: Usuario, Contraseña -->
<div class="row mb-3">
<div class="col-md-6">
<label for="usuario1" class="required-field">Usuario <i class="fa-solid fa-user"></i></label>
<input type="text" id="usuario1" name="usuario1" class="form-control" />
</div>
<div class="col-md-6">
<label for="contrasena" class="required-field">Contraseña <i class="fa-solid fa-key"></i></label>
<input type="text" id="contrasena" name="contrasena" class="form-control" />
</div>
</div>
<!-- Fila 7: Nombre recibe, Cédula, Cargo -->
<div class="row mb-3">
<div class="col-md-4">
<label for="NombreRecibe" class="required-field">Nombre de quien recibe <i class="fa-solid fa-file-signature"></i></label>
<input type="text" id="NombreRecibe" name="nombreRecibe" class="form-control" />
</div>
<div class="col-md-4">
<label for="cedula" class="required-field">Cédula <i class="fa-regular fa-address-card"></i></label>
<input type="number" id="cedula" name="cedula" class="form-control" />
</div>
<div class="col-md-4">
<label for="cargo" class="required-field">Cargo <i class="fa-solid fa-address-book"></i></label>
<input type="text" id="cargo" name="cargo" class="form-control" />
</div>
</div>
<!-- Observaciones -->
<div class="mb-3">
<label for="observaciones">Observaciones <i class="fa-regular fa-note-sticky"></i></label>
<textarea id="observaciones" name="observaciones" class="form-control" placeholder="Detalles adicionales, estado del equipo, etc."></textarea>
</div>
<!-- Fila: Firma e Imagen -->
<div class="row align-items-end mt-4">
<div class="col-md-6 text-center mb-3">
<label for="firmaCanvas" class="form-label fw-bold">Firma de recibido:</label><br />
<canvas id="firmaCanvas" width="450" height="300" style="border:1px solid #000; max-width:100%; background:#fff;"></canvas>
<input type="hidden" id="firmaComputadores" name="firmaComputadores" /><br />
<button type="button" class="btn btn-secondary mt-2" onclick="limpiarFirma('firmaCanvas','firmaComputadores')"><i class="fas fa-eraser"></i> Limpiar firma</button>
</div>
</div>
<div class="text-center mt-3">
<button type="button" id="guardarBtn" class="btn btn-primary">Registrar Equipo</button>
</div>
<div id="spinner" class="spinner" style="display:none;"></div>
</form>
</div>
<!-- TABLA DE REGISTROS -->
<div class="tab-pane fade" id="table-content">
<h2 class="mt-4 text-center">Tabla de Registros Computadores</h2>
<div class="text-center mb-3">
<button id="btnCargarRegistros" class="btn btn-primary me-2"><span class="spinner-border spinner-border-sm me-2 d-none" id="spinnerCargar"></span>Cargar Registros</button>
<button id="btnDescargarPDF" class="btn btn-danger me-2" disabled>Descargar PDF</button>
<button id="btnDescargarExcel" class="btn btn-success" disabled>Descargar EXCEL</button>
</div>
<div style="width:100%; overflow:hidden;">
<table id="tablaRegistros" class="table table-bordered text-center align-middle">
<thead style="background-color:#b1b1b1;">
<th>Fecha</th><th>Marca</th><th>Referencia</th><th>Tipo</th><th>RAM</th><th>Serial</th><th>Tipo DD</th><th>Procesador</th><th>Área</th><th>Nombre</th><th>Cédula</th><th>Entregó</th><th>Observaciones</th><th>Firma</th><th>Imagen</th><th>Imagen 2</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- INVENTARIO (con condición) -->
<div class="tab-pane fade" id="inventario-content">
<div class="filtros-inventario card p-3 mb-4 shadow-sm border-0" style="background-color: #f8f9fc; border-radius: 15px;">
<div class="row g-3 align-items-end">
<div class="col-md-4">
<label for="filtroEstadoInventario" class="form-label fw-semibold text-primary">
<i class="fas fa-filter me-1"></i> Estado
</label>
<div class="input-group">
<span class="input-group-text bg-white border-end-0"><i class="fas fa-tag text-primary"></i></span>
<select id="filtroEstadoInventario" class="form-select border-start-0 ps-0">
<option value="">Todos los estados</option>
<option value="disponible">Disponibles</option>
<option value="asignado">Asignados</option>
<option value="reparacion">Mantenimiento</option>
<option value="baja">Dados de baja</option>
</select>
</div>
</div>
<div class="col-md-4">
<label for="filtroCondicionInventario" class="form-label fw-semibold text-success">
<i class="fas fa-clipboard-check me-1"></i> Condición
</label>
<div class="input-group">
<span class="input-group-text bg-white border-end-0"><i class="fas fa-star text-success"></i></span>
<select id="filtroCondicionInventario" class="form-select border-start-0 ps-0">
<option value="">Todas las condiciones</option>
<option value="excelente">Excelente</option>
<option value="bueno">Bueno</option>
<option value="regular">Regular</option>
<option value="malo">Malo</option>
</select>
</div>
</div>
<div class="col-md-4 d-flex align-items-end">
<button id="btnLimpiarFiltrosInventario" class="btn btn-outline-secondary w-100 py-2 border-2 fw-semibold">
<i class="fas fa-broom me-2"></i>Limpiar filtros
</button>
</div>
</div>
</div>
<h2 class="mt-4 text-center">Inventario de Computadores</h2>
<div class="text-center mb-3">
<button id="btnCargarInventario" class="btn btn-primary me-2"><span class="spinner-border spinner-border-sm me-2 d-none" id="spinnerInventario"></span>Cargar Inventario</button>
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalAgregarInventario"><i class="fas fa-plus"></i> Agregar Equipo</button>
<button id="btnExportarExcelInventario" class="btn btn-success ms-2"><i class="fas fa-file-excel"></i> Exportar Excel</button>
</div>
<div style="width:100%; overflow-x:auto;">
<table id="tablaInventario" class="table table-bordered text-center align-middle">
<thead style="background-color:#b1b1b1;">
<tr>
<th>ID</th>
<th>Marca</th>
<th>Referencia</th>
<th>Serial</th>
<th>RAM</th>
<th>Procesador</th>
<th>Estado</th>
<th>Condición</th>
<th>Veces asignado</th>
<th>tipo PC</th>
<th>Imagen</th>
<th>Imagen 2</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- OTROS EQUIPOS (NUEVO DISEÑO) -->
<div class="tab-pane fade" id="otros-content">
<h2 class="mt-4 text-center">Registro de Otros Equipos</h2>
<div class="text-center mb-3">
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalAgregarOtroEquipo">
<i class="fas fa-plus"></i> Agregar Equipo
</button>
<button id="btnCargarOtros" class="btn btn-primary ms-2">
<span class="spinner-border spinner-border-sm me-2 d-none" id="spinnerCargarOtros"></span>
Cargar Registros
</button>
<button id="btnDescargarExcelOtros" class="btn btn-success ms-2" disabled>
<i class="fas fa-file-excel"></i> Exportar Excel
</button>
</div>
<div style="width:100%; overflow-x:auto;">
<table id="tablaOtrosEquipos" class="table table-bordered text-center align-middle">
<thead style="background-color:#b1b1b1;">
<tr>
<th>Fecha</th>
<th>Tipo</th>
<th>Marca</th>
<th>Serial / IMEI</th>
<th>Observaciones</th>
<th>Firma</th>
<th>Quien entrega</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Modal para agregar equipo al inventario (con todos los campos necesarios) -->
<div class="modal fade" id="modalAgregarInventario" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Agregar Equipo al Inventario</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="formInventario">
<!-- Fila 1: Marca, Referencia, Serial -->
<div class="row mb-3">
<div class="col-md-4">
<label for="invMarca" class="required-field">Marca</label>
<select id="invMarca" name="marca" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="Dell">Dell</option><option value="Asus">Asus</option><option value="Samsung">Samsung</option><option value="Lenovo">Lenovo</option><option value="HP">HP</option>
</select>
</div>
<div class="col-md-4">
<label for="invReferencia" class="required-field">Referencia</label>
<input type="text" id="invReferencia" name="referencia" class="form-control">
</div>
<div class="col-md-4">
<label for="invSerial" class="required-field">Serial</label>
<input type="text" id="invSerial" name="serial" class="form-control">
</div>
</div>
<!-- Fila 2: RAM, Procesador -->
<div class="row mb-3">
<div class="col-md-4">
<label for="invRam">RAM</label>
<input type="text" id="invRam" name="ram" class="form-control">
</div>
<div class="col-md-4">
<label for="invTprocesador" class="required-field">Procesador <i class="fa-solid fa-microchip"></i></label>
<select id="invTprocesador" name="procesador" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="Core i3">Core i3</option>
<option value="Core i5">Core i5</option>
<option value="Core i7">Core i7</option>
<option value="Ryzen 3">Ryzen 3</option>
<option value="Ryzen 5">Ryzen 5</option>
<option value="Ryzen 7">Ryzen 7</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="col-md-4">
<label for="invTipoDD">Tipo de disco duro</label>
<select id="invTipoDD" name="tipo_dd" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="HDD">HDD (Mecánico)</option>
<option value="SSD">SSD (Estado sólido) SATA 2.5</option>
<option value="NVMe">SSD NVMe M.2</option>
<option value="Mixto (HDD+SSD)">Mixto (HDD+SSD)</option>
<option value="N/A">N/A</option>
</select>
</div>
</div>
<!-- Fila 3: Tipo de equipo, Área de trabajo, Regional -->
<div class="row mb-3">
<div class="col-md-4">
<label for="invTipoEquipo">Tipo de equipo</label>
<select id="invTipoEquipo" name="tipo_equipo" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="Portátil">Portátil</option>
<option value="All-in-One">Todo en uno</option>
<option value="Pantalla/Monitor">Pantalla/Monitor</option>
<option value="Tablets">Tablets</option>
</select>
</div>
<div class="col-md-4">
<label for="invArea">Área de trabajo</label>
<select id="invArea" name="area_trabajo" class="form-select">
<option value="">Seleccione...</option>
<option value="Administración">Administración</option>
<option value="Contabilidad">Contabilidad</option>
<option value="Recursos Humanos">Recursos Humanos</option>
<option value="Producción">Producción</option>
<option value="Ventas">Ventas</option>
<option value="Mantenimiento">Mantenimiento</option>
<option value="Logistica">Logística</option>
<option value="Comercial">Comercial</option>
<option value="Calidad">Calidad</option>
<option value="Tesoreria">Tesorería</option>
<option value="Abonos">Abonos</option>
<option value="Granjas">Granjas</option>
<option value="Compras">Compras</option>
<option value="Ambiental">Ambiental</option>
<option value="Sistemas">Sistemas</option>
</select>
</div>
<div class="col-md-4">
<label for="invRegional">Regional</label>
<select id="invRegional" name="regional" class="form-select">
<option value="" selected disabled>Seleccione...</option>
<option value="Avicampo">Avicampo</option>
<option value="Pavos Del Campo">Pavos Del Campo</option>
<option value="Piku">Piku</option>
<option value="N/A">N/A</option>
</select>
</div>
</div>
<!-- Fila 4: Windows, ID Producto, Office -->
<div class="row mb-3">
<div class="col-md-4">
<label for="invWindows">Licencia Windows</label>
<input type="text" id="invWindows" name="windows" class="form-control">
</div>
<div class="col-md-4">
<label for="invIdProducto">ID Producto</label>
<input type="text" id="invIdProducto" name="id_producto" class="form-control">
</div>
<div class="col-md-4">
<label for="invOffice">Licencia Office</label>
<input type="text" id="invOffice" name="office" class="form-control">
</div>
</div>
<!-- Fila 5: Teléfono, Software, Red -->
<div class="row mb-3">
<div class="col-md-4">
<label for="invTelefono">Teléfono</label>
<input type="text" id="invTelefono" name="telefono" class="form-control">
</div>
<div class="col-md-4">
<label for="invSoftware">Software Instalado</label>
<input type="text" id="invSoftware" name="software" class="form-control">
</div>
<div class="col-md-4">
<label for="invRed">Unidades de Red</label>
<input type="text" id="invRed" name="red" class="form-control">
</div>
</div>
<!-- Fila 6: Estado y Condición -->
<div class="row mb-3">
<div class="col-md-6">
<label for="invEstado" class="form-label">Estado</label>
<select id="invEstado" name="estado" class="form-select">
<option value="disponible">Disponible</option>
<option value="asignado">Asignado</option>
<option value="reparacion">Mantenimiento</option>
<option value="baja">Dado de baja</option>
</select>
</div>
<div class="col-md-6">
<label for="invCondicion" class="form-label">Condición</label>
<select id="invCondicion" name="condicion" class="form-select">
<option value="excelente">Excelente</option>
<option value="bueno">Bueno</option>
<option value="regular">Regular</option>
<option value="malo">Malo</option>
</select>
</div>
<div id="contenedorpc" class="col-md-6 text-center mb-3">
<label class="form-label fw-bold">Imagen del Equipo:</label>
<input type="file" class="form-control mb-2" name="imagenComputadores" id="imagenComputadores" accept="image/*">
<div id="previewComputadores" style="border:2px dashed #ccc; height:250px; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#f8f9fa; border-radius:10px;">
<span id="previewTextComputadores" style="color:#6c757d;">Previsualización de Imagen</span>
</div>
<input type="hidden" name="base64Computadores" id="base64Computadores">
<input type="button" class="btn btn-light btn-sm mt-2" id="clearBtnComputadores" value="Limpiar Imagen">
</div>
<div id="contenedorpc1" class="col-md-6 text-center mb-3">
<label class="form-label fw-bold">Imagen del Equipo 2:</label>
<input type="file" class="form-control mb-2" name="imagenpc" id="imagenpc" accept="image/*">
<div id="previewpc" style="border:2px dashed #ccc; height:250px; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#f8f9fa; border-radius:10px;">
<span id="previewTextpc" style="color:#6c757d;">Previsualización de Imagen</span>
</div>
<input type="hidden" name="base64pc" id="base64pc">
<input type="button" class="btn btn-light btn-sm mt-2" id="clearBtnpc" value="Limpiar Imagen">
</div>
</div>
<!-- Observaciones -->
<div class="mb-3">
<label for="invObservaciones">Observaciones</label>
<textarea id="invObservaciones" name="observaciones" class="form-control" rows="2"></textarea>
</div>
<div class="text-end">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal para agregar otro equipo (Otros Equipos) -->
<div class="modal fade" id="modalAgregarOtroEquipo" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Agregar Registro de Otro Equipo</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="formOtrosEquipos">
<div class="mb-3">
<label for="tipo_computador" class="form-label required-field">Tipo de computador</label>
<select id="tipo_computador" name="tipo_computador" class="form-select" required>
<option value="">Seleccione...</option>
<option value="Portátil">Portátil</option>
<option value="All-in-One">Todo en uno</option>
<option value="Escritorio">Escritorio</option>
<option value="Tablet">Tablet</option>
<option value="Otro">Otro</option>
</select>
</div>
<div class="mb-3">
<label for="marca_otro" class="form-label required-field">Marca</label>
<input type="text" id="marca_otro" name="marca_otro" class="form-control" required>
</div>
<div class="mb-3">
<label for="serial_otro" class="form-label required-field">Serial / IMEI</label>
<input type="text" id="serial_otro" name="serial_otro" class="form-control" required>
</div>
<div class="mb-3">
<label for="observaciones_otro" class="form-label required-field">Observaciones</label>
<textarea id="observaciones_otro" name="observaciones_otro" class="form-control" rows="3" required></textarea>
</div>
<div class="mb-3 text-center">
<label class="form-label fw-bold">Firma de recibido:</label><br />
<canvas id="firmaCanvasOtros" width="450" height="200" style="border:1px solid #000; max-width:100%; background:#fff;"></canvas>
<input type="hidden" id="firmaOtrosEquipos" name="firmaOtrosEquipos" /><br />
<button type="button" class="btn btn-secondary mt-2" onclick="limpiarFirma('firmaCanvasOtros','firmaOtrosEquipos')"><i class="fas fa-eraser"></i> Limpiar firma</button>
</div>
<div class="text-end">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="button" id="guardarBtnOtros" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="./computers.js?php echo date('YmdHis') . microtime(true); ?>"></script>
<script src="/frontend/JS/sesionActivity.js"></script>
</body>
</html>