@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-list-alt me-2"></i>Detalle de Pedidos
         </h4>
         <a href="{{ route('detalle_pedido.create') }}" class="btn btn-success">
            <i class="fa fa-plus"></i> Agregar Detalle
         </a>
      </div>
      <div class="card-body">
         <table id="tablaDetalles"
                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="id"
                data-sort-order="desc"
                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": "detalle_pedidos",
                  "worksheetName": "Detalle Pedidos"
                }'
                class="table table-striped table-hover">
            <thead class="table-dark">
               <tr>
                  <th data-field="id" data-sortable="true">ID</th>
                  <th data-field="pedido" data-sortable="true">Pedido</th>
                  <th data-field="producto" data-sortable="true">Producto</th>
                  <th data-field="variante" data-sortable="true">Variante</th>
                  <th data-field="cantidad" data-sortable="true">Cantidad</th>
                  <th data-field="unidad" data-sortable="true">Unidad</th>
                  <th data-field="precio" data-sortable="true">Precio Unitario</th>
                  <th data-field="subtotal" data-sortable="true">Subtotal</th>
                  <th data-field="acciones" data-sortable="false">Acciones</th>
               </tr>
            </thead>
            <tbody>
               @foreach ($detalles as $detalle)
                  <tr>
                     <td>{{ $detalle->id }}</td>
                     <td>
                        <span class="badge bg-primary">#{{ $detalle->pedido->id ?? '-' }}</span>
                     </td>
                     <td>{{ $detalle->producto->nombre ?? '-' }}</td>
                     <td>
                        @if($detalle->variantes)
                           <span class="badge bg-info">{{ $detalle->variantes_texto }}</span>
                        @else
                           -
                        @endif
                     </td>
                     <td>{{ $detalle->cantidad }}</td>
                     <td>
                        <span class="badge bg-secondary">{{ $detalle->unidad_medida }}</span>
                     </td>
                     <td>${{ number_format($detalle->precio_unitario, 0, ',', '.') }}</td>
                     <td>
                        <strong>${{ number_format($detalle->subtotal, 0, ',', '.') }}</strong>
                     </td>
                     <td>
                        <div class="btn-group" role="group">
                           <a href="{{ route('detalle_pedido.show', $detalle) }}" class="btn btn-info btn-sm">
                              <i class="fa fa-eye"></i> Ver
                           </a>
                           <a href="{{ route('detalle_pedido.edit', $detalle) }}" class="btn btn-primary btn-sm">
                              <i class="fa fa-edit"></i> Editar
                           </a>
                           <form action="{{ route('detalle_pedido.destroy', $detalle) }}" 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 detalle?')">
                                 <i class="fa fa-trash"></i> Eliminar
                              </button>
                           </form>
                        </div>
                     </td>
                  </tr>
               @endforeach
            </tbody>
         </table>
      </div>
   </div>
@endsection