@extends('layouts.app')
@section('content')
<style>
.pdp-container { display: flex; gap: 60px; max-width: 1400px; justify-content: center; margin: 0 auto; padding: 20px 40px; font-family: 'Inter', sans-serif; align-items: flex-start; }
.pdp-gallery { flex: 1.5; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px; }
.pdp-gallery img { width: 100%; height: auto; object-fit: cover; background: #f8f8f8; }
.pdp-details { flex: 1; max-width: 500px; display: flex; flex-direction: column; position: sticky; top: 20px; }
.pdp-breadcrumbs { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; width: 100%; padding: 20px 40px 0 40px;}

.pdp-header { display: flex; justify-content: space-between; align-items: center; }
.pdp-sku { font-size: 12px; color: #888; }
.pdp-actions { display: flex; gap: 15px; align-items: center; font-size: 13px; color: #555; }
.pdp-actions svg { width: 18px; height: 18px; cursor: pointer; }
.pdp-title { font-family: 'Times New Roman', serif; font-size: 32px; line-height: 1.2; color: #1a252f; font-weight: normal; margin-top: 15px; }
.pdp-subtitle { font-size: 13px; color: #555; margin-top: 10px; }
.pdp-price-wrap { display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.pdp-price { font-size: 20px; font-weight: 600; color: #1a252f; }
.pdp-affirm { font-size: 12px; color: #666; }
.pdp-divider { height: 1px; background: #eee; margin: 25px 0; }
.pdp-option-group { margin-bottom: 25px; }
.pdp-option-label { font-size: 13px; font-weight: bold; color: #1a252f; margin-bottom: 12px; }
.pdp-option-label span { font-weight: normal; color: #666; margin-left: 5px; }
.pdp-metal-swatches { display: flex; gap: 12px; }
.pdp-metal-swatch { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; cursor: pointer; color: #333; position: relative; border: 1px solid transparent; }
.pdp-metal-swatch.active { border-color: #000; }
.pdp-metal-swatch.white-gold { background-color: #e8e4db; }
.pdp-metal-swatch.yellow-gold { background-color: #f3d39a; }
.pdp-metal-swatch.rose-gold { background-color: #e4bea6; }
.pdp-metal-swatch.platinum { background-color: #e5e6e8; }
.pdp-shape-icon { width: 28px; height: 34px; object-fit: contain; cursor: pointer; opacity: 0.6; }
.pdp-shape-icon.active { opacity: 1; border-bottom: 1px solid #000; padding-bottom: 2px; }
.pdp-quality-buttons { display: flex; gap: 10px; }
.pdp-btn-outline { padding: 10px 24px; border: 1px solid #ccc; border-radius: 30px; font-size: 12px; cursor: pointer; background: transparent; letter-spacing: 0.5px; }
.pdp-btn-outline.active { background: #1a252f; color: #fff; border-color: #1a252f; }
.pdp-select-wrap { position: relative; }
.pdp-select { width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; appearance: none; background: #fff; cursor: pointer; }
.pdp-select-wrap::after { content: 'v'; position: absolute; right: 15px; top: 15px; pointer-events: none; font-size: 12px; transform: scaleX(1.5); }
.pdp-add-to-bag { width: 100%; padding: 18px; background: #062b32; color: #fff; border: none; border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer; margin-top: 10px; letter-spacing: 1px; }
.pdp-add-to-bag:hover { background: #041f24; }
.pdp-shipping { font-size: 12px; color: #666; display: flex; justify-content: space-between; margin-top: 15px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.pdp-accordion-group { margin-top: 10px; }
.pdp-accordion { border-bottom: 1px solid #eee; padding: 18px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.pdp-accordion-content { font-size: 13px; color: #555; line-height: 1.6; padding: 15px 0; display: none; }
.pdp-accordion-content.active { display: block; }
@media (max-width: 900px) {
    .pdp-container { flex-direction: column; gap: 30px; }
}
</style>

@php
    $images = [];
    if (!empty($product->image)) {
        $decoded = json_decode($product->image, true);
        if (is_array($decoded)) {
            $images = $decoded;
        } else {
            $images = [$product->image];
        }
    } else {
        $images = ['default-placeholder.png'];
    }
    $mainImgSrc = str_starts_with($images[0], 'http') ? $images[0] : asset('assets/images/product/' . $images[0]);
@endphp

<div class="pdp-breadcrumbs">
    Arjoni / Engagement Rings / {{ $product->name }}
</div>
<div class="pdp-container">
    <!-- Left Gallery -->
    <div class="pdp-gallery">
        @foreach($images as $img)
            @php $thumbSrc = str_starts_with($img, 'http') ? $img : asset('assets/images/product/' . trim($img)); @endphp
            <img src="{{ $thumbSrc }}" alt="{{ $product->name }}" onerror="this.src='{{ asset('assets/images/default-placeholder.png') }}'">
        @endforeach
    </div>

    <!-- Right Details -->
    <div class="pdp-details">
        <div class="pdp-header">
            <div class="pdp-sku">SKU: {{ $product->sku ?? 'N/A' }}</div>
            <div class="pdp-actions">
                <span style="color:#ccc;">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                <span style="text-decoration: underline;">Leave a Review</span>
                <svg class="wishlist-btn" data-id="{{ $product->id }}" style="cursor:pointer;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{{ in_array($product->id, session()->get('wishlist', [])) ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            </div>
        </div>

        <h1 class="pdp-title">{{ $product->name }}</h1>
        <div class="pdp-subtitle">
            {{ $product->color ?? 'F' }} Color &bull; {{ $product->clarity ?? 'VS2' }} Clarity &bull; {{ $product->certification ?? 'IGI Certified' }}
        </div>

        <div class="pdp-price-wrap">
            <div class="pdp-price">$ {{ $product->price }} USD</div>
            <div class="pdp-affirm">0% APR or as low as $94/mo with <strong>affirm</strong>. <span style="text-decoration:underline;">See if you qualify</span></div>
        </div>

        <div class="pdp-divider"></div>

        <!-- Metal Selection -->
        <div class="pdp-option-group" id="metal-group">
            <div class="pdp-option-label">Metal: <span id="selected-metal">{{ current(array_filter(array_map('trim', explode(',', $product->metal ?? '14K Yellow Gold')))) }}</span></div>
            <div class="pdp-metal-swatches">
                @php
                    $variants = [];
                    if (!empty($product->master_sku)) {
                        $variants = App\Models\Product::where('master_sku', $product->master_sku)->get();
                    } else {
                        $variants = collect([$product]);
                    }
                    
                    $displayedMetals = [];
                @endphp
                @foreach($variants as $variant)
                    @php
                        $metal = current(array_filter(array_map('trim', explode(',', $variant->metal ?? '14K Yellow Gold'))));
                        if(in_array($metal, $displayedMetals)) continue;
                        $displayedMetals[] = $metal;
                        
                        $mClass = 'yellow-gold';
                        $mLabel = 'YG';
                        $metalLower = strtolower($metal);
                        if(str_contains($metalLower, 'white')) { $mClass = 'white-gold'; $mLabel = 'WG'; }
                        if(str_contains($metalLower, 'rose')) { $mClass = 'rose-gold'; $mLabel = 'RG'; }
                        if(str_contains($metalLower, 'platinum') || str_contains($metalLower, 'pt')) { $mClass = 'platinum'; $mLabel = 'PL'; }
                        
                        if(preg_match('/(\d+k)/i', $metal, $matches)) {
                            $mLabel = strtoupper($matches[1]);
                        }
                        
                        $targetVariantForMetal = $variants->filter(function($v) use ($metal) {
                            $vMetal = current(array_filter(array_map('trim', explode(',', $v->metal ?? '14K Yellow Gold'))));
                            return $vMetal == $metal;
                        })->where('total_carat', $product->total_carat)->first() ?? $variant;
                    @endphp
                    <a href="{{ route('product.show', $targetVariantForMetal->id) }}" style="text-decoration:none;">
                        <div class="pdp-metal-swatch {{ $mClass }} {{ $targetVariantForMetal->id == $product->id ? 'active' : '' }}" title="{{ $metal }}">{{ $mLabel }}</div>
                    </a>
                @endforeach
            </div>
        </div>

        <!-- Carat Selection -->
        <div class="pdp-option-group" id="carat-group">
            <div class="pdp-option-label">Carat Weight: <span id="selected-carat">{{ $product->total_carat ?? '' }} CT</span></div>
            <div class="pdp-quality-buttons" style="flex-wrap: wrap;">
                @php
                    $displayedCarats = [];
                @endphp
                @foreach($variants as $v)
                    @php
                        $c = $v->total_carat;
                        if(empty($c) || in_array($c, $displayedCarats)) continue;
                        $displayedCarats[] = $c;
                        
                        $targetVariantForCarat = $variants->filter(function($vr) use ($c, $product) {
                            $vrMetal = current(array_filter(array_map('trim', explode(',', $vr->metal ?? '14K Yellow Gold'))));
                            $pMetal = current(array_filter(array_map('trim', explode(',', $product->metal ?? '14K Yellow Gold'))));
                            return $vrMetal == $pMetal && $vr->total_carat == $c;
                        })->first() ?? $v;
                    @endphp
                    <a href="{{ route('product.show', $targetVariantForCarat->id) }}" style="text-decoration:none;">
                        <button class="pdp-btn-outline {{ $c == $product->total_carat ? 'active' : '' }}">{{ $c }} CT</button>
                    </a>
                @endforeach
            </div>
        </div>

        <!-- Quality Selection -->
        <div class="pdp-option-group" id="quality-group">
            <div class="pdp-option-label">Quality: <span id="selected-quality">{{ $product->color ?? 'F' }}-{{ $product->clarity ?? 'VS2' }}</span></div>
            <div class="pdp-quality-buttons">
                <button class="pdp-btn-outline active">{{ $product->color ?? 'F' }}-{{ $product->clarity ?? 'VS2' }}</button>
                <button class="pdp-btn-outline">E-VS1</button>
                <button class="pdp-btn-outline">D-VVS2</button>
            </div>
        </div>

        <!-- Ring Size -->
        <div class="pdp-option-group">
            <div style="display:flex; justify-content:space-between; margin-bottom:12px;">
                <div class="pdp-option-label" style="margin:0;">U.S. Ring Size</div>
                <div style="font-size:12px; text-decoration:underline; cursor:pointer;">Size Guide</div>
            </div>
            <div class="pdp-select-wrap">
                <select class="pdp-select">
                    <option>Select Ring Size</option>
                    <option>5</option>
                    <option>5.5</option>
                    <option>6</option>
                    <option>6.5</option>
                    <option>7</option>
                    <option>7.5</option>
                    <option>8</option>
                </select>
            </div>
        </div>

        <!-- Add To Bag Form -->
        <form action="{{ route('cart.add') }}" method="POST">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            <input type="hidden" name="metal" id="input-metal" value="{{ $product->metal ?? '14K Yellow Gold' }}">
            <input type="hidden" name="quality" id="input-quality" value="{{ $product->color ?? 'F' }}-{{ $product->clarity ?? 'VS2' }}">
            <input type="hidden" name="ring_size" id="input-ring_size" value="Select Ring Size">
            <input type="hidden" name="carat" id="input-carat" value="{{ $product->total_carat ?? '' }}">
            
            <button type="submit" class="pdp-add-to-bag">ADD TO BAG - $ {{ $product->price }} USD</button>
        </form>

        <div class="pdp-shipping">
            <span>Order now to ship by: <strong>Mon, Aug 17</strong></span>
            <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> Consult with a Personal Shopper</span>
        </div>

        <!-- Accordions -->
        <div class="pdp-accordion-group">
            <div class="pdp-accordion" onclick="this.nextElementSibling.classList.toggle('active')">
                <span>Description</span>
                <span>+</span>
            </div>
            <div class="pdp-accordion-content active">
                {{ $product->description ?? 'Discover the perfect symbol of your love with this stunning ring. Crafted with exquisite diamonds that shine brilliantly, this ring is available in a variety of metal options.' }}
            </div>
            
            <div class="pdp-accordion" onclick="this.nextElementSibling.classList.toggle('active')">
                <span>Delivery & Returns</span>
                <span>+</span>
            </div>
            <div class="pdp-accordion-content">
                Free shipping and returns on all orders within the US. 30-day money back guarantee.
            </div>

            <div class="pdp-accordion" onclick="this.nextElementSibling.classList.toggle('active')">
                <span>Style Details</span>
                <span>+</span>
            </div>
            <div class="pdp-accordion-content">
                Carat: {{ $product->total_carat ?? 'N/A' }}<br>
                Metal Purity: {{ $product->metal_purity ?? 'N/A' }}
            </div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Thumbnails to Main Image
    const mainImg = document.querySelector('.pdp-main-image img');
    const thumbs = document.querySelectorAll('.pdp-thumbnails img');
    thumbs.forEach(thumb => {
        thumb.addEventListener('click', function() {
            mainImg.src = this.src;
        });
    });

    // Quality
    const qualityBtns = document.querySelectorAll('.pdp-quality-buttons .pdp-btn-outline');
    const qualityLabel = document.getElementById('selected-quality');
    const inputQuality = document.getElementById('input-quality');
    qualityBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            qualityBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            qualityLabel.textContent = this.textContent;
            if(inputQuality) inputQuality.value = this.textContent;
        });
    });

    // Ring Size
    const ringSizeSelect = document.querySelector('.pdp-select');
    const inputRingSize = document.getElementById('input-ring_size');
    if(ringSizeSelect && inputRingSize) {
        ringSizeSelect.addEventListener('change', function() {
            inputRingSize.value = this.value;
        });
    }
});
</script>
@endsection