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

@php
    $steps = [
        ['key' => 'basic', 'label' => 'بيانات أساسية', 'route' => 'planning.statements.create.basic'],
        ['key' => 'land', 'label' => 'بيانات قطعة الأرض', 'route' => 'planning.statements.create.land'],
        ['key' => 'structure', 'label' => 'الشروط التنظيمية للمنشأة', 'route' => 'planning.statements.create.structure'],
        ['key' => 'coordinates', 'label' => 'الاحداثيات', 'route' => 'planning.statements.create.coordinates'],
    ];
@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);
                    $href = route($step['route'], $id ? ['id' => $id] : []);
                @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
                        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('planning_statements.edit')
                <button type="button" wire:click="cancelEdit" class="kt-btn kt-btn-outline btn-sm px-6">
                    إلغاء
                </button>
                <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('planning_statements.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>