@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-6 max-w-6xl pb-12">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">⚙️ Central de Configurações (Painel CMS)</h1>
            <p class="text-sm text-slate-500">Gerencie identidade visual, menus, páginas, taxonomias e equipe num só painel.</p>
        </div>
        <a href="{{ route('site.home') }}" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-semibold shadow">
            Ver Alterações no Site ↗
        </a>
    </div>

    @if(session('success'))
        <div class="bg-emerald-100 border border-emerald-300 text-emerald-800 px-4 py-3 rounded mb-6 text-sm">
            {{ session('success') }}
        </div>
    @endif

    <!-- Bloco 1: Identidade Visual, Logotipo e Slogan -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-8">
        <h2 class="text-lg font-bold text-slate-800 mb-4 pb-2 border-b">🎨 Identidade Visual, Logotipo e Slogan</h2>
        
        <form action="{{ route('admin.settings.identity.update') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Título do Site (SEO)</label>
                    <input type="text" name="site_title" value="{{ $settings['site_title'] ?? 'NT Imobi AI' }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Texto do Logotipo (Header)</label>
                    <input type="text" name="site_logo_text" value="{{ $settings['site_logo_text'] ?? 'NT Imobi AI' }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Slogan / Descrição Curta</label>
                    <input type="text" name="site_slogan" value="{{ $settings['site_slogan'] ?? '' }}" placeholder="Ex: Sua imobiliária inteligente" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-6 pt-2">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Logotipo em Imagem (Opcional)</label>
                    <input type="file" name="site_logo_image" class="text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                </div>

                @if(!empty($settings['site_logo_image']))
                    @php
                        $previewLogo = str_starts_with($settings['site_logo_image'], 'uploads/')
                            ? asset($settings['site_logo_image'])
                            : asset('storage/' . $settings['site_logo_image']);
                    @endphp
                    <div class="flex items-center gap-3 p-2 bg-slate-100 rounded border border-slate-300">
                        <img src="{{ $previewLogo }}" alt="Logo Atual" class="h-10 object-contain">
                        <label class="flex items-center gap-1.5 text-xs text-red-600 font-semibold cursor-pointer">
                            <input type="checkbox" name="remove_logo" value="1" class="rounded border-red-300 text-red-600">
                            Remover imagem
                        </label>
                    </div>
                @endif
            </div>

            <div class="flex justify-end pt-3 border-t">
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-5 py-2 rounded-md text-sm shadow">
                    Guardar Alterações Visuais
                </button>
            </div>
        </form>
    </div>

    <!-- Grid de Módulos CMS (Estilo WordPress Dashboard) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        
        <!-- Módulo 1: Menus -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col justify-between">
            <div>
                <div class="text-2xl mb-2">🧭</div>
                <h3 class="font-bold text-slate-800 text-base mb-1">Menus do Header / Footer</h3>
                <p class="text-xs text-slate-500 mb-4">Crie e ordene links de navegação na barra abaixo do cabeçalho (ex: Sobre Nós, Contato).</p>
            </div>
            <a href="{{ route('admin.menus.index') }}" class="block text-center bg-slate-100 hover:bg-indigo-50 hover:text-indigo-600 text-slate-700 font-semibold py-2 rounded text-sm transition">
                Gerir Menus ➔
            </a>
        </div>

        <!-- Módulo 2: Páginas -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col justify-between">
            <div>
                <div class="text-2xl mb-2">📄</div>
                <h3 class="font-bold text-slate-800 text-base mb-1">Páginas Institucionais</h3>
                <p class="text-xs text-slate-500 mb-4">Crie ou edite páginas estáticas como Política de Privacidade e Sobre Nós.</p>
            </div>
            <a href="{{ route('admin.pages.index') }}" class="block text-center bg-slate-100 hover:bg-indigo-50 hover:text-indigo-600 text-slate-700 font-semibold py-2 rounded text-sm transition">
                Gerir Páginas ➔
            </a>
        </div>

        <!-- Módulo 3: Tipos e Finalidades -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col justify-between">
            <div>
                <div class="text-2xl mb-2">🏠</div>
                <h3 class="font-bold text-slate-800 text-base mb-1">Tipos de Imóvel e Negócio</h3>
                <p class="text-xs text-slate-500 mb-4">Adicione categorias (Apartamento, Casa, Fazenda, Venda, Aluguel) dinâmicas.</p>
            </div>
            <a href="{{ route('admin.settings.types') }}" class="block text-center bg-slate-100 hover:bg-indigo-50 hover:text-indigo-600 text-slate-700 font-semibold py-2 rounded text-sm transition">
                Gerir Taxonomias ➔
            </a>
        </div>

        <!-- Módulo 4: Utilizadores -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col justify-between">
            <div>
                <div class="text-2xl mb-2">👥</div>
                <h3 class="font-bold text-slate-800 text-base mb-1">Equipe e Permissões</h3>
                <p class="text-xs text-slate-500 mb-4">Gerencie contas de Administradores e Corretores operacionais.</p>
            </div>
            <a href="{{ route('admin.users.index') }}" class="block text-center bg-slate-100 hover:bg-indigo-50 hover:text-indigo-600 text-slate-700 font-semibold py-2 rounded text-sm transition">
                Gerir Equipe ➔
            </a>
        </div>

        <!-- Módulo 5: Visitas -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col justify-between">
            <div>
                <div class="text-2xl mb-2">📅</div>
                <h3 class="font-bold text-slate-800 text-base mb-1">Agenda de Visitas</h3>
                <p class="text-xs text-slate-500 mb-4">Acompanhe agendamentos presenciais e estados de atendimento.</p>
            </div>
            <a href="{{ route('admin.visits.index') }}" class="block text-center bg-slate-100 hover:bg-indigo-50 hover:text-indigo-600 text-slate-700 font-semibold py-2 rounded text-sm transition">
                Ver Agenda ➔
            </a>
        </div>

        <!-- Módulo 6: Integração Portais XML -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col justify-between">
            <div>
                <div class="text-2xl mb-2">🌐</div>
                <h3 class="font-bold text-slate-800 text-base mb-1">Portais XML e Feeds</h3>
                <p class="text-xs text-slate-500 mb-4">Gere feeds automáticos para portais imobiliários (Zap, OLX, etc).</p>
            </div>
            <a href="{{ route('admin.portals.index') }}" class="block text-center bg-slate-100 hover:bg-indigo-50 hover:text-indigo-600 text-slate-700 font-semibold py-2 rounded text-sm transition">
                Configurar Portais ➔
            </a>
        </div>

    </div>
</div>
@endsection