Livewire Price Table Demo Component

app.js

window.livewire.on('productUpdated', (products) => {
  console.log(products)
});

home.blade.php

<livewire:product-demo>
  

product-demo.blade.php

<div>
    <div class="mb-3">
        {{ __('Products') }}
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>
                    {{ __('Units') }}
                </th>
                <th>
                    {{ __('Price') }}
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $data)
                <tr wire:key="{{ $loop->index }}">
                    <td>
                        <input 
                            type="number" 
                            class="form-control" 
                            id="products_{{ $loop->index }}_amount"
                            wire:model.lazy="products.{{ $loop->index }}.amount"
                            placeholder="{{ __('Units') }}"
                        >
                    </td>
                    <td>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="products_{{ $loop->index }}_price"
                            wire:model.lazy="products.{{ $loop->index }}.price"
                            placeholder="{{ __('Price') }}"
                        >
                    </td>
                    <td class="text-center">
                        <button type="button" wire:click="removePriceRange({{ $loop->index }})" class="btn btn-light text-muted">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                            </svg>
                        </button>
                    </td>
                </tr>
            @endforeach
        </tbody>
        <tfoot class="{{ $show_form ? '' : 'd-none' }} bg-light">
            <tr>
                <td>
                    <input type="number" wire:model.lazy="amount" class="form-control" placeholder="{{ __('Units') }}">
                </td>
                <td>
                    <input type="text" wire:model.lazy="price" class="form-control" placeholder="{{ __('Price') }}">
                </td>
                <td class="text-center px-0">
                    <button type="button" wire:click="addPriceRange" class="btn btn-outline-primary">
                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
                            <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
                        </svg>
                    </button>
                </td>
            </tr>
        </tfoot>
        <tfoot class="{{ $show_form ? 'd-none' : '' }}">
            <tr>
                <td colspan="3" class="text-center">
                    <button type="button" wire:click="$set('show_form', true)" class="lead btn btn-outline-primary">
                        {{ __('New Price Range') }}
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="form-group">
        <input type="text" class="form-control" value="{{ $product_url }}" placeholder="PRODUCTS URL" readonly>
    </div>
</div>

ProductDemo.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Arr;

class ProductDemo extends Component
{
    public $products;
    public $show_form;
    public $amount;
    public $price;
    public $product_url;

    public function mount()
    {
        $this->products = [];
        $this->show_form = false;
    }

    public function addPriceRange()
    {
        $products = $this->products;

        $products[] = [
            'id' => null,
            'amount' => $this->amount, 
            'price' => $this->price,
        ];

        $this->products = $products;
        $this->sortPriceTable();

        $this->show_products_form = false;
        $this->amount = null;
        $this->price = null;

        $this->generateUrl();
        $this->emit('productUpdated', $this->products);
    }

    public function removePriceRange($index)
    {
        $this->products = collect($this->products)
            ->filter(function($item, $key) use ($index) {
                if($key != $index) {
                    return $item;
                }
            })
            ->values()
            ->all();

        $this->generateUrl();
        $this->emit('productUpdated', $this->products);
    }

    public function updatedProducts($value, $field) 
    {
        $field = explode('.', $field);
        $index = $field[0];
        $name = $field[1];
        
        $this->products[$index][$name] = $value;
        $this->sortPriceTable();

        $this->generateUrl();
        $this->emit('productUpdated', $this->products);
    }

    public function render()
    {
        return view('livewire.product-demo');
    }

    private function generateUrl()
    {
        $this->product_url = 'https://example.com?' . Arr::query($this->products);
    }

    private function sortPriceTable()
    {
        $this->products = collect($this->products)
            ->sortBy('amount')
            ->values()
            ->all();
    }
}