@layout('parts.layout')
@php
/** 
 * Template Name:详情 || 产品
 * Template Post Type: post
 */
@endphp


@php
    # 页面数据
    $pageid = get_the_ID();
    $pageField = get_fields($pageid);
    $navHeight = false;
    
    
    # Cookie保留页面链接-ON
    $current_url = home_url(add_query_arg(array(), $wp->request));
    if (is_front_page()) {
        $current_url = home_url('/');
    }
    $existing_cookie = isset($_COOKIE['pageurl']) ? $_COOKIE['pageurl'] : '';
    $url_array = $existing_cookie ? explode("\n", $existing_cookie) : array();
    $url_array = array_filter($url_array, function($item) {
        return !empty(trim($item));
    });
    $url_array = array_filter($url_array, function($url) use ($current_url) {
        return trim($url) !== trim($current_url);
    });
    $url_array = array_values($url_array);
    if (!in_array($current_url, $url_array)) {
        array_unshift($url_array, $current_url);
    }
    if (count($url_array) > 10) {
        $url_array = array_slice($url_array, 0, 10);
    }
    $new_cookie_value = implode("\n", $url_array);
    setcookie(
        'pageurl',
        $new_cookie_value,
        time() + (1 * 24 * 60 * 60),
        '/',
        $_SERVER['HTTP_HOST'],
        is_ssl(),
        true
    );
    # Cookie保留页面链接-END
    
    
@endphp


@php $modelBanner = true; @endphp
@section('banner')
@endsection


@section('main')

<link rel="stylesheet" href="https://www.ciliconplus.com/wp-content/themes/gwcms-cilicon/assets/css/product.css">
<style type="text/css">
{{ $pageField['css'] }}
</style>

<div id="c-placeholder" ></div>

@if($pageField['link'])

    @php
        $pageField['link'] = $pageField['link']."?type=iframe";
    @endphp
    <iframe id="gm_product_iframe" src="{{ $pageField['link'] }}" ></iframe>
    <style>
        #gm_product_iframe{
            height: calc(100vh - 85px);
            border-width: 0;
            width: 100%;
        }
        @media (max-width:1580px){
            #gm_product_iframe{
                height: calc(100vh - 65px);
            }
        }
        @media (max-width:991px){
            #gm_product_iframe{
                height: calc(100vh - 55px);
            }
        }
    </style>

