{{-- Styles --}}
<style>
    @keyframes moduleModalIn {
        from { opacity: 0; transform: scale(0.95) translateY(10px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes moduleModalOut {
        from { opacity: 1; transform: scale(1) translateY(0); }
        to   { opacity: 0; transform: scale(0.95) translateY(10px); }
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    #uninstallConfirmBtn:not(:disabled),
    #deleteConfirmBtn:not(:disabled),
    #coreConfirmBtn:not(:disabled) {
        opacity: 1 !important;
    }
    /* ===== Git Pull Modal (Nice UI) ===== */
.gx-modal{
    position:fixed; inset:0; z-index:9999;
    align-items:center; justify-content:center;
    background:rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    padding: 18px;
}
.gx-modal-box{
    width:100%; max-width: 560px;
    background: var(--card-bg, #fff);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
    overflow:hidden;
    animation: moduleModalIn .18s ease-out;
    border: 1px solid rgba(255,255,255,.08);
}
.gx-modal-header{
    padding: 18px 20px;
    border-bottom: 1px solid var(--card-border);
    display:flex; gap: 12px; align-items:center;
    background: linear-gradient(135deg, rgba(33,150,243,.10), rgba(33,150,243,.03));
}
.gx-icon{
    width:44px; height:44px; border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(33,150,243,.12);
    color: var(--info, #2196F3);
    flex-shrink:0;
}
.gx-icon svg{ width:22px; height:22px; }
.gx-title-wrap{ flex:1; min-width:0; }
.gx-title{
    font-size: 15px; font-weight: 700;
    color: var(--text-primary);
    display:flex; align-items:center; gap: 8px;
    line-height: 1.2;
    flex-wrap: wrap;
}
.gx-title-sep{ color: var(--text-muted); font-weight: 600; }
.gx-title-module{ font-weight: 700; }
.gx-subtitle{
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.gx-close{
    width: 34px; height:34px;
    border: none;
    border-radius: 10px;
    background: rgba(0,0,0,.04);
    cursor: pointer;
    display:flex; align-items:center; justify-content:center;
    color: var(--text-muted);
    transition: background .15s, transform .15s;
}
.gx-close:hover{ background: rgba(0,0,0,.08); transform: scale(1.02); }
.gx-close svg{ width:16px; height:16px; }

.gx-section{
    padding: 16px 20px;
    background: var(--card-bg, #fff);
}
.gx-section + .gx-section{
    border-top: 1px solid var(--card-border);
}
.gx-section-head{
    display:flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.gx-section-title{
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.gx-mini{
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.gx-linkbtn{
    font-size: 12px;
    color: var(--primary);
    background: none;
    border: 1px solid rgba(0,0,0,.08);
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.gx-linkbtn:hover{
    background: var(--primary-light);
    border-color: rgba(0,0,0,.06);
}

.gx-kv{
    display:grid;
    grid-template-columns: 90px 1fr;
    gap: 8px 12px;
    font-size: 12px;
    align-items:start;
}
.gx-k{ color: var(--text-muted); font-weight: 600; }
.gx-v{ color: var(--text-primary); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.gx-v.mono{
    background: var(--body-bg);
    border: 1px solid var(--card-border);
    padding: 6px 10px;
    border-radius: 10px;
    word-break: break-all;
    font-size: 11px;
}
.gx-pill{
    display:inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(33,150,243,.10);
    color: var(--info, #2196F3);
    font-weight: 700;
    font-size: 11px;
}
.gx-hint{
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--body-bg);
    border: 1px dashed var(--card-border);
    padding: 10px 12px;
    border-radius: 12px;
}

.gx-field{ display:flex; flex-direction:column; gap: 6px; }
.gx-label{ font-size: 12px; font-weight: 700; color: var(--text-primary); }
.gx-label .req{ color: var(--danger); font-weight: 800; }
.gx-input-wrap{ position: relative; }
.gx-input-ico{
    position:absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height:16px;
    display:flex; align-items:center; justify-content:center;
    color: var(--text-muted);
    pointer-events:none;
    top: 50%;
}
.gx-input-ico svg{ width: 16px; height:16px; }
.gx-input{
    padding-left: 38px !important;
    border-radius: 12px;
    font-size: 13px;
    height: 42px;
    display: flex;
    align-items: center;
}
.gx-help{ font-size: 11px; color: var(--text-muted); }

.gx-grid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px){
    .gx-grid2{ grid-template-columns: 1fr; }
    .gx-kv{ grid-template-columns: 1fr; }
    .gx-mini{ display:none; }
}

.gx-note{
    display:flex; gap: 8px; align-items:flex-start;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--body-bg);
    border: 1px solid var(--card-border);
    padding: 10px 12px;
    border-radius: 12px;
}
#gitFormFields{
    display: block;
}   
.gx-note svg{ width: 16px; height:16px; margin-top: 1px; color: var(--warning); }

.gx-modal-footer{
    padding: 14px 20px 18px;
    border-top: 1px solid var(--card-border);
    display:flex; justify-content:flex-end; gap: 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.02));
}
.gx-btn{
    border-radius: 12px !important;
    padding: 10px 14px !important;
    min-width: 110px;
}
.gx-btn-ico{
    display:inline-flex;
    width: 16px; height:16px;
    vertical-align: -2px;
    margin-right: 6px;
}
.gx-btn-ico svg{ width:16px; height:16px; }

.gx-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.4;
}
</style>

<x-slot name="header">
    <h1 class="page-title">Modules</h1>
</x-slot>

    

<div style="display: flex; flex-direction: column; gap: 16px;">

    {{-- Header --}}
    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
        <div>
            <h2 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px;">Modules</h2>
            <p style="font-size: 13px; color: var(--text-secondary); margin: 0;">Manage your application modules</p>
        </div>
        
        @can('modules.modules.upload')
            <button onclick="var p=document.getElementById('uploadPanel');p.style.display=p.style.display==='none'?'block':'none'" class="btn btn-primary">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Upload Module
            </button>
        @endcan
    </div>

    {{-- Upload Panel (Hidden by default) --}}
    @can('modules.modules.upload')
        <div id="uploadPanel" class="card" style="padding: 16px; display: none;">
            <form action="{{ route('admin.modules.upload') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                @csrf
                <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
                    <div style="flex: 1; min-width: 200px;">
                        <input type="file" name="module_zip" accept=".zip" required class="form-control">
                    </div>
                    <button type="submit" class="btn btn-primary" id="uploadBtn">Upload ZIP</button>
                </div>

                {{-- Git Configuration Toggle --}}
                <div style="border-top: 1px solid var(--card-border); padding-top: 12px;">
                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-secondary); user-select: none; margin-bottom: 10px;">
                        <input type="checkbox" id="enableGitConfig" style="accent-color: var(--primary);">
                        <svg style="width: 16px; height: 16px; color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                        <span>Enable Git Integration <span style="font-size: 11px; color: var(--text-muted);">(optional — for future pull updates)</span></span>
                    </label>

                    <div id="gitFieldsSection" style="display: none; padding: 12px; background: var(--body-bg); border-radius: 8px;">
                        @include('admin.modules._git-fields')
                    </div>
                </div>
            </form>
        </div>

        <script>
        document.getElementById('enableGitConfig').addEventListener('change', function() {
            var section = document.getElementById('gitFieldsSection');
            section.style.display = this.checked ? 'block' : 'none';
            var inputs = section.querySelectorAll('input[name="git_url"], input[name="git_user_name"], input[name="git_user_email"]');
            inputs.forEach(function(inp) {
                if (document.getElementById('enableGitConfig').checked) {
                    inp.setAttribute('required', 'required');
                } else {
                    inp.removeAttribute('required');
                    inp.value = '';
                }
            });
        });
        document.getElementById('uploadForm').addEventListener('submit', function() {
            var btn = document.getElementById('uploadBtn');
            btn.disabled = true;
            btn.textContent = 'Uploading...';
        });
        </script>
    @endcan

    {{-- Stats Cards --}}
    @php
        $total = count($modules);
        $installed = collect($modules)->where('is_installed', true)->count();
        $active = collect($modules)->where('is_active', true)->count();
        $installedModules = collect($modules)->where('is_active', true)->pluck('alias')->map(fn($a) => strtolower($a))->toArray();
    @endphp
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;">
        <div class="card" style="padding: 14px; display: flex; align-items: center; gap: 12px;">
            <div style="width: 40px; height: 40px; border-radius: 8px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <svg style="width: 20px; height: 20px; color: var(--primary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                </svg>
            </div>
            <div>
                <p style="font-size: 12px; color: var(--text-secondary); margin: 0;">Total Modules</p>
                <p style="font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0;">{{ $total }}</p>
            </div>
        </div>
        
        <div class="card" style="padding: 14px; display: flex; align-items: center; gap: 12px;">
            <div style="width: 40px; height: 40px; border-radius: 8px; background: var(--success-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <svg style="width: 20px; height: 20px; color: var(--success);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <div>
                <p style="font-size: 12px; color: var(--text-secondary); margin: 0;">Active</p>
                <p style="font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0;">{{ $active }}</p>
            </div>
        </div>
        
        <div class="card" style="padding: 14px; display: flex; align-items: center; gap: 12px;">
            <div style="width: 40px; height: 40px; border-radius: 8px; background: var(--warning-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <svg style="width: 20px; height: 20px; color: var(--warning);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                </svg>
            </div>
            <div>
                <p style="font-size: 12px; color: var(--text-secondary); margin: 0;">Installed</p>
                <p style="font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0;">{{ $installed }}</p>
            </div>
        </div>
    </div>

    {{-- Search & Filter Bar --}}
    @if($total > 0)
        <div class="card" style="padding: 12px 16px;">
            <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 200px; position: relative;">
                    <svg style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input type="text" id="moduleSearch" class="form-control" placeholder="Search modules by name, alias or description..." autocomplete="off" style="padding-left: 34px; width: 100%;">
                </div>
                <select id="moduleStatusFilter" class="form-control" style="width: auto; min-width: 150px;">
                    <option value="all">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                    <option value="not_installed">Not Installed</option>
                    <option value="core">Core</option>
                </select>
                <span id="moduleResultCount" style="font-size: 12px; color: var(--text-muted); white-space: nowrap;"></span>
            </div>
        </div>
    @endif

    {{-- Modules Grid --}}
    @if($total > 0)
        <div id="modulesGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;">
            @foreach($modules as $module)
                @php
                    if (!$module['is_installed']) { $statusKey = 'not_installed'; }
                    elseif ($module['is_core']) { $statusKey = 'core'; }
                    elseif ($module['is_active']) { $statusKey = 'active'; }
                    else { $statusKey = 'inactive'; }
                @endphp
                <div class="card module-card" data-name="{{ strtolower($module['name']) }}" data-alias="{{ strtolower($module['alias']) }}" data-description="{{ strtolower($module['description'] ?? '') }}" data-status="{{ $statusKey }}" style="overflow: hidden;">
                    {{-- Card Header --}}
                    <div style="padding: 14px 16px; border-bottom: 1px solid var(--card-border);">
                        <div style="display: flex; align-items: flex-start; justify-content: space-between;">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 600; flex-shrink: 0;">
                                    {{ strtoupper(substr($module['name'], 0, 1)) }}
                                </div>
                                <div>
                                    <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0;">{{ $module['name'] }}</h3>
                                    <p style="font-size: 12px; color: var(--text-muted); margin: 2px 0 0;">{{ $module['alias'] }}</p>
                                </div>
                            </div>
                            <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;">
                                <span style="font-size: 10px; font-weight: 500; color: var(--text-muted); background: var(--body-bg); padding: 3px 6px; border-radius: 4px; white-space: nowrap;">
                                    {{ $module['version'] }}
                                </span>
                                @if($module['git_last_pulled_at'])
                                    <span style="font-size: 10px; color: #22c55e; white-space: nowrap;" title="Last git pull">
                                        ↓ {{ $module['git_last_pulled_at'] }}
                                    </span>
                                @endif
                                @if(!empty($module['git_url']))
                                    <span id="gitBadge_{{ $module['alias'] }}" style="display:none; font-size: 9px; font-weight: 600; color: #fff; background: var(--danger, #dc3545); padding: 2px 6px; border-radius: 4px; cursor: pointer; white-space: nowrap;"
                                        onclick="openGitPullModal('{{ $module['alias'] }}', '{{ addslashes($module['name']) }}', '{{ $module['git_url'] }}', '{{ $module['git_branch'] ?? 'master' }}', '{{ $module['git_user_name'] ?? '' }}', '{{ $module['git_user_email'] ?? '' }}', '{{ $module['git_last_pulled_at'] ?? '' }}')"
                                        title="Click to pull updates">
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    {{-- Card Body --}}
                    <div style="padding: 14px 16px;">
                        <p style="font-size: 12px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.5;">
                            {{ Str::limit($module['description'] ?? 'No description available', 80) }}
                        </p>

                        {{-- Show Dependencies with Checkmarks --}}
                        @if(!empty($module['requires']))
                            <p style="font-size: 11px; color: var(--text-muted); margin: 0 0 12px; padding: 6px 10px; background: var(--body-bg); border-radius: 4px;">
                                <strong>Depends on:</strong> 
                                @foreach($module['requires'] as $req)
                                    @php
                                        $isInstalled = in_array(strtolower($req), $installedModules);
                                    @endphp
                                    @if($isInstalled)
                                        <span style="color: var(--success);">✓</span>
                                    @else
                                        <span style="color: var(--danger);">✗</span>
                                    @endif
                                    {{ $req }}{{ !$loop->last ? ', ' : '' }}
                                @endforeach
                            </p>
                        @endif
                        
                        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;">
                            {{-- Status Badge --}}
                            @if(!$module['is_installed'])
                                <span class="badge badge-warning">
                                    <span class="badge-dot"></span>
                                    Not Installed
                                </span>
                            @elseif($module['is_core'])
                                <span class="badge badge-info">
                                    <span class="badge-dot"></span>
                                    Core
                                </span>
                            @elseif($module['is_active'])
                                <span class="badge badge-success">
                                    <span class="badge-dot"></span>
                                    Active
                                </span>
                            @else
                                <span class="badge badge-danger">
                                    <span class="badge-dot"></span>
                                    Inactive
                                </span>
                            @endif

                            {{-- Action Buttons --}}
                            <div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">

                                {{-- Git Pull Button (super-admin only, ALL modules) --}}
                                @if($isSuperAdmin ?? false)
                                    <button type="button" class="btn btn-light btn-xs" title="Git Pull" style="color: var(--info, #2196F3);"
                                            onclick="openGitPullModal('{{ $module['alias'] }}', '{{ addslashes($module['name']) }}', '{{ $module['git_url'] ?? '' }}', '{{ $module['git_branch'] ?? 'master' }}', '{{ $module['git_user_name'] ?? '' }}', '{{ $module['git_user_email'] ?? '' }}', '{{ $module['git_last_pulled_at'] ?? '' }}')">
                                        <svg style="width:12px;height:12px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                        </svg>
                                    </button>
                                @endif
                                
                                {{-- ═══════════════════════════════════════════
                                     NOT INSTALLED: Show Install + Delete
                                     ═══════════════════════════════════════════ --}}
                                @if(!$module['is_installed'])
                                    @can('modules.modules.install')
                                        <form action="{{ route('admin.modules.install', $module['alias']) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-primary btn-xs">Install</button>
                                        </form>
                                    @endcan
                                    
                                    @can('modules.modules.delete')
                                        <form id="deleteForm_{{ $module['alias'] }}" action="{{ route('admin.modules.delete', $module['alias']) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-danger btn-xs" onclick="openModuleModal('delete', '{{ $module['name'] }}', '{{ $module['alias'] }}')">Delete</button>
                                        </form>
                                    @endcan
                                    
                                {{-- ═══════════════════════════════════════════
                                     INSTALLED & ACTIVE
                                     ═══════════════════════════════════════════ --}}
                                @elseif($module['is_active'])
                                    {{-- Migrate Button --}}
                                    <form action="{{ route('admin.modules.migrate', $module['alias']) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="btn btn-light btn-xs" title="Run Migrations">
                                            <svg style="width:12px;height:12px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                            </svg>
                                        </button>
                                    </form>

                                    @if($module['is_core'])
                                        @can('modules.modules.deactivate')
                                            <form action="{{ route('admin.modules.deactivate', $module['alias']) }}" method="POST">
                                                @csrf
                                                <button type="button" class="btn btn-warning btn-xs" onclick="openModuleModal('core_deactivate', '{{ $module['name'] }}', '{{ $module['alias'] }}', this.closest('form'))">Deactivate</button>
                                            </form>
                                        @endcan
                                        @can('modules.modules.uninstall')
                                            <form id="uninstallForm_{{ $module['alias'] }}" action="{{ route('admin.modules.uninstall', $module['alias']) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-light btn-xs" onclick="openModuleModal('core_uninstall', '{{ $module['name'] }}', '{{ $module['alias'] }}')">Uninstall</button>
                                            </form>
                                        @endcan
                                    @else
                                        @can('modules.modules.deactivate')
                                            <form action="{{ route('admin.modules.deactivate', $module['alias']) }}" method="POST">
                                                @csrf
                                                <button type="submit" class="btn btn-warning btn-xs">Deactivate</button>
                                            </form>
                                        @endcan
                                        @can('modules.modules.uninstall')
                                            <form id="uninstallForm_{{ $module['alias'] }}" action="{{ route('admin.modules.uninstall', $module['alias']) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-light btn-xs" onclick="openModuleModal('uninstall', '{{ $module['name'] }}', '{{ $module['alias'] }}')">Uninstall</button>
                                            </form>
                                        @endcan
                                    @endif
                                
                                {{-- ═══════════════════════════════════════════
                                     INSTALLED & INACTIVE
                                     ═══════════════════════════════════════════ --}}
                                @else
                                    {{-- Migrate Button --}}
                                    <form action="{{ route('admin.modules.migrate', $module['alias']) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="btn btn-light btn-xs" title="Run Migrations">
                                            <svg style="width:12px;height:12px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                            </svg>
                                        </button>
                                    </form>

                                    {{-- Activate Button --}}
                                    @can('modules.modules.activate')
                                        <form action="{{ route('admin.modules.activate', $module['alias']) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-success btn-xs">Activate</button>
                                        </form>
                                    @endcan

                                    @if($module['is_core'])
                                        @can('modules.modules.uninstall')
                                            <form id="uninstallForm_{{ $module['alias'] }}" action="{{ route('admin.modules.uninstall', $module['alias']) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-light btn-xs" onclick="openModuleModal('core_uninstall', '{{ $module['name'] }}', '{{ $module['alias'] }}')">Uninstall</button>
                                            </form>
                                        @endcan
                                        @can('modules.modules.delete')
                                            <form id="deleteForm_{{ $module['alias'] }}" action="{{ route('admin.modules.delete', $module['alias']) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-danger btn-xs" onclick="openModuleModal('core_delete', '{{ $module['name'] }}', '{{ $module['alias'] }}')">Delete</button>
                                            </form>
                                        @endcan
                                    @else
                                        @can('modules.modules.uninstall')
                                            <form id="uninstallForm_{{ $module['alias'] }}" action="{{ route('admin.modules.uninstall', $module['alias']) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-light btn-xs" onclick="openModuleModal('uninstall', '{{ $module['name'] }}', '{{ $module['alias'] }}')">Uninstall</button>
                                            </form>
                                        @endcan
                                    @endif
                                @endif
                                
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- No Search Results --}}
        <div id="noResultsMessage" class="card" style="display: none; padding: 40px 20px; text-align: center; border-style: dashed;">
            <div style="width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--body-bg); display: flex; align-items: center; justify-content: center;">
                <svg style="width: 28px; height: 28px; color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
            <h3 style="font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px;">No modules found</h3>
            <p style="font-size: 13px; color: var(--text-secondary); margin: 0;">Try adjusting your search or filter criteria</p>
        </div>
    @else
        {{-- Empty State --}}
        <div class="card" style="padding: 40px 20px; text-align: center; border-style: dashed;">
            <div style="width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--body-bg); display: flex; align-items: center; justify-content: center;">
                <svg style="width: 28px; height: 28px; color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                </svg>
            </div>
            <h3 style="font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px;">No modules found</h3>
            <p style="font-size: 13px; color: var(--text-secondary); margin: 0 0 16px;">Create your first module using the command below</p>
            <code style="display: inline-block; padding: 8px 16px; background: var(--body-bg); border-radius: 6px; font-size: 12px; color: var(--text-secondary);">
                php artisan module:make ModuleName
            </code>
        </div>
    @endif

</div>


{{-- ═══════════════════════════════════════════════════════════════════════════
     GIT PULL MODAL (Improved UI)
     ═══════════════════════════════════════════════════════════════════════════ --}}
<div id="gitPullModal" class="gx-modal" style="display:none;">
    <div class="gx-modal-box">

        {{-- Header --}}
        <div class="gx-modal-header">
            <div class="gx-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                </svg>
            </div>

            <div class="gx-title-wrap">
                <div class="gx-title">
                    Git Pull
                    <span class="gx-title-sep">•</span>
                    <span id="gitPullModuleName" class="gx-title-module"></span>
                </div>
                <div id="gitPullLastPulled" class="gx-subtitle"></div>
            </div>

            <button type="button" class="gx-close" onclick="closeGitPullModal()" aria-label="Close">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- Existing Config Summary --}}
        <div id="gitExistingConfig" class="gx-section" style="display:none;">
            <div class="gx-section-head">
                <div class="gx-section-title">Current Git Configuration</div>
                <button type="button" class="gx-linkbtn" onclick="toggleGitEditForm()">
                    Edit Details
                </button>
            </div>

            <div class="gx-kv">
                <div class="gx-k">Repository</div>
                <div class="gx-v mono" id="gitDisplayUrl"></div>

                <div class="gx-k">Branch</div>
                <div class="gx-v">
                    <span class="gx-pill" id="gitDisplayBranch"></span>
                </div>

                <div class="gx-k">Author</div>
                <div class="gx-v" id="gitDisplayAuthor"></div>
            </div>

            <div class="gx-hint">
                Tip: Make sure the server SSH public key is added in repo deploy keys.
                
            </div>
            <div class="gx-warning">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" style="width:16px;height:16px;flex-shrink:0;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                <span>Any local changes on the server will be overwritten. This cannot be undone.</span>
            </div>
        </div>

        {{-- Form --}}
        <form id="gitPullForm" method="POST" action="">
            @csrf
            <input type="hidden" name="git_action" id="gitPullAction" value="continue">

            {{-- Fields --}}
            <div id="gitFormFields" class="gx-section" style="display:none;">
                <div class="gx-section-head">
                    <div class="gx-section-title">Repository Details</div>
                    <div class="gx-mini">
                        Used only when you Configure/Update
                    </div>
                </div>

                <div class="gx-field">
                    <label class="gx-label">Repository URL <span class="req">*</span></label>
                    <div class="gx-input-wrap">
                        <span class="gx-input-ico">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                            </svg>
                        </span>
                        <input type="text" name="git_url" id="gitInputUrl" class="form-control gx-input mono"
                               placeholder="git@github.com:organization/repository.git">
                    </div>
                    <div class="gx-help">SSH format: git@domain:group/repo.git</div>
                </div>

                <div class="gx-grid2">
                    <div class="gx-field">
                        <label class="gx-label">Branch</label>
                        <div class="gx-input-wrap">
                            <span class="gx-input-ico">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                                </svg>
                            </span>
                            <input type="text" name="git_branch" id="gitInputBranch" class="form-control gx-input"
                                   placeholder="master">
                        </div>
                    </div>

                    <div class="gx-field">
                        <label class="gx-label">Author Name <span class="req">*</span></label>
                        <div class="gx-input-wrap">
                            <span class="gx-input-ico">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                            </span>
                            <input type="text" name="git_user_name" id="gitInputUserName" class="form-control gx-input"
                                   placeholder="John Doe">
                        </div>
                    </div>
                </div>

                <div class="gx-field">
                    <label class="gx-label">Author Email <span class="req">*</span></label>
                    <div class="gx-input-wrap">
                        <span class="gx-input-ico">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                        </span>
                        <input type="email" name="git_user_email" id="gitInputUserEmail" class="form-control gx-input"
                               placeholder="john@example.com">
                    </div>
                </div>

                <div class="gx-note">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Ensure the server’s SSH key is added to the repository deploy keys.
                </div>
            </div>

            {{-- Footer --}}
            <div class="gx-modal-footer">
                <button type="button" onclick="closeGitPullModal()" class="btn btn-light gx-btn">Cancel</button>
                <button type="submit" class="btn btn-primary gx-btn" id="gitPullSubmitBtn">
                    <span class="gx-btn-ico">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                        </svg>
                    </span>
                    <span id="gitPullSubmitText">Pull Now</span>
                </button>
            </div>
        </form>

    </div>
</div>


{{-- ═══════════════════════════════════════════════════════════════════════════
     UNINSTALL CONFIRMATION MODAL
     ═══════════════════════════════════════════════════════════════════════════ --}}
<div id="uninstallModal" style="display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);">
    <div style="background:var(--card-bg, #fff); border-radius:12px; width:100%; max-width:480px; margin:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden; animation:moduleModalIn .2s ease-out;">
        <div style="padding:20px 24px 16px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; gap:12px;">
            <div style="width:40px; height:40px; border-radius:50%; background:var(--warning-light, #fff3e0); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                <svg style="width:20px; height:20px; color:var(--warning, #e65100);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                </svg>
            </div>
            <div style="flex:1;">
                <h3 style="font-size:16px; font-weight:600; color:var(--text-primary); margin:0;">Uninstall Module</h3>
                <p style="font-size:13px; color:var(--text-secondary); margin:2px 0 0;">This action cannot be undone</p>
            </div>
            <button onclick="closeModuleModal('uninstallModal')" style="width:32px; height:32px; border:none; background:var(--body-bg); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all .15s;">
                <svg style="width:16px; height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div style="padding:20px 24px;">
            <p style="font-size:14px; color:var(--text-secondary); margin:0 0 16px; line-height:1.6;">
                Are you sure you want to uninstall <strong id="uninstallModuleName" style="color:var(--text-primary);"></strong>?
            </p>
            <div style="background:var(--warning-light, #fff3e0); border:1px solid var(--warning, #e65100); border-radius:8px; padding:12px 16px; margin:0 0 16px;">
                <p style="font-size:13px; color:var(--text-primary); margin:0 0 6px; font-weight:600;">What will happen:</p>
                <ul style="font-size:12px; color:var(--text-secondary); margin:0; padding-left:18px; line-height:1.8;">
                    <li>All database tables for this module will be <strong>dropped</strong></li>
                    <li>All module data will be <strong>permanently lost</strong></li>
                    <li>Menus and permissions will be removed</li>
                    <li>Module files will be <strong>kept</strong> for reinstallation</li>
                </ul>
            </div>
            <label style="display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:13px; color:var(--text-secondary); user-select:none;">
                <input type="checkbox" id="uninstallConfirmCheck" onchange="document.getElementById('uninstallConfirmBtn').disabled = !this.checked" style="margin-top:2px; accent-color:var(--warning, #e65100);">
                <span>I understand that all module data will be permanently lost</span>
            </label>
        </div>
        <div style="padding:16px 24px 20px; border-top:1px solid var(--card-border); display:flex; justify-content:flex-end; gap:10px;">
            <button onclick="closeModuleModal('uninstallModal')" class="btn btn-light" style="min-width:80px;">Cancel</button>
            <button id="uninstallConfirmBtn" disabled onclick="submitModuleAction()" class="btn btn-warning" style="min-width:120px; opacity:0.5; transition:opacity .15s;">Uninstall</button>
        </div>
    </div>
</div>


{{-- ═══════════════════════════════════════════════════════════════════════════
     DELETE CONFIRMATION MODAL
     ═══════════════════════════════════════════════════════════════════════════ --}}
<div id="deleteModal" style="display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);">
    <div style="background:var(--card-bg, #fff); border-radius:12px; width:100%; max-width:480px; margin:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden; animation:moduleModalIn .2s ease-out;">
        <div style="padding:20px 24px 16px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; gap:12px;">
            <div style="width:40px; height:40px; border-radius:50%; background:var(--danger-light, #fce4ec); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                <svg style="width:20px; height:20px; color:var(--danger, #dc3545);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                </svg>
            </div>
            <div style="flex:1;">
                <h3 style="font-size:16px; font-weight:600; color:var(--text-primary); margin:0;">Delete Module Files</h3>
                <p style="font-size:13px; color:var(--text-secondary); margin:2px 0 0;">Permanent file deletion</p>
            </div>
            <button onclick="closeModuleModal('deleteModal')" style="width:32px; height:32px; border:none; background:var(--body-bg); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted);">
                <svg style="width:16px; height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div style="padding:20px 24px;">
            <p style="font-size:14px; color:var(--text-secondary); margin:0 0 16px; line-height:1.6;">
                Are you sure you want to delete <strong id="deleteModuleName" style="color:var(--text-primary);"></strong>?
            </p>
            <div style="background:var(--danger-light, #fce4ec); border:1px solid var(--danger, #dc3545); border-radius:8px; padding:12px 16px; margin:0 0 16px;">
                <p style="font-size:13px; color:var(--text-primary); margin:0 0 6px; font-weight:600;">Danger Zone:</p>
                <ul style="font-size:12px; color:var(--text-secondary); margin:0; padding-left:18px; line-height:1.8;">
                    <li>All module files will be <strong>permanently removed</strong></li>
                    <li>The entire Modules/<span id="deleteModuleAlias" style="font-family:monospace;"></span>/ folder will be deleted</li>
                    <li>This action <strong>cannot be undone</strong></li>
                </ul>
            </div>
            <div>
                <label style="display:block; font-size:13px; color:var(--text-secondary); margin:0 0 6px;">
                    Type <strong style="color:var(--danger); font-family:monospace;" id="deleteModuleNameConfirm"></strong> to confirm:
                </label>
                <input type="text" id="deleteConfirmInput" autocomplete="off" spellcheck="false" class="form-control" placeholder="Type module name here..." style="font-family:monospace; font-size:13px;" oninput="checkDeleteConfirmation()">
            </div>
        </div>
        <div style="padding:16px 24px 20px; border-top:1px solid var(--card-border); display:flex; justify-content:flex-end; gap:10px;">
            <button onclick="closeModuleModal('deleteModal')" class="btn btn-light" style="min-width:80px;">Cancel</button>
            <button id="deleteConfirmBtn" disabled onclick="submitModuleAction()" class="btn btn-danger" style="min-width:120px; opacity:0.5; transition:opacity .15s;">Delete Permanently</button>
        </div>
    </div>
</div>


{{-- ═══════════════════════════════════════════════════════════════════════════
     CORE MODULE ACTION MODAL
     ═══════════════════════════════════════════════════════════════════════════ --}}
<div id="coreModal" style="display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);">
    <div style="background:var(--card-bg, #fff); border-radius:12px; width:100%; max-width:520px; margin:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden; animation:moduleModalIn .2s ease-out;">
        <div style="padding:20px 24px 16px; border-bottom:2px solid var(--danger, #dc3545); display:flex; align-items:center; gap:12px; background:linear-gradient(135deg, var(--danger-light, #fce4ec), #fff);">
            <div style="width:44px; height:44px; border-radius:50%; background:var(--danger, #dc3545); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                <svg style="width:22px; height:22px; color:#fff;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v.01M12 9v2m-5.657 7.071a8 8 0 1111.314 0M9.172 16.828L12 12l2.828 4.828"/>
                </svg>
            </div>
            <div style="flex:1;">
                <div style="display:flex; align-items:center; gap:8px;">
                    <h3 id="coreModalTitle" style="font-size:16px; font-weight:600; color:var(--text-primary); margin:0;">Core Module Action</h3>
                    <span style="font-size:10px; font-weight:700; color:#fff; background:var(--danger); padding:2px 8px; border-radius:4px; text-transform:uppercase;">CORE</span>
                </div>
                <p style="font-size:13px; color:var(--text-secondary); margin:2px 0 0;">Extra confirmation required</p>
            </div>
            <button onclick="closeModuleModal('coreModal')" style="width:32px; height:32px; border:none; background:rgba(0,0,0,0.06); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted);">
                <svg style="width:16px; height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div style="padding:20px 24px;">
            <p style="font-size:14px; color:var(--text-secondary); margin:0 0 16px; line-height:1.6;">
                You are about to <strong id="coreActionVerb" style="color:var(--danger);"></strong> the core module <strong id="coreModuleName" style="color:var(--text-primary);"></strong>.
            </p>
            <div style="background:var(--danger-light, #fce4ec); border:1px solid var(--danger); border-radius:8px; padding:12px 16px; margin:0 0 16px;">
                <p style="font-size:13px; color:var(--danger); margin:0 0 6px; font-weight:700;">Critical System Warning</p>
                <ul style="font-size:12px; color:var(--text-secondary); margin:0; padding-left:18px; line-height:1.8;">
                    <li><strong>Break dependent modules</strong> that rely on this module</li>
                    <li><strong>Cause application errors</strong></li>
                    <li><strong>Result in data loss</strong></li>
                    <li id="coreDeleteWarning" style="display:none;"><strong>Permanently delete all files</strong></li>
                </ul>
            </div>
            <label style="display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:13px; color:var(--text-secondary); user-select:none; margin:0 0 16px; padding:10px 12px; background:var(--body-bg); border-radius:6px; border:1px solid var(--card-border);">
                <input type="checkbox" id="coreConfirmCheck" onchange="validateCoreModal()" style="margin-top:2px; accent-color:var(--danger); flex-shrink:0;">
                <span>I understand this is a <strong style="color:var(--danger);">CORE MODULE</strong> and removing it may break the application</span>
            </label>
            <div>
                <label style="display:block; font-size:13px; color:var(--text-secondary); margin:0 0 6px;">
                    Type <strong style="color:var(--danger); font-family:monospace;">REMOVE CORE</strong> to enable:
                </label>
                <input type="text" id="coreConfirmInput" autocomplete="off" spellcheck="false" class="form-control" placeholder="Type REMOVE CORE here..." style="font-family:monospace; font-size:13px; border-color:var(--danger);" oninput="validateCoreModal()">
            </div>
        </div>
        <div style="padding:16px 24px 20px; border-top:1px solid var(--card-border); display:flex; justify-content:flex-end; gap:10px;">
            <button onclick="closeModuleModal('coreModal')" class="btn btn-light" style="min-width:80px;">Cancel</button>
            <button id="coreConfirmBtn" disabled onclick="submitModuleAction()" class="btn btn-danger" style="min-width:140px; opacity:0.5; transition:opacity .15s;">
                <span id="coreConfirmBtnText">Confirm Action</span>
            </button>
        </div>
    </div>
</div>





<script>
// ═══════════════════════════════════════════════════════════
// SEARCH & FILTER
// ═══════════════════════════════════════════════════════════
(function() {
    function initSearch() {
        var search = document.getElementById('moduleSearch');
        var filter = document.getElementById('moduleStatusFilter');
        var count = document.getElementById('moduleResultCount');
        var noMsg = document.getElementById('noResultsMessage');
        var grid = document.getElementById('modulesGrid');
        if (!search || !grid) return;
        var cards = grid.getElementsByClassName('module-card');
        var total = cards.length;
        function run() {
            var q = search.value.toLowerCase().trim();
            var s = filter ? filter.value : 'all';
            var visible = 0;
            for (var i = 0; i < cards.length; i++) {
                var c = cards[i];
                var ok1 = !q || (c.getAttribute('data-name') || '').indexOf(q) > -1 || (c.getAttribute('data-alias') || '').indexOf(q) > -1 || (c.getAttribute('data-description') || '').indexOf(q) > -1;
                var ok2 = s === 'all' || c.getAttribute('data-status') === s;
                if (ok1 && ok2) { c.style.removeProperty('display'); visible++; }
                else { c.style.display = 'none'; }
            }
            if (count) count.textContent = (q || s !== 'all') ? visible + ' of ' + total + ' modules' : '';
            if (noMsg) noMsg.style.display = visible === 0 ? 'block' : 'none';
            if (grid) grid.style.display = visible === 0 ? 'none' : 'grid';
        }
        search.addEventListener('input', run);
        if (filter) filter.addEventListener('change', run);
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initSearch);
    else initSearch();
})();


// ═══════════════════════════════════════════════════════════
// GIT PULL MODAL
// ═══════════════════════════════════════════════════════════
var _gitPullAlias = '';
var _gitHasConfig = false;

function openGitPullModal(alias, name, gitUrl, gitBranch, gitUserName, gitUserEmail, lastPulled) {
    _gitPullAlias = alias;
    _gitHasConfig = !!(gitUrl && gitUrl.length > 0);

    // Set header info
    document.getElementById('gitPullModuleName').textContent = name;
    document.getElementById('gitPullLastPulled').textContent = lastPulled ? 'Last pulled: ' + lastPulled : 'Never pulled';

    // Set form action URL
    document.getElementById('gitPullForm').action = '/admin/modules/' + alias + '/git-pull';

    if (_gitHasConfig) {
        // Show existing config, hide form fields
        document.getElementById('gitExistingConfig').style.display = 'block';
        document.getElementById('gitFormFields').style.display = 'none';
        document.getElementById('gitPullAction').value = 'continue';
        document.getElementById('gitPullSubmitText').textContent = 'Pull Now';

        // Populate display
        document.getElementById('gitDisplayUrl').textContent = gitUrl;
        document.getElementById('gitDisplayBranch').textContent = gitBranch || 'master';
        document.getElementById('gitDisplayAuthor').textContent = gitUserName + ' <' + gitUserEmail + '>';

        // Pre-fill form inputs (for edit mode)
        document.getElementById('gitInputUrl').value = gitUrl;
        document.getElementById('gitInputBranch').value = gitBranch || 'master';
        document.getElementById('gitInputUserName').value = gitUserName;
        document.getElementById('gitInputUserEmail').value = gitUserEmail;

        // Remove required from hidden inputs
        setGitFieldsRequired(false);
    } else {
        // No config: show form, hide existing display
        document.getElementById('gitExistingConfig').style.display = 'none';
        document.getElementById('gitFormFields').style.display = 'block';
        document.getElementById('gitPullAction').value = 'update';
        document.getElementById('gitPullSubmitText').textContent = 'Configure & Pull';

        // Clear inputs
        document.getElementById('gitInputUrl').value = '';
        document.getElementById('gitInputBranch').value = 'master';
        document.getElementById('gitInputUserName').value = '';
        document.getElementById('gitInputUserEmail').value = '';

        // Set required
        setGitFieldsRequired(true);
    }

    // Show modal
    document.getElementById('gitPullModal').style.display = 'flex';

    // Focus first input if form is visible
    if (!_gitHasConfig) {
        setTimeout(function() { document.getElementById('gitInputUrl').focus(); }, 200);
    }
}

function toggleGitEditForm() {
    var fields = document.getElementById('gitFormFields');
    var isVisible = fields.style.display !== 'none';

    if (isVisible) {
        // Hide form, switch back to "continue" mode
        fields.style.display = 'none';
        document.getElementById('gitPullAction').value = 'continue';
        document.getElementById('gitPullSubmitText').textContent = 'Pull Now';
        setGitFieldsRequired(false);
    } else {
        // Show form, switch to "update" mode
        fields.style.display = 'block';
        document.getElementById('gitPullAction').value = 'update';
        document.getElementById('gitPullSubmitText').textContent = 'Update & Pull';
        setGitFieldsRequired(true);
        setTimeout(function() { document.getElementById('gitInputUrl').focus(); }, 100);
    }
}

function setGitFieldsRequired(required) {
    var fields = ['gitInputUrl', 'gitInputUserName', 'gitInputUserEmail'];
    fields.forEach(function(id) {
        var el = document.getElementById(id);
        if (el) {
            if (required) el.setAttribute('required', 'required');
            else el.removeAttribute('required');
        }
    });
}

function closeGitPullModal() {
    var modal = document.getElementById('gitPullModal');
    var box = modal.firstElementChild;
    if (box) {
        box.style.animation = 'moduleModalOut .15s ease-in forwards';
        setTimeout(function() {
            modal.style.display = 'none';
            box.style.animation = 'moduleModalIn .2s ease-out';
        }, 150);
    } else {
        modal.style.display = 'none';
    }
}

// Submit spinner for git pull form
document.getElementById('gitPullForm').addEventListener('submit', function() {
    var btn = document.getElementById('gitPullSubmitBtn');
    btn.disabled = true;
    btn.innerHTML = '<svg style="width:14px;height:14px;margin-right:6px;animation:spin 1s linear infinite;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Pulling...';
});


// ═══════════════════════════════════════════════════════════
// MODULE ACTION MODALS (Uninstall / Delete / Core)
// ═══════════════════════════════════════════════════════════
var _modalActionType = '';
var _modalModuleAlias = '';
var _coreDeactivateForm = null;

function openModuleModal(type, name, alias, formRef) {
    _modalActionType = type;
    _modalModuleAlias = alias;
    _coreDeactivateForm = formRef || null;

    if (type === 'uninstall') {
        document.getElementById('uninstallModuleName').textContent = name;
        document.getElementById('uninstallConfirmCheck').checked = false;
        document.getElementById('uninstallConfirmBtn').disabled = true;
        document.getElementById('uninstallModal').style.display = 'flex';
    } else if (type === 'delete') {
        document.getElementById('deleteModuleName').textContent = name;
        document.getElementById('deleteModuleAlias').textContent = name;
        document.getElementById('deleteModuleNameConfirm').textContent = name;
        document.getElementById('deleteConfirmInput').value = '';
        document.getElementById('deleteConfirmBtn').disabled = true;
        document.getElementById('deleteModal').style.display = 'flex';
    } else if (type === 'core_deactivate' || type === 'core_uninstall' || type === 'core_delete') {
        var titles = { core_deactivate: 'Deactivate Core Module', core_uninstall: 'Uninstall Core Module', core_delete: 'Delete Core Module Files' };
        var verbs = { core_deactivate: 'deactivate', core_uninstall: 'uninstall', core_delete: 'permanently delete' };
        var btnTexts = { core_deactivate: 'Deactivate Core Module', core_uninstall: 'Uninstall Core Module', core_delete: 'Delete Core Module' };
        document.getElementById('coreModalTitle').textContent = titles[type];
        document.getElementById('coreActionVerb').textContent = verbs[type];
        document.getElementById('coreModuleName').textContent = name;
        document.getElementById('coreConfirmBtnText').textContent = btnTexts[type];
        document.getElementById('coreDeleteWarning').style.display = (type === 'core_delete') ? 'list-item' : 'none';
        document.getElementById('coreConfirmCheck').checked = false;
        document.getElementById('coreConfirmInput').value = '';
        document.getElementById('coreConfirmBtn').disabled = true;
        document.getElementById('coreModal').style.display = 'flex';
    }
}

function validateCoreModal() {
    var checked = document.getElementById('coreConfirmCheck').checked;
    var typed = document.getElementById('coreConfirmInput').value.trim();
    document.getElementById('coreConfirmBtn').disabled = !(checked && typed === 'REMOVE CORE');
}

function closeModuleModal(modalId) {
    var modal = document.getElementById(modalId);
    if (!modal) return;
    var box = modal.firstElementChild;
    if (box) {
        box.style.animation = 'moduleModalOut .15s ease-in forwards';
        setTimeout(function() { modal.style.display = 'none'; box.style.animation = 'moduleModalIn .2s ease-out'; }, 150);
    } else {
        modal.style.display = 'none';
    }
}

function checkDeleteConfirmation() {
    var input = document.getElementById('deleteConfirmInput');
    var expected = document.getElementById('deleteModuleNameConfirm').textContent.trim();
    document.getElementById('deleteConfirmBtn').disabled = (input.value.trim() !== expected);
}

function submitModuleAction() {
    var form = null, btn = null;
    if (_modalActionType === 'uninstall') { form = document.getElementById('uninstallForm_' + _modalModuleAlias); btn = document.getElementById('uninstallConfirmBtn'); }
    else if (_modalActionType === 'delete') { form = document.getElementById('deleteForm_' + _modalModuleAlias); btn = document.getElementById('deleteConfirmBtn'); }
    else if (_modalActionType === 'core_deactivate') { form = _coreDeactivateForm; btn = document.getElementById('coreConfirmBtn'); }
    else if (_modalActionType === 'core_uninstall') { form = document.getElementById('uninstallForm_' + _modalModuleAlias); btn = document.getElementById('coreConfirmBtn'); }
    else if (_modalActionType === 'core_delete') { form = document.getElementById('deleteForm_' + _modalModuleAlias); btn = document.getElementById('coreConfirmBtn'); }
    if (form && btn) {
        btn.disabled = true;
        btn.innerHTML = '<svg style="width:14px;height:14px;margin-right:4px;animation:spin 1s linear infinite;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Processing...';
        form.submit();
    }
}

// Global: close modals on backdrop click
document.addEventListener('click', function(e) {
    ['uninstallModal', 'deleteModal', 'coreModal', 'gitPullModal'].forEach(function(id) {
        var m = document.getElementById(id);
        if (m && e.target === m) {
            if (id === 'gitPullModal') closeGitPullModal();
            else closeModuleModal(id);
        }
    });
});

// Global: close modals on Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        ['uninstallModal', 'deleteModal', 'coreModal', 'gitPullModal'].forEach(function(id) {
            var m = document.getElementById(id);
            if (m && m.style.display === 'flex') {
                if (id === 'gitPullModal') closeGitPullModal();
                else closeModuleModal(id);
            }
        });
    }
    if (e.key === 'Enter') {
        var modals = [
            { id: 'uninstallModal', btn: 'uninstallConfirmBtn' },
            { id: 'deleteModal', btn: 'deleteConfirmBtn' },
            { id: 'coreModal', btn: 'coreConfirmBtn' }
        ];
        for (var i = 0; i < modals.length; i++) {
            var m = document.getElementById(modals[i].id);
            if (m && m.style.display === 'flex') {
                var btn = document.getElementById(modals[i].btn);
                if (btn && !btn.disabled) { e.preventDefault(); submitModuleAction(); }
                break;
            }
        }
    }
});

// ═══════════════════════════════════════════════════════════
// AUTO-CHECK GIT UPDATES ON PAGE LOAD
// ═══════════════════════════════════════════════════════════
(function() {
    function checkGitUpdates() {
        var modules = @json(collect($modules)->where('git_url', '!=', '')->pluck('alias')->values());

        modules.forEach(function(alias) {
            fetch('/admin/modules/' + alias + '/git-check', {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var badge = document.getElementById('gitBadge_' + alias);
                if (badge && data.success && data.has_updates) {
                    badge.textContent = data.ahead_count + ' update' + (data.ahead_count > 1 ? 's' : '');
                    badge.title = 'Latest: ' + (data.latest_message || 'New commits available');
                    badge.style.display = 'inline-block';
                }
            })
            .catch(function() {});
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', checkGitUpdates);
    } else {
        checkGitUpdates();
    }
})();
</script>