@extends('layouts.app')
@section('content')

<style>
    body {
        background-color: #fff;
    }
    .diamond-page-container {
        max-width: 1500px;
        margin: 0 auto;
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        display: flex;
        gap: 40px;
    }
    
    /* Breadcrumbs */
    .breadcrumbs {
        font-size: 12px;
        color: #565959;
        margin-bottom: 20px;
        width: 100%;
    }
    
    /* Left: Image Gallery */
    .product-gallery {
        display: flex;
        flex: 1;
        gap: 15px;
        max-width: 45%;
        align-items: flex-start;
    }
    .thumbnail-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 50px;
    }
    .thumbnail {
        width: 40px;
        height: 40px;
        border: 1px solid #a2a6ac;
        border-radius: 4px;
        cursor: pointer;
        padding: 2px;
        object-fit: contain;
    }
    .thumbnail.active {
        border: 2px solid #111;
        box-shadow: 0 0 3px rgba(17,17,17,0.5);
    }
    .main-image-container {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .main-image-container img {
        width: 100%;
        max-width: 500px;
        max-height: 450px;
        object-fit: contain;
    }
    
    /* Middle: Product Details */
    .product-details {
        flex: 1;
        max-width: 35%;
    }
    
    /* Right: Buy Box Column */
    .buy-box-column {
        flex: 1;
        max-width: 20%;
    }
    .brand-link {
        font-size: 14px;
        color: #111;
        text-decoration: none;
    }
    .brand-link:hover {
        text-decoration: underline;
        color: #555;
    }
    .product-title {
        font-size: 24px;
        font-weight: 400;
        line-height: 32px;
        color: #0f1111;
        margin: 5px 0 10px 0;
        font-family: Arial, sans-serif;
    }
    .product-price {
        font-size: 28px;
        color: #0f1111;
        font-weight: 400;
        margin: 15px 0;
    }
    .product-price sup {
        font-size: 14px;
        top: -0.75em;
    }
    
    .promo-text {
        font-size: 14px;
        color: #111;
        margin-bottom: 20px;
    }
    .promo-text span {
        color: #007600;
        font-weight: bold;
    }
    
    /* Variant Selectors */
    .variant-label {
        font-size: 14px;
        color: #565959;
        margin-bottom: 8px;
        display: block;
    }
    .variant-label strong {
        color: #0f1111;
    }
    
    /* Shape (Style) Selector */
    .shape-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }
    .shape-option {
        border: 1px solid #bbbbbb;
        border-radius: 6px;
        padding: 8px;
        cursor: pointer;
        background: #fff;
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .shape-option img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .shape-option:hover {
        background: #f7fafa;
        border-color: #a2a6ac;
    }
    .shape-option.active {
        border: 2px solid #111;
        background-color: #fff;
        padding: 7px;
        box-shadow: 0 0 4px rgba(17,17,17,0.3);
    }
    
    /* Carat (Size) Selector */
    .size-grid {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: 120px;
        gap: 10px;
        margin-bottom: 20px;
        overflow-x: auto;
        padding-bottom: 15px; /* space for scrollbar */
    }
    
    /* Optional: Custom scrollbar styling for a cleaner look */
    .size-grid::-webkit-scrollbar {
        height: 6px;
    }
    .size-grid::-webkit-scrollbar-track {
        background: #f1f1f1; 
        border-radius: 4px;
    }
    .size-grid::-webkit-scrollbar-thumb {
        background: #c1c1c1; 
        border-radius: 4px;
    }
    .size-grid::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8; 
    }
    .size-box {
        border: 1px solid #cccccc;
        border-radius: 2px;
        padding: 8px 10px;
        cursor: pointer;
        text-decoration: none;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .size-box:hover {
        background: #f7fafa;
        border-color: #a2a6ac;
    }
    .size-box.active {
        border: 1px solid #111;
        background-color: #f9f9f9;
        box-shadow: 0 0 0 1px #111;
    }
    .size-title {
        font-size: 14px;
        font-weight: 700;
        color: #111;
        margin-bottom: 4px;
    }
    .size-price {
        font-size: 13px;
        color: #B12704;
    }
    
    /* Add to Cart */
    .buy-box {
        border: 1px solid #d5d9d9;
        border-radius: 8px;
        padding: 15px;
        background: #fff;
    }
    .buy-box-price {
        font-size: 28px;
        color: #0f1111;
        font-weight: 400;
        margin-bottom: 15px;
    }
    .buy-box-price sup {
        font-size: 14px;
        top: -0.75em;
    }
    .delivery-text {
        font-size: 14px;
        color: #0f1111;
        margin-bottom: 10px;
    }
    .delivery-text strong {
        font-weight: bold;
    }
    .stock-text {
        font-size: 18px;
        color: #007600;
        margin-bottom: 15px;
    }
    .add-to-cart-btn {
        width: 100%;
        background: #ffd814;
        border: 1px solid #fcd200;
        border-radius: 20px;
        padding: 10px;
        font-size: 15px;
        cursor: pointer;
        box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
        margin-bottom: 10px;
    }
    .add-to-cart-btn:hover {
        background: #f7ca00;
        border-color: #f2c200;
    }
    .buy-now-btn {
        width: 100%;
        background: #d4af37;
        border: 1px solid #ff8f00;
        border-radius: 20px;
        padding: 10px;
        font-size: 15px;
        cursor: pointer;
        box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
        margin-bottom: 15px;
    }
    .buy-now-btn:hover {
        background: #fa8900;
        border-color: #e37d00;
    }
    .buy-box-meta {
        font-size: 12px;
        color: #565959;
    }
    .buy-box-meta table {
        width: 100%;
    }
    .buy-box-meta td {
        padding-bottom: 5px;
    }
    .buy-box-meta td:first-child {
        width: 70px;
    }
    .buy-box-meta a {
        color: #111;
        text-decoration: none;
    }
    .buy-box-meta a:hover {
        text-decoration: underline;
        color: #555;
    }

    /* Product Details Section */
    .amazon-details-section {
        margin-top: 40px;
        border-top: 1px solid #e7e7e7;
        padding-top: 20px;
    }
    .amazon-details-section h2 {
        font-size: 18px;
        font-weight: 700;
        color: #0f1111;
        margin-bottom: 15px;
    }
    .highlights-table {
        width: 100%;
        max-width: 500px;
        font-size: 14px;
        margin-bottom: 25px;
    }
    .highlights-table td {
        padding: 5px 10px 5px 0;
        vertical-align: top;
    }
    .highlights-table td:first-child {
        font-weight: 700;
        color: #0f1111;
        width: 35%;
    }
    .highlights-table td:last-child {
        color: #333;
    }
    .about-item ul {
        padding-left: 20px;
        font-size: 14px;
        color: #0f1111;
        line-height: 1.5;
    }
    .about-item li {
        margin-bottom: 5px;
    }
    
    @media (max-width: 900px) {
        .diamond-page-container {
            flex-direction: column;
        }
        .product-gallery, .product-details {
            max-width: 100%;
        }
    }
</style>

<div style="max-width: 1500px; margin: 0 auto; padding: 10px 20px;">
    <div class="breadcrumbs">
        Clothing, Shoes & Jewelry › Shoe, Jewelry & Watch Accessories › Jewelry Accessories › Loose Gemstones
    </div>
</div>

<div class="diamond-page-container">
    @php
        $images = [];
        if (!empty($diamond->images)) {
            $decoded = json_decode($diamond->images, true);
            if (is_array($decoded)) {
                $images = $decoded;
            } else {
                $images = [$diamond->images];
            }
        }
        if (empty($images)) $images = ['default-placeholder.png'];
        $mainImg = str_starts_with($images[0], 'http') ? $images[0] : asset('assets/images/product/' . trim($images[0]));
    @endphp

    <!-- Left Gallery -->
    <div class="product-gallery">
        <div class="thumbnail-list">
            @foreach($images as $index => $img)
                @php $src = str_starts_with($img, 'http') ? $img : asset('assets/images/product/' . trim($img)); @endphp
                <img src="{{ $src }}" class="thumbnail {{ $index === 0 ? 'active' : '' }}" onclick="showImage(this, '{{ $src }}')">
            @endforeach
            
            @if(!empty($diamond->video))
                <div class="thumbnail" style="display:flex; align-items:center; justify-content:center; background:#f0f0f0;" onclick="showVideo(this)">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
                </div>
            @endif
        </div>
        <div class="main-image-container" id="main-media-container">
            <img src="{{ $mainImg }}" id="main-product-image" alt="{{ $diamond->item_name }}" style="width: 100%; max-width: 500px; max-height: 450px; object-fit: contain;">
            
            @if(!empty($diamond->video))
                @php
                    // Convert Dropbox dl=0 to raw=1 for streaming
                    $videoUrl = str_replace('dl=0', 'raw=1', $diamond->video);
                @endphp
                <video id="main-product-video" controls style="display:none; width: 100%; max-width: 500px; max-height: 450px; object-fit: contain; background:#000;">
                    <source src="{{ $videoUrl }}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            @endif
        </div>
    </div>

    <script>
        function showImage(thumb, src) {
            document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
            thumb.classList.add('active');
            
            document.getElementById('main-product-image').src = src;
            document.getElementById('main-product-image').style.display = 'block';
            
            let vid = document.getElementById('main-product-video');
            if(vid) {
                vid.style.display = 'none';
                vid.pause();
            }
        }
        
        function showVideo(thumb) {
            document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
            thumb.classList.add('active');
            
            document.getElementById('main-product-image').style.display = 'none';
            
            let vid = document.getElementById('main-product-video');
            if(vid) {
                vid.style.display = 'block';
                vid.play();
            }
        }
    </script>

    <!-- Right Details -->
    <div class="product-details">
        
        <h1 class="product-title">{{ $diamond->item_name }}</h1>
        
        <div style="display:flex; align-items:center; gap:10px; margin-bottom: 10px; border-bottom: 1px solid #e7e7e7; padding-bottom:10px;">
            <span style="color:#111; font-size:14px;">5.0 </span>
            <span style="color:#d4af37; font-size:14px;">★★★★★</span>
            <span style="color:#111; font-size:14px;">(27)</span>
        </div>

        @php
            $rawPrice = $diamond->price ?? '0';
            $cleanPrice = str_replace(',', '', $rawPrice);
            if (is_numeric($cleanPrice)) {
                $parts = explode('.', number_format((float)$cleanPrice, 2));
                $dollars = $parts[0];
                $cents = $parts[1] ?? '00';
            } else {
                $dollars = $rawPrice;
                $cents = '';
            }
        @endphp
        <div class="product-price">
            <sup>$</sup>{{ $dollars }}@if($cents)<sup>{{ $cents }}</sup>@endif
        </div>
        
        <div class="promo-text">
            FREE Returns v<br>
            <span>✔ Save 25% at checkout</span> <a href="#" class="brand-link">Shop items ></a>
        </div>

        @php
            $allShapes = \App\Models\Diamond::select('stone_type')->distinct()->pluck('stone_type')->filter();
            $caratsForCurrentShape = \App\Models\Diamond::where('stone_type', $diamond->stone_type)->get()->unique('carat')->sortBy(function($item) {
                return (float) $item->carat;
            });
        @endphp

        <!-- Style (Shape) Selector -->
        <span class="variant-label">Style: <strong>{{ $diamond->stone_type ?? 'Round' }}</strong></span>
        <div class="shape-grid">
            @foreach($allShapes as $shape)
                @php
                    $targetForShape = \App\Models\Diamond::where('stone_type', $shape)->where('carat', $diamond->carat)->first();
                    if (!$targetForShape) {
                        $targetForShape = \App\Models\Diamond::where('stone_type', $shape)->first();
                    }
                    if (!$targetForShape) continue;
                @endphp
                <a href="{{ route('diamond.show', $targetForShape->id) }}" class="shape-option {{ $shape == ($diamond->stone_type ?? 'Round') ? 'active' : '' }}" title="{{ $shape }}">
                    <img src="{{ asset('assets/images/diamond_page/' . strtolower(trim($shape)) . '.png') }}" alt="{{ $shape }}">
                </a>
            @endforeach
        </div>

        <!-- Size (Carat) Selector -->
        <span class="variant-label">Size: <strong>{{ $diamond->carat ?? '1' }} Carat TW</strong></span>
        <div class="size-grid">
            @foreach($caratsForCurrentShape as $targetForCarat)
                @php
                    $c = $targetForCarat->carat;
                @endphp
                <a href="{{ route('diamond.show', $targetForCarat->id) }}" class="size-box {{ $c == $diamond->carat ? 'active' : '' }}">
                    <span class="size-title">{{ $c }} Carat TW</span>
                    <span class="size-price">
                        @php
                            $raw = $targetForCarat->price;
                            $clean = str_replace(',', '', $raw);
                            echo is_numeric($clean) ? '$' . number_format((float)$clean, 2) : $raw;
                        @endphp
                    </span>
                </a>
            @endforeach
        </div>
        
        <!-- Product Details / Highlights Section -->
        <div class="amazon-details-section">
            <h2>Product details</h2>
            <div style="border-bottom: 1px solid #e7e7e7; margin-bottom: 20px;">
                <h3 style="font-size: 16px; margin: 10px 0;">Top highlights <span style="float:right;">^</span></h3>
                <table class="highlights-table">
                    <tr>
                        <td>Material</td>
                        <td>Stone</td>
                    </tr>
                    <tr>
                        <td>Metal type</td>
                        <td>No metal type</td>
                    </tr>
                    <tr>
                        <td>Gem type</td>
                        <td>Lab grown diamond</td>
                    </tr>
                    <tr>
                        <td>Stone clarity</td>
                        <td>VVS-VS</td> <!-- Static for now, update based on DB if column is added -->
                    </tr>
                    <tr>
                        <td>Stone color</td>
                        <td>D-E</td>
                    </tr>
                    <tr>
                        <td>Stone cut</td>
                        <td>{{ $diamond->stone_type ?? 'Round' }}</td>
                    </tr>
                </table>
            </div>

            <div class="about-item">
                <h3 style="font-size: 16px; font-weight:700; margin-bottom: 10px;">About this item</h3>
                @php
                    $desc = $diamond->item_description ?? '';
                    // Split by typical bullet points if present, else just display
                    if (str_contains($desc, '•') || str_contains($desc, '- ')) {
                        $descHtml = '<ul>';
                        $points = preg_split('/(•|- )/', $desc);
                        foreach($points as $point) {
                            if(trim($point) != '') {
                                $descHtml .= '<li>' . trim($point) . '</li>';
                            }
                        }
                        $descHtml .= '</ul>';
                        echo $descHtml;
                    } else {
                        // Fallback text if description is too simple
                        echo '<ul>
                                <li>' . (empty(trim($desc)) ? 'Item Details:- IGI Certified Precision cut loose Lab Grown Diamond of VVS-VS Clarity.' : nl2br(e($desc))) . '</li>
                                <li>Ideal Lab Grown loose Diamond for making a flawless piece of ring, earrings, pendant-necklace, bracelet or any precious jewelry for your wedding, engagement, anniversary or any special occasion.</li>
                                <li>Lab grown diamonds are immensely more affordable than mined diamonds, as they do not require destructive and costly earth moving mining operations.</li>
                              </ul>';
                    }
                @endphp
            </div>
        </div>
    </div>
    
    <!-- Right Buy Box Column -->
    <div class="buy-box-column">
        <div class="buy-box">
            <div class="buy-box-price">
                <sup>$</sup>{{ $dollars }}@if($cents)<sup>{{ $cents }}</sup>@endif
            </div>
            
            <div class="delivery-text">
                FREE delivery <strong>Wednesday, August 5</strong>
            </div>
            
            <div style="font-size:14px; margin-bottom: 15px;">
                <svg viewBox="0 0 384 512" width="12" height="12" style="fill:#0f1111; vertical-align:middle; margin-right:5px;"><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
                <a href="#" style="color:#111; text-decoration:none;">Deliver to New York 10036</a>
            </div>
            
            <div class="stock-text">In Stock</div>
            
            <div style="margin-bottom: 15px;">
                <select style="width: 100%; padding: 8px; border: 1px solid #d5d9d9; border-radius: 8px; background: #f0f2f2; font-size:14px; box-shadow: 0 2px 5px rgba(15,17,17,.15);">
                    <option>Quantity: 1</option>
                </select>
            </div>
            
            <form action="{{ route('cart.add') }}" method="POST">
                @csrf
                <input type="hidden" name="type" value="diamond">
                <input type="hidden" name="product_id" value="{{ $diamond->id }}">
                <input type="hidden" name="metal" value="Loose Diamond">
                <input type="hidden" name="carat" value="{{ $diamond->carat ?? '1' }}">
                
                <button type="submit" class="add-to-cart-btn">Add to Cart</button>
                <button type="button" class="buy-now-btn" onclick="this.form.submit()">Buy Now</button>
            </form>
            
            <div class="buy-box-meta">
                <table>
                    <tr>
                        <td>Ships from</td>
                        <td>Arjoni</td>
                    </tr>
                    <tr>
                        <td>Sold by</td>
                        <td>Arjoni</td>
                    </tr>
                    <tr>
                        <td>Returns</td>
                        <td><a href="#">FREE 30-day refund/replacement</a></td>
                    </tr>
                    <tr>
                        <td>Payment</td>
                        <td><a href="#">Secure transaction</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection