@extends('admin.master')

@section('content')
<style>
    .product-details-page .page-title {
        font-size: 28px;
        font-weight: 700;
        color: #1e293b;
    }

    .product-details-page .page-subtitle {
        color: #64748b;
        font-size: 14px;
    }

    .product-details-page .card {
        border: 1px solid #dbe4ee;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        background: #fff;
        margin-bottom: 20px;
    }

    .product-details-page .card-header {
        background: linear-gradient(135deg, #f8fbff 0%, #eef5fb 100%);
        border-bottom: 1px solid #dbe4ee;
        padding: 16px 20px;
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
    }

    .product-details-page .table {
        margin-bottom: 0;
    }

    .product-details-page .table th,
    .product-details-page .table td {
        border: 1px solid #e7edf3 !important;
        padding: 12px 14px;
        vertical-align: middle;
    }

    .product-details-page .table th {
        background: #f8fafc;
        color: #334155;
        font-weight: 700;
        width: 180px;
    }

    .product-details-page .table td {
        color: #0f172a;
        font-weight: 500;
    }

    .product-details-page .info-box {
        border: 1px solid #e7edf3;
        border-radius: 14px;
        background: #fff;
        padding: 16px;
    }

    .product-details-page .content-box {
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        background: #fbfdff;
        padding: 16px;
        color: #334155;
        line-height: 1.7;
        min-height: 90px;
    }

    .product-details-page .thumb-main {
        width: 100%;
        max-height: 340px;
        object-fit: cover;
        border-radius: 16px;
        border: 1px solid #dbe4ee;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        background: #fff;
    }

    .product-details-page .media-item {
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
        height: 100%;
    }

    .product-details-page .media-preview {
        width: 100%;
        height: 170px;
        object-fit: cover;
        background: #f8fafc;
    }

    .product-details-page .media-meta {
        padding: 10px 12px;
        font-size: 12px;
        color: #64748b;
        border-top: 1px solid #e7edf3;
    }

    .product-details-page .variant-card {
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        padding: 16px;
        background: #fbfdff;
        margin-bottom: 14px;
    }

    .product-details-page .variant-label {
        font-size: 12px;
        color: #64748b;
        margin-bottom: 4px;
    }

    .product-details-page .variant-value {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
    }

    .product-details-page .variant-thumb {
        width: 78px;
        height: 78px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid #dbe4ee;
        margin-top: 12px;
    }

    .product-details-page .badge-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid transparent;
    }

    .product-details-page .badge-active {
        background: #ecfdf3;
        color: #15803d;
        border-color: #bbf7d0;
    }

    .product-details-page .badge-draft {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }

    .product-details-page .badge-inactive {
        background: #f1f5f9;
        color: #475569;
        border-color: #cbd5e1;
    }

    .product-details-page .price-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .product-details-page .price-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        border: 1px solid #e7edf3;
        border-radius: 12px;
        background: #fbfdff;
    }

    .product-details-page .price-label {
        color: #64748b;
        font-size: 14px;
        font-weight: 600;
    }

    .product-details-page .price-value {
        color: #0f172a;
        font-size: 15px;
        font-weight: 700;
    }

    .product-details-page .btn {
        border-radius: 12px;
        font-weight: 600;
    }

    .product-details-page .btn i {
        margin-right: 6px;
    }

    .product-details-page .section-title {
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 10px;
    }

    .product-details-page .empty-state {
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        color: #64748b;
        background: #f8fafc;
    }

    .product-details-page .sticky-card {
        position: sticky;
        top: 20px;
    }

    @media (max-width: 991px) {
        .product-details-page .sticky-card {
            position: static;
        }
    }
</style>

