@extends('layouts.front')
@section('meta')
    {{-- ১. সাধারণ এসইও ট্যাগ (Search Engine Optimization) --}}
    <title>{{ $product->name }} - {{ $gs->title }}</title>
    <meta name="description" content="{{ $product->meta_description}}">
    <meta name="keywords" content="{{ $product->meta_keyword }}">
    <meta name="author" content="{{ $gs->title }}">
    <link rel="canonical" href="{{ url()->current() }}">

    {{-- ২. ওপেন গ্রাফ ট্যাগ (Facebook, LinkedIn, WhatsApp-এ শেয়ার করার জন্য) --}}
    <meta property="og:title" content="{{ $product->name }} - {{ $gs->title }}" />
    <meta property="og:description" content="{{ $product->meta_description}}" />
    <meta property="og:image" content="{{ asset_image('assets/images/products/'.$product->photo) }}" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="{{ $product->name }} - {{ $gs->title }}" />

    {{-- ৩. টুইটার কার্ড ট্যাগ (Twitter-এর জন্য) --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $product->name }} - {{ $gs->title }}">
    <meta name="twitter:description" content="{{ $product->meta_description}}">
    <meta name="twitter:image" content="{{ asset_image('assets/images/products/'.$product->photo) }}">
@endsection
@section('contents')
<section class="product-details-area py-5 bg-white">
    <div class="container py-lg-4">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}" class="text-decoration-none text-muted">হোম</a></li>
                <li class="breadcrumb-item"><a href="{{ route('frontend.themes') }}" class="text-decoration-none text-muted">থিমস</a></li>
                <li class="breadcrumb-item active text-orange fw-bold" aria-current="page">{{ $product->name }}</li>
            </ol>
        </nav>

        <div class="row g-4 align-items-start">
            <div class="col-lg-6">
                <div class="product-image-wrapper shadow-lg rounded-4 overflow-hidden border bg-light">
                    <img src="{{ asset_image('assets/images/products/'.$product->photo) }}"
                         class="img-fluid w-100 main-product-img"
                         alt="{{ $product->name }}">
                </div>
            </div>

            <div class="col-lg-6">
                <div class="ps-lg-2">
                    <span class="badge bg-soft-orange text-orange mb-2 px-3 py-2 rounded-pill">প্রিমিয়াম ওয়েবসাইট</span>
                    <h1 class="fw-bold mb-3 text-dark">{{ $product->name }}</h1>

                    <div class="price-box mb-4 d-flex align-items-center gap-3">
                        <h2 class="fw-bold mb-0 text-orange product-price">৳ {{ $product->price }}</h2>
                        @if($product->previous_price)
                            <del class="text-muted fs-4">৳ {{ $product->previous_price }}</del>
                        @endif
                    </div>

                    <p class="text-muted mb-4 fs-5 leading-relaxed">{{ $product->description }}</p>

                    <div class="d-flex flex-wrap gap-3 mb-4">
                        @if($product->demo_link)
                        <a href="{{ $product->demo_link }}" target="_blank" class="btn btn-dark btn-lg px-5 rounded-3 shadow-sm transition">
                            <i class="fas fa-eye me-2"></i> লাইভ দেখুন
                        </a>
                        @endif
                        @if($product->is_digital && $product->google_drive_file_id)
                        @auth
                        <button type="button"
                                class="btn btn-orange btn-lg px-5 rounded-3 shadow transition js-theme-buy"
                                data-checkout-url="{{ route('digital-product.checkout.submit', $product) }}"
                                data-product-name="{{ $product->name }} — ৳ {{ number_format($product->price, 0) }}">
                            <i class="fas fa-shopping-cart me-2"></i> এখুনি কিনুন
                        </button>
                        @else
                        <a href="{{ route('digital-product.checkout', $product) }}" class="btn btn-orange btn-lg px-5 rounded-3 shadow transition">
                            <i class="fas fa-shopping-cart me-2"></i> এখুনি কিনুন
                        </a>
                        @endauth
                        @elseif($product->purchase_link)
                        <a href="{{ $product->purchase_link }}" target="_blank" class="btn btn-orange btn-lg px-5 rounded-3 shadow transition">
                            <i class="fas fa-shopping-cart me-2"></i> এখুনি কিনুন
                        </a>
                        @endif
                    </div>

                    <div class="feature-card p-4 rounded-4 border bg-light shadow-sm">
                        <h6 class="fw-bold mb-3 text-dark"><i class="fas fa-star text-warning me-2"></i> মূল বৈশিষ্ট্যসমূহ:</h6>
                        <ul class="list-unstyled mb-0 row">
                            <li class="col-6 mb-3 d-flex align-items-center">
                                <i class="fas fa-check-circle text-success me-2"></i> রেসপন্সিভ ডিজাইন
                            </li>
                            <li class="col-6 mb-3 d-flex align-items-center">
                                <i class="fas fa-check-circle text-success me-2"></i> ফ্রি ইনস্টলেশন
                            </li>
                            <li class="col-6 d-flex align-items-center">
                                <i class="fas fa-check-circle text-success me-2"></i> লাইফটাইম সাপোর্ট
                            </li>
                            <li class="col-6 d-flex align-items-center">
                                <i class="fas fa-check-circle text-success me-2"></i> ফ্রি আপডেট
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="p-4 p-md-5 border rounded-4 bg-light shadow-sm">
                    <h3 class="fw-bold mb-4 border-bottom pb-3 text-dark">বিস্তারিত বর্ণনা</h3>
                    <div class="details-content custom-html-content">
                        {!! $product->details !!}
                    </div>
                </div>
            </div>
        </div>

        @if(!empty($product->tutorials))
        <div class="row mt-4">
            <div class="col-12">
                <div class="tutorial-section p-4 p-md-5 border rounded-4 bg-light shadow-sm">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4 border-bottom pb-3">
                        <h3 class="fw-bold text-dark mb-0">
                            <i class="fas fa-play-circle text-orange me-2"></i> টিউটোরিয়াল
                        </h3>
                        <span class="badge bg-white text-dark border rounded-pill px-3 py-2">
                            {{ count($product->tutorials) }}টি ভিডিও
                        </span>
                    </div>

                    <div class="row g-3">
                        @foreach($product->tutorials as $tutorial)
                            @php
                                $tutorialTitle = $tutorial['title'] ?? 'টিউটোরিয়াল';
                                $tutorialUrl = $tutorial['url'] ?? '';
                                $videoId = $product->tutorialVideoId($tutorialUrl);
                                $embedUrl = $tutorialUrl ? $product->tutorialEmbedUrl($tutorialUrl) : null;
                                $thumbnailUrl = $product->tutorialThumbnailUrl($videoId);
                            @endphp
                            @if($tutorialUrl)
                            <div class="col-6 col-md-4 col-xl-3">
                                <article class="tutorial-card h-100 bg-white border rounded-4 overflow-hidden">
                                    @if($embedUrl && $thumbnailUrl)
                                        <button type="button"
                                                class="tutorial-thumb"
                                                data-embed="{{ $embedUrl }}"
                                                aria-label="{{ $tutorialTitle }} চালান">
                                            <img src="{{ $thumbnailUrl }}"
                                                 alt="{{ $tutorialTitle }}"
                                                 loading="lazy">
                                            <span class="tutorial-play"><i class="fas fa-play"></i></span>
                                        </button>
                                    @elseif($embedUrl)
                                        <div class="tutorial-video">
                                            <iframe src="{{ $embedUrl }}"
                                                    title="{{ $tutorialTitle }}"
                                                    loading="lazy"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                    allowfullscreen></iframe>
                                        </div>
                                    @else
                                        <a href="{{ $tutorialUrl }}" target="_blank" rel="noopener noreferrer" class="tutorial-link-cover">
                                            <i class="fas fa-play-circle"></i>
                                        </a>
                                    @endif
                                    <div class="p-3">
                                        <h6 class="fw-bold text-dark mb-2 tutorial-title">{{ $tutorialTitle }}</h6>
                                        <a href="{{ $tutorialUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-dark btn-sm rounded-pill tutorial-btn">
                                            <i class="fas fa-external-link-alt me-1"></i> দেখুন
                                        </a>
                                    </div>
                                </article>
                            </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>

