@extends('layouts.admin')

@section('title', 'Product Details — ' . $product->name)

@section('content')
<div style="margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
    <div>
        <a href="{{ route('admin.products.index') }}" style="color: var(--text-muted); text-decoration: none; font-size: 13px;">← Back to Product Catalog</a>
        <h1 class="serif" style="font-size: 28px; margin-top: 6px; color: #0f172a; display: flex; align-items: center; gap: 12px;">
            <span>{{ $product->name }}</span>
            <span class="badge {{ $product->is_active ? 'badge-active' : 'badge-inactive' }}">{{ $product->is_active ? 'Active' : 'Disabled' }}</span>
            @if($product->is_featured)
                <span class="badge" style="background: #e0eff9; color: #186297;">Featured</span>
            @endif
        </h1>
    </div>
    <div style="display: flex; gap: 10px;">
        <a href="{{ route('product', $product->slug) }}" target="_blank" class="btn-admin btn-secondary" style="display: inline-flex; align-items: center; gap: 6px;">
            <i data-lucide="external-link" style="width: 15px;"></i> Storefront Preview
        </a>
        <a href="{{ route('admin.products.edit', $product) }}" class="btn-admin btn-primary" style="display: inline-flex; align-items: center; gap: 6px;">
            <i data-lucide="edit-3" style="width: 15px;"></i> Edit Product
        </a>
    </div>
</div>