<div class="container-fluid py-4 product-details-page">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
        <div>
            <h3 class="page-title mb-1">
                <i class="fa-solid fa-box-open text-primary me-2"></i>Product Details
            </h3>
            <p class="page-subtitle mb-0">Detailed information about selected product</p>
        </div>

        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">
                <i class="fa-solid fa-arrow-left"></i>Back
            </a>
            <a href="{{ route('admin.products.edit', $product->id) }}" class="btn btn-primary">
                <i class="fa-solid fa-pen-to-square"></i>Edit
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <i class="fa-solid fa-circle-info me-2 text-primary"></i>Basic Information
                </div>
                <div class="card-body">
                    <table class="table table-bordered align-middle">
                        <tr>
                            <th><i class="fa-solid fa-tag me-2 text-primary"></i>Name</th>
                            <td>{{ $product->name }}</td>
                        </tr>
                        <tr>
                            <th><i class="fa-solid fa-link me-2 text-primary"></i>Slug</th>
                            <td>{{ $product->slug }}</td>
                        </tr>
                        <tr>
                            <th><i class="fa-solid fa-barcode me-2 text-primary"></i>SKU</th>
                            <td>{{ $product->sku }}</td>
                        </tr>
                        <tr>
                            <th><i class="fa-solid fa-qrcode me-2 text-primary"></i>Barcode</th>
                            <td>{{ $product->barcode ?: '—' }}</td>
                        </tr>
                        <tr>
                            <th><i class="fa-solid fa-store me-2 text-primary"></i>Shop</th>
                            <td>{{ $product->shop?->shop_name ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th><i class="fa-solid fa-layer-group me-2 text-primary"></i>Category</th>
                            <td>{{ $product->category?->name ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th><i class="fa-solid fa-copyright me-2 text-primary"></i>Brand</th>
                            <td>{{ $product->brand?->name ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th><i class="fa-solid fa-signal me-2 text-primary"></i>Status</th>
                            <td>
                                @php
                                    $statusClass = match($product->status) {
                                        'active' => 'badge-active',
                                        'draft' => 'badge-draft',
                                        default => 'badge-inactive',
                                    };
                                @endphp

                                <span class="badge-status {{ $statusClass }}">
                                    <i class="fa-solid fa-circle-check"></i>
                                    {{ ucfirst($product->status) }}
                                </span>
                            </td>
                        </tr>
                    </table>

                    <div class="mt-4">
                        <div class="section-title">
                            <i class="fa-solid fa-align-left me-2 text-primary"></i>Description
                        </div>
                        <div class="content-box">
                            {!! $product->description ? nl2br(e($product->description)) : '<span class="text-muted">No description found.</span>' !!}
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="section-title">
                            <i class="fa-solid fa-list-check me-2 text-primary"></i>Specification
                        </div>
                        <div class="content-box">
                            {!! $product->specification ? nl2br(e($product->specification)) : '<span class="text-muted">No specification found.</span>' !!}
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <i class="fa-solid fa-photo-film me-2 text-primary"></i>Media Gallery
                </div>
                <div class="card-body">
                    <div class="row">
                        @forelse($product->media as $media)
                            <div class="col-md-4 col-sm-6 mb-3">
                                <div class="media-item">
                                    @if($media->type === 'video')
                                        <video controls class="media-preview">
                                            <source src="{{ asset('storage/' . $media->file_path) }}">
                                        </video>
                                    @else
                                        <img
                                            src="{{ asset('storage/' . $media->file_path) }}"
                                            alt="{{ $product->name }}"
                                            class="media-preview"
                                        >
                                    @endif

                                    <div class="media-meta">
                                        <div><strong>Role:</strong> {{ ucfirst($media->role) }}</div>
                                        <div><strong>Type:</strong> {{ ucfirst($media->type) }}</div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="empty-state">
                                    <i class="fa-regular fa-image me-2"></i>No media found.
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="card mb-0">
                <div class="card-header">
                    <i class="fa-solid fa-code-branch me-2 text-primary"></i>Product Variants
                </div>
                <div class="card-body">
                    @forelse($product->variants as $variant)
                        <div class="variant-card">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <div class="variant-label">Variant Name</div>
                                    <div class="variant-value">{{ $variant->name }}</div>
                                </div>
                                <div class="col-md-3">
                                    <div class="variant-label">SKU</div>
                                    <div class="variant-value">{{ $variant->sku ?: '—' }}</div>
                                </div>
                                <div class="col-md-3">
                                    <div class="variant-label">Regular Price</div>
                                    <div class="variant-value">৳{{ number_format($variant->regular_price, 2) }}</div>
                                </div>
                                <div class="col-md-3">
                                    <div class="variant-label">Discount Price</div>
                                    <div class="variant-value">
                                        {{ $variant->discounted_price ? '৳' . number_format($variant->discounted_price, 2) : '—' }}
                                    </div>
                                </div>
                            </div>

                            @if($variant->image)
                                <img
                                    src="{{ asset('storage/' . $variant->image) }}"
                                    alt="{{ $variant->name }}"
                                    class="variant-thumb"
                                >
                            @endif
                        </div>
                    @empty
                        <div class="empty-state">
                            <i class="fa-solid fa-boxes-stacked me-2"></i>No variants found.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="sticky-card">
                <div class="card">
                    <div class="card-header">
                        <i class="fa-solid fa-money-bill-wave me-2 text-primary"></i>Pricing Summary
                    </div>
                    <div class="card-body">
                        <div class="price-list">
                            <div class="price-item">
                                <span class="price-label">Seller Price</span>
                                <span class="price-value">৳{{ number_format($product->seller_price, 2) }}</span>
                            </div>
                            <div class="price-item">
                                <span class="price-label">Final Price</span>
                                <span class="price-value">৳{{ number_format($product->final_price, 2) }}</span>
                            </div>
                            <div class="price-item">
                                <span class="price-label">Admin Markup</span>
                                <span class="price-value">৳{{ number_format($product->admin_markup, 2) }}</span>
                            </div>
                            <div class="price-item">
                                <span class="price-label">Commission Rate</span>
                                <span class="price-value">{{ number_format($product->commission_rate, 2) }}%</span>
                            </div>
                            <div class="price-item">
                                <span class="price-label">Commission Amount</span>
                                <span class="price-value">৳{{ number_format($product->commission_amount, 2) }}</span>
                            </div>
                            <div class="price-item">
                                <span class="price-label">Seller Payable</span>
                                <span class="price-value">৳{{ number_format($product->seller_payable, 2) }}</span>
                            </div>
                            <div class="price-item">
                                <span class="price-label">Admin Earning</span>
                                <span class="price-value">৳{{ number_format($product->admin_earning, 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-0">
                    <div class="card-header">
                        <i class="fa-solid fa-shield-halved me-2 text-primary"></i>Warranty
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="variant-label">Warranty Type</div>
                            <div class="variant-value">{{ $product->warranty_type ?: '—' }}</div>
                        </div>

                        <div class="section-title mb-2">
                            <i class="fa-solid fa-file-contract me-2 text-primary"></i>Warranty Policy
                        </div>
                        <div class="content-box">
                            {!! $product->warranty_policy ? nl2br(e($product->warranty_policy)) : '<span class="text-muted">No warranty policy found.</span>' !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection