<?php
function tsm_sldxss()
{
    ob_start();
    ?>

    <style>
        .woodvndr_testimonial_slider {
            width: 100%;
            background: #fff;
        }

        .lft_tsm_txtara {
            width: 50%;
            position: relative;
        }

        .right_tsmbx {
            width: 100%;
            position: relative;
        }

        .woodvndr_testimonial_item {
            text-align: center;
            padding: 10px 20px;
        }

        .woodvndr_meta {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
        }

        .woodvndr_date {
            margin-right: 15px;
            font-weight: bold;
            color:#424242;
        }

        .woodvndr_rating i {
            color: #f39c12;
            margin-right: 2px;
        }

        .woodvndr_text {
            font-size: 17px;
            line-height: 1.6;
            font-style: italic;
            color: #333;
            margin-bottom: 22px;
            margin-top: 22px;
        }

        .woodvndr_author strong {
            font-size: 17px;
            color: #5c2c18;
        }

        .woodvndr_position {
            font-size: 14px;
            color: #555;
            display: block;
            margin-top: 4px;
        }

        .woodvndr_gallery {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 20px;
        }

        .woodvndr_gallery img {
            width: 95px;
            height: 76px;
            object-fit: cover;
            border-radius: 0px;
            margin: 0px;
            position: relative;
            cursor: pointer;
        }

        .column_half_tsm {
            display: flex;
            align-items: center;
            gap: 62px;
            border: 1px solid #ddddddcf;
            border-radius: 4px;
            box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 9%);
            padding: 35px 20px 60px;
        }

        .slick-dots {
            bottom: -50px !important;
        }

        .woodvndr_testimonial_item {
            text-align: left;
        }

        .madeby_ttle_tsm {
            margin-bottom: 18px;
        }

        .madeby_ttle_tsm span {
            font-size: 19px;
            color: #5c2c18;
            font-weight: 600;
            line-height: normal;
        }

        span.woodvndr_rating {
            display: inline-block;
            padding: 2px 7px;
            margin-right: 14px;
        }

        #woodvndr_image_popup {
            display: none;
            position: fixed;
            z-index: 9999;
            padding: 60px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            text-align: center;
        }

        #woodvndr_image_popup img.woodvndr_popup_img {
            max-width: 90%;
            max-height: 80vh;
            border-radius: 10px;
        }

        .woodvndr_popup_close {
            position: absolute;
            top: 20px;
            right: 35px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        .woodvndr_gallery img:before {
            content: "" !important;
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            bottom: 0;
            right: -10px;
            border: 5px solid green;
        }

        .galleryara {
            position: relative;
            overflow: hidden;
            border-radius: 3px;
            border: 1px solid #00000014;
        }

        .galleryara:after {
            content: "";
            position: absolute;
            width: 40px;
            height: 40px;
            background: #c59452;
            bottom: -25px;
            right: -25px;
            transform: rotate(45deg);
        }

        .quots_imgss img {
            /* position: absolute; */
            width: 142px;
            height: auto;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            opacity: 0.5;
        }

        .lft_tsm_txtara h2 {
            font-weight: 700;
            font-size: 32px;
            line-height: 38px;
            text-align: left;
            position: relative;
            padding-bottom: 20px;
            margin-bottom: 29px;
        }

        .lft_tsm_txtara p {
            font-weight: 400;
            font-size: 19px;
            line-height: 1.7;
            letter-spacing: 0.3px;
            text-align: left;
        }

        .quots_imgss {
            margin-top: -40px;
        }

        .lft_tsm_txtara h2::before {
            border-bottom: 2px solid #dddddd;
            bottom: 0;
            content: "";
            height: 1px;
            left: 0;
            position: absolute;
            right: 0;
        }

        .lft_tsm_txtara h2:after {
            background-color: #c69453;
            bottom: -1px;
            content: "";
            height: 4px;
            left: 0;
            position: absolute;
            width: 70px;
        }

        .right_tsmbx .slick-dots li button:before {
            display: none;
        }

        .right_tsmbx .slick-dots li button:after {
            display: none;
        }

        .right_tsmbx .slick-dots li button {
            padding: 0px;
            border: none;
            width: 12px;
            height: 12px;
            background: #ddceba;
            border-radius: 100px;
        }

        .right_tsmbx .slick-dots li.slick-active button {
            background: #c69453;
        }

        .seconddual_slidertsm .right_tsmbx {
            width: 100%;
        }

        .seconddual_slidertsm {
            margin-bottom: 70px;
            border: none;
            padding: 0px;
            box-shadow: none;
        }

        .woodvndr_testimonial_slider_two .woodvndr_testimonial_item {
            background: #fdfdfd;
            margin: 10px;
            padding: 30px;
            border-radius: 5px;
            border: 1px solid #cccccc75;
        }

        .seconddual_slidertsm ul.slick-dots {
            bottom: -40px;
        }

        .frsttsmslid {
            margin: 0px 10px;
        }

        .read-more-button {
            color: #c49452;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            margin-top: 5px;
        }






        @media screen and (max-width: 991px) {
            .column_half_tsm {
                gap: 0;
                flex-wrap: wrap;
                padding: 30px 20px 60px;
            }

            .quots_imgss {
                margin-top: 0;
            }

            .lft_tsm_txtara h2 {
                font-size: 22px;
                margin-bottom: 19px;
            }

            .quots_imgss img {
                /* position: absolute; */
                width: 82px;
            }

            .lft_tsm_txtara p {
                font-size: 17px;
            }

            .right_tsmbx {
                width: 100%;
            }

            .woodvndr_testimonial_item {
                padding: 10px 5px;
            }

            .lft_tsm_txtara {
                width: 100%;
                position: relative;
            }
        }

        @media screen and (max-width: 768px) {
            .woodvndr_testimonial_slider_two .woodvndr_testimonial_item {
                background: #fdfdfd;
                margin: 10px 12px;
                padding: 20px;
            }

            .seconddual_slidertsm {
                margin-bottom: 40px;
            }
        }

        @media screen and (max-width: 399px) {
            .woodvndr_gallery img {
                width: 88px !important;
                height: 70px;
            }
        }
    </style>


    <div class="column_half_tsm frsttsmslid">
        <?php if (have_rows('add_testimonial', 'option')): ?>
            <div class="right_tsmbx">
                <div class="woodvndr_testimonial_slider">

                    <?php while (have_rows('add_testimonial', 'option')):
                        the_row();
                        $title = get_sub_field('add_title') ?: '';
                        $text = get_sub_field('add_testimonial_text') ?: '';
                        $name = get_sub_field('add_name') ?: '';
                        $position = get_sub_field('add_position') ?: '';
                        $date = get_sub_field('add_date') ?: '';
                        $rating = (float) get_sub_field('add_start_rating');
                        ?>
                        <div class="woodvndr_testimonial_item">

                            <?php if ($title): ?>
                                <div class="madeby_ttle_tsm">
                                    <span><?php echo esc_html($title); ?></span>
                                </div>
                            <?php endif; ?>

                            <div class="woodvndr_meta">
                                <span class="woodvndr_rating">
                                    <?php
                                    // Subfield se value lo
                                    $rating = get_sub_field('add_start_rating');

                                    // Agar rating 'rating1', 'rating2' format me hai to number nikalo
                                    $rating_number = (int) filter_var($rating, FILTER_SANITIZE_NUMBER_INT);

                                    // Loop 1 to 5 tak chalayenge
                                    for ($i = 1; $i <= 5; $i++) {
                                        if ($i <= $rating_number) {
                                            echo '<i class="fas fa-star"></i>'; // filled star
                                        } else {
                                            echo '<i class="far fa-star-o"></i>'; // empty star
                                        }
                                    }
                                    ?>
                                </span>



                                <?php if ($date): ?>
                                    <span class="woodvndr_date"><?php echo esc_html($date); ?></span>
                                <?php endif; ?>
                            </div>

                            <?php if ($text): ?>
                                <div class="woodvndr_text">
                                    <?php echo esc_html($text); ?>
                                </div>
                            <?php endif; ?>

                            <div class="woodvndr_author">
                                <?php if ($name): ?>
                                    <strong><?php echo esc_html($name); ?></strong><br>
                                <?php endif; ?>
                                <?php if ($position): ?>
                                    <span class="woodvndr_position"><?php echo esc_html($position); ?></span>
                                <?php endif; ?>
                            </div>

                            <?php /*
                            <div class="woodvndr_gallery">
                                <?php if (have_rows('add_galley_image')): ?>
                                    <?php while (have_rows('add_galley_image')):
                                        the_row();
                                        $img_url = get_sub_field('add_image');
                                        if ($img_url):
                                            ?>

                                            <a href="<?php echo esc_url($img_url); ?>" class="galleryara" data-lightbox="lightbox">
                                                <img data-src="<?php echo esc_url($img_url); ?>" src="<?php echo esc_url($img_url); ?>"
                                                    alt="Gallery Image">
                                            </a>

                                        <?php endif; endwhile; ?>
                                <?php endif; ?>

                            </div> */ ?>

                            <div class="woodvndr_gallery">
                                <?php if (have_rows('add_galley_image')): ?>
                                    <?php while (have_rows('add_galley_image')):
                                        the_row();
                                        $img_id = get_sub_field('add_image', false);
                                        if ($img_id):
                                            $thumb = wp_get_attachment_image_src($img_id, 'testimonial-slider-thumb');
                                            $full  = wp_get_attachment_image_src($img_id, 'full');
                                            ?>
                                            <a href="<?php echo esc_url($full[0]); ?>" class="galleryara" data-lightbox="lightbox">
                                                <img 
                                                    data-src="<?php echo esc_url($thumb[0]); ?>" 
                                                    src="<?php echo esc_url($thumb[0]); ?>" 
                                                    alt="<?php echo esc_attr(get_the_title($img_id)); ?>">
                                            </a>
                                        <?php endif;
                                    endwhile; ?>
                                <?php endif; ?>
                            </div>



                        </div>
                    <?php endwhile; ?>

                </div>
            </div>
        <?php endif; ?>





    </div>



    <script>
        jQuery(document).ready(function ($) {
            $('.woodvndr_testimonial_slider').slick({
                dots: true,
                arrows: false,
                infinite: true,
                speed: 500,
                slidesToShow: 1,
                adaptiveHeight: true,
                autoplay: true,
                autoplaySpeed: 5000,

            });

            $('.woodvndr_testimonial_slider_two').slick({
                dots: true,
                arrows: false,
                infinite: true,
                speed: 500,
                slidesToShow: 2,
                adaptiveHeight: true,
                autoplay: true,
                autoplaySpeed: 5000,
                responsive: [
                    {
                        breakpoint: 991,
                        settings: {
                            slidesToShow: 1
                        }
                    },
                ]
            });


        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const limit = 250; // character limit
            const sliders = document.querySelectorAll(".woodvndr_text");

            sliders.forEach(function (el) {
                const fullText = el.innerHTML.trim();

                if (fullText.length > limit) {
                    const visibleText = fullText.slice(0, limit);
                    const hiddenText = fullText.slice(limit);

                    el.innerHTML = `
                <span class="visible-text">${visibleText}</span>
                <span class="dots">... </span>
                <span class="hidden-text" style="display:none;">${hiddenText}</span>
                <span class="read-more-button" onclick="toggleReadMore(this)">Read More</span>
            `;
                }
            });
        });

        function toggleReadMore(button) {
            const container = button.closest(".woodvndr_text");
            const hiddenText = container.querySelector(".hidden-text");
            const dots = container.querySelector(".dots");

            const isOpen = hiddenText.style.display === "inline";

            if (!isOpen) {
                hiddenText.style.display = "inline";
                dots.style.display = "none";
                button.textContent = "Read Less";
            } else {
                hiddenText.style.display = "none";
                dots.style.display = "inline";
                button.textContent = "Read More";
            }

            // Correct slider height refresh
           jQuery('.woodvndr_testimonial_slider').slick('setPosition');

        }

    </script>



    <script>
        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true,
            'disableScrolling': true,
        })
    </script>






    <?php
    return ob_get_clean();
}
add_shortcode('tsm_woodvndrs_shortcode', 'tsm_sldxss');
?>