<?php
if (!defined('_GNUBOARD_')) exit;
$skin_url = G5_THEME_URL . '/rb.layout/dnssash_main';
$today = G5_TIME_YMD;

/*function process_product_positions(&$db_products, $main_visual_data) {
    if (empty($db_products)) return;

    foreach ($db_products as &$product) {
        // 기본값 설정 (매칭 실패 시 xPct 기준으로 자동 배정)
        $product['pos'] = (isset($product['xPct']) && $product['xPct'] < 50) ? 'left' : 'right';
        // 메인 비주얼 데이터와 비교하여 정확한 위치 찾기
        foreach ($main_visual_data as $main_item) {
            if ($product['title'] == $main_item['title']) {
                if (isset($main_item['pos'])) {
                    $product['pos'] = $main_item['pos'];
                    $product['img_url'] = $main_item['img_url'];
                }
                break;
            }
        }
    }
    unset($product);
}*/
function process_product_positions(&$db_products, $main_visual_data) {
    if (empty($db_products)) return;

    // 1. $db_products를 title을 키로 하는 맵으로 변환하여 빠른 조회를 가능하게 합니다.
    $db_products_map = [];
    foreach ($db_products as $product) {
        $db_products_map[$product['title']] = $product;
    }

    $ordered_products = [];

    // 2. $main_visual_data의 순서에 따라 제품을 정렬하고 속성을 업데이트합니다.
    foreach ($main_visual_data as $main_item) {
        $title = $main_item['title'];
        if (isset($db_products_map[$title])) {
            $product = $db_products_map[$title];

            // 기존 로직: pos 및 img_url 업데이트
            if (isset($main_item['pos'])) {
                $product['pos'] = $main_item['pos'];
            }
            if (isset($main_item['img_url'])) {
                $product['img_url'] = $main_item['img_url'];
            }
            // main_visual_data에 xPct, yPct가 있다면 db_products의 값보다 우선합니다.
//            if (isset($main_item['xPct'])) {
//                $product['xPct'] = $main_item['xPct'];
//            }
//            if (isset($main_item['yPct'])) {
//                $product['yPct'] = $main_item['yPct'];
//            }


            $ordered_products[] = $product;
            unset($db_products_map[$title]); // 처리된 항목은 맵에서 제거합니다.
        }
    }

    // 3. $main_visual_data에 포함되지 않은 나머지 제품들을 뒤에 추가합니다.
    foreach ($db_products_map as $remaining_product) {
        $ordered_products[] = $remaining_product;
    }

    // 4. 원본 $db_products 배열을 새로 정렬된 배열로 교체합니다.
    $db_products = $ordered_products;
    unset($product);
}
// 1. 게시판 데이터 로드 시도
$bo_table = 'bconstruction'; // 게시판 ID
$sql = " select * from {$g5['write_prefix']}$bo_table 
           WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
         ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply";
//where wr_is_comment = 0 order by wr_id asc ";
$result = sql_query($sql);

$db_products = array();

