@extends('layouts.syndron.app')

@section('content')
<div class="container-fluid py-3">

    {{-- Header --}}
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2 mb-3">
        <div class="d-flex align-items-center gap-3">
            <div class="bg-white border rounded-3 p-2 d-flex align-items-center justify-content-center" style="width:72px;height:72px;">
                @if(!empty($product->brand_img))
                <img src="{{ $product->brand_img }}" alt="{{ $product->title }}" class="img-fluid" style="max-height:60px;">
                @else
                <div class="text-muted small">No image</div>
                @endif
            </div>

            <div>
                <h4 class="mb-1">{{ $product->title }}</h4>
                <div class="text-muted small">
                    <span class="me-2">Code: <strong>{{ $product->code }}</strong></span>
                    <span class="me-2">Slug: <strong>{{ $product->slug }}</strong></span>
                    <span class="me-2">Status: <strong>{{ __($product->status) }}</strong></span>
                </div>
            </div>
        </div>

        <div class="d-flex flex-wrap gap-2">
            {{-- adjust routes to your project --}}
            <a href="" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back
            </a>
            <a href="" class="btn btn-primary">
                <i class="bi bi-pencil"></i> Edit
            </a>
        </div>
    </div>

    {{-- Quick stats --}}
    @php
    $uniqueSellersCount = isset($sellers) ? $sellers->count() : ($product->sellers?->unique('id')->count() ?? 0);
    $inventoriesCount = $product->inventories?->count() ?? 0;
    $variantsCount = $product->inventoryVariants?->count() ?? 0;
    $commentsCount = $product->comments?->count() ?? 0;

    // Safe stock number (your model method handles module multi-shop-seller)
    $stock = method_exists($product, 'getInventoryCount') ? $product->getInventoryCount() : null;
    @endphp

    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted small">Sellers</div>
                    <div class="fs-4 fw-bold">{{ $uniqueSellersCount }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted small">Inventories</div>
                    <div class="fs-4 fw-bold">{{ $inventoriesCount }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted small">Variants</div>
                    <div class="fs-4 fw-bold">{{ $variantsCount }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="text-muted small">In Stock</div>
                    <div class="fs-4 fw-bold">
                        @if($stock === null)
                        ∞
                        @else
                        {{ number_format($stock) }}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white">
            <ul class="nav nav-tabs card-header-tabs" id="productTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab">
                        Product Info
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="sellers-tab" data-bs-toggle="tab" data-bs-target="#sellers" type="button" role="tab">
                        Sellers ({{ $uniqueSellersCount }})
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="inventories-tab" data-bs-toggle="tab" data-bs-target="#inventories" type="button" role="tab">
                        Inventories ({{ $inventoriesCount }})
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders" type="button" role="tab">
                        Orders
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="comments-tab" data-bs-toggle="tab" data-bs-target="#comments" type="button" role="tab">
                        Comments ({{ $commentsCount }})
                    </button>
                </li>
            </ul>
        </div>

        <div class="card-body">
            <div class="tab-content" id="productTabsContent">

                {{-- Product Info --}}
                <div class="tab-pane fade show active" id="info" role="tabpanel">
                    <div class="row g-3">
                        <div class="col-lg-7">
                            <div class="border rounded-3 p-3 h-100">
                                <h6 class="mb-3">Overview</h6>

                                <div class="row g-2 small">
                                    <div class="col-md-6">
                                        <div class="text-muted">Category</div>
                                        <div class="fw-semibold">{{ $product->category->name ?? '-' }}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-muted">Brand</div>
                                        <div class="fw-semibold">{{ $product->brand->name ?? '-' }}</div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="text-muted">Base Price</div>
                                        <div class="fw-semibold">{{ number_format($product->price ?? 0) }}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-muted">Discount Price</div>
                                        <div class="fw-semibold">{{ number_format($product->discount_price ?? 0) }}</div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="text-muted">Off Rate</div>
                                        <div class="fw-semibold">%{{ $product->off_rate ?? 0 }}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-muted">Display Price</div>
                                        <div class="fw-semibold">{{ $product->display_price }}</div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="text-muted">Second Hand</div>
                                        <div class="fw-semibold">{{ $product->second_hand ? 'Yes' : 'No' }}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-muted">Consumable</div>
                                        <div class="fw-semibold">{{ $product->consumable ? 'Yes' : 'No' }}</div>
                                    </div>

                                    <div class="col-12">
                                        <hr>
                                        <div class="text-muted">Short Description</div>
                                        <div class="fw-semibold">{{ $product->short_description ?: '-' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-5">
                            <div class="border rounded-3 p-3 h-100">
                                <h6 class="mb-3">Meta</h6>

                                <div class="small">
                                    <div class="d-flex justify-content-between py-1">
                                        <span class="text-muted">Created</span>
                                        <span class="fw-semibold">{{ optional($product->created_at)->format('Y-m-d H:i') }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between py-1">
                                        <span class="text-muted">Updated</span>
                                        <span class="fw-semibold">{{ optional($product->updated_at)->format('Y-m-d H:i') }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between py-1">
                                        <span class="text-muted">Owner</span>
                                        <span class="fw-semibold">{{ $product->user->name ?? ('#'.$product->user_id) }}</span>
                                    </div>

                                    <hr>

                                    <div class="d-flex justify-content-between py-1">
                                        <span class="text-muted">Weight</span>
                                        <span class="fw-semibold">{{ $product->weight ?? '-' }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between py-1">
                                        <span class="text-muted">Dimensions</span>
                                        <span class="fw-semibold">
                                            {{ $product->length ?? '-' }} × {{ $product->width ?? '-' }} × {{ $product->height ?? '-' }}
                                        </span>
                                    </div>
                                </div>

                                @if(!empty($product->content))
                                <hr>
                                <h6 class="mb-2">Content</h6>
                                <div class="small text-muted" style="max-height: 220px; overflow:auto;">
                                    {!! $product->content !!}
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sellers --}}
                <div class="tab-pane fade" id="sellers" role="tabpanel">
                    @php
                    $sellerList = isset($sellers) ? $sellers : ($product->sellers?->unique('id')->values() ?? collect());
                    @endphp

                    @if($sellerList->isEmpty())
                    <div class="alert alert-light border mb-0">No sellers found for this product.</div>
                    @else
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Shop</th>
                                    <th>Owner</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th class="text-end">Approved</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($sellerList as $shop)
                                <tr>
                                    <td class="fw-semibold">
                                        <div class="d-flex align-items-center gap-2">
                                            @if(!empty($shop->logo))
                                            <img src="{{ $shop->logo }}" alt="{{ $shop->name }}" class="rounded" style="width:36px;height:36px;object-fit:cover;">
                                            @else
                                            <div class="bg-light border rounded d-inline-flex align-items-center justify-content-center" style="width:36px;height:36px;">
                                                <span class="text-muted small">—</span>
                                            </div>
                                            @endif
                                            <div>
                                                <div>{{ $shop->name }}</div>
                                                <div class="text-muted small">{{ $shop->slug }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $shop->user->name ?? ('#'.$shop->user_id) }}</td>
                                    <td>{{ $shop->phone ?? '-' }}</td>
                                    <td>{{ $shop->email ?? '-' }}</td>
                                    <td class="text-end">
                                        @if($shop->is_approved)
                                        <span class="badge bg-success">Yes</span>
                                        @else
                                        <span class="badge bg-secondary">No</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>

                {{-- Inventories --}}
                <div class="tab-pane fade" id="inventories" role="tabpanel">
                    @if(($product->inventories ?? collect())->isEmpty())
                    <div class="alert alert-light border mb-0">No inventories found for this product.</div>
                    @else
                    <div class="accordion" id="inventoryAccordion">
                        @foreach($product->inventories as $inv)
                        @php
                        $variants = $inv->variant ?? collect(); // your relation name is "variant()"
                        @endphp

                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading-{{ $inv->id }}">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $inv->id }}">
                                    <div class="d-flex flex-column flex-md-row gap-2 w-100 justify-content-between">
                                        <div class="fw-semibold">
                                            {{ $inv->name ?? ('Inventory #'.$inv->id) }}
                                            <span class="text-muted small ms-2">Shop: {{ $inv->seller->name ?? ('#'.$inv->shop_id) }}</span>
                                        </div>
                                        <div class="small text-muted">
                                            Base price: <strong class="text-dark">{{ number_format($inv->price ?? 0) }}</strong>
                                            • Qty: <strong class="text-dark">{{ $inv->inventory ?? 0 }}</strong>
                                            • Variants: <strong class="text-dark">{{ $variants->count() }}</strong>
                                        </div>
                                    </div>
                                </button>
                            </h2>

                            <div id="collapse-{{ $inv->id }}" class="accordion-collapse collapse" data-bs-parent="#inventoryAccordion">
                                <div class="accordion-body">

                                    <div class="row g-2 mb-3 small">
                                        <div class="col-md-3"><span class="text-muted">Weight:</span> <strong>{{ $inv->weight ?? '-' }}</strong></div>
                                        <div class="col-md-3"><span class="text-muted">Size:</span> <strong>{{ $inv->size ?? '-' }}</strong></div>
                                        <div class="col-md-3"><span class="text-muted">Color:</span> <strong>{{ $inv->color ?? '-' }}</strong></div>
                                        <div class="col-md-3"><span class="text-muted">Status:</span> <strong>{{ __($inv->status) }}</strong></div>
                                    </div>

                                    <h6 class="mb-2">Variants</h6>

                                    @if($variants->isEmpty())
                                    <div class="alert alert-light border mb-0">No variants for this inventory.</div>
                                    @else
                                    <div class="table-responsive">
                                        <table class="table table-sm align-middle">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>SKU</th>
                                                    <th>Barcode</th>
                                                    <th>Combination</th>
                                                    <th class="text-end">Price Override</th>
                                                    <th class="text-end">On hand</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($variants as $v)
                                                <tr>
                                                    <td class="fw-semibold">{{ $v->sku_code ?? '-' }}</td>
                                                    <td>{{ $v->barcode ?? '-' }}</td>
                                                    <td class="small text-muted">
                                                        @if(is_array($v->combination_items) && count($v->combination_items))
                                                        <code class="text-muted">{{ json_encode($v->combination_items, JSON_UNESCAPED_UNICODE) }}</code>
                                                        @else
                                                        -
                                                        @endif
                                                    </td>
                                                    <td class="text-end">{{ number_format($v->price_override ?? 0) }}</td>
                                                    <td class="text-end">
                                                        {{ optional($v->warehouseInventory)->qty_on_hand ?? '-' }}
                                                    </td>
                                                    <td>{{ __($v->status) }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>

                {{-- Orders --}}
                <div class="tab-pane fade" id="orders" role="tabpanel">
                    @if(empty($orders) || (method_exists($orders, 'count') && $orders->count() === 0))
                    <div class="alert alert-light border mb-0">
                        Orders list is empty (or not connected yet). If you want, send me your <code>OrderItem</code> model and DB fields,
                        I’ll write the exact query to fetch orders that contain this product.
                    </div>
                    @else
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Tracking</th>
                                    <th>Status</th>
                                    <th class="text-end">Amount</th>
                                    <th>Created</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($orders as $order)
                                <tr>
                                    <td class="fw-semibold">{{ $order->tracking_code ?? ('#'.$order->id) }}</td>
                                    <td>{{ __($order->status) }}</td>
                                    <td class="text-end">{{ number_format($order->amount ?? 0) }}</td>
                                    <td class="text-muted">{{ optional($order->created_at)->format('Y-m-d H:i') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- If it's paginator --}}
                    @if(method_exists($orders, 'links'))
                    <div class="mt-2">
                        {{ $orders->links() }}
                    </div>
                    @endif
                    @endif
                </div>

                {{-- Comments --}}
                <div class="tab-pane fade" id="comments" role="tabpanel">
                    @if(($product->comments ?? collect())->isEmpty())
                    <div class="alert alert-light border mb-0">No comments for this product.</div>
                    @else
                    <div class="d-flex flex-column gap-2">
                        @foreach($product->comments->sortByDesc('id') as $c)
                        <div class="border rounded-3 p-3">
                            <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                                <div class="fw-semibold">
                                    {{ $c->name ?: ($c->user->name ?? 'Guest') }}
                                    <span class="text-muted small ms-2">User: {{ $c->user->id ?? '-' }}</span>
                                </div>
                                <div class="small text-muted">
                                    Rate: <strong class="text-dark">{{ $c->rate ?? '-' }}</strong>
                                    • Status: <strong class="text-dark">{{ __($c->status?->value ?? $c->status) }}</strong>
                                </div>
                            </div>

                            <div class="mt-2">
                                <div class="text-muted small">Comment</div>
                                <div>{{ $c->content }}</div>
                            </div>

                            @if(!empty($c->good_point) || !empty($c->bad_point))
                            <div class="row g-2 mt-2 small">
                                <div class="col-md-6">
                                    <div class="text-muted">Good points</div>
                                    <div>{{ $c->good_point ?: '-' }}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-muted">Bad points</div>
                                    <div>{{ $c->bad_point ?: '-' }}</div>
                                </div>
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>

            </div>
        </div>
    </div>

</div>
@endsection