@extends('layouts.app')
@section('content')
   <div class="container">
      <div class="card">
         <div class="card-header">
            <h2>Lista de Categorías</h2>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col text-end">
                  <a href="{{ route('categorias.create') }}" class="btn btn-success mb-3">Crear Categoría</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="activo" data-sortable="true">Activo</th>
                     <th data-field="orden" data-sortable="true">Orden</th>
                     <th data-field="acciones" data-sortable="false">Acciones</th>
                  </tr>
               </thead>
               <tbody>
                  @foreach ($categorias as $categoria)
                     <tr>
                        <td>{{ $categoria->nombre }}</td>
                        <td>
                           <span class="badge bg-{{ $categoria->activo ? 'success' : 'danger' }}">
                              {{ $categoria->activo ? 'Activo' : 'Inactivo' }}
                           </span>
                        </td>
                        <td>{{ $categoria->orden }}</td>
                        <td>
                           <div class="btn-group gap-1" role="group">
                              <a href="{{ route('categorias.edit', $categoria) }}" class="btn btn-primary btn-sm">
                                 <i class="fa fa-edit"></i> Editar
                              </a>
                              <form action="{{ route('categorias.destroy', $categoria) }}" method="POST" class="d-inline">
                                 @csrf
                                 @method('DELETE')
                                 <button type="submit" class="btn btn-danger btn-sm"
                                    onclick="return confirm('¿Está seguro de eliminar esta categoría?')">
                                    <i class="fa fa-trash"></i> Eliminar
                                 </button>
                              </form>
                           </div>
                        </td>
                     </tr>
                  @endforeach
               </tbody>
            </table>
         </div>
      </div>
   </div>
@endsection