$main_visual_product_data = [
        ["title" => "입면분할창", "pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/1.webp', 'xPct'=> 46.4, 'yPct'=> 12.5],
        ["title" => "프로젝트창","pos"=>"left",  "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "pruimg_url" => $skin_url . '/images/2.webp',"img_url" => $skin_url . '/images/2' . '.webp',  "xPct" => 25.4, "yPct" =>  24.8],
        ["title" => "소형단창","pos"=>"left",  "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "pruimg_url" => $skin_url . '/images/3.webp',"img_url" => $skin_url . '/images/3' . '.webp',  "xPct" => 7.6, "yPct" => 33.0],
        ["title" => "학교창","pos"=>"left",  "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "pruimg_url" => $skin_url . '/images/5.webp',"img_url" => $skin_url . '/images/5' . '.webp' ],
        ["title" => "판넬창", "pos"=>"left", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "pruimg_url" => $skin_url . '/images/4.webp',"img_url" => $skin_url . '/images/4' . '.webp'],

        ["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "pruimg_url" => $skin_url . '/images/6.webp',"img_url" => $skin_url . '/images/6' . '.webp',  "xPct" => 62.1, "yPct" =>  16.1],
        ["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창","pruimg_url" => $skin_url . '/images/7.webp', "img_url" => $skin_url . '/images/7' . '.webp',  "xPct" => 62.1, "yPct" => 16.1],
        ["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시","pruimg_url" => $skin_url . '/images/8.webp', "img_url" => $skin_url . '/images/8' . '.webp',  "xPct" => 62.1, "yPct" => 16.1],
        ["title" => "스마트 이중창","pos"=>"right", "right" => "24p", "desc" => "보안이 강화된 자동잠금 이중창","pruimg_url" => $skin_url . '/images/9.webp', "img_url" => $skin_url . '/images/9' . '.webp',  "xPct" => 93.5, "yPct" => 41.6],
        ["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창","pruimg_url" => $skin_url . '/images/10.webp', "img_url" => $skin_url . '/images/10' . '.webp',  "xPct" => 93.5, "yPct" => 41.6],

];

while($row = sql_fetch_array($result)) {


    // 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
    $sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
    $file = sql_fetch($sql_file);

    if (isset($file['bf_file']) && $file['bf_file']) {
        // 실제 업로드된 파일 경로
        $img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
    } else {
        // 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
        $encoded_filename = rawurlencode($row['wr_subject']);
        $img_url = $skin_url . '/images/' . $encoded_filename . '.png';
    }
    $link_set = null;
    if(isset($row['wr_7']) && !empty($row['wr_7']) && $row['wr_7'] != 0 && $row['wr_7'] != '') {
        $link_set =  get_pretty_url("product", $row['wr_7']);
    }
    $db_products[] = array(
            "title"   => $row['wr_subject'],
            "page"    => $row['wr_4'],
            "desc"    => $row['wr_1'],
            "content" => conv_content($row['wr_content'], 1), // 💡 클릭용 에디터 HTML 원본
            "xPct"    => (float)$row['wr_5'],
            "yPct"    => ((float)$row['wr_6']),
            "pruimg_url" => $img_url,
            "img_url" => '',
            "link" => $link_set, // 💡 게시글 상세 주소 추가
    );

}

if (empty($db_products)) {
    $db_products = [
            ["title" => "입면분할창", "pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/1.webp', 'xPct'=> 46.4, 'yPct'=> 12.5],
            ["title" => "프로젝트창","pos"=>"left",  "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "pruimg_url" => $skin_url . '/images/2.webp',"img_url" => $skin_url . '/images/2' . '.webp',  "xPct" => 25.4, "yPct" =>  24.8],
            ["title" => "소형단창","pos"=>"left",  "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "pruimg_url" => $skin_url . '/images/3.webp',"img_url" => $skin_url . '/images/3' . '.webp',  "xPct" => 7.6, "yPct" => 33.0],
            ["title" => "학교창","pos"=>"left",  "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "pruimg_url" => $skin_url . '/images/5.webp',"img_url" => $skin_url . '/images/5' . '.webp' ],
            ["title" => "판넬창", "pos"=>"left", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "pruimg_url" => $skin_url . '/images/4.webp',"img_url" => $skin_url . '/images/4' . '.webp'],

            ["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "pruimg_url" => $skin_url . '/images/6.webp',"img_url" => $skin_url . '/images/6' . '.webp',  "xPct" => 62.1, "yPct" =>  16.1],
            ["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창","pruimg_url" => $skin_url . '/images/7.webp', "img_url" => $skin_url . '/images/7' . '.webp',  "xPct" => 62.1, "yPct" => 16.1],
            ["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시","pruimg_url" => $skin_url . '/images/8.webp', "img_url" => $skin_url . '/images/8' . '.webp',  "xPct" => 62.1, "yPct" => 16.1],
            ["title" => "스마트 이중창","pos"=>"right", "right" => "24p", "desc" => "보안이 강화된 자동잠금 이중창","pruimg_url" => $skin_url . '/images/9.webp', "img_url" => $skin_url . '/images/9' . '.webp',  "xPct" => 93.5, "yPct" => 41.6],
            ["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창","pruimg_url" => $skin_url . '/images/10.webp', "img_url" => $skin_url . '/images/10' . '.webp',  "xPct" => 93.5, "yPct" => 41.6],

    ];
} else {
    process_product_positions($db_products, $main_visual_product_data);
}

/**
 * 2. 특정 방향(left/right)의 제품 아이템들을 출력하는 함수
 */
function render_product_side($db_products, $side) {
    if (empty($db_products)) return '';

    $html = '';
    foreach ($db_products as $item) {
        // 지정된 방향(left/right)의 아이템만 필터링
        if ($item['pos'] !== $side) continue;

        // 링크 속성 준비 (prolink 값이 있을 때만 생성)
        $link_attr = (isset($item['link']) && !empty($item['link'])) ? ' data-prolink="'.$item['link'].'"' : '';

        // HTML 문자열 생성
        $html .= '
        <div class="product-item" 
             data-x1="'.$item['xPct'].'" 
             data-y1="'.$item['yPct'].'" 
             data-img="'.$item['pruimg_url'].'" 
             data-title="'.htmlspecialchars($item['title']).'"
             data-desc="'.htmlspecialchars($item['desc']).'"
             data-content="'.htmlspecialchars(isset($item['content']) ? $item['content'] : "").'"
             '.$link_attr.'>
            <div class="product-img">
                <img src="'.$item['img_url'].'" alt="'.htmlspecialchars($item['title']).'">
            </div>
            <div class="product-info">
                <h3>'.$item['title'].'</h3>
                <p>'.$item['desc'].'</p>
            </div>
        </div>';
    }
    return $html;
}

$layout_grid_config = [
        'top' => [
                'columns' => [
                        ['rows' => 1], // 1번 열: 1행 (통짜)
                        ['rows' => 1], // 2번 열: 2행 (상하 분할)
                ]
        ],
//        'middle' => [
//                'columns' => [
//                        ['rows' => 2], // 1번 열: 2행
//                        ['rows' => 2], // 2번 열: 2행
//                ],
//
//        ],
//        'bottom' => [
//                'columns' => [
//                        ['rows' => 1] // 1번 열: 1행 (통짜)
//                ]
//        ]
];

// 테마 스타일 및 스크립트 로드
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products2.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/main.css?ver='.G5_CSS_VER.'">', 0);
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js?ver='.G5_CSS_VER.'"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products2.js?ver='.G5_CSS_VER.'"></script>', 0);
// JS 추가 (GSAP 라이브러리를 먼저 로드하고, 그 뒤에 custom.js를 로드)
add_javascript('<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>', 0);

include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
?>
<div class="main-container">
    <!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
    <section class="map-main-visual">
        <div class="visual-slider swiper-container">
            <div class="swiper-wrapper">
                <?php
                $main_visual_data = [
                        ['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
                        ['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
                        ['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
                ];

                foreach ($main_visual_data as $item) {
                    ?>
                    <div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
                        <a href="#" class="map-visual-link">
                            <div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
                            <div class="map-visual-layer-wrap">
                                <div class="visual-layer-item">
                                    <h2 class="map-visual-title">PREMIUM DESIGN</h2>
                                    <span class="map-visual-divider"></span>
                                    <p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php } ?>
            </div>
            <div class="swiper-pagination"></div>

            <!-- 네비게이션 버튼 (클래스명 변경됨) -->
            <div class="swiper-button-prev">
                <div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
            </div>
            <div class="swiper-button-next">
                <div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
            </div>
        </div>
    </section>
</div>


<div class="product-section">
    <div class="product-side left">
        <?php echo render_product_side( $db_products, 'left');?>
    </div>

    <div class="product-main" >
        <img id="main-map" src='<?php echo $skin_url?>/images/main.png' alt="메인 사진">
        <div class="product-hotspot"></div>
    </div>

    <div id="popup-box" style="position:absolute; width:0; height:0; display:none; overflow:hidden; z-index:100; box-shadow:0 10px 30px rgba(0,0,0,0.3);">

        <div class="content" >
            팝업 내용
        </div>
    </div>

    <div class="product-side right">
        <?php echo render_product_side( $db_products, 'right');?>
    </div>
</div>

<div class="main-container">

    <div class="main-visual">
<!--        <section class="process-section">-->
            <div class="container">
                <main class="layout-main-content1">

                    <?php foreach ($layout_grid_config as $row_name => $row_config): ?>
                        <!-- 행(Row) 시작 -->
                        <div class="layout-row layout-row-<?php echo $row_name; ?>">

                            <?php
                            $columns = $row_config['columns'];
                            $col_index = 1;
                            foreach ($columns as $col_config):
                                $row_count = isset($col_config['rows']) ? $col_config['rows'] : 1;
                                ?>
                                <!-- 열(Column) 시작 -->
                                <div class="layout-col layout-col-<?php echo $col_index; ?>">
                                    <?php for ($r = 1; $r <= $row_count; $r++): ?>
                                        <!-- 내부 행(Inner Row) 시작 -->
                                        <div class="flex_box layout-inner-row" data-layout="main-content-<?php echo $row_name; ?>-col<?php echo $col_index; ?>-row<?php echo $r; ?>">

                                        </div>
                                    <?php endfor; ?>
                                </div>
                                <?php
                                $col_index++;
                            endforeach;
                            ?>

                        </div>
                        <!-- 행(Row) 끝 -->
                    <?php endforeach; ?>

                </main>
            </div>
<!--        </section>-->

    </div>
</div>
<section class="min-h-screen flex flex-col items-center justify-center p-6">
    <div class="mb-10 text-center">
        <h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
            고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
        </h1>

        <p class="text-gray-300 text-sm md::text-base max-w-2xl mx-auto leading-relaxed">
            고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
            최고의 품질과 안정적인 A/S를 제공합니다.
        </p>
    </div>


</section>
<div class="main-container">
    <!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
    <section class="map-main-visual">
        <section class="hero_container">
            <div class="content_inner">

                <!--            <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
                <div class="text_area">
                    <p class="label_blue">SMART WINDOW ORDERING</p>
                    <h1 class="main_title">
                        창호의 새로운 기준,<br>
                        <span class="highlight_blue">이끌림샤시</span>로 시작하세요
                    </h1>
                    <p class="sub_description">
                        복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
                        고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
                    </p>
                    <!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->

                    <div class="main_action_row">
                        <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
                            <div class="btn_icon">🏢</div>
                            <div class="btn_txt">
                                <strong>창호 온라인 주문</strong>
                                <p>실시간 직접 견적 및 주문 확정</p>
                            </div>
                        </a>
                        <div class="btn_box white" onclick="openExpertVisitPopup(<?php echo $wr_id; ?>)">
                            <div class="btn_icon">👨‍🔧</div>
                            <div class="btn_txt">
                                <strong>창호 전문가 부르기</strong>
                                <p>방문 실측 및 맞춤 상담 신청</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="floating_as_badge">
                <p>전국 대리점망</p>
                <strong>A/S 10년 보장</strong>
            </div>
        </section>
    </section>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const productsData = <?php echo json_encode($db_products); ?>;
        if (typeof initProducts === 'function') {
            initProducts(productsData);
        }

        // Get the house map container
        const houseMapContainer = document.getElementById('house-map-container');
        // Get all product items
        const productItems = document.querySelectorAll('.product-item');

        // Add click event listener to each product item
        productItems.forEach(item => {
            item.addEventListener('click', function() {
                // Get the image URL from the data-img attribute
                const imageUrl = this.getAttribute('data-img');
                if (imageUrl) {
                    // Update the background image of the house map container
                    houseMapContainer.style.backgroundImage = `url('${imageUrl}')`;
                }
            });
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // .map-main-visual 안에 있는 슬라이더만 타겟팅
        var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                init: function () {
                    updateNavThumbs(this);
                },
                slideChangeTransitionEnd: function () {
                    updateNavThumbs(this);
                },
            },
        });

        function updateNavThumbs(swiper) {
            // 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
            var slides = swiper.slides;
            var activeIndex = swiper.activeIndex;

            // 이전 슬라이드와 다음 슬라이드 요소 추출
            var prevSlide = slides[activeIndex - 1];
            var nextSlide = slides[activeIndex + 1];

            // 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
            var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
            var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';

            // 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
            if (prevThumb) {
                var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
                if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
            }

            if (nextThumb) {
                var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
                if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
            }
        }
    });

</script>