@extends('layouts.app')

@section('title', $product->meta_title ?: $product->name)
@section('meta_description', $product->meta_description ?: Str::limit(strip_tags($product->short_description), 155))

@section('content')
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- BACK BUTTON -->
        <a href="{{ route('catalog') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-brand-red transition mb-12 font-medium">
            &larr; Kembali ke Katalog
        </a>

        <!-- MAIN LAYOUT -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
            
            <!-- Left: Gallery/Images -->
            <div class="space-y-6" x-data="{ activeImage: 0 }">
                <!-- Large Image Display -->
                <div class="bg-gray-50 border border-gray-200 rounded-2xl p-8 aspect-square flex items-center justify-center relative overflow-hidden shadow-sm">
                    @if($product->images && count($product->images) > 0)
                        @foreach($product->images as $index => $img)
                            <img src="{{ asset('storage/' . $img) }}" alt="{{ $product->name }}" 
                                 x-show="activeImage === {{ $index }}" 
                                 class="max-h-full max-w-full object-contain transition duration-300">
                        @endforeach
                    @else
                        <span class="text-gray-400 font-bold font-display">[NO IMAGE AVAILABLE]</span>
                    @endif
                </div>

                <!-- Thumbnails -->
                @if($product->images && count($product->images) > 1)
                    <div class="grid grid-cols-4 gap-4">
                        @foreach($product->images as $index => $img)
                            <button @click="activeImage = {{ $index }}" 
                                    class="bg-white border border-gray-200 hover:border-brand-red p-2 rounded-lg aspect-square flex items-center justify-center overflow-hidden transition shadow-sm"
                                    :class="activeImage === {{ $index }} ? 'border-brand-red ring-1 ring-brand-red' : ''">
                                <img src="{{ asset('storage/' . $img) }}" alt="Thumbnail" class="max-h-full max-w-full object-contain">
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>

            <!-- Right: Details -->
            <div class="space-y-8">
                <div>
                    <div class="flex items-center space-x-3 mb-4">
                        <span class="bg-brand-red text-white text-xs font-bold font-display px-3 py-1 rounded uppercase tracking-wider">
                            {{ $product->category->name }}
                        </span>
                        <span class="bg-gray-100 text-gray-700 text-xs font-bold font-display px-3 py-1 rounded uppercase tracking-wider">
                            {{ $product->brand->name }}
                        </span>
                    </div>
                    <h1 class="text-3xl sm:text-4xl font-extrabold font-display leading-tight mb-2 text-gray-900">{{ $product->name }}</h1>
                    @if($product->sku)
                        <span class="text-xs font-mono text-gray-400 uppercase tracking-widest block mb-4">SKU: {{ $product->sku }}</span>
                    @endif
                    <p class="text-gray-600 leading-relaxed text-sm sm:text-base mt-6">
                        {{ $product->short_description }}
                    </p>
                </div>

                <!-- B2B WhatsApp Call-to-Action -->
                @php
                    $waMessage = "Halo PT Benang Merapi Perkasa, saya tertarik dan ingin meminta penawaran harga untuk produk: {$product->name} (Brand: {$product->brand->name})";
                    $waLink = "https://wa.me/" . preg_replace('/[^0-9]/', '', $companySettings['whatsapp']) . "?text=" . urlencode($waMessage);
                @endphp
                <div>
                    <a href="{{ $waLink }}" target="_blank" class="inline-flex items-center bg-brand-red hover:bg-brand-redHover text-white font-bold px-8 py-4.5 rounded-lg shadow-xl shadow-brand-red/20 transition duration-300 transform hover:-translate-y-0.5 font-display text-base">
                        <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.458 5.704 1.459h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                        </svg>
                        Minta Penawaran via WhatsApp
                    </a>
                </div>

                <!-- Specs/Properties Table -->
                @if($product->specs && count($product->specs) > 0)
                    <div class="border border-gray-200 rounded-xl overflow-hidden bg-white shadow-sm">
                        <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                            <h3 class="text-sm font-bold font-display uppercase tracking-wider text-gray-800">Spesifikasi Teknis</h3>
                        </div>
                        <table class="w-full text-sm text-left">
                            <tbody class="divide-y divide-gray-200">
                                @foreach($product->specs as $spec)
                                    <tr class="hover:bg-gray-50 transition">
                                        <td class="px-6 py-4 font-semibold text-gray-500 w-1/3">{{ $spec['parameter'] }}</td>
                                        <td class="px-6 py-4 text-gray-700">{{ $spec['value'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif

                <!-- Full Description -->
                @if($product->full_description)
                    <div class="space-y-4 pt-6 border-t border-gray-200">
                        <h3 class="text-lg font-bold font-display text-gray-800">Deskripsi Lengkap</h3>
                        <div class="text-sm text-gray-600 leading-relaxed font-sans space-y-4">
                            {!! nl2br(e($product->full_description)) !!}
                        </div>
                    </div>
                @endif

            </div>
        </div>

        <!-- RELATED PRODUCTS -->
        @if($relatedProducts->count() > 0)
            <div class="mt-24 pt-16 border-t border-gray-200">
                <h2 class="text-2xl font-bold font-display text-gray-800 mb-8 uppercase tracking-wider">Produk Terkait</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    @foreach($relatedProducts as $rel)
                        <div class="group bg-white border border-gray-200 hover:border-brand-red/20 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition duration-300 flex flex-col justify-between">
                            <div>
                                <div class="bg-gray-50 aspect-square flex items-center justify-center p-4 relative">
                                    @if($rel->images && count($rel->images) > 0)
                                        <img src="{{ asset('storage/' . $rel->images[0]) }}" alt="{{ $rel->name }}" class="max-h-full max-w-full object-contain group-hover:scale-105 transition duration-500">
                                    @else
                                        <span class="text-xs text-gray-400">[NO IMAGE]</span>
                                    @endif
                                    <span class="absolute top-3 left-3 bg-brand-red text-white text-[9px] font-bold font-display px-2 py-0.5 rounded uppercase tracking-wider">
                                        {{ $rel->brand->name }}
                                    </span>
                                </div>
                                <div class="p-6">
                                    <h4 class="font-bold font-display text-gray-800 group-hover:text-brand-red transition line-clamp-1 text-sm">{{ $rel->name }}</h4>
                                    <p class="text-xs text-gray-500 mt-2 line-clamp-2 leading-relaxed">{{ $rel->short_description }}</p>
                                </div>
                            </div>
                            <div class="p-6 pt-0">
                                <a href="{{ route('product.detail', $rel->slug) }}" class="w-full bg-brand-red hover:bg-brand-redHover text-white py-2 rounded text-center text-xs font-bold block transition">
                                    Lihat Detail
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

    </div>
</section>
@endsection