<div>
    <div class="install-card">
        <div class="install-header">
            <div class="install-logo">
                <i class="fas fa-layer-group"></i>
            </div>
            <h1 class="install-title">Holaxis 360</h1>
            <p class="install-subtitle">{{ __('Complete Management System') }}</p>
        </div>

        <!-- Steps Progress -->
        <div class="install-steps">
            @foreach($steps as $num => $label)
                <div class="install-step {{ $step === $num ? 'active' : ($step > $num ? 'completed' : '') }}">
                    <span class="install-step-number">
                        @if($step > $num)
                            <i class="fas fa-check"></i>
                        @else
                            {{ $num }}
                        @endif
                    </span>
                    <span class="d-none d-md-inline">{{ __($label) }}</span>
                </div>
            @endforeach
        </div>

        <div class="install-body">
            <!-- Step 1: Requirements -->
            @if($step === 1)
                <h4 class="mb-4">{{ __('Server Requirements') }}</h4>
                <p class="text-muted mb-4">{{ __('Please ensure your server meets all the requirements below.') }}</p>

                @foreach($requirements as $key => $req)
                    <div class="requirement-item {{ $req['passed'] ? 'success' : 'danger' }}">
                        <span>
                            {{ $req['label'] }}
                            @if(isset($req['current']))
                                <small class="text-muted">({{ $req['current'] }})</small>
                            @endif
                        </span>
                        <i class="fas {{ $req['passed'] ? 'fa-check-circle text-success' : 'fa-times-circle text-danger' }}"></i>
                    </div>
                @endforeach

                @if(!$requirementsPassed)
                    <div class="alert alert-danger mt-4">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {{ __('Please fix the requirements above before continuing.') }}
                    </div>
                @endif
            @endif

            <!-- Step 2: Database -->
            @if($step === 2)
                <h4 class="mb-4">{{ __('Database Configuration') }}</h4>
                <p class="text-muted mb-4">{{ __('Enter your database connection details.') }}</p>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Database Host') }}</label>
                        <input type="text" class="form-control" wire:model="dbHost">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Database Port') }}</label>
                        <input type="text" class="form-control" wire:model="dbPort">
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ __('Database Name') }}</label>
                        <input type="text" class="form-control" wire:model="dbDatabase">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Username') }}</label>
                        <input type="text" class="form-control" wire:model="dbUsername">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Password') }}</label>
                        <input type="password" class="form-control" wire:model="dbPassword">
                    </div>
                </div>

                <div class="mt-4">
                    <button type="button" class="btn btn-outline-primary" wire:click="testDatabase" wire:loading.attr="disabled">
                        <span wire:loading.remove wire:target="testDatabase">
                            <i class="fas fa-plug me-1"></i>{{ __('Test Connection') }}
                        </span>
                        <span wire:loading wire:target="testDatabase">
                            <i class="fas fa-spinner fa-spin me-1"></i>{{ __('Testing...') }}
                        </span>
                    </button>
                </div>

                @if($dbTested)
                    <div class="alert alert-success mt-3">
                        <i class="fas fa-check-circle me-2"></i>{{ __('Database connection successful!') }}
                    </div>
                @endif

                @if($dbError)
                    <div class="alert alert-danger mt-3">
                        <i class="fas fa-exclamation-circle me-2"></i>{{ $dbError }}
                    </div>
                @endif
            @endif

            <!-- Step 3: Language -->
            @if($step === 3)
                <h4 class="mb-4">{{ __('Default Language') }}</h4>
                <p class="text-muted mb-4">{{ __('Select the default language for your system.') }}</p>

                <div class="row g-4">
                    <div class="col-6">
                        <div class="lang-card {{ $defaultLanguage === 'en' ? 'selected' : '' }}" wire:click="$set('defaultLanguage', 'en')">
                            <div class="lang-flag">🇬🇧</div>
                            <h5>English</h5>
                            <small class="text-muted">Left to Right</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="lang-card {{ $defaultLanguage === 'ar' ? 'selected' : '' }}" wire:click="$set('defaultLanguage', 'ar')">
                            <div class="lang-flag">🇸🇦</div>
                            <h5>العربية</h5>
                            <small class="text-muted">Right to Left</small>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Step 4: Shop Details -->
            @if($step === 4)
                <h4 class="mb-4">{{ __('Shop Details') }}</h4>
                <p class="text-muted mb-4">{{ __('Enter your shop information.') }}</p>

                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">{{ __('Shop Name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('shopName') is-invalid @enderror" wire:model="shopName" placeholder="{{ __('My Company') }}">
                        @error('shopName') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ __('Address') }}</label>
                        <textarea class="form-control" wire:model="shopAddress" rows="2"></textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Phone') }}</label>
                        <input type="text" class="form-control" wire:model="shopPhone">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Email') }}</label>
                        <input type="email" class="form-control" wire:model="shopEmail">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Default Currency') }} <span class="text-danger">*</span></label>
                        <select class="form-select" wire:model="defaultCurrency">
                            <option value="EGP">EGP - Egyptian Pound</option>
                            <option value="USD">USD - US Dollar</option>
                            <option value="EUR">EUR - Euro</option>
                            <option value="GBP">GBP - British Pound</option>
                            <option value="SAR">SAR - Saudi Riyal</option>
                            <option value="AED">AED - UAE Dirham</option>
                        </select>
                    </div>
                </div>
            @endif

            <!-- Step 5: Branch Mode -->
            @if($step === 5)
                <h4 class="mb-4">{{ __('Branch Configuration') }}</h4>
                <p class="text-muted mb-4">{{ __('Configure your branch mode and create the main branch.') }}</p>

                <div class="row g-4 mb-4">
                    <div class="col-6">
                        <div class="lang-card {{ $branchMode === 'single' ? 'selected' : '' }}" wire:click="$set('branchMode', 'single')">
                            <i class="fas fa-store fa-3x mb-3 text-primary"></i>
                            <h5>{{ __('Single Branch') }}</h5>
                            <small class="text-muted">{{ __('One location only') }}</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="lang-card {{ $branchMode === 'multi' ? 'selected' : '' }}" wire:click="$set('branchMode', 'multi')">
                            <i class="fas fa-project-diagram fa-3x mb-3 text-primary"></i>
                            <h5>{{ __('Multi Branch') }}</h5>
                            <small class="text-muted">{{ __('Multiple locations') }}</small>
                        </div>
                    </div>
                </div>

                <hr>

                <h5 class="mb-3">{{ __('Main Branch Details') }}</h5>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">{{ __('Branch Name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('mainBranchName') is-invalid @enderror" wire:model="mainBranchName">
                        @error('mainBranchName') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ __('Address') }}</label>
                        <input type="text" class="form-control" wire:model="mainBranchAddress">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Phone') }}</label>
                        <input type="text" class="form-control" wire:model="mainBranchPhone">
                    </div>
                </div>
            @endif

            <!-- Step 6: Payment Methods -->
            @if($step === 6)
                <h4 class="mb-4">{{ __('Payment Methods') }}</h4>
                <p class="text-muted mb-4">{{ __('Configure the payment methods for your shop.') }}</p>

                @foreach($paymentMethods as $index => $method)
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="row g-3 align-items-center">
                                <div class="col-auto">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" 
                                               wire:click="togglePaymentMethod({{ $index }})"
                                               {{ $method['enabled'] ? 'checked' : '' }}>
                                    </div>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" 
                                           wire:model="paymentMethods.{{ $index }}.name" 
                                           placeholder="{{ __('Method Name') }}">
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" 
                                           wire:model="paymentMethods.{{ $index }}.name_ar" 
                                           placeholder="{{ __('Arabic Name') }}" dir="rtl">
                                </div>
                                <div class="col-auto">
                                    <i class="{{ $method['icon'] ?? 'fas fa-wallet' }} fa-lg"></i>
                                </div>
                                @if($index > 1)
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-outline-danger btn-sm" wire:click="removePaymentMethod({{ $index }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach

                <button type="button" class="btn btn-outline-secondary" wire:click="addPaymentMethod">
                    <i class="fas fa-plus me-1"></i>{{ __('Add Payment Method') }}
                </button>
            @endif

            <!-- Step 7: Admin Account -->
            @if($step === 7)
                <h4 class="mb-4">{{ __('Administrator Account') }}</h4>
                <p class="text-muted mb-4">{{ __('Create your administrator account.') }}</p>

                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">{{ __('Full Name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('adminName') is-invalid @enderror" wire:model="adminName">
                        @error('adminName') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ __('Email Address') }} <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('adminEmail') is-invalid @enderror" wire:model="adminEmail">
                        @error('adminEmail') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Password') }} <span class="text-danger">*</span></label>
                        <input type="password" class="form-control @error('adminPassword') is-invalid @enderror" wire:model="adminPassword">
                        @error('adminPassword') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Confirm Password') }} <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" wire:model="adminPasswordConfirmation">
                    </div>
                </div>

                @if($installing)
                    <div class="alert alert-info mt-4">
                        <h5 class="alert-heading mb-3">
                            <i class="fas fa-cog fa-spin me-2"></i>{{ __('Installing...') }}
                        </h5>
                        @foreach($installLog as $log)
                            <div class="small"><i class="fas fa-check text-success me-1"></i>{{ $log }}</div>
                        @endforeach
                    </div>
                @endif

                @if($installError)
                    <div class="alert alert-danger mt-4">
                        <i class="fas fa-exclamation-circle me-2"></i>{{ $installError }}
                    </div>
                @endif
            @endif
        </div>

        <div class="install-footer">
            <div>
                @if($step > 1)
                    <button type="button" class="btn btn-outline-secondary" wire:click="previousStep" wire:loading.attr="disabled">
                        <i class="fas fa-arrow-left me-1"></i>{{ __('Previous') }}
                    </button>
                @endif
            </div>
            <div>
                @if($step < 7)
                    <button type="button" class="btn btn-primary" 
                            wire:click="nextStep" 
                            wire:loading.attr="disabled"
                            {{ $step === 1 && !$requirementsPassed ? 'disabled' : '' }}>
                        {{ __('Next') }}<i class="fas fa-arrow-right ms-1"></i>
                    </button>
                @else
                    <button type="button" class="btn btn-success btn-lg" 
                            wire:click="install" 
                            wire:loading.attr="disabled"
                            {{ $installing ? 'disabled' : '' }}>
                        <span wire:loading.remove wire:target="install">
                            <i class="fas fa-check me-1"></i>{{ __('Complete Installation') }}
                        </span>
                        <span wire:loading wire:target="install">
                            <i class="fas fa-spinner fa-spin me-1"></i>{{ __('Installing...') }}
                        </span>
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>
