@extends('layouts.app')

@section('title', 'DataTable Personalizado')

@section('content')

        <h1>DataTable</h1>
        <table id="example" class="display nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>Ver</th>
                    <th>Orden de Servicio</th>
                    <th>Referencia</th>
                    <th>Fecha Salida</th>
                    <th>Fecha de Entrega</th>
                    <th>Tipo Envío</th>
                    <th>Descripción</th>
                    <th>Destinatario</th>
                    <th>Origen</th>
                    <th>Destino</th>
                    <th>Incidencia</th>
                    <th>Ultima Incidencia</th>
                    <th>Fecha Ult Incidencia</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>visibility</td>
                    <td>36000009712</td>
                    <td>923455 S19547070</td>
                    <td>26/09/2025</td>
                    <td>30/09/2025</td>
                    <td>TERRESTRE</td>
                    <td>5 BULTOS FISICOS</td>
                    <td>Corporacion Iglesia De Los Adv</td>
                    <td>LOS ANGELES</td>
                    <td>LOS ANGELES</td>
                    <td>SI</td>
                    <td>BULTO FALTANTE</td>
                    <td>29/09/2025</td>
                </tr>
                <tr>
                    <td>visibility</td>
                    <td>36000009583</td>
                    <td>303722 S19546673</td>
                    <td>24/09/2025</td>
                    <td>25/09/2025</td>
                    <td>TERRESTRE</td>
                    <td>RDEN DELIVERY 0019546673</td>
                    <td>CLINICA MAITENES</td>
                    <td>MELIPILLA</td>
                    <td>SANTIAGO</td>
                    <td>SI</td>
                    <td>CARGA NO ARRIBA AGENCIA</td>
                    <td>26/09/2025</td>
                </tr>
                <tr>
                    <td>visibility</td>
                    <td>36000009535</td>
                    <td>303761 S19546209</td>
                    <td>24/09/2025</td>
                    <td>29/09/2025</td>
                    <td>TERRESTRE</td>
                    <td>rden BBraun asoc. 0019546209</td>
                    <td>Hospital Regional De Valdivia</td>
                    <td>VALDIVIA</td>
                    <td>VALDIVIA</td>
                    <td>SI</td>
                    <td>CARGA NO ARRIBA AGENCIA</td>
                    <td>25/09/2025</td>
                </tr>
            </tbody>
        </table>

    {{-- JS + DataTables --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>

    <script>
        $(document).ready(function () {
            $('#example').DataTable({
                paging: true,
                searching: true,
                autoWidth: true,
                responsive: true,
                dom: 'Bfrtip',
                buttons: ['excelHtml5', 'csvHtml5'],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json'
                }
            });
        });
    </script>
@endsection