@extends('layouts.app')
@section('content')
   <div class="container">
      <div class="card">
         <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">
               <i class="fa fa-list me-2"></i>Variantes
            </h4>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col text-end">
                  <a href="{{ route('categoria_variantes.create') }}" class="btn btn-success">Crear Registro</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="categoria" data-sortable="true">Categoría</th>
                     <th data-field="nombre" data-sortable="true">Nombre</th>
                     <th data-field="tipo" data-sortable="true">Tipo</th>
                     <th data-field="acciones" data-sortable="false">Acciones</th>
                  </tr>
               </thead>
               <tbody>
                  @foreach ($variantes as $variante)
                     <tr>
                        <td>{{ $variante->categoria->nombre ?? '-' }}</td>
                        <td>{{ $variante->nombre }}</td>
                        <td>
                           <span class="badge bg-secondary">{{ ucfirst($variante->tipo) }}</span>
                        </td>
                        <td>
                           <div class="btn-group gap-1" role="group">

                              <a href="{{ route('categoria_variantes.edit', $variante) }}" class="btn btn-primary btn-sm">
                                 <i class="fa fa-edit"></i> Editar
                              </a>
                              <form action="{{ route('categoria_variantes.destroy', $variante) }}" 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 variante?')">
                                    <i class="fa fa-trash"></i> Eliminar
                                 </button>
                              </form>
                           </div>
                        </td>
                     </tr>
                  @endforeach
               </tbody>
            </table>
         </div>
      </div>
   </div>
@endsection