{extend name="../view/default/basetmp.htm" /}

{block name="css"}
<link rel="stylesheet" href="__INDEX__/css/royalcms.product.detail.css">
{/block}

{block name="main"}
<!-- Product Detail Content -->
<section class="royal-product-detail"> 

    <!-- Product Detail Main Content -->
    <div class="royal-container">
        {include file='../view/default/left.htm'}  

        <div class="royal-product-detail-main">
            <!-- Product Gallery with Animation -->
            <div class="royal-product-detail-gallery" data-aos="fade-right" data-aos-duration="800">
                <!-- Main Swiper with Animation -->
                <div class="royal-product-detail-swiper-main swiper" data-aos="zoom-in" data-aos-delay="300">
                    <div class="swiper-wrapper">
                        {volist name="images" id="img"}
                        <div class="swiper-slide" data-aos="fade-in" data-aos-delay="{$i*100}">
                            <div class="royal-product-detail-image-wrapper">
                                <img src="{$img}" alt="{$Arts.title}" class="royal-product-detail-image" onerror="this.src='__INDEX__/images/logo.png'">
                            </div>
                        </div>
                        {/volist}
                        
                        <!-- Default image if no images available -->
                        {if empty($images)}
                        <div class="swiper-slide" data-aos="fade-in" data-aos-delay="200">
                            <div class="royal-product-detail-image-wrapper">
                                <img src="__INDEX__/images/logo.png" alt="{$Arts.title}" class="royal-product-detail-image">
                            </div>
                        </div>
                        {/if}
                    </div>
                    <!-- Navigation Buttons with Animation -->
                    <div class="royal-product-detail-swiper-button-prev" data-aos="fade-right" data-aos-delay="500">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="royal-product-detail-swiper-button-next" data-aos="fade-left" data-aos-delay="500">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <!-- Thumbnail Swiper with Animation -->
                <div class="royal-product-detail-swiper-thumbs swiper" data-aos="fade-up" data-aos-delay="400">
                    <div class="swiper-wrapper">
                        {volist name="images" id="img"}
                        <div class="swiper-slide" data-aos="zoom-in" data-aos-delay="{$i*80+600}">
                            <div class="royal-product-detail-thumb-wrapper">
                                <img src="{$img}" alt="{:lang('thumbnail')}{$key}" class="royal-product-detail-thumb" onerror="this.src='__INDEX__/images/logo.png'">
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
            </div>

            <!-- Product Info with Animation -->
            <div class="royal-product-detail-info" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
                <!-- Product Header with Staggered Animations -->
                <div class="royal-product-detail-header">
                    <h1 class="royal-product-detail-title" data-aos="fade-down" data-aos-delay="300">{$Arts.title}</h1>
                    <div class="royal-product-detail-tags" data-aos="fade-up" data-aos-delay="400">
                         {if !empty($tags)}
                    {volist name="tags" id="tag"}
                    <span class="royal-product-detail-tag royal-product-detail-tag-{$tag.color}" 
                          data-aos="bounce-in" 
                          data-aos-delay="{$i*100+500}">{$tag.name}</span>
                    {/volist} 
                    {/if} 
                    </div>
                </div>

                <!-- Price Section with Animation -->
                <div class="royal-product-detail-price-section" data-aos="zoom-in" data-aos-delay="600">
                    <span class="royal-product-detail-price">¥{$Arts.price}</span>
                </div>

                <!-- Product Stats with Staggered Animations -->
                <div class="royal-product-detail-stats">
                    <div class="royal-product-detail-stat" data-aos="flip-up" data-aos-delay="700">
                        <div class="royal-product-detail-stat-value">{$Arts.click}</div>
                        <div class="royal-product-detail-stat-label">{:lang('product_sales')}</div>
                    </div>
                    <div class="royal-product-detail-stat" data-aos="flip-up">
                        <div class="royal-product-detail-stat-value">{$Arts.star}</div>
                        <div class="royal-product-detail-stat-label">{:lang('product_favorites')}</div>
                    </div>
                    <div class="royal-product-detail-stat" data-aos="flip-up" data-aos-delay="900">
                        <div class="royal-product-detail-stat-value">{$Arts.like}</div>
                        <div class="royal-product-detail-stat-label">{:lang('product_satisfaction')}</div>
                    </div>
                </div>

                <!-- Action Buttons with Animation -->
                <div class="royal-product-detail-actions" data-aos="fade-up" data-aos-delay="1000">
                    <a href="consult.html" class="royal-btn royal-btn-primary royal-product-detail-btn-large"
                       data-aos="zoom-in" data-aos-delay="1100">
                        <i class="fas fa-comments"></i>
                        <span>{:lang('consult_now')}</span>
                    </a>
                    <a href="quote.html" class="royal-btn royal-btn-free royal-product-detail-btn-large"
                       data-aos="zoom-in" data-aos-delay="1200">
                        <i class="fas fa-file-alt"></i>
                        <span>{:lang('get_quote')}</span>
                    </a>
                </div>

                <!-- Features Preview with Animation -->
                <div class="royal-product-detail-features-preview" data-aos="fade-up" data-aos-delay="1300">
                    <h3 class="royal-product-detail-features-title" data-aos="fade-right" data-aos-delay="1400">{:lang('core_features')}</h3>
                    <div class="royal-product-detail-features-content" data-aos="fade-up" data-aos-delay="1500">
                        {$Arts.description}
                    </div>
                </div>
            </div>
        </div>

        <!-- Product Detail Tabs with Animation -->
        <div class="royal-product-detail-tabs" data-aos="fade-up" data-aos-delay="400">
            <!-- Tab Navigation with Animation -->
            <div class="royal-product-detail-tabs-nav" data-aos="fade-down" data-aos-delay="500">
                <button class="royal-product-detail-tab-nav royal-product-detail-tab-active" 
                        data-tab="details"
                        data-aos="zoom-in" data-aos-delay="600">
                        {:lang('tab_details')}
                </button>
                <button class="royal-product-detail-tab-nav" 
                        data-tab="features"
                        data-aos="zoom-in" data-aos-delay="700">
                        {:lang('tab_features')}
                </button>
            </div>

            <!-- Tab Content with Animation -->
            <div class="royal-product-detail-tabs-content" data-aos="fade-up">
                <div class="royal-product-detail-tab-panel royal-product-detail-tab-active" 
                     id="royal-product-detail-tab-details"
                     data-aos="fade-in" data-aos-delay="900">
                    <div class="royal-product-detail-content">
                        {$Arts.content|raw}
                    </div>

                    {include file='../view/default/articletag.htm'}  
                </div>

                <div class="royal-product-detail-tab-panel" 
                     id="royal-product-detail-tab-features"
                     data-aos="fade-in" data-aos-delay="900">
                    <div class="royal-product-detail-features-content">
                        {$Arts.content_xn|raw}
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Products with Animation -->
        <div class="royal-product-detail-related" data-aos="fade-up" data-aos-delay="500">
            <!-- Section Title with Animation -->
            <div class="royal-section-title" data-aos="fade-up" data-aos-delay="600">
                <h2 data-aos="fade-down" data-aos-delay="700">{:lang('related_products')}</h2>
                <p data-aos="fade-up">{:lang('explore_more')}</p>
            </div>
            
            <!-- Related Products Grid with Staggered Animations -->
            <div class="royal-products-grid">
               {volist name="ArtRes" id="v"}
                <div class="royal-product-card" 
                     data-aos="flip-left" 
                     data-aos-delay="{$i*100+900}" 
                     data-aos-duration="600">
                    <a href="{$v.url}" class="royal-product-image" data-aos="zoom-in" >
                        <img src="{$v.thumb}" alt="{$v.title}" onerror="this.src='__INDEX__/images/logo.png'">
                    </a>
        {if in_array($v.type, [1,2,3])}
                                <div class="royal-tag royal-tag-type{$v.type}">
                                    {switch name="$v.type"}
                                        {case value="1"}{:lang('product_tag_hot')}{/case}
                                        {case value="2"}{:lang('product_tag_recommended')}{/case}
                                        {case value="3"}{:lang('product_tag_popular')}{/case}
                                    {/switch}
                                </div>
                            {/if}
                    <div class="royal-product-card-content">
                        <h3 data-aos="fade-up">
                            <a href="{$v.url}">{$v.title|cut_str=28}</a>
                        </h3>
                        <p data-aos="fade-up" >{$v.stitle|cut_str=28}</p>
                        <div class="royal-product-price" data-aos="fade-up" >¥{$v.price}</div>
                        <div class="royal-product-meta" data-aos="fade-up" >
                            <span><i class="fas fa-chart-line"></i> {$v.click}</span>
                            <span><i class="fas fa-star"></i> {$v.star}</span>
                        </div> 
                    </div>
                </div>
                {/volist}
            </div>
        </div>
    </div>
</section>
{/block}

{block name="js"}
<script src="__INDEX__/js/royalcms.product.detail.js"></script>
{/block}