<style>
    .product-image-wrapper { line-height: 0; }
    .main-product-img {
        display: block;
        width: 100%;
        max-height: 420px;
        object-fit: contain;
        padding: 10px;
        transition: transform 0.5s ease;
    }
    .product-price { font-size: 2.5rem; }
    .bg-soft-orange { background-color: rgba(124, 58, 237, 0.1); }
    .text-orange { color: var(--primary-color) !important; }
    .btn-orange { background: var(--primary-color) !important; color: #fff !important; border: none; font-weight: 600; }
    .btn-orange:hover { background: var(--primary-hover) !important; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(124, 58, 237,0.2) !important; }
    .btn-dark:hover { transform: translateY(-3px); }
    .transition { transition: all 0.3s ease; }
    .product-image-wrapper:hover .main-product-img { transform: scale(1.02); }
    .leading-relaxed { line-height: 1.7; }
    .custom-html-content { font-size: 1.1rem; line-height: 1.8; color: #333; }
    .custom-html-content img { max-width: 100%; height: auto !important; border-radius: 10px; margin: 15px 0; }
    .tutorial-card { transition: transform .25s ease, box-shadow .25s ease; }
    .tutorial-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,.12); }
    .tutorial-thumb {
        position: relative; width: 100%; padding: 0; border: 0; background: var(--text-dark);
        display: block; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;
    }
    .tutorial-thumb img {
        width: 100%; height: 100%; object-fit: cover; display: block;
        transition: transform .25s ease;
    }
    .tutorial-thumb:hover img { transform: scale(1.04); }
    .tutorial-play {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        background: rgba(15,23,42,.28); color: #fff; font-size: 1.6rem;
        transition: background .2s ease;
    }
    .tutorial-thumb:hover .tutorial-play { background: rgba(15,23,42,.42); }
    .tutorial-play i {
        width: 42px; height: 42px; border-radius: 50%;
        background: rgba(239,68,68,.92); display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 8px 20px rgba(0,0,0,.25); padding-left: 3px;
    }
    .tutorial-video { position: relative; width: 100%; padding-top: 56.25%; background: var(--text-dark); }
    .tutorial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .tutorial-link-cover {
        min-height: 130px; display: flex; align-items: center; justify-content: center;
        color: #fff; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        text-decoration: none; font-size: 2.4rem;
    }
    .tutorial-link-cover:hover { color: #fff; }
    .tutorial-title {
        font-size: .92rem; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .tutorial-btn { font-size: .76rem; padding: .25rem .8rem; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.tutorial-thumb').forEach(function (button) {
        button.addEventListener('click', function () {
            var embedUrl = button.getAttribute('data-embed');
            if (!embedUrl) return;

            var iframe = document.createElement('iframe');
            iframe.src = embedUrl + (embedUrl.indexOf('?') >= 0 ? '&' : '?') + 'autoplay=1';
            iframe.title = button.getAttribute('aria-label') || 'Tutorial video';
            iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
            iframe.setAttribute('allowfullscreen', '');

            var player = document.createElement('div');
            player.className = 'tutorial-video';
            player.appendChild(iframe);
            button.replaceWith(player);
        });
    });
});
</script>
@auth
    @include('frontend.partials.theme-buy-modal')
@endauth
@endsection