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

@php
    $auditHasSavedChanges = is_bool($hasSavedAuditChanges) ? $hasSavedAuditChanges : false;

    if (! is_bool($hasSavedAuditChanges) && (bool) $auditMode && $auditReviewItemId) {
        $auditHasSavedChanges = \Modules\DataAudit\Entities\ReviewLog::query()
            ->where('review_item_id', (int) $auditReviewItemId)
            ->where('status', \Modules\DataAudit\Enums\ReviewLogStatus::Draft->value)
            ->exists();
    }

    $steps = [
        ['key' => 'basic', 'label' => 'بيانات المبنى', 'route' => 'gis.buildings.create.basic', 'requiresId' => false],
        ['key' => 'owners', 'label' => 'مالكي المبنى', 'route' => 'gis.buildings.create.owners', 'requiresId' => true],
        ['key' => 'floors', 'label' => 'الطوابق', 'route' => 'gis.buildings.create.floors', 'requiresId' => true],
        ['key' => 'units', 'label' => 'الوحدات', 'route' => 'gis.buildings.create.units', 'requiresId' => true],
    ];

    if ($mode === 'edit') {
        $steps[] = ['key' => 'histories', 'label' => 'تاريخ تعديلات المبنى', 'route' => 'gis.buildings.create.histories', 'requiresId' => true];
    }
@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'];
                    $requiresId = (bool) ($step['requiresId'] ?? false);
                    $isLocked = ($mode === 'create' && $allowedStep < $stepIndex) || ($requiresId && ! $id);
                    $routeParams = [];

                    if ($id) {
                        $routeParams['id'] = $id;
                    }

                    if (is_string($returnTo) && $returnTo !== '') {
                        $routeParams['return_to'] = $returnTo;
                    }

                    if ((bool) $auditMode && $auditReviewItemId) {
                        $routeParams['audit_mode'] = 1;
                        $routeParams['review_item_id'] = (int) $auditReviewItemId;
                    }

                    $href = $requiresId
                        ? ($id ? route($step['route'], $routeParams) : '#')
                        : 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($auditMode && $auditReviewItemId)
            @if($mode === 'edit' && (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

            @if(! $auditHasSavedChanges)
                <a
                    wire:navigate
                    href="{{ route('dataaudit.reviews.employee', ['view_tab' => 'tasks']) }}"
                    class="kt-btn kt-btn-outline btn-sm px-6"
                >
                    رجوع
                </a>
            @endif

            <button
                type="button"
                wire:click="submitAuditForApproval"
                @disabled(! $auditHasSavedChanges)
                class="kt-btn btn-sm px-6 bg-blue-600 text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
            >
                إرسال للموافقة
            </button>
        @elseif($mode === 'edit' && $id)
            @can('buildings.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('buildings.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>