@extends('themes.organic.layouts.master')
@section('title', $product->meta_title ?? $product->name)

@php
    $activeVariants = ($product->variants ?? collect())->where('status', 1)->values();
    $hasVariants = $activeVariants->isNotEmpty();
    $displayStock = $hasVariants ? (int) $activeVariants->sum('stock') : (int) $product->stock;
    $currentPrice = $product->effective_price;
    $hasDiscount = $product->sale_price && $product->sale_price < $product->price;
    $phone = trim((string) ($setting->phone ?? ''));
    $shareUrl = url()->current();
    $phoneDial = \App\Support\BangladeshPhone::toTelUri($phone) ?: '';
    $phoneWaUrl = wa_me_url($phone, 'আমি ' . $product->name . ' সম্পর্কে জানতে চাই। ' . $shareUrl);
    $galleryImages = collect();
    if ($product->thumbnail) {
        $galleryImages->push((object) [
            'src' => asset($product->thumbnail),
            'alt' => $product->thumbnailAlt(),
        ]);
    }
    foreach ($product->images as $img) {
        $galleryImages->push((object) [
            'src' => asset($img->image),
            'alt' => $img->effectiveAlt($product->name),
        ]);
    }
    if ($galleryImages->isEmpty()) {
        $galleryImages->push((object) ['src' => '', 'alt' => $product->name]);
    }
@endphp

@push('styles')
<link rel="stylesheet" href="{{ asset('css/product-detail-organic.css') }}?v={{ filemtime(public_path('css/product-detail-organic.css')) }}">
@endpush

