@extends('users.user-dashboard')

@section('content')
<div class="inner-banner bg-body-tertiary">
    <div class="container">
        <div class="inner-banner__content text-center text-white">
            <h1>{{ $product->title }}</h1>
        </div>
    </div>
</div>

<div class="container my-5 product-details">
    <div class="row g-lg-5 g-3">
        <!-- Product Image -->
        <div class="col-md-5">
            <img src="{{ asset($product->image) }}" alt="{{ $product->title }}" class="img-fluid rounded w-100">
        </div>

        <!-- Product Info -->
        <div class="col-md-7" id="productDetails"
            data-name="{{ $product->title }}"
            data-brand="{{ $product->brand }}"
            data-condition="{{ $product->condition }}"
            data-ref="{{ $product->ref ?? 'N/A' }}"
            data-price="{{ $product->price }}"
            data-color="{{ $product->color ?? 'N/A' }}">

            {{-- <div class="text-secondary-color fw-semibold mb-2">
                ★★★★☆ 
                <a href="#" class="text-decoration-none text-secondary-color ms-2">
                    {{ $product->reviews_count ?? 2 }} Review(s)
                </a>
            </div> --}}

            <h2 class="fw-bold mb-3">{{ $product->title }}</h2>
            <p>{{ $product->description }}</p>

            {{-- <ul class="list-unstyled mb-3">
                <li><strong>Brand:</strong> {{ $product->brand }}</li>
                <li><strong>Condition:</strong> {{ $product->condition }}</li>
            </ul> --}}

            {{-- <div class="mb-2 fw-semibold">
                Hurry up! only <span class="fw-bold text-secondary-color">{{ $product->stock }}</span> items left in stock!
            </div>

            <div class="progress mb-4" style="height: 6px;">
                <div class="progress-bar bg-theme-color" style="width: {{ min(100, ($product->stock / 150) * 100) }}%"></div>
            </div>

            <h4 class="text-secondary-color mb-2">RS : {{ number_format($product->price, 2) }}</h4>
            <div class="text-muted mb-3">Est. Delivery Time: 2–3 Days</div>

            <div class="d-flex align-items-center gap-2 mb-4">
                <button class="btn-buy-now" id="buyNowBtn">Buy Now</button>
            </div> --}}
        </div>
    </div>
</div>

<script>
document.getElementById('buyNowBtn').addEventListener('click', function () {
    const details = document.getElementById('productDetails');

    const name = details.dataset.name;
    const brand = details.dataset.brand;
    const condition = details.dataset.condition;
    const ref = details.dataset.ref;
    const price = details.dataset.price;
    const color = details.dataset.color;

    const message = `I'm interested in buying the ${name}.\n\n` +
        `★ Brand: ${brand}\n` +
        `★ Condition: ${condition}\n` +
        `★ Reference: ${ref}\n` +
        `★ Price: RS ${price}\n` +
        `★ Color: ${color}\n\n` +
        `Is this still available?`;

    const encodedMessage = encodeURIComponent(message);
    const phoneNumber = '9779849264312';

    const isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);

    let whatsappUrl;
    if (isMobile) {
        // Mobile: open in WhatsApp app
        whatsappUrl = `whatsapp://send?phone=${phoneNumber}&text=${encodedMessage}`;
    } else {
        // Desktop: force open in WhatsApp Web (message preserved)
        whatsappUrl = `https://web.whatsapp.com/send?phone=${phoneNumber}&text=${encodedMessage}`;
    }

    window.open(whatsappUrl, '_blank');
});
</script>

@endsection
