@extends('layouts.app')

@section('title', 'Layouts')
@section('page-title', 'Layouts')

@section('content')
    <div class="page-header">
        <div>
            <h2 class="page-header__title">Layouts Disponiveis</h2>
            <p class="page-header__subtitle">{{ $layouts->count() }} layout(s) cadastrado(s)</p>
        </div>
    </div>

    <div class="layouts-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;">
        @forelse($layouts as $layout)
            <div class="card" id="layout-{{ $layout->id }}" style="border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.06);">
                {{-- Preview visual --}}
                <div style="height: 180px; background: linear-gradient(135deg, #2d5a3d 0%, #3a7550 40%, #c8965a 100%); display: flex; align-items: center; justify-content: center; position: relative;">
                    <div style="text-align: center; color: #fff;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity: 0.8;">
                            <rect x="3" y="3" width="18" height="18" rx="2"/>
                            <line x1="3" y1="9" x2="21" y2="9"/>
                            <line x1="9" y1="21" x2="9" y2="9"/>
                        </svg>
                        <div style="margin-top: 0.5rem; font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; font-weight: 700;">{{ $layout->name }}</div>
                    </div>

                    {{-- Badge de status --}}
                    <span style="position: absolute; top: 12px; right: 12px; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; background: {{ $layout->is_active ? 'rgba(45,90,61,0.9)' : 'rgba(200,60,60,0.9)' }}; color: #fff;">
                        {{ $layout->is_active ? 'Ativo' : 'Inativo' }}
                    </span>
                </div>

                {{-- Informacoes --}}
                <div style="padding: 1.25rem;">
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;">
                        <h3 style="font-size: 1.1rem; font-weight: 600;">{{ $layout->name }}</h3>
                        <span style="font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-tertiary); padding: 0.2rem 0.6rem; border-radius: 6px;">v{{ $layout->version }}</span>
                    </div>

                    <p style="font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;">
                        {{ $layout->description }}
                    </p>

                    <div style="display: flex; gap: 1rem; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 1rem;">
                        <span>
                            <strong>Segmento:</strong> {{ ucfirst($layout->segment) }}
                        </span>
                        <span>
                            <strong>Clientes:</strong> {{ $layout->clients_count }}
                        </span>
                    </div>

                    @if($layout->supported_hero_types)
                        <div style="display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;">
                            @foreach($layout->supported_hero_types as $tipo)
                                <span style="padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary);">{{ $tipo }}</span>
                            @endforeach
                        </div>
                    @endif

                    @if($layout->notes)
                        <p style="font-size: 0.78rem; color: var(--text-tertiary); font-style: italic; border-top: 1px solid var(--border-color); padding-top: 0.75rem;">
                            {{ $layout->notes }}
                        </p>
                    @endif
                </div>
            </div>
        @empty
            <div style="grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; color: var(--text-secondary);">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity: 0.4; margin-bottom: 1rem;">
                    <rect x="3" y="3" width="18" height="18" rx="2"/>
                    <line x1="3" y1="9" x2="21" y2="9"/>
                    <line x1="9" y1="21" x2="9" y2="9"/>
                </svg>
                <p style="font-size: 1rem; font-weight: 500;">Nenhum layout cadastrado</p>
                <p style="font-size: 0.85rem; margin-top: 0.5rem;">Layouts serao adicionados pelo sistema conforme novos templates forem criados.</p>
            </div>
        @endforelse
    </div>
@endsection