@extends('layouts.app')

@section('title', $produto->nome . ' | AMD-Topografia')
@section('meta_description', Str::limit(strip_tags($produto->descricao), 155))
@section('og_image', $produto->imagem ? asset('storage/' . $produto->imagem) : asset('Logo.png'))

@section('schema')
<script type="application/ld+json">
{
  "@@context": "https://schema.org/",
  "@@type": "Product",
  "name": "{{ $produto->nome }}",
  "image": [
    "{{ $produto->imagem ? asset('storage/' . $produto->imagem) : asset('Logo.png') }}"
  ],
  "description": "{{ addslashes(Str::limit(strip_tags($produto->descricao), 300)) }}",
  "sku": "AMD-PROD-{{ $produto->id }}",
  "mpn": "{{ $produto->modelo ?: 'AMD-' . $produto->id }}",
  "brand": {
    "@@type": "Brand",
    "name": "{{ $produto->marca ?: 'AMD Topografia' }}"
  },
  "offers": {
    "@@type": "Offer",
    "url": "{{ url()->current() }}",
    "priceCurrency": "AOA",
    "price": "{{ $produto->preco ?: ($produto->preco_aluguer ?: 0) }}",
    "priceValidUntil": "{{ date('Y-12-31') }}",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "{{ $produto->stock > 0 ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
    "seller": {
      "@@type": "Organization",
      "name": "AMD-II TOPOGRAFIA ENGENHARIA & PROJECTOS, LDA"
    }
  }
}
</script>
@endsection