<!-- Metrics Cards Row -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px;">
    <div class="admin-card" style="padding: 18px 20px;">
        <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">Default Selling Price</div>
        <div style="font-size: 24px; font-weight: 700; color: #0f172a; margin-top: 4px;">₹{{ number_format($product->price, 2) }}</div>
        @if($product->compare_at)
            <div style="font-size: 12px; color: var(--text-muted); text-decoration: line-through; margin-top: 2px;">MRP: ₹{{ number_format($product->compare_at, 2) }}</div>
        @endif
    </div>

    <div class="admin-card" style="padding: 18px 20px;">
        <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">Total Inventory Stock</div>
        <div style="font-size: 24px; font-weight: 700; color: #0f172a; margin-top: 4px;">{{ $product->stock }} units</div>
        <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">Across {{ $product->variants->count() ?: 1 }} size variant(s)</div>
    </div>

    <div class="admin-card" style="padding: 18px 20px;">
        <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">Category</div>
        <div style="font-size: 20px; font-weight: 600; color: #0f172a; margin-top: 4px;">{{ $product->category->name ?? 'Unassigned' }}</div>
        <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">Tagline: {{ $product->tag ?? '—' }}</div>
    </div>

    <div class="admin-card" style="padding: 18px 20px;">
        <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">Rating & Reviews</div>
        <div style="font-size: 20px; font-weight: 600; color: #0f172a; margin-top: 4px; display: flex; align-items: center; gap: 6px;">
            <span>★ {{ number_format($product->rating ?? 5.0, 1) }}</span>
            <span style="font-size: 13px; font-weight: 400; color: var(--text-muted);">({{ $product->reviews_count ?? 0 }} reviews)</span>
        </div>
        <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">Badge: {{ $product->badge ?? 'None' }}</div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">

    <!-- Left: Product Media Gallery -->
    <div class="admin-card">
        <h3 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Product Media Gallery</h3>
        
        <div style="display: flex; gap: 16px; margin-bottom: 16px;">
            <div style="flex: 1; background: #f8faf9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; text-align: center;">
                <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500;">Main Display Photo</div>
                <div style="width: 100%; aspect-ratio: 1; background: white; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center;">
                    <img src="{{ asset($product->image) }}" alt="{{ $product->name }}" style="width: 100%; height: 100%; object-fit: contain;">
                </div>
            </div>

            <div style="flex: 1; background: #f8faf9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; text-align: center;">
                <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500;">Secondary / Hover Photo</div>
                <div style="width: 100%; aspect-ratio: 1; background: white; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center;">
                    @if($product->image_alt)
                        <img src="{{ asset($product->image_alt) }}" alt="{{ $product->name }} Hover" style="width: 100%; height: 100%; object-fit: contain;">
                    @else
                        <span style="font-size: 12px; color: #94a3b8;">No secondary photo</span>
                    @endif
                </div>
            </div>
        </div>

        <div>
            <div style="font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 8px;">Additional Gallery Photos</div>
            @php
                $gallery = is_array($product->gallery) ? $product->gallery : array_filter([$product->image, $product->image_alt]);
            @endphp
            @if(!empty($gallery))
                <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;">
                    @foreach($gallery as $gImg)
                        <div style="aspect-ratio: 1; background: #f1f5f9; border-radius: 8px; overflow: hidden; border: 1px solid #cbd5e1;">
                            <img src="{{ asset($gImg) }}" alt="Gallery" style="width: 100%; height: 100%; object-fit: contain;">
                        </div>
                    @endforeach
                </div>
            @else
                <p style="font-size: 12px; color: var(--text-muted);">No extra gallery images uploaded.</p>
            @endif
        </div>
    </div>

    <!-- Right: Description & Specifications -->
    <div class="admin-card">
        <h3 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Overview & Formulation Description</h3>
        
        <div style="margin-bottom: 20px;">
            <div style="font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 4px;">Short Tagline / Subtitle</div>
            <div style="font-size: 14px; font-weight: 600; color: #0f172a;">{{ $product->tag ?: 'No tagline provided' }}</div>
        </div>

        <div style="margin-bottom: 20px;">
            <div style="font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 4px;">Full Description</div>
            <div style="font-size: 13px; color: #334155; line-height: 1.6; background: #f8faf9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;">
                {{ $product->description ?: 'No detailed description provided for this product.' }}
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #f8faf9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;">
            <div>
                <div style="font-size: 11px; color: var(--text-muted); font-weight: 500;">Created At</div>
                <div style="font-size: 13px; color: #0f172a; font-weight: 600; margin-top: 2px;">{{ $product->created_at ? $product->created_at->format('M d, Y h:i A') : '—' }}</div>
            </div>
            <div>
                <div style="font-size: 11px; color: var(--text-muted); font-weight: 500;">Last Modified</div>
                <div style="font-size: 13px; color: #0f172a; font-weight: 600; margin-top: 2px;">{{ $product->updated_at ? $product->updated_at->format('M d, Y h:i A') : '—' }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Product Size, Pricing & Inventory Variants Breakdown -->
<div class="admin-card" style="margin-bottom: 24px;">
    <h3 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Product Variants & Inventory Breakdown</h3>
    
    <div style="overflow-x: auto;">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Variant Size</th>
                    <th>SKU Code</th>
                    <th>Selling Price (₹)</th>
                    <th>MRP / Compare (₹)</th>
                    <th>Discount</th>
                    <th>Stock Units</th>
                    <th>Inventory Status</th>
                    <th>Default Option</th>
                </tr>
            </thead>
            <tbody>
                @forelse($product->variants as $var)
                    @php
                        $off = ($var->compare_at && $var->compare_at > $var->price)
                            ? round((1 - $var->price / $var->compare_at) * 100)
                            : null;
                    @endphp
                    <tr>
                        <td>
                            <strong style="color: #0f172a; font-size: 14px;">{{ $var->name }}</strong>
                        </td>
                        <td>
                            <span style="font-family: monospace; font-size: 12px; color: #64748b; background: #f1f5f9; padding: 2px 6px; border-radius: 4px;">{{ $var->sku }}</span>
                        </td>
                        <td>
                            <strong style="color: #0f172a;">₹{{ number_format($var->price, 2) }}</strong>
                        </td>
                        <td>
                            @if($var->compare_at)
                                <span style="color: var(--text-muted); text-decoration: line-through;">₹{{ number_format($var->compare_at, 2) }}</span>
                            @else
                                <span style="color: var(--text-muted);">—</span>
                            @endif
                        </td>
                        <td>
                            @if($off)
                                <span style="background: #fee2e2; color: #991b1b; font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: 12px;">Save {{ $off }}%</span>
                            @else
                                <span style="color: var(--text-muted); font-size: 12px;">—</span>
                            @endif
                        </td>
                        <td>
                            <strong>{{ $var->stock }} units</strong>
                        </td>
                        <td>
                            @if($var->stock > 10)
                                <span class="badge badge-delivered">In Stock</span>
                            @elseif($var->stock > 0)
                                <span class="badge badge-pending">Low Stock</span>
                            @else
                                <span class="badge badge-cancelled">Out of Stock</span>
                            @endif
                        </td>
                        <td>
                            @if($var->is_default)
                                <span class="badge" style="background: #e0eff9; color: #186297; font-weight: 600;">✓ Default Variant</span>
                            @else
                                <span style="color: var(--text-muted); font-size: 12px;">—</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" style="text-align: center; color: var(--text-muted); padding: 20px;">
                            Standard size variant only.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Search Engine Optimization (SEO) & Social Meta Card -->
<div class="admin-card">
    <h3 class="serif" style="font-size: 18px; margin: 0 0 4px 0; color: #0f172a;">Search Engine Optimization (SEO) & Meta Data</h3>
    <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 16px;">Configured metadata for Google search results and social media embeds.</p>

    <!-- Google Search Result Snippet Preview Card -->
    <div style="background: white; border: 1px solid #cbd5e1; border-radius: 10px; padding: 16px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
        <div style="font-size: 11px; color: #5f6368; display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
            <span style="display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #186297; color: white; text-align: center; line-height: 16px; font-weight: bold; font-size: 9px;">D</span>
            <span>https://divnedrops.com › product › {{ $product->slug }}</span>
        </div>
        <div style="font-size: 18px; color: #1a0dab; font-weight: 500; text-decoration: underline; margin-bottom: 4px; cursor: pointer;">
            {{ $product->meta_title ?: ($product->name . ' — Divine Drops Luxury Skincare') }}
        </div>
        <div style="font-size: 13px; color: #4d5156; line-height: 1.5;">
            {{ $product->meta_description ?: ($product->description ?: 'Buy 100% natural Indian skincare online at Divine Drops. Free shipping on orders over ₹499.') }}
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
        <div style="background: #f8faf9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;">
            <div style="font-size: 11px; color: var(--text-muted); font-weight: 500;">Meta Keywords</div>
            <div style="font-size: 13px; color: #0f172a; margin-top: 2px;">{{ $product->meta_keywords ?: 'Not set' }}</div>
        </div>
        <div style="background: #f8faf9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;">
            <div style="font-size: 11px; color: var(--text-muted); font-weight: 500;">OpenGraph Social Title</div>
            <div style="font-size: 13px; color: #0f172a; margin-top: 2px;">{{ $product->og_title ?: 'Not set' }}</div>
        </div>
    </div>
</div>
@endsection