@else

    {{-- 公共banner --}}
    @php $modelName = 'info'; $model = $pageField[$modelName]; @endphp
    @if($model['status'] || true)
    <section class="public-banner">
        <picture class="c-img">
            {{-- pc端 --}}
            <source media="(min-width: 768px)" srcset="{{ returnImage($model['pc_image'], false, false) }}">
            {{-- 移动端 --}}
            <img {{ returnImage($model['m_image'], true, false, 'image_1000') }} fetchpriority="high">
        </picture>
        <div class="c-wrap">
            <div class="container" style="color:#fff">
                <h1 class="c-title font80">{{ get_the_title() }}</h1>
                <p class="c-text font24">{{ nl2br($model['info_breif']?:$model['text']) }}</p>
            </div> 
        </div>
    </section>
    @endif
    
    {{-- 产品详情1 --}}
    @php $modelName = 'model1'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info1">
        <div class="container">
            <div class="public-title wow fadeInUp">
                <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
                <p class="c-text font22">{{ nl2br($model['text']) }}</p>
            </div>
            {{-- color-white标题白色 --}}
            <ul class="c-list wow fadeInUp">
    
                @php
                    $forData = $model['list'];
                    $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                @endphp
                @foreach ($forData as $key => $value )
                    @if(strpos($value['type'], '1:') !== false)
                        <li>
                            <div class="c-wrap">
                                <picture class="public-img">
                                    {{-- pc端 --}}
                                    <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                                    {{-- 移动端 --}}
                                    <img loading="lazy" {{ returnImage($value['m_image'], true, false) }}>
                                                                    </picture>
                                <div class="c-box">
                                    <p class="c-title font32 color-white">{{ nl2br($value['title']) }}</p>
                                </div>
                            </div>
                        </li>
                    @elseif(strpos($value['type'], '3:') !== false)
                        <li>
                            <div class="c-wrap">
                                <picture class="public-img">
                                    {{-- pc端 --}}
                                    <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                                    {{-- 移动端 --}}
                                    <img loading="lazy" {{ returnImage($value['m_image'], true, false) }}>
                                </picture>
                                <div class="c-box">
                                    <p class="c-title font32">{{ nl2br($value['title']) }}</p>
                                    @if($value['text'])
                                    <div class="c-tag">
    
                                        @php
                                            $forDataTwo = explode("\n", $value['text']);
                                            $forDataTwo = is_object($forDataTwo) ? $forDataTwo : ( is_array($forDataTwo) ? $forDataTwo : array());
                                        @endphp
                                        @foreach ($forDataTwo as $keyTwo => $valueTwo )
                                        <p>{{ $valueTwo }}</p>
                                        @endforeach
                                        
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </li>
                    @elseif(strpos($value['type'], '4:') !== false)
                        <li>
                            <div class="c-wrap">
                                <picture class="public-img">
                                    {{-- pc端 --}}
                                    <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                                    {{-- 移动端 --}}
                                    <img loading="lazy" {{ returnImage($value['m_image'], true, false) }}>
                                </picture>
                                <div class="c-box">
                                    @if($value['text'])
                                    <div class="c-tag">
    
                                        @php
                                            $forDataTwo = explode("\n", $value['text']);
                                            $forDataTwo = is_object($forDataTwo) ? $forDataTwo : ( is_array($forDataTwo) ? $forDataTwo : array());
                                        @endphp
                                        @foreach ($forDataTwo as $keyTwo => $valueTwo )
                                        <p>{{ $valueTwo }}</p>
                                        @endforeach
                                        
                                    </div>
                                    @endif
                                    <p class="c-title font32">{{ nl2br($value['title']) }}</p>
                                </div>
                            </div>
                        </li>
                    @else
                        <li>
                            <div class="c-wrap">
                                <picture class="public-img">
                                    {{-- pc端 --}}
                                    <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                                    {{-- 移动端 --}}
                                    <img loading="lazy" {{ returnImage($value['m_image'], true, false) }}>
                                </picture>
                                <div class="c-box">
                                    <p class="c-title font32">{{ nl2br($value['title']) }}</p>
                                </div>
                            </div>
                        </li>
                    @endif
                @endforeach
    
            </ul>
        </div>
    </section>
    @endif
    
    
    {{-- 产品详情2 --}}
    @php $modelName = 'model2'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info2">
        <div class="container">
            <div class="public-title wow fadeInUp">
                <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
                <p class="c-text font22">{{ nl2br($model['text']) }}</p>
            </div>
            <picture class="public-img wow fadeInUp">
                {{-- pc端 --}}
                <source media="(min-width: 768px)" srcset="{{ returnImage($model['pc_image'], false, false) }}">
                {{-- 移动端 --}}
                <img loading="lazy" {{ returnImage($model['m_image'], true, false) }}>
            </picture>
        </div>
    </section>
    @endif
    
    
    {{-- 产品详情3 --}}
    @php $modelName = 'model3'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info3">
        <div class="c-main wow fadeInUp">
            <div class="container">
                <div class="public-img">
                    <img loading="lazy" {{ returnImage($model['image'], true, false) }}>
                </div>
                <div class="c-box">
                    <p class="c-title1 font56">{{ nl2br($model['info1']) }}</p>
                    <p class="c-title2 font56">{{ nl2br($model['info2']) }}</p>
                    <p class="c-text font22">{{ nl2br($model['text']) }}</p>
                </div>
            </div>
        </div>
    </section>
    @endif
    
    
    {{-- 产品详情4 --}}
    @php $modelName = 'model4'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info4">
        <div class="c-main">
            <div class="public-title">
                <div class="container">
                    <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
                    <p class="c-text font22">{{ nl2br($model['text']) }}</p>
                </div>
            </div>
            <picture class="c-img wow fadeInUp">
                {{-- pc端 --}}
                <source media="(min-width: 768px)" srcset="{{ returnImage($model['pc_image'], false, false) }}">
                {{-- 移动端 --}}
                <img loading="lazy" {{ returnImage($model['m_image'], true, false) }}>
            </picture>
        </div>
    </section>
    @endif
    
    
    {{-- 产品详情5 --}}
    @php $modelName = 'model5'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info5 c-dt">
        <div class="container">
            <div>
                <div class="public-title wow fadeInUp">
                    <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
                    <p class="c-text font22">{{ nl2br($model['text']) }}</p>
                </div>
                <div class="swiper wow fadeInUp">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            {{-- 底层 --}}
                            @php
                                $forData = $model['image_list'];
                                $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                            @endphp
                            @foreach ($forData as $key => $value )
                            @if($key < 3)
                            <picture class="public-img">
                                {{-- pc端 --}}
                                <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                                {{-- 移动端 --}}
                                <img loading="lazy" {{ returnImage($value['m_image'], true, false, 'image_800') }}>
                            </picture>
                            @endif
                            @endforeach
    
                        </div>
                    </div>
                    {{-- 如果需要分页器 --}}
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function loadImages() {
                document.querySelectorAll('.c-product-info5 picture.public-img').forEach(picture => {
                    const source = picture.querySelector('source');
                    const img = picture.querySelector('img');
                    if (source && source.dataset.lazySrcset) {
                        const url = source.dataset.lazySrcset;
                        source.srcset = url;
                        if (img) img.src = url;
                    }
                });
            }
            function onScroll() {
                if (window.scrollY > 500 && window.innerWidth >= 768) {
                    loadImages();
                    window.removeEventListener('scroll', onScroll);
                }
            }
            window.addEventListener('scroll', onScroll);
        });
    </script>
    </section>

    {{-- 产品详情5 --}}
    <section class="c-product-info5">
        <div class="container">
    
            @php
                $forData = $model['list'];
                $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
            @endphp
            @foreach ($forData as $key => $value )
            <div>
                <div class="public-title wow fadeInUp">
                    <h2 class="c-title font56">{{ nl2br($value['title']) }}</h2>
                    <p class="c-text font22">{{ nl2br($value['text']) }}</p>
                </div>
                <div class="swiper wow fadeInUp">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <picture class="public-img">
                                {{-- pc端 --}}
                                <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                                {{-- 移动端 --}}
                                <img loading="lazy" {{ returnImage($value['m_image'], true, false) }}>
                            </picture>
                        </div>
                    </div>
                    {{-- 如果需要分页器 --}}
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            @endforeach
    
        </div>
    </section>
    @endif
    
    
    {{-- 产品详情6 --}}
    @php $modelName = 'model6'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info6">
        <img loading="lazy" class="c-img" src="{{ pathSite('web') }}/assets/images/product-info6-img1.webp" alt="{{ $webTitle }}">
        <div class="container">
            <div class="public-title wow fadeInUp">
                <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
            </div>
            <div class="c-main wow fadeInUp">
                <ul class="c-modle-list">
                    
                    @php
                        $forData = $model['list'];
                        $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                    @endphp
                    @foreach ($forData as $key => $value )
                    <li>
                        
                        @php
                            $forDataTwo = $value['sequence'];
                            $forDataTwo = is_object($forDataTwo) ? $forDataTwo : ( is_array($forDataTwo) ? $forDataTwo : array());
                        @endphp
                        @foreach ($forDataTwo as $keyTwo => $valueTwo )
                        <img {{ returnImage($valueTwo, true, false) }} />
                        @endforeach
                        
                    </li>
                    @endforeach
                    
                </ul>
                <div class="c-list-box">
    
                    @php
                        $forData = $model['list'];
                        $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                    @endphp
                    @foreach ($forData as $key => $value )
                    <!--<ul class="c-list" data-model-src="{{ returnImage($value['module'], false, false) }}">-->
                    <ul class="c-list">
    
                        @php
                            $forDataTwo = $value['table'];
                            $forDataTwo = is_object($forDataTwo) ? $forDataTwo : ( is_array($forDataTwo) ? $forDataTwo : array());
                        @endphp
                        @foreach ($forDataTwo as $keyTwo => $valueTwo )
                        <li>
                            <p class="c-title">{{ nl2br($valueTwo['title']) }}</p>
                            <p class="c-text font22">{{ nl2br($valueTwo['text']) }}</p>
                        </li>
                        @endforeach
    
                    </ul>
                    @endforeach
    
                </div>
                <div class="c-btn-box">
                    <p class="c-text">{{ nl2br($model['tip']?:'spin me around') }}</p>
                    <ul class="c-list">
                        @php
                            $forData = $model['list'];
                            $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                        @endphp
                        @foreach ($forData as $key => $value )
                        <li>{{ $value['tab'] }}</li>
                        @endforeach
                        
                    </ul>
                </div>
            </div>
        </div>
    </section>
    @endif
    
    
    @php $modelName = 'model_neo_apple'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info12">
        <div class="container">
            <div class="public-title wow fadeInUp">
                <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
            </div>
            <div class="swiper wow fadeInUp">
                <div class="swiper-wrapper">
                    
                    @php
                        $forData = $model['list'];
                        $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                    @endphp
                    @foreach ($forData as $key => $value )
                    <div class="swiper-slide">
                        <a href="{{ $value['link']?:'javascript:;' }}" @if(strpos($value['link'], 'http') !== false) target="_blank" @endif class="c-wrap">
                            <picture class="public-img">
                                <source media="(min-width: 768px)" srcset="{{ returnImage($value['image'], false, false) }}" >
                                <img src="{{ returnImage($value['m_image'], false, false) }}" alt="{{ $value['title'] }}" >
                            </picture>
                            <div class="c-box">
                                <h3 class="c-title font40">{{ nl2br($value['title']) }}</h3>
                                <p class="c-text font18">{{ nl2br($value['text']) }}</p>
                            </div>
                        </a>
                    </div>
                    @endforeach
                    
                </div>
				<div class="swiper-button-prev"><img loading="lazy" src="https://www.ciliconplus.com/wp-content/themes/gwcms-cilicon/assets/images/ico-arrow3.svg" alt="" onload="SVGInject(this)"></div>
				<div class="swiper-button-next"><img loading="lazy" src="https://www.ciliconplus.com/wp-content/themes/gwcms-cilicon/assets/images/ico-arrow3.svg" alt="" onload="SVGInject(this)"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    @endif
    
    
    {{-- 产品详情11 --}}
    @php $modelName = 'model7'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info11">
        <div class="container">
            <div class="public-title wow fadeInUp">
                <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
                <p class="c-text font22">{{ nl2br($model['text']) }}</p>
            </div>
            <picture class="public-img wow fadeInUp">
                {{-- pc端 --}}
                <source media="(min-width: 768px)" srcset="{{ returnImage($model['pc_image'], false, false) }}">
                {{-- 移动端 --}}
                <img loading="lazy" {{ returnImage($model['m_image'], true, false) }}>
            </picture>
        </div>
    </section>
    @endif
    
    
    {{-- 产品详情8 --}}
    @php $modelName = 'model8'; $model = $pageField[$modelName]; @endphp
    @if($model['status'])
    <section class="c-product-info8">
        <div class="container">
            <div class="public-title wow fadeInUp">
                <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
                <p class="c-text font22">{{ nl2br($model['text']) }}</p>
            </div>
            <ul class="c-list">
    
                @php
                    $forData = $model['list'];
                    $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                @endphp
                @foreach ($forData as $key => $value )
                <li>
                    <div class="c-wrap wow fadeInUp">
                        <div class="public-img">
                            <img loading="lazy" {{ returnImage($value['image'], true, false) }}>
                        </div>
                        <h3 class="c-title font30">{{ nl2br($value['title']) }}</h3>
                        <p class="c-text font18">{{ nl2br($value['text']) }}</p>
                    </div>
                </li>
                @endforeach
    
            </ul>
        </div>
    </section>
    @endif

