@extends('layouts.plantillabase');

@section('css')
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">

@endsection

@section('contenido')
<a href="clientes/create" class="btn btn-primary mb-3">CREAR</a>

<table id="clientes" 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">Clave</th>
            <th scope="col">Empresa</th>
            <th scope="col">Contacto</th>
            <th scope="col">Correo</th>
            <th scope="col">Acciones</th>
        </tr>
        
    </thead>
    <tbody>
    @foreach ($clientes as $cliente)
        <tr>
            <td>{{$cliente->id}}</td>
            <td>{{$cliente->clave}}</td>
            <td>{{$cliente->empresa}}</td>
            <td>{{$cliente->contacto}}</td>
            <td>{{$cliente->correo}}</td>
            <td>
                <form action="{{ route ('clientes.destroy',$cliente->id)}}" method="POST">
                <a href="/clientes/{{ $cliente->id}}/edit" class="btn btn-info">Editar</a>
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Borrar</button>
                </form>
            </td>
        </tr>
    @endforeach    
    </tbody>  
</table>

@section('js')
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function() {
    $('#clientes').dataTable();
} );
</script>

@endsection
@endsection