<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Planilla de Registro</title>
<link rel="icon" type="image/png" href="../../img/icono.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- DataTables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<!-- Export to Excel and PDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<!-- SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Responsive extension -->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<link href="planilla.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<div class="container mt-5">
<div class="card shadow" style="margin-top:100px; margin-bottom:30px;">
<div class="text-center p-3">
<div class="mb-3">
<img src="../../img/avic.jpeg" alt="Logo" style="height: 100px;">
</div>
<div class="mb-3">
<div class="btn btn-regresar-naranja text-white p-2 rounded d-inline-block shadow-sm" style="min-width: 60%;">
<h2 class="m-0">Planilla Entrega Carnets</h2>
</div>
</div>
<div class="mb-2">
<a href="../../Personal/index.php" class="btn btn-danger">
<i class="fas fa-arrow-left"></i> Regresar
</a>
</div>
</div>
<div class="card-body">
<!-- Navegación por pestañas -->
<ul class="nav nav-tabs" id="registroTabs" role="tablist">
<li class="nav-item">
<button class="nav-link active" id="registro-tab" data-bs-toggle="tab" data-bs-target="#registro" type="button" role="tab">Registro</button>
</li>
<li class="nav-item">
<button class="nav-link" id="registros-tab" data-bs-toggle="tab" data-bs-target="#registros" type="button" role="tab"> Consultar Registros </button>
</li>
</ul>
<!-- Contenido de las pestañas -->
<div class="tab-content mt-3">
<!-- Pestaña 1: Registro -->
<div class="tab-pane fade show active" id="registro" role="tabpanel">
<h2>Buscar Proveedor</h2>
<form id="buscarForm2" method="GET" action="">
<div class="mb-3">
<label for="cedula" class="form-label" style="font-weight:bold">Buscar Colaborador:</label><br>
</div>
<div class="input-group mb-3">
<input type="text" id="cedula" name="cedula" class="form-control" placeholder="Ingrese la cédula" required>
<button type="submit" class="btn btn-primary" style="width: 100px;">
<i class="fas fa-search"></i> Buscar
</button>
</div>
</form><br>
<legend style="border-bottom: 4px dotted; color:coral"></legend>
<form id="formRegistro" action="../backend/insert.php" method="POST">
<div class="mb-3">
<label for="nombre" class="form-label" style="font-weight:bold">Nombre:</label>
<input type="text" class="form-control" id="nombre" name="nombre" />
</div>
<div class="mb-3">
<label for="cedula" class="form-label" style="font-weight:bold">Cédula:</label>
<input type="text" class="form-control" id="cedula" name="cedula" />
</div>
<div class="mb-3">
<label for="cargo" class="form-label" style="font-weight:bold">Cargo:</label>
<input type="text" class="form-control" id="cargo" name="cargo" />
</div>
<div class="mb-3">
<label for="ejecucion" class="form-label" style="font-weight:bold">Ejecucion:</label>
<select class="form-select" id="ejecucion" name="ejecucion" required>
<option value="" selected hidden>Selecciona</option>
<option value="ENTREGA">Entrega</option>
<option value="CAMBIO">Cambio</option>
<option value="PERDIDA">Perdida</option>
</select>
</div>
<div class="mb-3">
<label for="firmaCanvas" class="form-label" style="font-weight:bold">Firma:</label
><br />
<canvas id="firmaCanvas" width="600" height="300" style="border: 3px solid #359100"></canvas>
<input type="hidden" id="firma" name="firma" /><br>
<button type="button" onclick="limpiarFirma()">Limpiar firma</button>
</div>
<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-success">Registrar</button>
</div>
</div>
</form>
<div class="tab-pane fade" id="registros" role="tabpanel">
<label for="inputCedula" class="form-label">Buscar por cédula</label>
<div class="input-group mb-3">
<input type="text" id="cedulaInput" class="form-control" placeholder="Ingrese la cédula"/>
<button id="btnBuscarCedula" class="btn btn-primary" type="button" style="width:100px"><i class="fas fa-search"></i>Buscar</button>
</div>
<div style="overflow-x:auto;">
<table class="" id="tablaDatos">
<thead>
<tr>
<th style="min-width:50px">Id</th>
<th style="min-width:100px">Fecha</th>
<th style="min-width:150px">Nombre</th>
<th>Cédula</th>
<th style="min-width:150px">Cargo</th>
<th>Ejecucion</th>
<th>Firma</th>
</tr>
</thead>
<tbody>
<!-- Datos se cargarán aquí -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="bootstrapToast" class="toast position-fixed top-50 start-50 translate-middle m-3" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body" id="toastBody">Texto de prueba</div>
</div>
</div>
<script src="planilla.js"></script>
<script src="select.js"></script>
</body>
</html>