<div>
    <x-layouts.app title="{{ __('Module Settings') }}">
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Module Settings') }}</h1>
                <p class="text-muted mb-0">{{ __('Activate or deactivate system modules') }}</p>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
        @endif

        <div class="row g-4">
            @foreach($modulesList as $module)
                <div class="col-md-6 col-lg-4 col-xl-3" wire:key="module-{{ $module['id'] }}">
                    <div class="card h-100 {{ $module['is_active'] ? 'border-success' : 'border-secondary opacity-75' }}" style="border-width: 2px;">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i class="fas {{ $module['icon'] ?? 'fa-cube' }} fa-3x {{ $module['is_active'] ? 'text-primary' : 'text-muted' }}"></i>
                            </div>
                            <h5 class="card-title mb-1">{{ app()->getLocale() === 'ar' && $module['name_ar'] ? $module['name_ar'] : $module['name'] }}</h5>
                            @if($module['description'])
                                <p class="text-muted small mb-3">{{ $module['description'] }}</p>
                            @endif
                            <div class="form-check form-switch d-flex justify-content-center">
                                <input class="form-check-input" type="checkbox"
                                       id="module-toggle-{{ $module['id'] }}"
                                       {{ $module['is_active'] ? 'checked' : '' }}
                                       wire:click="toggleModule({{ $module['id'] }})"
                                       style="transform: scale(1.5); cursor: pointer;">
                                <label class="form-check-label ms-3 fw-semibold {{ $module['is_active'] ? 'text-success' : 'text-muted' }}"
                                       for="module-toggle-{{ $module['id'] }}" style="cursor: pointer;">
                                    {{ $module['is_active'] ? __('Active') : __('Inactive') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="alert alert-info mt-4">
            <i class="fas fa-info-circle me-2"></i>
            {{ __('Dashboard and Settings are always active and cannot be deactivated. Deactivating a module will hide it from the sidebar and block access to its routes.') }}
        </div>
    </x-layouts.app>
</div>
