<?php 
/**
 * Template part for displaying Video Section
 *
 * @package Designer Dresses
 */

$designer_dresses_args = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'category_name' =>  get_theme_mod('designer_dresses_student_category'),
); 
$designer_dresses_classes = get_theme_mod( 'designer_dresses_classes_setting',false );
$designer_dresses_section_title = get_theme_mod( 'designer_dresses_section_title' );
$designer_dresses_section_text = get_theme_mod( 'designer_dresses_section_text' );
$designer_dresses_section_video_1_image = get_theme_mod( 'designer_dresses_section_video_1_image' );
$designer_dresses_section_video_2_image = get_theme_mod( 'designer_dresses_section_video_2_image' );
$designer_dresses_section_video_3_image = get_theme_mod( 'designer_dresses_section_video_3_image' );
?>
<?php if ( $designer_dresses_classes ){?>
<div class="our-classes text-center">
    <div class="container">
        <?php if ( $designer_dresses_section_title ){?>
            <span><h5 class="class_head"><?php echo esc_html( $designer_dresses_section_title );?></h5></span>
        <?php } ?>
        <?php if ( $designer_dresses_section_text ){?>
            <h3 class="mb-5"><?php echo esc_html( $designer_dresses_section_text );?></h3>
        <?php } ?>
        <div class="row">
            <div class="col-xl-7 col-lg-7 col-md-7 align-self-center">
                <?php if (get_theme_mod('designer_dresses_video_section_url_1') != '' || $designer_dresses_section_video_1_image): ?>
                <div class="image-1 py-2 wow zoomInUp delay-1000" data-wow-duration="2s">
                    <?php if ( $designer_dresses_section_video_1_image ){?>
                        <img class="img-1" src="<?php echo esc_url( $designer_dresses_section_video_1_image );?>">
                    <?php } ?>
                                <!-- Button to open the modal -->
                    <a id="openModalButton" data-modal-src="<?php echo esc_url(get_theme_mod('designer_dresses_video_section_url_1')); ?>">
                        <i class="fa-solid fa-play"></i>
                    </a>

                    <!-- The modal -->
                    <div id="myModal" class="modal">
                        <!-- Modal content -->
                        <div class="modal-content">
                            <span id="closeModalButton" class="close">&times;</span>
                            <?php if (get_theme_mod('designer_dresses_video_section_url_1') != ''): ?>
                                <embed id="videoPlayer" height="369" src="<?php echo esc_url(get_theme_mod('designer_dresses_video_section_url_1')); ?>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></embed>
                            <?php else: ?>
                                <h3><?php esc_html_e('Add Video Url In Customizer To Display Video Here', 'designer-dresses'); ?></h3>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
            </div>
            <div class="col-xl-5 col-lg-5 col-md-5 align-self-center">
                <?php if (get_theme_mod('designer_dresses_banner_video_url_2') != '' || $designer_dresses_section_video_2_image): ?>
                    <div class="image-2 wow zoomInUp delay-2000" data-wow-duration="2s">
                        <?php if ( $designer_dresses_section_video_2_image ){?>
                            <img class="img-2" src="<?php echo esc_url( $designer_dresses_section_video_2_image );?>">
                        <?php } ?>
                        <a id="openModalButton1" data-modal-src="<?php echo esc_url(get_theme_mod('designer_dresses_banner_video_url_2')); ?>">
                            <i class="fa-solid fa-play"></i>
                        </a>

                        <!-- The modal -->
                        <div id="myModal1" class="modal">
                            <!-- Modal content -->
                            <div class="modal-content">
                                <span id="closeModalButton1" class="close">&times;</span>
                                <?php if (get_theme_mod('designer_dresses_banner_video_url_2') != ''): ?>
                                    <embed id="videoPlayer" height="369" src="<?php echo esc_url(get_theme_mod('designer_dresses_banner_video_url_2')); ?>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></embed>
                                <?php else: ?>
                                    <h3><?php esc_html_e('Add Video Url In Customizer To Display Video Here', 'designer-dresses'); ?></h3>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
                <?php if (get_theme_mod('designer_dresses_banner_video_url_3') != '' || $designer_dresses_section_video_3_image): ?>
                    <div class="image-3 mt-3 wow zoomInUp delay-3000" data-wow-duration="2s">
                        <?php if ( $designer_dresses_section_video_3_image ){?>
                            <img class="img-3" src="<?php echo esc_url( $designer_dresses_section_video_3_image );?>">
                        <?php } ?>
                        <a id="openModalButton2" data-modal-src="<?php echo esc_url(get_theme_mod('designer_dresses_banner_video_url_3')); ?>">
                            <i class="fa-solid fa-play"></i>
                        </a>

                        <!-- The modal -->
                        <div id="myModal2" class="modal">
                            <!-- Modal content -->
                            <div class="modal-content">
                                <span id="closeModalButton2" class="close">&times;</span>
                                <?php if (get_theme_mod('designer_dresses_banner_video_url_3') != ''): ?>
                                    <embed id="videoPlayer" height="369" src="<?php echo esc_url(get_theme_mod('designer_dresses_banner_video_url_3')); ?>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></embed>
                                <?php else: ?>
                                    <h3><?php esc_html_e('Add Video Url In Customizer To Display Video Here', 'designer-dresses'); ?></h3>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<?php } ?>