@extends('layouts.app')
@section('content')
   <div class="card">
      <div class="card-header">
         <h2>Lista de Clientes</h2>
      </div>
      <div class="card-body">
         <div class="row">
            <div class="col text-end">
               <a href="{{ route('clientes.create') }}" class="btn btn-success">Crear Cliente</a>
            </div>
         </div>
         <table id="tablaCategorias" data-toggle="table" data-locale="es-ES" data-search="true" data-sort-order="asc"
               data-pagination="true" data-page-size="10" data-page-list="[5, 10, 25, 50, 100]"
               class="table table-striped table-hover">
               <thead class="table-dark">
               <tr>
                  <th data-field="nombre" data-sortable="true">Nombre</th>
                  <th data-field="telefono" data-sortable="true">Teléfono</th>
                  <th data-field="direccion" data-sortable="true">Dirección</th>
                  <th data-field="barrio" data-sortable="true">Barrio</th>
                  <th data-field="acciones" data-sortable="false">Acciones</th>
               </tr>
            </thead>
            <tbody>
               @foreach ($clientes as $cliente)
                  <tr>
                     <td>{{ $cliente->nombre }}</td>
                     <td>{{ $cliente->telefono }}</td>
                     <td>{{ $cliente->direccion }}</td>
                     <td>{{ $cliente->barrio }}</td>
                     <td>
                        <div class="btn-group gap-1" role="group">
                           <a href="{{ route('clientes.edit', $cliente) }}" class="btn btn-primary btn-sm">
                              <i class="fa fa-edit"></i> Editar
                           </a>
                           <form action="{{ route('clientes.destroy', $cliente) }}" method="POST" class="d-inline">
                              @csrf
                              @method('DELETE')
                              <button type="submit" class="btn btn-danger btn-sm"
                                 onclick="return confirm('¿Está seguro de eliminar este cliente?')">
                                 <i class="fa fa-trash"></i> Eliminar
                              </button>
                           </form>
                        </div>
                     </td>
                  </tr>
               @endforeach
            </tbody>
         </table>
      </div>
   </div>
@endsection