@extends('layouts.app')

@section('title', ($product->name ?? 'Product') . ' • BDCodeShop')

@push('styles')
<style>
.product-page {
    padding-bottom: 35px;
}

.back-row {
    margin-bottom: 14px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    color: #696978;
    font-size: 11px;
    font-weight: 750;
}

/* Hero */
.product-hero {
    overflow: hidden;
    border-radius: 27px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 14px 45px rgba(25,20,60,.08);
}

.product-cover {
    position: relative;
    height: 235px;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 20%, rgba(139,92,246,.35), transparent 35%),
        linear-gradient(135deg, #211b48, #6857f5);
}

.product-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.9);
    font-size: 48px;
    font-weight: 950;
    letter-spacing: -3px;
}

.featured-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #6857f5;
    font-size: 10px;
    font-weight: 850;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.product-main {
    padding: 20px;
}

.product-title {
    font-size: 25px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.7px;
    color: #1c1c27;
}

.product-short {
    margin-top: 7px;
    color: #858593;
    font-size: 12px;
    line-height: 1.55;
}

/* Price */
.price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 17px;
}

.current-price {
    color: #6857f5;
    font-size: 25px;
    font-weight: 950;
}

.old-price {
    color: #a2a2ae;
    font-size: 13px;
    text-decoration: line-through;
}

.discount-badge {
    padding: 5px 8px;
    border-radius: 9px;
    background: #eaf9f1;
    color: #15935b;
    font-size: 10px;
    font-weight: 850;
}

/* Meta */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 18px;
}

.meta-card {
    padding: 12px;
    border-radius: 15px;
    background: #f7f7fb;
}

.meta-label {
    color: #9898a5;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.meta-value {
    margin-top: 4px;
    color: #292934;
    font-size: 12px;
    font-weight: 800;
}

/* Buy */
.buy-btn {
    width: 100%;
    height: 52px;
    margin-top: 18px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg, #6857f5, #8b5cf6);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 13px 30px rgba(104,87,245,.24);
}

.buy-btn:active {
    transform: scale(.98);
}

/* Sections */
.section {
    margin-top: 22px;
}

.section-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 900;
}

.content-card {
    padding: 17px;
    border-radius: 21px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 10px 32px rgba(25,20,60,.055);
}

.description {
    color: #676775;
    font-size: 12px;
    line-height: 1.75;
    white-space: pre-line;
}

/* Screenshots */
.screenshots {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.screenshots::-webkit-scrollbar {
    display: none;
}

.screenshot {
    width: 210px;
    height: 145px;
    flex: 0 0 210px;
    border-radius: 18px;
    object-fit: cover;
    background: #f0eff7;
    border: 1px solid rgba(0,0,0,.05);
}

/* Notice */
.secure-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 19px;
    background: linear-gradient(135deg, #f5f3ff, #fff);
    border: 1px solid rgba(104,87,245,.10);
}

.secure-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eae7ff;
    color: #6857f5;
    font-size: 17px;
    font-weight: 900;
}

.secure-title {
    font-size: 12px;
    font-weight: 850;
}

.secure-text {
    margin-top: 4px;
    color: #8b8b98;
    font-size: 10px;
    line-height: 1.5;
}

.loading,
.error {
    padding: 50px 15px;
    text-align: center;
    color: #858593;
    font-size: 12px;
}