@section('content')
<div class="min-h-screen bg-white text-slate-800 pt-36 pb-24 px-6 md:px-12 relative z-10">
    <div class="max-w-[1024px] mx-auto">
        
        {{-- Breadcrumb --}}
        <div class="mb-8 flex items-center gap-2 text-xs font-bold text-[#636D7D] uppercase tracking-wider fade-in-up">
            <a href="{{ route('loja.index') }}" class="hover:text-[#06458F] transition-colors">{{ __('app.nav_loja') }}</a>
            <span class="text-slate-300">/</span>
            <span class="text-[#06458F]">{{ $produto->nome }}</span>
        </div>

        {{-- Grid de Detalhes do Produto --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start fade-in-up">
            
            {{-- Coluna Esquerda: Imagem Principal e Miniaturas --}}
            <div class="flex flex-col items-center">
                <div class="w-full aspect-square bg-slate-50 p-10 rounded-3xl border border-slate-100 flex items-center justify-center relative overflow-hidden shadow-sm">
                    @if($produto->stock > 0 && $produto->stock <= 4)
                        <div class="absolute top-6 right-6 z-10 flex items-center gap-2 bg-[#06458F] text-white px-4 py-1.5 rounded-lg shadow-sm">
                            <span class="text-[9px] font-bold uppercase tracking-widest">{{ __('loja.stock_limited') }}</span>
                        </div>
                    @endif

                    @if($produto->stock <= 0)
                        <div class="absolute inset-0 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-3xl">
                            <span class="text-white text-base font-black uppercase tracking-[0.2em]">{{ __('loja.available') == __('loja.available') ? __('loja.maintenance') : __('loja.available') }}</span>
                        </div>
                    @endif

                    <img id="imagemPrincipal" src="{{ asset('storage/' . $produto->imagem) }}" alt="{{ $produto->nome }}" class="max-w-full max-h-full object-contain hover:scale-105 transition-transform duration-700">
                </div>

                @php $todasAsImagens = $produto->todasAsImagens(); @endphp
                @if(count($todasAsImagens) > 1)
                    <div class="w-full mt-6 flex gap-3 overflow-x-auto pb-2 justify-center">
                        @foreach($todasAsImagens as $index => $img)
                            <button type="button" class="miniatura w-20 h-20 rounded-2xl border-2 transition-all p-2 bg-white {{ $index === 0 ? 'border-[#06458F] shadow-sm' : 'border-slate-100 opacity-60' }}" data-imagem="{{ asset('storage/' . $img) }}">
                                <img src="{{ asset('storage/' . $img) }}" alt="Miniatura" class="w-full h-full object-contain">
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Coluna Direita: Info, Especificações e Compra --}}
            <div class="flex flex-col gap-8">
                <div>
                    {{-- span decorativo removido --}}
                    <h1 class="text-3xl lg:text-4xl font-extrabold text-[#06458F] mb-4 uppercase tracking-tight leading-tight">
                        {{ $produto->nome }}
                    </h1>
                    <div class="flex items-center gap-4 text-[10px] font-bold text-[#636D7D] uppercase tracking-widest">
                        <span>{{ __('loja.ref_details') }}{{ $produto->id }}</span>
                        <div class="h-1.5 w-1.5 bg-slate-200 rounded-full"></div>
                        <span class="text-[#06458F]">{{ __('loja.authentic') }}</span>
                    </div>
                </div>

                {{-- Especificações Técnicas --}}
                @php
                    $paragrafos = $produto->formattedDescricaoParagraphs();
                    $descricaoLonga = strlen($produto->descricao ?? '') > 250;
                @endphp
                <div class="bg-slate-50 border border-slate-100 p-6 sm:p-8 rounded-3xl">
                    <h3 class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#06458F] mb-4">{{ __('loja.specs') }}</h3>
                    <div id="descricao-container" class="descricao-colapsada text-[#636D7D] text-sm leading-relaxed font-light">
                        @foreach($paragrafos as $p)
                            <p class="mb-3">{{ $p }}</p>
                        @endforeach
                    </div>
                    @if($descricaoLonga)
                        <button onclick="mostrarMais()" id="btn-mais" class="text-[#06458F] hover:underline text-[9px] font-bold uppercase tracking-widest mt-4 flex items-center gap-2 transition-all">
                            {{ __('loja.read_full_desc') }}
                        </button>
                        <button onclick="mostrarMenos()" id="btn-menos" class="hidden text-[#06458F] hover:underline text-[9px] font-bold uppercase tracking-widest mt-4 flex items-center gap-2 transition-all">
                            {{ __('loja.collapse') }}
                        </button>
                    @endif
                </div>

                {{-- Preços e Ações --}}
                <div class="space-y-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        @if($produto->tipo != 'aluguer')
                            <div class="bg-[#06458F] p-6 rounded-3xl text-white shadow-sm">
                                <p class="text-[9px] font-bold uppercase tracking-[0.2em] text-[#A9B8C9] mb-2">{{ __('loja.sale_label') }}</p>
                                <p class="text-2xl font-extrabold">{{ number_format($produto->preco, 2, ',', '.') }} <span class="text-xs font-normal">Kz</span></p>
                            </div>
                        @endif

                        @if(($produto->tipo == 'aluguer' || $produto->tipo == 'ambos') && $produto->preco_aluguer)
                            <div class="bg-slate-50 border border-slate-150 p-6 rounded-3xl">
                                <p class="text-[9px] font-bold uppercase tracking-[0.2em] text-[#636D7D] mb-2">{{ __('loja.rent_label') }}</p>
                                <p class="text-2xl font-extrabold text-[#06458F]">{{ number_format($produto->preco_aluguer, 2, ',', '.') }} <span class="text-xs font-normal text-[#636D7D]">{{ __('loja.per_day') }}</span></p>
                            </div>
                        @endif
                    </div>

                    @if($produto->tipo == 'venda' || $produto->tipo == 'ambos')
                        <form class="adicionar-carrinho-form pt-2" data-produto-id="{{ $produto->id }}" data-tipo="venda">
                            @csrf
                            <div class="flex gap-4">
                                <input type="number" name="quantidade" value="1" min="1" max="{{ $produto->stock }}" class="w-20 bg-slate-50 border border-slate-200 rounded-2xl px-4 py-4 text-center font-bold outline-none focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F]">
                                <button type="submit" class="flex-grow bg-[#06458F] hover:bg-[#163f73] text-white font-bold uppercase tracking-widest py-4 rounded-2xl transition-smooth shadow-md">
                                    {{ __('loja.buy') }}
                                </button>
                            </div>
                        </form>
                    @endif

                    @php
                        $rawPhone = isset($empresaConfig) && !empty($empresaConfig->telefone) ? $empresaConfig->telefone : '948944582';
                        $cleanPhone = preg_replace('/[^0-9]/', '', $rawPhone);
                        if (strlen($cleanPhone) === 9 && str_starts_with($cleanPhone, '9')) {
                            $cleanPhone = '244' . $cleanPhone;
                        }
                        if (empty($cleanPhone)) {
                            $cleanPhone = '244948944582';
                        }
                        $whatsappMsg = 'Olá AMD-Topografia! Gostaria de pedir uma cotação/informações sobre o equipamento: ' . $produto->nome . ' (Ref: #' . $produto->id . '). ' . url()->current();
                    @endphp

                    <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($whatsappMsg) }}"
                       target="_blank" rel="noopener noreferrer"
                       class="w-full bg-[#25D366] hover:bg-[#20bd5a] text-white font-bold text-xs uppercase tracking-wider py-4 px-6 rounded-2xl transition-all duration-300 shadow-md shadow-[#25D366]/20 flex items-center justify-center gap-3">
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                            <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.694.074-2.127-.521-1.625-.676-2.678-2.327-2.759-2.435-.08-.109-.659-.877-.659-1.671 0-.795.418-1.186.566-1.345.148-.16.323-.2.43-.2.107 0 .216.002.311.006.1.006.234-.038.366.279.136.327.464 1.134.505 1.217.042.083.07.18.014.29-.056.11-.084.18-.167.279-.083.1-.175.223-.25.299-.083.084-.17.176-.073.344.097.168.431.714.927 1.155.637.568 1.175.744 1.343.827.169.083.268.07.368-.046.101-.116.43-.502.545-.674.116-.172.23-.143.388-.083.158.06 1.005.474 1.177.56.173.086.288.128.33.2.042.072.042.417-.102.822z"/>
                        </svg>
                        <span>Pedir Cotação / Negociar via WhatsApp</span>
                    </a>
                </div>

            </div>
        </div>

    </div>