@endif


{{-- 产品详情9 --}}
@php $modelName = 'model9'; $model = $pageField[$modelName]; @endphp
@if($model['status'])
@if($model['related'])
<section class="c-product-info9">
    <div class="container">
        <div class="public-title wow fadeInUp">
            <h2 class="c-title font56">{{ nl2br($model['title']) }}</h2>
        </div>

        @php
            # 关联-产品
            $related = $model['related'];
        @endphp
        @include('parts.module.related_product')

    </div>
</section>
@endif
@endif


{{-- 公共联系 --}}
@php $modelName = 'modelx'; $model = $pageField[$modelName]; @endphp
@if($model['status'])
    @include('parts.module.public_contact_form')
@endif

@if($pageField['link'] )
<script type="text/javascript">
    // 获取 iframe 引用
    var iframe = document.getElementById('gm_product_iframe');
    
    // 监听 message 事件
    window.addEventListener('message', function(event) {
        // 验证消息来源，确保安全性
        if (event.origin !== 'https://product.ciliconplus.com') return;
        // 更新 iframe 高度
        var height = event.data;
        if(height>0){
            iframe.style.height = height + 'px';
        }
    });
    
    // 可选：初始加载时主动请求一次高度
    // setInterval(function() {
    //     if (iframe.contentWindow) {
    //         iframe.contentWindow.postMessage('requestHeight', 'https://product.ciliconplus.com');
    //     }
    // }, 500);
    
    // window.addEventListener('scroll', function() {
    //     const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
    //     if (scrollTop > 60) {
    //           iframe.style.pointerEvents = "none";
    //     }else{
    //           iframe.style.pointerEvents = "auto";
    //     }
    // });
</script>
@endif

@endsection


@section('scripts')
<script src="https://www.ciliconplus.com/wp-content/themes/gwcms-cilicon/assets/js/product.min.js"></script>
@endsection