<?php
// 1. Fetch all wedding service categories for Carousel 1 ("សេវាកម្មអាពាហ៍ពិពាហ៍") - Get ALL items
$srv_all = array();
$srv_query = mysql_query("SELECT * FROM tbl_cate_service ORDER BY id ASC");
if ($srv_query) {
    while ($r = mysql_fetch_array($srv_query)) {
        $srv_all[] = $r;
    }
}
$total_items1 = count($srv_all);
$total_dots1 = max(1, $total_items1 - 1);

// 2. Fetch car service category items for Carousel 2 ("ពិភពម៉ូដរថយន្ត") - Filter EXCLUSIVELY category 'រថយន្ត' / 'car'
$car_items = array();

// 2a. Search category 'រថយន្ត' / 'car' in tbl_cate_service
$car_cs_ids = array();
$q_cs = mysql_query("SELECT id FROM tbl_cate_service WHERE title LIKE '%រថយន្ត%' OR title LIKE '%car%' OR title LIKE '%Car%'");
if ($q_cs) {
    while ($r = mysql_fetch_array($q_cs)) {
        $car_cs_ids[] = $r['id'];
    }
}
if (!empty($car_cs_ids)) {
    $q_s = mysql_query("SELECT id, cid, image, name as title, 'service' as source FROM tbl_service WHERE cid IN (" . implode(',', $car_cs_ids) . ") ORDER BY id DESC LIMIT 0, 10");
    if ($q_s) {
        while ($r = mysql_fetch_array($q_s)) {
            $car_items[] = $r;
        }
    }
}

// 2b. Search category 'រថយន្ត' / 'car' in tbl_cate_clothes
$car_cc_ids = array();
$q_cc = mysql_query("SELECT id FROM tbl_cate_clothes WHERE name_kh LIKE '%រថយន្ត%' OR name LIKE '%car%' OR name LIKE '%Car%'");
if ($q_cc) {
    while ($r = mysql_fetch_array($q_cc)) {
        $car_cc_ids[] = $r['id'];
    }
}
if (!empty($car_cc_ids)) {
    $q_cl = mysql_query("SELECT id, cid, s_id, image, code_id as title, price, mcid, 'clothes' as source FROM tbl_clothes WHERE cid IN (" . implode(',', $car_cc_ids) . ") OR mcid IN (" . implode(',', $car_cc_ids) . ") ORDER BY id DESC LIMIT 0, 10");
    if ($q_cl) {
        while ($r = mysql_fetch_array($q_cl)) {
            $car_items[] = $r;
        }
    }
}

// 2c. If NO items found in car category, populate placeholder cards (empty cards) for car category ONLY
if (empty($car_items)) {
    for ($i = 1; $i <= 2; $i++) {
        $car_items[] = array(
            'id' => '',
            'title' => 'ពិភពម៉ូដរថយន្ត',
            'image' => '',
            'source' => 'placeholder'
        );
    }
}
$car_items = array_slice($car_items, 0, 10);
$total_items2 = count($car_items);
$total_dots2 = max(1, $total_items2 - 1);
?>

<!-- CAROUSEL 1: សេវាកម្មអាពាហ៍ពិពាហ៍ -->
<div id="bar_title_khmer" style="position: relative; background: url(images/line.png) no-repeat bottom left; font-family: 'Koulen', sans-serif; font-size: 22px; color: #f808ea; width: 930px; height: auto; min-height: 45px; line-height: 1.5; margin-bottom: 15px;">
	សេវាកម្មអាពាហ៍ពិពាហ៍
</div>
<div class="clear"></div>

