@props([
    'active',
    'id' => null,
    'mode' => 'create',
    'allowedStep' => 1,
    'showSaveButton' => false,
])

@php
    $steps = [
        ['key' => 'basic', 'label' => 'البيانات الاساسية', 'route' => 'craft.crafts.create.basic'],
        ['key' => 'owners', 'label' => 'المُلاك', 'route' => 'craft.crafts.create.owners'],
        ['key' => 'details', 'label' => 'التفاصيل', 'route' => 'craft.crafts.create.details'],
    ];

    if ($mode === 'edit' && $id) {
        $steps[] = ['key' => 'archive', 'label' => 'الأرشيف', 'route' => 'craft.crafts.create.archive'];
    }
@endphp

<x-layout.tabs-card>
    <x-slot:tabs>
        <div class="flex max-w-full flex-wrap items-stretch gap-0 bg-background">
            @foreach ($steps as $index => $step)
                @php
                    $stepIndex = $index + 1;
                    $isActive = $active === $step['key'];
                    $isLocked = ($mode === 'create' && $allowedStep < $stepIndex);
                    $routeParams = $id ? ['id' => $id] : [];
                    $href = route($step['route'], $routeParams);
                @endphp

                @if ($isLocked)
                    <span class="mb-[-1px] inline-flex h-12 items-center px-4 text-sm border-s border-input bg-muted text-muted-foreground cursor-not-allowed first:border-s-0 first:[border-start-start-radius:0.75rem] last:border-e">
                        {{ $step['label'] }}
                    </span>
                @else
                    <a
                        wire:navigate
                        href="{{ $href }}"
                        @class([
                            'relative mb-[-1px] inline-flex h-12 items-center px-4 text-sm border-s border-input transition font-medium first:border-s-0 first:[border-start-start-radius:0.75rem] last:border-e',
                            "z-10 bg-background text-primary after:content-[''] after:absolute after:bottom-[-2px] after:start-0 after:end-0 after:h-[4px] after:bg-background" => $isActive,
                            'bg-muted/30 text-foreground hover:bg-muted hover:text-primary hover:shadow-sm' => ! $isActive,
                        ])
                    >
                        {{ $step['label'] }}
                    </a>
                @endif
            @endforeach
        </div>
    </x-slot:tabs>

    <x-slot:actions>
        @if($mode === 'edit' && $id)
            @can('crafts.edit')
                @if((bool) $showSaveButton)
                    <button
                        type="button"
                        wire:click="save"
                        class="kt-btn btn-sm px-6 bg-green-600 text-white hover:bg-green-700"
                    >
                        حفظ
                    </button>
                @endif
                <button
                    type="button"
                    wire:click="saveAndExit"
                    class="kt-btn btn-sm px-6 bg-green-600 text-white hover:bg-green-700"
                >
                    حفظ ورجوع
                </button>
            @endcan
        @endif

        @if($mode === 'create')
            @can('crafts.create')
                <button
                    type="button"
                    wire:click="cancelCreation"
                    class="kt-btn kt-btn-outline btn-sm px-6"
                >
                    إلغاء
                </button>
                @if((int) $allowedStep > 1)
                    <button
                        type="button"
                        wire:click="saveAndExit"
                        class="kt-btn btn-sm px-6 bg-green-600 text-white hover:bg-green-700"
                    >
                        حفظ ورجوع
                    </button>
                @endif
            @endcan
        @endif
    </x-slot:actions>

    {{ $slot }}
</x-layout.tabs-card>