.retry-btn {
    margin-top: 12px;
    padding: 11px 17px;
    border: 0;
    border-radius: 13px;
    background: #6857f5;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
</style>
@endpush

@section('content')
<div class="product-page">

    <div class="back-row">
        <a href="{{ url('/shop') }}" class="back-btn">
            ← Back to Shop
        </a>
    </div>

    <div id="productError" class="error" style="display:none;">
        Unable to load product.
        <br>
        <button class="retry-btn" onclick="location.reload()">
            Retry
        </button>
    </div>

    <div id="productContent">

        <!-- Product Hero -->
        <section class="product-hero">

            <div class="product-cover">

                @if($product->is_featured)
                    <div class="featured-badge">
                        Featured Product
                    </div>
                @endif

                @if($product->thumbnail)

                    <img
                        src="{{ $product->thumbnail }}"
                        alt="{{ $product->name }}"
                        onerror="this.style.display='none';document.getElementById('coverPlaceholder').style.display='flex';"
                    >

                @endif

                <div
                    id="coverPlaceholder"
                    class="cover-placeholder"
                    style="{{ $product->thumbnail ? 'display:none;' : 'display:flex;' }}"
                >
                    BC
                </div>

            </div>

            <div class="product-main">

                <h1 class="product-title">
                    {{ $product->name }}
                </h1>

                @if($product->short_description)
                    <div class="product-short">
                        {{ $product->short_description }}
                    </div>
                @endif

                <div class="price-row">

                    @php
                        $price = (float) $product->price;
                        $discountPrice = $product->discount_price !== null
                            ? (float) $product->discount_price
                            : null;

                        $finalPrice = ($discountPrice !== null && $discountPrice > 0)
                            ? $discountPrice
                            : $price;

                        $discountPercent = ($discountPrice !== null && $discountPrice > 0 && $price > $discountPrice)
                            ? round((($price - $discountPrice) / $price) * 100)
                            : 0;
                    @endphp

                    <span class="current-price">
                        ৳{{ number_format($finalPrice, 2) }}
                    </span>

                    @if($discountPercent > 0)
                        <span class="old-price">
                            ৳{{ number_format($price, 2) }}
                        </span>

                        <span class="discount-badge">
                            {{ $discountPercent }}% OFF
                        </span>
                    @endif

                </div>

                <div class="meta-grid">

                    <div class="meta-card">
                        <div class="meta-label">Version</div>
                        <div class="meta-value">
                            {{ $product->version ?: 'Latest' }}
                        </div>
                    </div>

                    <div class="meta-card">
                        <div class="meta-label">Sales</div>
                        <div class="meta-value">
                            {{ number_format((int) $product->sales_count) }}
                        </div>
                    </div>

                    <div class="meta-card">
                        <div class="meta-label">Downloads</div>
                        <div class="meta-value">
                            {{ number_format((int) $product->downloads_count) }}
                        </div>
                    </div>

                    <div class="meta-card">
                        <div class="meta-label">Category</div>
                        <div class="meta-value">
                            {{ $product->category ?: 'Digital Product' }}
                        </div>
                    </div>

                </div>

                <button
                    id="buyButton"
                    class="buy-btn"
                    type="button"
                >
                    Buy Now • ৳{{ number_format($finalPrice, 2) }}
                </button>

            </div>

        </section>

        <!-- Description -->
        <section class="section">

            <div class="section-title">
                About this product
            </div>

            <div class="content-card">

                <div class="description">
                    {{ $product->description ?: 'No detailed description available for this product yet.' }}
                </div>

            </div>

        </section>

        <!-- Screenshots -->
        @php
            $screenshots = $product->screenshots;

            if (is_string($screenshots)) {
                $screenshots = json_decode($screenshots, true);
            }

            $screenshots = is_array($screenshots)
                ? $screenshots
                : [];
        @endphp

        @if(count($screenshots))
            <section class="section">

                <div class="section-title">
                    Screenshots
                </div>

                <div class="screenshots">

                    @foreach($screenshots as $screenshot)

                        @if(is_string($screenshot) && $screenshot)
                            <img
                                class="screenshot"
                                src="{{ $screenshot }}"
                                alt="Product screenshot"
                                loading="lazy"
                            >
                        @endif

                    @endforeach

                </div>

            </section>
        @endif

        <!-- Secure Purchase -->
        <section class="section">

            <div class="secure-card">

                <div class="secure-icon">
                    ✓
                </div>

                <div>

                    <div class="secure-title">
                        Secure Digital Purchase
                    </div>

                    <div class="secure-text">
                        After successful payment, your purchased
                        product will become available in your Downloads section.
                    </div>

                </div>

            </div>

        </section>

    </div>

</div>
@endsection

@push('scripts')
<script>
const productDetailsTg = window.Telegram?.WebApp;

if (productDetailsTg) {
    productDetailsTg.ready();
    productDetailsTg.expand();
}

document.getElementById('buyButton')?.addEventListener(
    'click',
    function() {

        const slug = @json($product->slug);

        window.location.href =
            '/checkout/' +
            encodeURIComponent(slug);
    }
);
</script>
@endpush