@section('content')
<div class="pd-organic">
    <div class="container">
        <nav aria-label="breadcrumb" class="pd-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('frontend.home') }}" title="Home"><i class="fas fa-home"></i></a>
                </li>
                @if($product->category)
                <li class="breadcrumb-item">
                    <a href="{{ route('frontend.category', $product->category->slug) }}">{{ $product->category->name }}</a>
                </li>
                @endif
                <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($product->name, 40) }}</li>
            </ol>
        </nav>

        <div class="pd-card">
            <div class="row g-3 g-lg-4">
                {{-- Gallery --}}
                <div class="col-lg-4">
                    <div class="pd-gallery-main" data-prod-zoom>
                        @if($galleryImages->first()->src)
                        <img src="{{ $galleryImages->first()->src }}"
                             alt="{{ $galleryImages->first()->alt }}"
                             id="mainImg">
                        @else
                        <div class="text-muted py-5"><i class="fas fa-image fa-4x opacity-50"></i></div>
                        @endif
                    </div>
                    @if($galleryImages->count() > 1)
                    <div class="pd-gallery-thumbs">
                        @foreach($galleryImages as $index => $img)
                        <button type="button"
                                class="pd-gallery-thumb {{ $index === 0 ? 'active' : '' }}"
                                data-src="{{ $img->src }}"
                                data-alt="{{ $img->alt }}">
                            <img src="{{ $img->src }}" alt="{{ $img->alt }}">
                        </button>
                        @endforeach
                    </div>
                    @endif
                </div>

                {{-- Product info --}}
                <div class="col-lg-5">
                    <div class="pr_details">
                        <h1 class="product_title">{{ $product->name }}</h1>

                        @if($product->brand)
                        <p class="text-muted small mb-2">Brand: <strong>{{ $product->brand->name }}</strong></p>
                        @endif

                        <div class="pr_extra">
                            <strong>Availability:</strong>
                            <span id="productAvailability" class="{{ $displayStock > 0 ? 'instock' : 'outstock' }}">
                                {{ $displayStock > 0 ? 'In Stock' : 'Out of Stock' }}
                            </span>
                        </div>

                        @include('themes.shared.product-variant-picker', ['product' => $product])

                        <div class="product_price">
                            @if($hasDiscount)
                            <div class="old-item-price">৳ <span id="productOldPrice">{{ number_format($product->price, 0) }}</span></div>
                            @endif
                            <div class="item-price">৳<span id="productSalePrice">{{ number_format($currentPrice, 0) }}</span></div>
                            <span id="productPrice" class="d-none">৳{{ number_format($currentPrice, 0) }}</span>
                        </div>

                        <hr class="pd-divider">

                        <div class="pd-qty-row">
                            <span class="fw-bold">Quantity</span>
                            <div class="pr_quantity">
                                <div class="quantity-wrapper">
                                    <button type="button" class="quantity-btn" onclick="updateProductQty(-1)" aria-label="Decrease quantity">−</button>
                                    <input type="number"
                                           id="qty"
                                           name="qty"
                                           value="1"
                                           min="1"
                                           max="{{ max(1, $hasVariants ? $activeVariants->max('stock') : $product->stock) }}"
                                           readonly>
                                    <button type="button" class="quantity-btn" onclick="updateProductQty(1)" aria-label="Increase quantity">+</button>
                                </div>
                            </div>
                        </div>

                        <hr class="pd-divider">

                        <div class="pr_buy_cart">
                            <button type="button"
                                    class="pd-btn-buy"
                                    id="btnBuyNow"
                                    data-requires-variant
                                    onclick="buyNow({{ $product->id }}, '{{ addslashes($product->name) }}', this, { hasVariants: @json($product->hasActiveVariants()) })"
                                    {{ $displayStock <= 0 ? 'disabled' : '' }}>
                                <i class="fas fa-shopping-bag"></i> Buy Now
                            </button>
                            <button type="button"
                                    class="pd-btn-cart"
                                    id="btnAddToCart"
                                    data-requires-variant
                                    onclick="addToCartDetail({{ $product->id }}, '{{ addslashes($product->name) }}', this)"
                                    title="Add To Cart"
                                    {{ $displayStock <= 0 ? 'disabled' : '' }}>
                                <i class="fas fa-cart-plus"></i>
                            </button>
                        </div>

                        @if($phoneDial)
                        <div class="pd-contact-btns my-2">
                            <a href="tel:{{ $phoneDial }}" class="btn pd-btn-phone fw-bold d-flex align-items-center justify-content-center w-100 mb-2">
                                <i class="fas fa-phone me-2"></i>{{ $phoneDial }}
                            </a>
                            <a href="{{ $phoneWaUrl }}"
                               class="btn pd-btn-whatsapp fw-bold d-flex align-items-center justify-content-center w-100"
                               target="_blank"
                               rel="noopener">
                                <i class="fab fa-whatsapp me-2"></i> Whatsapp
                            </a>
                        </div>
                        @endif

                        @if(!empty($showShippingTable) && !empty($shippingRatesTable))
                        <div class="pd-shipping-box">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Area</th>
                                        <th>Delivery Charge</th>
                                        <th>Times</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($shippingRatesTable as $row)
                                    <tr>
                                        <td>{{ $row['area'] }}</td>
                                        <td>
                                            @if($product->is_freeshipping)
                                                <span class="text-success fw-semibold">Free</span>
                                            @else
                                                ৳{{ number_format($row['charge'], 0) }}
                                            @endif
                                        </td>
                                        <td>{{ $row['time'] ?: '—' }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @elseif($product->is_freeshipping)
                        <div class="alert alert-success py-2 px-3 mt-3 mb-0 small">
                            <i class="fas fa-truck me-1"></i> Free Delivery — এই product-এ free shipping আছে।
                        </div>
                        @endif

                        <div class="pr_widget">
                            <label class="widget-title">Share this</label>
                            <div class="social-media">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($shareUrl) }}" target="_blank" rel="noopener" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                                <a href="https://twitter.com/intent/tweet?text={{ urlencode($product->name) }}&url={{ urlencode($shareUrl) }}" target="_blank" rel="noopener" title="Twitter"><i class="fab fa-twitter"></i></a>
                                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode($shareUrl) }}&title={{ urlencode($product->name) }}" target="_blank" rel="noopener" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                                <a href="https://wa.me/?text={{ urlencode($product->name . ' ' . $shareUrl) }}" target="_blank" rel="noopener" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                                <a href="javascript:void(0)" onclick="addWishlist({{ $product->id }})" title="Wishlist"><i class="fas fa-heart"></i></a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sidebar short description (desktop) --}}
                @if($product->short_description)
                <div class="col-lg-3 d-none d-lg-block">
                    <div class="pd-sidebar-text">
                        {!! nl2br(e($product->short_description)) !!}
                    </div>
                </div>
                @endif
            </div>
        </div>

        {{-- Description / Reviews tabs --}}
        @if($product->description || $product->reviews->count() > 0)
        <div class="pd-tabs-wrap">
            <div class="pd-tab-nav">
                @if($product->description)
                <button type="button" class="active" data-target="#pdDesc">Description</button>
                @endif
                @if($product->reviews->count() > 0)
                <button type="button" class="{{ $product->description ? '' : 'active' }}" data-target="#pdReviews">Reviews ({{ $product->reviews->count() }})</button>
                @endif
            </div>
            <div class="pd-tab-content">
                @if($product->description)
                <div class="pd-tab-pane show active" id="pdDesc">
                    {!! $product->description !!}
                </div>
                @endif
                @if($product->reviews->count() > 0)
                <div class="pd-tab-pane {{ $product->description ? '' : 'show active' }}" id="pdReviews">
                    @foreach($product->reviews as $review)
                    <div class="mb-3 border-bottom pb-3">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <strong>{{ $review->reviewer_name }}</strong>
                            <div>@for($i=1;$i<=5;$i++)<i class="fas fa-star {{ $i <= $review->rating ? 'text-warning' : 'text-muted' }}"></i>@endfor</div>
                        </div>
                        <p class="text-muted mb-0 mt-1">{{ $review->comment }}</p>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- Related products --}}
        @if(isset($related) && $related->isNotEmpty())
        <div class="pd-related">
            <h3>Related Products</h3>
            <div class="{{ \App\Services\ProductItemSettingsService::gridRowClass('product') }}">
                @foreach($related as $rel)
                    @include('themes.organic.layouts.product-card', ['product' => $rel, 'gridContext' => 'product'])
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/product-detail-organic.js') }}?v={{ filemtime(public_path('js/product-detail-organic.js')) }}"></script>
<script>
function addToCartDetail(productId, productName, btn, redirectToCheckout) {
    const qty = parseInt(document.getElementById('qty').value, 10) || 1;
    window.addToCart(productId, productName, btn, !!redirectToCheckout, { qty: qty });
}
if (window.location.hash === '#variants') {
    document.addEventListener('DOMContentLoaded', function () {
        const el = document.getElementById('variants');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    });
}
</script>
@endpush