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

@section('content')
<div class="container py-4">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('frontend.home') }}">Home</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">{{ Str::limit($product->name, 40) }}</li>
        </ol>
    </nav>

    <div class="row g-4">
        {{-- Images --}}
        <div class="col-md-5">
            <div class="product-detail-img mb-2">
                @if($product->thumbnail)
                    <img src="{{ asset($product->thumbnail) }}" alt="{{ $product->name }}"
                         class="w-100 rounded" id="mainImg" style="max-height:450px;object-fit:contain;">
                @else
                    <div class="w-100 bg-light rounded d-flex align-items-center justify-content-center" style="height:400px;">
                        <i class="fas fa-image fa-5x text-muted"></i>
                    </div>
                @endif
            </div>
            @if($product->images->count() > 0)
            <div class="d-flex gap-2 flex-wrap">
                @if($product->thumbnail)
                <img src="{{ asset($product->thumbnail) }}" onclick="$('#mainImg').attr('src', this.src)"
                     style="width:70px;height:70px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid var(--primary);">
                @endif
                @foreach($product->images as $img)
                <img src="{{ asset($img->image) }}" onclick="$('#mainImg').attr('src', this.src)"
                     style="width:70px;height:70px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid #e2e8f0;">
                @endforeach
            </div>
            @endif
        </div>

        {{-- Info --}}
        <div class="col-md-7">
            <h1 class="fs-3 fw-bold mb-2">{{ $product->name }}</h1>
            @if($product->brand)<p class="text-muted mb-2">Brand: <strong>{{ $product->brand->name }}</strong></p>@endif

            <div class="d-flex align-items-center gap-3 mb-3">
                <span class="fs-2 fw-bold text-success">৳{{ number_format($product->sale_price ?? $product->price) }}</span>
                @if($product->sale_price && $product->sale_price < $product->price)
                <span class="text-muted fs-5 text-decoration-line-through">৳{{ number_format($product->price) }}</span>
                <span class="badge bg-danger">{{ $product->discount_percent }}% OFF</span>
                @endif
            </div>

            @if($product->short_description)
            <div class="mb-3 text-muted">{{ $product->short_description }}</div>
            @endif

            <div class="mb-3">
                @if($product->stock > 0)
                <span class="badge bg-success"><i class="fas fa-check me-1"></i>In Stock ({{ $product->stock }})</span>
                @else
                <span class="badge bg-danger">Out of Stock</span>
                @endif
                @if($product->is_freeshipping)
                <span class="badge bg-info text-dark ms-1"><i class="fas fa-truck me-1"></i>Free Shipping</span>
                @endif
            </div>

            @include('themes.shared.shipping-info-table', [
                'product' => $product,
                'shippingRatesTable' => $shippingRatesTable ?? [],
                'showShippingTable' => $showShippingTable ?? false,
                'shippingMessage' => $shippingMessage ?? null,
            ])

            <form id="addCartForm">
                @csrf
                <div class="d-flex gap-3 mb-3">
                    <div style="width:100px;">
                        <input type="number" id="qty" name="qty" class="form-control text-center fw-bold" value="1" min="1" max="{{ $product->stock }}">
                    </div>
                    <button type="button" class="btn btn-primary btn-lg flex-grow-1"
                            onclick="addToCartDetail({{ $product->id }}, '{{ $product->name }}')"
                            {{ $product->stock <= 0 ? 'disabled' : '' }}>
                        <i class="fas fa-shopping-cart me-2"></i>কার্টে যোগ করুন
                    </button>
                </div>
            </form>

            {{-- Trust badges --}}
            <div class="border rounded p-3 bg-light">
                <div class="row g-2 text-center">
                    <div class="col-4"><i class="fas fa-truck text-success mb-1 d-block"></i><small>Fast Delivery</small></div>
                    <div class="col-4"><i class="fas fa-shield-alt text-success mb-1 d-block"></i><small>100% Original</small></div>
                    <div class="col-4"><i class="fas fa-undo text-success mb-1 d-block"></i><small>7-Day Return</small></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Description Tabs --}}
    @if($product->description)
    <div class="mt-5">
        <ul class="nav nav-tabs" id="productTabs">
            <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#desc">বিবরণ</button></li>
            @if($product->reviews->count() > 0)
            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#reviews">রিভিউ ({{ $product->reviews->count() }})</button></li>
            @endif
        </ul>
        <div class="tab-content border border-top-0 p-4 rounded-bottom bg-white">
            <div class="tab-pane fade show active" id="desc">
                {!! $product->description !!}
            </div>
            @if($product->reviews->count() > 0)
            <div class="tab-pane fade" id="reviews">
                @foreach($product->reviews as $review)
                <div class="mb-3 border-bottom pb-3">
                    <div class="d-flex justify-content-between">
                        <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">{{ $review->comment }}</p>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
function addToCartDetail(productId, productName, btn, redirectToCheckout) {
    const qty = parseInt(document.getElementById('qty').value, 10) || 1;
    window.addToCart(productId, productName, btn || null, !!redirectToCheckout, { qty: qty });
}
</script>
@endpush