@extends('admin.layouts.admin')

@section('title', 'Module Management')
@section('page_title', 'Module Management')

@section('content')
    <div class="space-y-6">
        <!-- Header Card (Simplified, No Add Button) -->
        <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm border border-slate-200 flex flex-col md:flex-row md:items-center justify-between dark:bg-[#1a233a] dark:border-white/5 transition-colors space-y-4 md:space-y-0">
            <div>
                <h2 class="text-xl font-bold text-[#404e67] dark:text-slate-200">Content Modules</h2>
                <p class="text-xs text-slate-400 mt-1">Enable or disable reusable sections for your website pages.</p>
            </div>
            <div class="text-[10px] font-bold text-slate-300 uppercase tracking-widest bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100 dark:bg-white/5 dark:border-white/5 w-fit">
                <i class="fas fa-lock mr-1"></i> Management Restricted
            </div>
        </div>

        <!-- Modules Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($modules as $module)
                <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden group hover:shadow-md transition-all dark:bg-[#1a233a] dark:border-white/5 {{ !$module->is_active ? 'opacity-70 grayscale-[0.5]' : '' }}">
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-6">
                            <div class="w-10 h-10 {{ $module->is_active ? 'bg-primary text-white' : 'bg-slate-100 text-slate-400 dark:bg-white/5 dark:text-slate-500' }} rounded-lg flex items-center justify-center transition-colors">
                                @php
                                    $icons = [
                                        'hero' => 'fas fa-rocket',
                                        'services' => 'fas fa-th-large',
                                        'web_design' => 'fas fa-paint-brush',
                                        'help_center' => 'fas fa-headset',
                                        'server_locations' => 'fas fa-globe-americas',
                                        'shared_hosting' => 'fas fa-server'
                                    ];
                                    $icon = $icons[$module->type] ?? 'fas fa-cube';
                                @endphp
                                <i class="{{ $icon }} text-lg"></i>
                            </div>
                            <span class="bg-slate-50 text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 py-0.5 rounded-md border border-slate-100 dark:bg-white/5 dark:border-white/5 dark:text-slate-500">{{ $module->type }}</span>
                        </div>
 
                        <div class="flex items-center justify-between mb-1">
                            <h3 class="text-sm font-bold text-[#404e67] dark:text-slate-200">
                                {{ $module->title }}
                            </h3>
                            @if(!$module->is_active)
                                <span class="text-[8px] font-bold text-rose-500 uppercase tracking-widest bg-rose-50 px-1.5 py-0.5 rounded-md border border-rose-100 dark:bg-rose-500/10 dark:border-rose-500/20">Disabled</span>
                            @else
                                <span class="text-[8px] font-bold text-green-500 uppercase tracking-widest bg-green-50 px-1.5 py-0.5 rounded-md border border-green-100 dark:bg-green-500/10 dark:border-green-500/20">Active</span>
                            @endif
                        </div>
                        <code class="text-[9px] font-mono font-bold text-slate-400 block mb-6 px-2 py-0.5 bg-slate-50 rounded inline-block dark:bg-white/5 dark:text-slate-500">#{{ $module->key }}</code>
 
                        <div class="flex items-center justify-between pt-4 border-t border-slate-50 dark:border-white/5">
                            <form action="{{ route('admin.modules.toggle', $module) }}" method="POST" class="w-full">
                                @csrf
                                <button type="submit" 
                                    class="w-full py-2 rounded-md text-[10px] font-bold uppercase tracking-widest transition-all border flex items-center justify-center space-x-2 {{ $module->is_active ? 'bg-white text-slate-600 border-slate-200 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-100 dark:bg-transparent dark:text-slate-400 dark:border-white/10 dark:hover:bg-rose-500/10 dark:hover:text-rose-500' : 'bg-primary text-white border-transparent hover:bg-primary-hover' }}">
                                    @if($module->is_active)
                                        <i class="fas fa-power-off"></i>
                                        <span>Disable Module</span>
                                    @else
                                        <i class="fas fa-check"></i>
                                        <span>Enable Module</span>
                                    @endif
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach

            @if($modules->isEmpty())
                <div class="col-span-full py-16 text-center bg-white rounded-lg border-2 border-dashed border-slate-100 flex flex-col items-center dark:bg-white/5 dark:border-white/10">
                    <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4 dark:bg-white/5">
                        <i class="fas fa-cubes text-3xl text-slate-200 dark:text-slate-600"></i>
                    </div>
                    <h4 class="text-lg font-bold text-[#404e67] dark:text-slate-300">No Modules Found</h4>
                </div>
            @endif
        </div>
    </div>
@endsection