admin-types.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="persistType">
                <div class="mb-6">
                    <x-forms.vee-group label="Title" for="title">
                        <x-input.text wire:model.lazy="type.title" />
                    </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: Customer Type</h2>

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

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

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

                    <div class="px-2 py-1 w-16 flex justify-center items-center space-x-2">
                                <span wire:click="toggleTypesVisible('{{$type['id']}}')">
                                    @if($type['report_visible'])
                                        @svg('solid/eye', 'h-4 w-4 text-gold')
                                    @else
                                        @svg('solid/eye', 'h-4 w-4 text-gray')
                                    @endif
                                </span>
                        <span wire:click="editTypes('{{$type['id']}}')">
                                    @svg('solid/pencil-alt', 'h-4 w-4 text-blue')
                                </span>
                        <x-modals.delete-confirm
                            tooltip="delete"
                            action="deleteTypes('{{$type['id']}}')" />
                    </div>

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