<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- css datatable -->

    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">

    <!-- Bootstrap CSS v5.2.1 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">


</head>

<body>

    <div class="container-fluid">
        <!-- Button trigger modal -->
        <div class="row">

            <div class="card">
                <div class="card-header">
                    BUSCAR CONTRATOS
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="d-flex align-items-end">
                                <label for="fechaInicio">Fecha de Inicio:</label>
                                <input type="date" class="form-control" id="fechaInicio">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-end">
                                <label for="fechaFin">Fecha de Fin:</label>
                                <input type="date" class="form-control" id="fechaFin">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-grid gap-2">
                                <button class="btn btn-primary" id="buscarBtn">Buscar</button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-grid gap-2">
                                <button class="btn btn-success" id="nuevoBtn">Nuevo Registro</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>


        <div class="row">

            <div class="card">
                <div class="card-header">
                    LISTADO DE CONTRATOS
                </div>
                <div class="card-body">
                <table id="myTable" class="table table-striped" style="width:100%">
                <thead>
                    <tr>
                        <th>N°</th>
                        <th>TRABAJADOR</th>
                        <th>INICIO CONTRATO</th>
                        <th>FIN CONTRATO</th>
                        <th>SUELO</th>
                        <th>CARGO</th>
                        <th>AREA</th>
                        <th>SEGURO</th>
                   
                        <!-- Agrega más encabezados de columnas según tus necesidades -->
                    </tr>
                </thead>


       
            </table>
                </div>
            </div>


        </div>
    </div>
    <!-- jquery -->

    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
    </script>
    <!-- Bootstrap JavaScript Libraries -->

    <!-- datateble -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

</body>
<script>
$(document).ready(function() {
    let table = new DataTable('#myTable');

});
</script>




</html>



<div class="row">

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>


</div>

<?php /**PATH C:\xampp\htdocs\planilla-app\resources\views/view_contrato/contrato.blade.php ENDPATH**/ ?>