<?php
/**
 * @package Slider Premium
 */
?>

<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>

<div class="slider_section" id="slider">
    <div class="owl-slider">
        <div id="carousel" class="owl-carousel">
            <?php
                $query = new WP_Query([
                    'post_type' => 'slider',
                    'orderby'   => 'ID',
                    'order'     => 'DESC',
                ]);

                if ($query->have_posts()) :
                    while ($query->have_posts()) : $query->the_post();

                    $title = get_the_title();
                    $sliderbg_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');

                    // Get second image attachment ID
                    $second_image_id = get_post_meta(get_the_ID(), '_slider_second_image_id', true);
                    $second_image_url = '';

                    if (!empty($second_image_id) && is_numeric($second_image_id)) {
                        $img = wp_get_attachment_image_src((int)$second_image_id, 'full');
                        if ($img) {
                            $second_image_url = $img[0];
                        }
                    }

                    // Button Data
                    $btn_link = get_post_meta(get_the_ID(), 'slider_btn_link', true);
                    $btn_text = get_post_meta(get_the_ID(), 'sliderBtnTxt', true);
                    $btn_text = !empty($btn_text) ? $btn_text : __('Read More', 'your-theme-textdomain');
                    $btn_url  = !empty($btn_link) ? esc_url(get_permalink($btn_link)) : '';
                ?>

                <div class="item">
                    <div class="slbx">
                        <div class="sliderbgimg">
                            <?php if (!empty($second_image_url)) : ?>
                                <img class="second-bg-image" alt="<?php echo esc_attr($title); ?> - 2nd" src="<?php echo esc_url($second_image_url); ?>">
                            <?php endif; ?>
                            <div class="overlay"></div>
                        </div>
                        <div class="slconbx">
                            <div class="container">
                                <div class="row">
                                    <?php if ($showContent === 'on') : ?>
                                    <div class="slider-content-box">
                                        <div class="slider_content animated wow zoomIn" data-wow-duration="1s">
                                            <div class="title"><?php echo esc_html($title); ?></div>
                                            <div class="sub-title"><?php the_content(); ?></div>
                                            <?php if (!empty($btn_url)) : ?>
                                            <div class="slider-btn">
                                                <a href="<?php echo $btn_url; ?>">
                                                    <?php echo esc_html($btn_text); ?>
                                                    <span><i class="fa-solid fa-arrow-right"></i></span>
                                                </a>
                                            </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <?php endif; ?>

                                    <div class="sliderimg">
                                        <?php if ($sliderbg_image) : ?>
                                            <img class="slide-mainimg" alt="<?php echo esc_attr($title); ?>" src="<?php echo esc_url($sliderbg_image[0]); ?>">
                                        <?php endif; ?>

                                        <div class="img-border">
                                            <?php
                                            $sl_brdimg = get_theme_mod('sl_brdimg');
                                            $border_img = !empty($sl_brdimg) ? $sl_brdimg : get_template_directory_uri() . '/images/sliderimgbrd.png';
                                            ?>
                                            <img alt="border" src="<?php echo esc_url($border_img); ?>" class="img-responsive secondry-bg-img" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <?php
                    endwhile;
                    wp_reset_postdata();
                else :
                    // Placeholder loop
                    for ($i = 0; $i < 6; $i++) :
                ?>
                <div class="item">
                    <div class="slbx">
                        <div class="sliderbgimg">
                            <img class="second-bg-image" alt="Slider" src="<?php echo get_template_directory_uri(); ?>/images/sliderbg.jpg">
                            <div class="overlay"></div>
                        </div>
                        <div class="slconbx">
                            <div class="container">
                                <div class="row">
                                    <?php if ($showContent === 'on') : ?>
                                        <div class="slider-content-box">
                                            <div class="slider_content animated wow zoomIn" data-wow-duration="1s">
                                                <div class="title">Elegance, Love & Lasting Memories</div>
                                                <div class="sub-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                                                <div class="slider-btn">
                                                    <a href="#">
                                                        <?php _e('Book A Hall', 'luzuk-premium'); ?>
                                                        <span><i class="fa-solid fa-arrow-right"></i></span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endif; ?>

                                    <div class="sliderimg">
                                        <img class="slide-mainimg" alt="Slider" src="<?php echo get_template_directory_uri(); ?>/images/slider1.jpg">
                                        <div class="img-border">
                                            <?php
                                            $sl_brdimg = get_theme_mod('sl_brdimg');
                                            $border_img = !empty($sl_brdimg) ? $sl_brdimg : get_template_directory_uri() . '/images/sliderimgbrd.png';
                                            ?>
                                            <img alt="border" src="<?php echo esc_url($border_img); ?>" class="img-responsive secondry-bg-img" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endfor;
                endif;
                ?>
        </div>
    </div>
</div>

<!-- Owl Carousel Init -->
<script>
jQuery(document).ready(function($) {
    $('.slider_section .owl-carousel').owlCarousel({
        refreshClass: 'owl-refresh',
        autoplayTimeout: 6000,
        loop: true,
        margin: 30,
        autoHeight: true,
        autoWidth: false,
        autoplay: true,
        animateOut: 'lightSpeedOut',
        navText: [
            '<i class="fa fa-angle-double-left"></i>',
            '<i class="fa fa-angle-double-right"></i>'
        ],
        responsiveClass: true,
        responsive: {
            0: { items: 1, nav: true, margin: 10 },
            600: { items: 1, nav: true, margin: 20 },
            1000: { items: 1, nav: true, loop: true, margin: 20 }
        }
    });
});
</script>
