admin-sales.blade.php

<div>
    @if($showEditor)
        <x-panels.round-bordered>
            <div class="mb-3 flex justify-between items-center">
                <h2 class="font-semibold text-blue">Create New</h2>
                <x-buttons.thinline-button
                    clr="red" type="button"
                    wire:click="$toggle('showEditor')">
                    @svg('solid/times-circle', 'mr-2 h-4 w-4')
                    Cancel
                </x-buttons.thinline-button>
            </div>

            <form wire:submit.prevent="persistSale">
                <div class="mb-6">
                    <x-forms.vee-group label="Title" for="title">
                        <x-input.text wire:model.lazy="sale.title" />
                    </x-forms.vee-group>
                </div>

                <div class="mb-6">
                    <x-forms.vee-group label="Salesperson" for="salesperson_code">
                        <x-input.text wire:model.lazy="sale.salesperson_code" />
                    </x-forms.vee-group>
                </div>

                <div class="mb-6">
                    <x-forms.vee-group label="Lot Code" for="lot_code">
                        <x-input.text wire:model.lazy="sale.lot_code" />
                    </x-forms.vee-group>
                </div>

                <x-buttons.submit-button />
            </form>
        </x-panels.round-bordered>
    @else
        <x-sortable.sort-panel class="w-full">
            <div class="mb-3 flex justify-between items-center">
                <h2 class="font-semibold text-blue">Reporting Order: Sales Team</h2>

                <x-buttons.thinline-button
                    clr="green" type="button"
                    wire:click="createSale">
                    @svg('solid/plus', 'mr-2 h-4 w-4')
                    New
                </x-buttons.thinline-button>
            </div>

            @forelse($sales as $sale)
                <x-sortable.individual-bar-small
                    :uid="$sale['id']"
                    wire:key="$sale['id']">

                    <div class="px-2 py-1 flex-1 flex justify-between items-center">
                        <div class="w-full">
                            {{ $sale['title'] }}
                        </div>
                    </div>

                    <div class="px-2 py-1 w-16 flex justify-center items-center space-x-2">
                            <span wire:click="editSale('{{$sale['id']}}')">
                                @svg('solid/pencil-alt', 'h-4 w-4 text-blue')
                            </span>
                        <x-modals.delete-confirm
                            tooltip="delete"
                            action="deleteSale('{{$sale['id']}}')" />
                    </div>

                </x-sortable.individual-bar-small>
            @empty
                <x-sortable.none-found />
            @endforelse
        </x-sortable.sort-panel>
    @endif
</div>