@php use Illuminate\Support\Facades\Blade; @endphp
@props([
    'name',
    'label' => null,
    'disabled' => false,
    'hidden' => false,
])

@php
    $fromLabel = $label ?? '';

    $labelHtml = Blade::render("
        <div @class([
            'whitespace-nowrap',
            'text-base-content/30 cursor-not-allowed' => '{$disabled}'
            ])>
            {$fromLabel}
        </div>
    ");
@endphp

<div
    data-name="{{ $name }}"
    x-init="
        const newItem = {
            name: '{{ $name }}',
            label: {{ json_encode($labelHtml) }},
            disabled: {{ $disabled ? 'true' : 'false' }},
            hidden: {{ $hidden ? 'true' : 'false' }}
        };
        const index = tabs.findIndex(item => item.name === '{{ $name }}');
        index !== -1 ? tabs[index] = newItem : tabs.push(newItem);

        Livewire.hook('morph.removed', ({el}) => {
            if (el.getAttribute('data-name') == '{{ $name }}'){
                tabs = tabs.filter(i => i.name !== '{{ $name }}')
            }
        })
    "
    x-show="selected === '{{ $name }}'"
    role="tabpanel"
    {{ $attributes->class("tab-content py-5 px-1") }}
>
    {{ $slot }}
</div>