<?php
    $tab_detials_video = [
    'plgeneral_video1' => [
        'tab_name' => __('آموزش افزونه وودمارت پلاس','woodmartplus'),
        'video_src' => 'https://devwp.site/learning-woodmartpluss/General.mp4',
    ],
    'plgeneral_video3' => [
        'tab_name' => __('آموزش دریافت اپلیکیشن','woodmartplus'),
        'video_src' => 'https://files.dev-wp.ir/files/devwp-app.mp4',
    ],
    'plgeneral_video2' => [
        'tab_name' => __('آموزش اپلیکیشن وودمارت پلاس','woodmartplus'),
        'video_src' => 'https://devwp.site/learning-woodmartpluss/applications.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-plgeneral-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-plgeneral-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-plgeneral-video li').on('click', function() {
         var tabId = $(this).data('tab');

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

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