53. Crear ordenes de compra

Hola Victor, primero antes que nada muy buen curso, contenido, explicaciones y soluciones a los problemas que van apareciendo, perfecto, pero eso ya es algo habitual en tus cursos. Si se puede pedir algo más, te pediria 'como modificar una orden de compra, agregar algun producto faltante, modificar alguna cantidad, quitrar algun producto…. y aunque ya tenes videos que lo explicas, agregar roles y permisos, a veces no son los mismos los que venden que los que compran, y estaria bueno que cada uno tenga sus roles. Agradecido por todo lo aprendido.. 

Vista del componente

<div x-data="{
    products: @entangle('products'),

    total: @entangle('total'),

    removeProduct(index) {
        this.products.splice(index, 1);
    },

    init()
    {
        this.$watch('products', (newProducts) => {
            
            let total = 0;

            newProducts.forEach(product => {
                total += product.quantity * product.price;
            });

            this.total = total;
        });
    }
}">
    
    <x-wire-card>

        <form wire:submit="save" class="space-y-4">

            <div class="grid lg:grid-cols-4 gap-4">
                <x-wire-native-select
                    label="Tipo de comprobante"
                    wire:model="voucher_type">

                    <option value="1">
                        Factura
                    </option>

                    <option value="2">
                        Boleta
                    </option>

                </x-wire-native-select>

                <x-wire-input
                    label="Serie"
                    wire:model="serie"
                    placeholder="Serie del comprobante"
                    disabled />

                <x-wire-input
                    label="Correlativo"
                    wire:model="correlative"
                    placeholder="Correlativo del comprobante"
                    disabled />

                <x-wire-input
                    label="Fecha"
                    wire:model="date"
                    type="date" />
            </div>

            <x-wire-select
                label="Proveedor"
                wire:model="supplier_id"
                placeholder="Seleccione un proveedor"
                :async-data="[
                    'api' => route('api.suppliers.index'),
                    'method' => 'POST',
                ]"
                option-label="name"
                option-value="id"
            />

            <div class="lg:flex lg:space-x-4">
                <x-wire-select
                    label="Producto"
                    wire:model="product_id"
                    placeholder="Seleccione un producto"
                    :async-data="[
                        'api' => route('api.products.index'),
                        'method' => 'POST',
                    ]"
                    option-label="name"
                    option-value="id"
                    class="flex-1"
                />

                <div class="flex-shrink-0">
                    <x-wire-button 
                        wire:click="addProduct"
                        spinner="addProduct"
                        class="w-full mt-4 lg:mt-6.5">
                        Agregar producto
                    </x-wire-button>
                </div>
            </div>

            <div class="overflow-x-auto w-full">
                <table class="w-full text-sm text-left">
                    <thead>
                        <tr class="text-gray-700 border-y bg-blue-50">
                            <th class="py-2 px-4">
                                Producto
                            </th>
                            <th class="py-2 px-4">
                                Cantidad
                            </th>
                            <th class="py-2 px-4">
                                Precio
                            </th>
                            <th class="py-2 px-4">
                                Subtotal
                            </th>
                            <th class="py-2 px-4"></th>
                        </tr>
                    </thead>

                    <tbody>


                        <template x-for="(product, index) in products" :key="product.id">

                            <tr class="border-b">
                                <td class="px-4 py-1" x-text="product.name">
                                </td>
                                <td class="px-4 py-1">
                                    <x-wire-input
                                        x-model="product.quantity"
                                        type="number"
                                        class="w-20"
                                    />
                                </td>
                                <td class="px-4 py-1">

                                    <x-wire-input
                                        x-model="product.price"
                                        type="number"
                                        class="w-20"
                                        step="0.01"
                                    />
                                </td>
                                <td class="px-4 py-1"
                                    x-text="(product.quantity * product.price).toFixed(2)">
                                </td>
                                <td class="px-4 py-1">
                                    <x-wire-mini-button
                                        rounded
                                        x-on:click="removeProduct(index)"
                                        icon="trash"
                                        red
                                    />
                                </td>
                            </tr>

                        </template>

                        <template x-if="products.length === 0">
                            <tr>
                                <td colspan="5" class="text-center text-gray-500 py-4">
                                    No hay productos agregados.
                                </td>
                            </tr>
                        </template>

                    </tbody>
                </table>
            </div>
            

            <div class="flex items-center space-x-4">

                <x-label>
                    Observaciones
                </x-label>

                <x-wire-input
                    class="flex-1"
                    wire:model="observation"
                />

                <div>
                    Total: S/. <span x-text="total.toFixed(2)"></span>
                </div>

            </div>
            
            <div class="flex justify-end">
                <x-wire-button 
                    type="submit" 
                    icon="check"
                    spinner="save"
                    >
                    Guardar
                </x-wire-button>
            </div>

        </form>

    </x-wire-card>

