@extends('layouts.app')
@section('content')
   <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
         <h4 class="mb-0">
            <i class="fa fa-tags me-2"></i>Variantes de Producto
         </h4>
         <a href="{{ route('producto_variantes.create') }}" class="btn btn-success">
            <i class="fa fa-plus"></i> Crear Variante
         </a>
      </div>
      <div class="card-body">
         <table id="tablaVariantes"
                data-toggle="table"
                data-locale="es-ES"
                data-search="true"
                data-show-refresh="true"
                data-show-toggle="true"
                data-show-columns="true"
                data-sort-name="nombre"
                data-sort-order="asc"
                data-pagination="true"
                data-page-size="10"
                data-page-list="[5, 10, 25, 50, 100]"
                data-show-export="true"
                data-export-types="['csv', 'excel', 'pdf']"
                data-export-options='{
                  "fileName": "variantes_producto",
                  "worksheetName": "Variantes"
                }'
                class="table table-striped table-hover">
            <thead class="table-dark">
               <tr>
                  <th data-field="producto" data-sortable="true">Producto</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->producto->nombre ?? '-' }}</td>
                     <td>{{ $variante->nombre }}</td>
                     <td>
                        <span class="badge bg-info">{{ ucfirst($variante->tipo) }}</span>
                     </td>
                     <td>
                        <div class="btn-group" role="group">
                           <a href="{{ route('producto_variantes.edit', $variante) }}" class="btn btn-primary btn-sm">
                              <i class="fa fa-edit"></i> Editar
                           </a>
                           <form action="{{ route('producto_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>
@endsection