@extends('layouts.app')

@section('title', 'LaravelStore - Sua Loja Online')

@section('content')
{{-- Dynamic Hero Section --}}
@php
    $hero = $sections->firstWhere('section_key', 'hero');
@endphp
@if($hero && $hero->is_active)
<div class="hero text-white py-5 mb-5" style="background: {{ $hero->bg_color ?? '#2563eb' }}; color: {{ $hero->text_color ?? '#ffffff' }};">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                @if($hero->image)
                    <img src="{{ asset('storage/' . $hero->image) }}" class="img-fluid rounded mb-3" alt="{{ $hero->title }}" style="max-height: 200px;">
                @endif
                <h1 class="fw-bold mb-3">{{ $hero->title ?? 'Bem-vindo à nossa Loja' }}</h1>
                <p class="mb-3 fs-5">{{ $hero->subtitle ?? 'Encontre os melhores produtos com preços especiais.' }}</p>
                @if($hero->button_text)
                    <a href="{{ $hero->button_url ?? route('shop') }}" class="btn btn-light btn-lg">
                        <i class="fas fa-shopping-bag me-2"></i>{{ $hero->button_text }}
                    </a>
                @endif
            </div>
        </div>
    </div>
</div>
@else
<div class="hero text-white py-5 mb-5" style="background: #2563eb;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="fw-bold mb-3">Bem-vindo à nossa Loja</h1>
                <p class="mb-3 fs-5">Encontre os melhores produtos com preços especiais.</p>
                <a href="{{ route('shop') }}" class="btn btn-light btn-lg">
                    <i class="fas fa-shopping-bag me-2"></i>Ver Produtos
                </a>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Produtos em Destaque + Categorias --}}