</div>

Clase del componente

<?php

namespace App\Livewire\Admin;

use App\Models\Product;
use App\Models\PurchaseOrder;
use Livewire\Component;

class PurchaseOrderCreate extends Component
{
    public $voucher_type = 1;

    public $serie = 'OC01';
    public $correlative;

    public $date;

    public $supplier_id;

    public $total = 0;

    public $observation;

    public $product_id;

    public $products = [];

    public function boot()
    {
        //Verificar si hay errores de validación previos
        $this->withValidator(function ($validator) {
            if($validator->fails()){
                
                $errors = $validator->errors()->toArray();

                $html = "<ul class='text-left'>";

                foreach ($errors as $error) {
                    $html .= "<li>{$error[0]}</li>";
                }

                $html .= "</ul>";

                $this->dispatch('swal', [
                    'icon' => 'error',
                    'title' => 'Error de validación',
                    'html' => $html,
                ]);

            }
        });
    }

    public function mount()
    {
        $this->correlative = PurchaseOrder::max('correlative') + 1;
    }

    public function addProduct()
    {
        $this->validate([
            'product_id' => 'required|exists:products,id',
        ],[],[
            'product_id' => 'producto',
        ]);

        $existing = collect($this->products)
            ->firstWhere('id', $this->product_id);

        if ($existing) {

            $this->dispatch('swal', [
                'icon' => 'warning',
                'title' => 'Producto ya agregado',
                'text' => 'El producto ya se encuentra en la lista.',
            ]);

            return;
        }

        $product = Product::find($this->product_id);

        $this->products[] = [
            'id' => $product->id,
            'name' => $product->name,
            'quantity' => 1,
            'price' => 0,
            'subtotal' => 0,
        ];

        $this->reset('product_id');
    }

    public function save()
    {
        $this->validate([
            'voucher_type' => 'required|in:1,2',
            'date' => 'nullable|date',
            'supplier_id' => 'required|exists:suppliers,id',
            'total' => 'required|numeric|min:0',
            'observation' => 'nullable|string|max:255',
            'products' => 'required|array|min:1',
            'products.*.id' => 'required|exists:products,id',
            'products.*.quantity' => 'required|numeric|min:1',
            'products.*.price' => 'required|numeric|min:0',
        ],[],[
            'voucher_type' => 'tipo de comprobante',
            'supplier_id' => 'proveedor',
            'observation' => 'observación',
            'products.*.id' => 'producto',
            'products.*.quantity' => 'cantidad',
            'products.*.price' => 'precio',
        ]);

        $purchaseOrder = PurchaseOrder::create([
            'voucher_type' => $this->voucher_type,
            'serie' => $this->serie,
            'correlative' => $this->correlative,
            'date' => $this->date ?? now(),
            'supplier_id' => $this->supplier_id,
            'total' => $this->total,
            'observation' => $this->observation,
        ]);

        foreach ($this->products as $product) {
            $purchaseOrder->products()->attach($product['id'], [
                'quantity' => $product['quantity'],
                'price' => $product['price'],
                'subtotal' => $product['quantity'] * $product['price'],
            ]);
        }

        session()->flash('swal', [
            'icon' => 'success',
            'title' => '¡Bien hecho!',
            'text' => 'Orden de compra creada exitosamente.',
        ]);

        return redirect()->route('admin.purchase-orders.index');
    }

    public function render()
    {
        return view('livewire.admin.purchase-order-create');
    }
}

me puedes pasar el codigo de PurchaseOrderCreate porfavor