<div id="two_card_container_1" style="width: 940px; height: 250px; position: relative; margin: 0 auto 10px auto; overflow: hidden;">
    <div id="two_card_track_1" style="display: flex; gap: 24px; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);">
    <?php foreach ($srv_all as $s_idx => $item) { 
        $img = !empty($item['image']) && file_exists("images/service/icon/" . $item['image']) 
            ? "images/service/icon/" . $item['image'] 
            : "";
        $link = "index.php?p=service&cs_id=" . $item['id'] . "&action=cate_mnu#txt";
        $title = htmlspecialchars($item['title']);
    ?>
        <a href="<?php echo $link; ?>" class="service_card_link_1" style="text-decoration: none; display: block; flex-shrink: 0; width: 458px; height: 250px;">
            <div class="service_single_card" style="width: 458px; height: 250px; position: relative; border-radius: 10px; overflow: hidden; border: 2px solid #fc5ea5; box-shadow: 0 4px 12px rgba(0,0,0,0.18); background: linear-gradient(135deg, #e91e63, #ff4081); transition: transform 0.25s ease, box-shadow 0.25s ease;">
                <?php if (!empty($img)) { ?>
                    <img src="<?php echo $img; ?>" alt="<?php echo $title; ?>" style="width: 100%; height: 100%; object-fit: cover; display: block;" />
                    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); padding: 35px 15px 14px 15px; color: #fff; text-shadow: 1px 1px 3px #000;">
                        <span style="font-family: 'Koulen', 'Khmer OS', 'Kh Bokor', sans-serif; font-size: 28px; color: #faeb6b; display: block;">
                            <?php echo $title; ?>
                        </span>
                    </div>
                <?php } else { ?>
                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; text-align: center; color: #ffffff; font-family: 'Khmer OS Muol Light', 'Khmer OS', 'Kh Bokor', sans-serif; font-size: 24px; line-height: 1.5; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">
                        <?php echo $title; ?>
                    </div>
                <?php } ?>
            </div>
        </a>
    <?php } ?>
    </div>
</div>

<div id="carousel_dots_1" style="width: 940px; margin: 10px auto 25px auto; text-align: center;">
    <?php for ($i = 0; $i < $total_dots1; $i++) { ?>
        <span class="page_dot_1" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: <?php echo ($i === 0) ? '#f808ea' : '#ccc'; ?>; margin: 0 4px; cursor: pointer; transition: background 0.3s;"></span>
    <?php } ?>
</div>
<div class="clear"></div>


<!-- CAROUSEL 2: ពិភពម៉ូដរថយន្ត (ONLY Category រថយន្ត / car - SHOW DETAIL ON CLICK, PLACEHOLDER IF EMPTY) -->
<div id="bar_title_khmer" style="position: relative; background: url(images/line.png) no-repeat bottom left; font-family: 'Koulen', sans-serif; font-size: 22px; color: #f808ea; width: 930px; height: auto; min-height: 45px; line-height: 1.5; margin-bottom: 15px;">
	ពិភពម៉ូដរថយន្ត
</div>
<div class="clear"></div>