<div class="container" id="destaques">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0"><i class="fas fa-star text-warning me-2"></i>Produtos em Destaque</h2>
        <a href="{{ route('shop') }}" class="btn btn-outline-primary"><i class="fas fa-eye me-1"></i>Ver Todos</a>
    </div>
    <div class="row">
        @forelse($products as $product)
            @php
                $hasActiveDiscount = $product->hasDiscount();
                $hasScheduledDiscount = $product->hasScheduledDiscount();
                $discountPercent = $hasActiveDiscount ? $product->getDiscountPercent() : 0;
                $hasCoupon = $activeCoupons->first(fn($c) => $c->appliesToProduct($product->id));
            @endphp
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="card h-100 shadow-sm" style="border-radius: 8px;">
                    @php
                        $imgSource = $product->featured_image ?: $product->image;
                        $imgSrc = null;
                        if ($imgSource) {
                            if (str_starts_with($imgSource, 'data:') || str_starts_with($imgSource, 'http')) {
                                $imgSrc = $imgSource;
                            } elseif (str_starts_with($imgSource, '/storage/')) {
                                $imgSrc = asset(substr($imgSource, 1));
                            } else {
                                $imgSrc = asset('storage/' . $imgSource);
                            }
                        }
                    @endphp
                    @if($imgSrc)
                        <img src="{{ $imgSrc }}" class="card-img-top" alt="{{ $product->name }}" style="height: 160px; object-fit: cover;">
                    @else
                        <div class="bg-light d-flex align-items-center justify-content-center" style="height: 160px;">
                            <i class="fas fa-box-open fa-3x text-muted"></i>
                        </div>
                    @endif
                    <div class="card-body">
                        <span class="badge bg-{{ $product->is_digital ? 'info' : 'secondary' }} mb-2">{{ $product->is_digital ? 'Digital' : 'Físico' }}</span>
                        @if($hasCoupon)
                            <span class="badge mb-2" style="background: #f59e0b; color: #1e293b;"><i class="fas fa-tag me-1"></i>Cupão</span>
                        @endif
                        @if($hasActiveDiscount)
                            <span class="badge bg-danger mb-2 float-end">-{{ $discountPercent }}%</span>
                        @elseif($hasScheduledDiscount)
                            <span class="badge bg-warning text-dark mb-2 float-end"><i class="fas fa-clock me-1"></i>Breve</span>
                        @endif
                        <h6 class="card-title mb-2">{{ $product->name }}</h6>
                        <p class="text-muted small mb-2">{{ Str::limit($product->description, 40) }}</p>
                        <div class="mb-2">
                            @if($hasActiveDiscount)
                                <span class="text-decoration-line-through text-muted small">{{ number_format($product->price, 2) }}€</span>
                                <span class="text-danger fw-bold ms-1">{{ number_format($product->discount_price, 2) }}€</span>
                            @else
                                <span class="text-dark fw-bold">{{ number_format($product->price, 2) }}€</span>
                            @endif
                        </div>
                        @if($hasActiveDiscount && $product->getDiscountEndFormatted())
                            <small class="text-danger d-block mb-1"><i class="fas fa-hourglass-end me-1"></i>Termina {{ $product->getDiscountEndFormatted() }}</small>
                        @elseif($hasScheduledDiscount)
                            <small class="text-warning d-block mb-1"><i class="fas fa-calendar-alt me-1"></i>Inicia {{ $product->getDiscountStartFormatted() }}</small>
                        @endif
                        @if($product->shipping_cost > 0)
                            <small class="text-muted d-block mb-2"><i class="fas fa-truck"></i> Envio: {{ number_format($product->shipping_cost, 2) }}€</small>
                        @else
                            <small class="text-success d-block mb-2"><i class="fas fa-check-circle"></i> Envio Grátis</small>
                        @endif
                        <a href="{{ route('product', $product->slug) }}" class="btn btn-primary btn-sm w-100">Ver Produto</a>
                        @if($product->is_used)
                            <small class="d-block mt-1 text-center" style="color: #d97706; font-weight: 600;">
                                <i class="fas fa-history"></i> USADO
                            </small>
                        @endif
                        <div class="d-flex justify-content-center gap-2 mt-3 pt-2 border-top">
                            @php
                                $productUrl = urlencode(route('product', $product->slug));
                                $productName = urlencode($product->name);
                            @endphp
                            @if($product->share_facebook)
                            <a href="{{ $product->share_facebook }}" target="_blank" class="btn btn-sm btn-outline-primary" title="Partilhar no Facebook" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            @else
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ $productUrl }}" target="_blank" class="btn btn-sm btn-outline-primary" title="Partilhar no Facebook" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            @endif
                            @if($product->share_whatsapp)
                            <a href="{{ $product->share_whatsapp }}" target="_blank" class="btn btn-sm text-white" title="Partilhar no WhatsApp" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: #25D366; border: none;">
                                <i class="fab fa-whatsapp"></i>
                            </a>
                            @else
                            <a href="https://wa.me/?text={{ $productName }}%20-%20{{ $productUrl }}" target="_blank" class="btn btn-sm text-white" title="Partilhar no WhatsApp" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: #25D366; border: none;">
                                <i class="fab fa-whatsapp"></i>
                            </a>
                            @endif
                            @if($product->share_instagram)
                            <a href="{{ $product->share_instagram }}" target="_blank" class="btn btn-sm btn-outline-danger" title="Partilhar no Instagram" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-instagram"></i>
                            </a>
                            @else
                            <a href="https://www.instagram.com/" target="_blank" class="btn btn-sm btn-outline-danger" title="Partilhar no Instagram" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-instagram"></i>
                            </a>
                            @endif
                            <button onclick="copyProductLink('{{ $productUrl }}')" class="btn btn-sm btn-outline-secondary" title="Copiar Link" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-link"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center">
                <p class="text-muted">Sem produtos em destaque.</p>
            </div>
        @endforelse
    </div>

    <div id="categorias" class="mt-5">
    <h2 class="mb-4"><i class="fas fa-th-large me-2"></i>Categorias</h2>
    <div class="row">
        @forelse($categories as $category)
            <div class="col-md-4 mb-3">
                <a href="{{ route('category', $category->slug) }}" class="text-decoration-none">
                    <div class="card bg-light border-0 text-center py-4" style="border-radius: 8px;">
                        <i class="fas fa-folder text-primary fa-2x mb-2"></i>
                        <h6 class="text-dark mb-1">{{ $category->name }}</h6>
                        <small class="text-muted">{{ $category->products->count() }} produtos</small>
                    </div>
                </a>
            </div>
        @empty
            <div class="col-12 text-center">
                <p class="text-muted">Sem categorias.</p>
            </div>
        @endforelse
    </div>
</div>
</div>

{{-- Dynamic Sections (Features, Newsletter, etc.) - Depois dos Produtos --}}
@foreach($sections as $section)
    @if($section->section_key !== 'hero')
        @if($section->section_key === 'features')
            @include('shop.sections.features', ['section' => $section])
        @elseif($section->section_key === 'newsletter')
            @include('shop.sections.newsletter', ['section' => $section])
        @else
            @include('shop.sections.generic', ['section' => $section])
        @endif
    @endif
@endforeach

@endsection

@push('scripts')
<script>
function copyProductLink(url) {
    navigator.clipboard.writeText(decodeURIComponent(url)).then(() => {
        alert('Link copiado!');
    });
}
</script>
@endpush