</div>
@endsection

@section('styles')
<style>
    .descricao-colapsada { 
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .descricao-expandida {
        display: block;
        overflow: visible;
    }
</style>
@endsection

@section('scripts')
<script>
    function mostrarMais() {
        document.getElementById('descricao-container').classList.replace('descricao-colapsada', 'descricao-expandida');
        document.getElementById('btn-mais').classList.add('hidden');
        document.getElementById('btn-menos').classList.remove('hidden');
    }

    function mostrarMenos() {
        document.getElementById('descricao-container').classList.replace('descricao-expandida', 'descricao-colapsada');
        document.getElementById('btn-mais').classList.remove('hidden');
        document.getElementById('btn-menos').classList.add('hidden');
    }

    document.querySelectorAll('.miniatura').forEach(m => {
        m.addEventListener('click', function() {
            document.getElementById('imagemPrincipal').src = this.dataset.imagem;
            document.querySelectorAll('.miniatura').forEach(btn => {
                btn.classList.remove('border-[#06458F]', 'shadow-sm');
                btn.classList.add('border-slate-100', 'opacity-60');
            });
            this.classList.add('border-[#06458F]', 'shadow-sm');
            this.classList.remove('border-slate-100', 'opacity-60');
        });
    });

    document.querySelectorAll('.adicionar-carrinho-form').forEach(form => {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(form);
            try {
                const response = await fetch(`/carrinho/adicionar/${form.dataset.produtoId}`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': formData.get('_token'), 'Accept': 'application/json' },
                    body: formData
                });
                const data = await response.json();
                if (data.success) {
                    toggleCartDrawer(true);
                }
            } catch (error) { alert(@json(__('loja.toast_error'))); }
        });
    });
</script>
@endsection