<?php
    $tab_detials_video = [
    'orders_video1' => [
        'tab_name' => __('قسمت اول','woodmartplus'),
        'video_src' => 'https://devwp.site/learning-woodmartpluss/orders/1.mp4',
    ],
    'orders_video2' => [
        'tab_name' => __('ویدئوی دوم','woodmartplus'),
        'video_src' => 'https://devwp.site/learning-woodmartpluss/orders/2.mp4',
    ],
];

?>

<div class="item p-18 br-bottom">
   <span class="title"><?php esc_html_e('ویدئوی های آموزشی قسمت سفارشات', 'woodmartplus'); ?></span>

   <div class="importer-container">
      <div class="importer-tabs">

         <ul class="page-setting-tab-nav-orders-video">
            <?php $i = 0;
            foreach ($tab_detials_video as $tab => $value): ?>
               <li class="<?php echo $i == 0 ? 'active' : '' ?>" data-tab="<?php echo $tab; ?>"><?php echo $value['tab_name']; ?></li>
            <?php $i++;
            endforeach; ?>
         </ul>

         <div class="importer-tab-content">
            <?php $b = 0;
            foreach ($tab_detials_video as $tab => $value):  ?>
               <div class="tab-pane-setting-orders-video <?php echo $b == 0 ? 'active' : '' ?>" id="<?php echo $tab; ?>-tab">
                       <video  height="500" controls preload="none"  poster="https://devwp.site/learning-woodmartpluss/wodpluss-min.png">
                            <source src="<?php echo $value['video_src'] ?>" type="video/mp4">
                            <?php esc_html_e('مرورگر شما از ویدئو پشتیبانی نمی کند', 'woodmartplus'); ?>
                        </video>
               </div>
            <?php $b++;
            endforeach; ?>

         </div>
      </div>
   </div>

   <div class="import-status">
      <div class="import-progress">
         <div class="progress-bar"></div>
      </div>
      <div class="import-message"></div>
   </div>

   <div class="btn-select show_dashboard_builder" style="display: none;">
      <a href="<?php echo admin_url('edit.php?post_type=dashboard_builder') ?>" class="chang-btn blue-btn-bg" name="import_myaccount" value="import"><?php esc_html_e('مشاهده صفحه ساخت حساب کاربری', 'woodmartplus'); ?></a>
   </div>
</div>


<script>
   jQuery(document).ready(function($) {
      $('.page-setting-tab-nav-orders-video li').on('click', function() {
         var tabId = $(this).data('tab');

         $('.page-setting-tab-nav-orders-video li').removeClass('active');
         $(this).addClass('active');

         $('.tab-pane-setting-orders-video').removeClass('active');
         $('#' + tabId + '-tab').addClass('active');
      });
   });
</script>