<div id="two_card_container_2" style="width: 940px; height: 250px; position: relative; margin: 0 auto 10px auto; overflow: hidden;">
    <div id="two_card_track_2" style="display: flex; gap: 24px; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);">
    <?php foreach ($car_items as $c_idx => $c_item) { 
        $c_source = isset($c_item['source']) ? $c_item['source'] : 'service';
        $c_title = !empty($c_item['title']) ? htmlspecialchars($c_item['title']) : 'ពិភពម៉ូដរថយន្ត';
        $c_img_file = isset($c_item['image']) ? $c_item['image'] : '';
        
        if ($c_source === 'clothes') {
            $c_img = !empty($c_img_file) && file_exists("images/clothes/" . $c_img_file) 
                ? "images/clothes/" . $c_img_file 
                : (!empty($c_img_file) && file_exists("images/clothes/b/" . $c_img_file) 
                    ? "images/clothes/b/" . $c_img_file 
                    : "");
            $c_link = "?p=clothes&s_id=" . (isset($c_item['s_id']) ? $c_item['s_id'] : '1') . "&id_detail=" . $c_item['id'] . "&sub=" . (isset($c_item['mcid']) ? $c_item['mcid'] : '') . "&cc_id=" . (isset($c_item['cid']) ? $c_item['cid'] : '') . "&action=cl_detail#txt";
        } else if ($c_source === 'service') {
            $c_img = !empty($c_img_file) && file_exists("images/service/" . $c_img_file) 
                ? "images/service/" . $c_img_file 
                : (!empty($c_img_file) && file_exists("images/service/icon/" . $c_img_file) 
                    ? "images/service/icon/" . $c_img_file 
                    : "");
            $c_link = "?p=service&cs_id=" . (isset($c_item['cid']) ? $c_item['cid'] : '') . "&s_id=" . $c_item['id'] . "&action=show_detail#txt";
        } else {
            $c_img = "";
            $c_link = "?p=service#txt";
        }
    ?>
        <a href="<?php echo $c_link; ?>" class="service_card_link_2" style="text-decoration: none; display: block; flex-shrink: 0; width: 458px; height: 250px;">
            <div class="service_single_card" style="width: 458px; height: 250px; position: relative; border-radius: 10px; overflow: hidden; border: 2px solid #fc5ea5; box-shadow: 0 4px 12px rgba(0,0,0,0.18); background: linear-gradient(135deg, #e91e63, #ff4081); transition: transform 0.25s ease, box-shadow 0.25s ease;">
                <?php if (!empty($c_img)) { ?>
                    <img src="<?php echo $c_img; ?>" alt="<?php echo $c_title; ?>" style="width: 100%; height: 100%; object-fit: cover; display: block;" />
                    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); padding: 35px 15px 14px 15px; color: #fff; text-shadow: 1px 1px 3px #000;">
                        <span style="font-family: 'Koulen', 'Khmer OS', 'Kh Bokor', sans-serif; font-size: 28px; color: #faeb6b; display: block;">
                            <?php echo $c_title; ?>
                        </span>
                    </div>
                <?php } else { ?>
                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; text-align: center; color: #ffffff; font-family: 'Khmer OS Muol Light', 'Khmer OS', 'Kh Bokor', sans-serif; font-size: 24px; line-height: 1.5; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">
                        <?php echo $c_title; ?>
                    </div>
                <?php } ?>
            </div>
        </a>
    <?php } ?>
    </div>
</div>

<div id="carousel_dots_2" style="width: 940px; margin: 10px auto 25px auto; text-align: center;">
    <?php for ($i = 0; $i < $total_dots2; $i++) { ?>
        <span class="page_dot_2" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: <?php echo ($i === 0) ? '#f808ea' : '#ccc'; ?>; margin: 0 4px; cursor: pointer; transition: background 0.3s;"></span>
    <?php } ?>
</div>
<div class="clear"></div>

<!-- HORIZONTAL SLIDE SCRIPT FOR BOTH CAROUSELS -->
<script type="text/javascript">
(function() {
    function initSlider(trackId, linkClass, dotClass) {
        var track = document.getElementById(trackId);
        var cards = document.querySelectorAll('.' + linkClass);
        var dots = document.querySelectorAll('.' + dotClass);
        if (!track || !cards || cards.length <= 1) return;

        var current = 0;
        var stepWidth = 482; // 458px card + 24px gap
        var maxIndex = Math.max(0, cards.length - 2);

        function gotoSlide(index) {
            current = Math.min(index, maxIndex);
            track.style.transform = 'translateX(-' + (current * stepWidth) + 'px)';
            for (var i = 0; i < dots.length; i++) {
                if (dots[i]) dots[i].style.background = (i === current) ? '#f808ea' : '#ccc';
            }
        }

        var timer = setInterval(function() {
            current = (current >= maxIndex) ? 0 : current + 1;
            gotoSlide(current);
        }, 4000);

        for (var d = 0; d < dots.length; d++) {
            (function(idx) {
                dots[idx].addEventListener('click', function() {
                    gotoSlide(idx);
                    clearInterval(timer);
                    timer = setInterval(function() {
                        current = (current >= maxIndex) ? 0 : current + 1;
                        gotoSlide(current);
                    }, 4000);
                });
            })(d);
        }
    }

    initSlider('two_card_track_1', 'service_card_link_1', 'page_dot_1');
    initSlider('two_card_track_2', 'service_card_link_2', 'page_dot_2');
})();
</script>

<style>
.service_single_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(252, 94, 165, 0.45) !important;
}
</style>