@extends('layouts.basictemplate')
@section('css')
    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet" >
@stop
@section('content')
    <table id="list-usersApp" class="table table-striped table-bordered shadow-lg mt-4" style="width:100%">
        <thead class="bg-primary text-white">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Nombre</th>
            <th scope="col">Apellido</th>
            <th scope="col">Tipo identificación</th>
            <th scope="col">Identificación</th>
            <th scope="col">Email</th>
            <th scope="col">Telefono</th>
            <th scope="col">Canal origen</th>
            <th scope="col">Acciones</th>
        </tr>
        </thead>
        <tbody>
            @foreach ( $usersApp as $userApp)
            <tr>
                <td>{{ $userApp->id  }}</td>
                <td>{{ $userApp->nombre  }}</td>
                <td>{{ $userApp->apellido  }}</td>
                <td>{{ $userApp->tipo_identificacion  }}</td>
                <td>{{ $userApp->identificacion  }}</td>
                <td>{{ $userApp->email  }}</td>
                <td>{{ $userApp->telefono  }}</td>
                <td>{{ $userApp->canal_origen  }}</td>
                <td>
                    <form action="{{ route('usersApp.destroy', $userApp->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <a href="/usersApp/{{ $userApp->id }}/edit" class="btn btn-info">Editar</a>
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
@stop

@section('js')
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function () {
        $('#list-usersApp').DataTable({
            "lengthMenu": [[5,10,50,-1], [5,10,50,"Todos"]],
            "language": {
                url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json',
            },
        });
    });
</script>
@stop