
<div class="fancyfilter-accordion active">
   <div class="fancyfilter-accordion_tab active">
      <?php echo esc_html__('Items Settings','fancy-fiter') ?>
   </div>
   <div class="fancyfilter-accordion_content">

      <div class="fancyfilter-accordion_item">
         <ul class="fancydescrip_custom">
            <li class="fancydescrip_custom_l1">
         <p class="item_title"><label for="slct_portfoli_types">      <?php echo esc_html__('Choose Portfolio Categories: ','fancy-fiter') ?></label></p>
      <?php

      $options = get_option('fancyfilter_options');

      $portfolioselect2_style = isset($options['slct_portfoli_types']) ? $options['slct_portfoli_types'] : ' ';

      $el_categories = get_terms(array (
         'taxonomy' => 'fl_portfolio',
         'orderby' => 'none',
         'hide_empty' => true,

      ));

             echo '<select id="slct_portfoli_types" name="fancyfilter_options[slct_portfoli_types][]" multiple="multiple">';
             foreach ($el_categories as $el_category)
             {

                 $selected = (is_array($portfolioselect2_style) && in_array($el_category->term_id, $portfolioselect2_style)) ? ' selected="selected"' : '';
                 echo '<option value="' . esc_attr($el_category->term_id) . '" ' . esc_attr($selected) . '>' .esc_html($el_category->name). '</option>';
             }
             echo '</select>';
      
            ?>
           </li>
            <?php    
            if ($el_categories){ ?>

            <li class="fancydescrip_custom_l2">
            <span>[fancyfilter_portfolio]</span>
            <a href="<?php echo esc_url(admin_url('/')).'edit.php?post_type=morefilter' ?>"><?php echo esc_html__('Create More Shortcode','fancy-fiter') ?></a>

            </li>

            <?php } ?>
            </ul>

         </div> 

         <div class="fancyfilter-accordion_item">
            <ul class="fancydescrip_custom">
               <li class="fancydescrip_custom_l1">
            <p class="item_title"><label for="slct_post_types"><?php echo esc_html__('Choose Post Categories: ','fancy-fiter') ?></label></p>
         <?php

         $options = get_option('fancyfilter_options');

         $slct_post_types2_style = isset($options['slct_post_types']) ? $options['slct_post_types'] : ' ';

         $el_categories = get_terms(array (
            'taxonomy' => 'category',
            'orderby' => 'none',
            'hide_empty' => true,
         ));
            if ($el_categories)
            {
                $html = '<select id="slct_post_types" name="fancyfilter_options[slct_post_types][]" multiple="multiple">';
                foreach ($el_categories as $el_category)
                {
         
                    $selected = (is_array($slct_post_types2_style) && in_array($el_category->term_id, $slct_post_types2_style)) ? ' selected="selected"' : '';
                    $html .= '<option value="' . $el_category->term_id . '" ' . $selected . '>' .$el_category->name. '</option>';
                }
                $html .= '</select>';
             }else{

             echo "Please create an item by attaching a category first <a href='".esc_url(admin_url('/'))."edit.php?post_type=fancyfilter'>Click here</a>";

             }


   $allowed_html = array(

    'label' => array(
        'id'    => array(),
        'class'    => array(),
        'for'    => array(),
    ),
    'input' => array(
        'type'  => array(),
        'id'    => array(),
        'class'    => array(),
        'name'  => array(),
        'value' => array(),
        'checked'  => array(), 
     ),
    'select' => array(
        'class'    => array(),
        'id'    => array(),
        'name'  => array(),
        'multiple'  => array(),

     ),
        'option'  => array(
        'value' => array(),
        'class'    => array(),
        'id'    => array(),
        'selected'  => array(),        
        ),
        'div'  => array(
        'class'    => array(),
        'id'    => array(),
        'style'    => array(),
        ),
        'strong'  => array(
        'class'    => array(),
        'id'    => array(),
        ),
        'span' => array(
        'id'    => array(),
        'class'    => array(),
        'style'    => array(),
    ),
);

               echo wp_kses($html ,$allowed_html );

               ?>
            </li>
            <?php if ($el_categories){ ?>
            <li class="fancydescrip_custom_l2">
            <span>[fancyfilter_blog]</span>
            <a href="<?php echo esc_url(admin_url('/')).'edit.php?post_type=morefilter' ?>"><?php echo esc_html__('Create More Shortcode','fancy-fiter') ?></a>
            </li>
         <?php } ?>
         </ul>

            </div>    


            <?php if(class_exists("WooCommerce")){ ?>

            <div class="fancyfilter-accordion_item">

               <ul class="fancydescrip_custom productsyds">
                  <li class="fancydescrip_custom_l1">
               <p class="item_title">
                  <label for="yoo_slct_post_types"><?php echo esc_html__('Choose Product Categories: ','fancy-fiter') ?></label></p>
            <?php

            $options = get_option('fancyfilter_options');

            $fancyfilter_pro_select2_style = isset($options['yoo_slct_post_types']) ? $options['yoo_slct_post_types'] : ' ';

            $el_categories = get_terms(array (
               'taxonomy' => "product_cat",
               'orderby' => "none",
               'hide_empty' => true,
            ));
               if ($el_categories)
               {
                   $html = '<select id="yoo_slct_post_types" name="fancyfilter_options[yoo_slct_post_types][]" multiple="multiple">';
                   foreach ($el_categories as $el_category)
                   {
            
                       $selected = (is_array($fancyfilter_pro_select2_style) && in_array($el_category->term_id, $fancyfilter_pro_select2_style)) ? ' selected="selected"' : '';
                       $html .= '<option value="' . $el_category->term_id . '" ' . $selected . '>' .$el_category->name. '</option>';
                   }
                   $html .= '</select>';
                }else{

                echo "Please create an item by attaching a category first <a href='".esc_url(admin_url('/'))."edit.php?post_type=fancyfilter'>Click here</a>";

                }


   $allowed_html = array(

    'label' => array(
        'id'    => array(),
        'class'    => array(),
        'for'    => array(),
    ),
    'input' => array(
        'type'  => array(),
        'id'    => array(),
        'class'    => array(),
        'name'  => array(),
        'value' => array(),
        'checked'  => array(), 
     ),
    'select' => array(
        'class'    => array(),
        'id'    => array(),
        'name'  => array(),
        'multiple'  => array(),
     ),
        'option'  => array(
        'value' => array(),
        'class'    => array(),
        'id'    => array(),
        'selected'  => array(),        
        ),
        'div'  => array(
        'class'    => array(),
        'id'    => array(),
        'style'    => array(),
        ),
        'strong'  => array(
        'class'    => array(),
        'id'    => array(),
        ),
        'span' => array(
        'id'    => array(),
        'class'    => array(),
        'style'    => array(),
    ),
);

               echo wp_kses($html ,$allowed_html );
                  ?>
               </li>
               <?php    
               if ($el_categories){ ?>
               <li class="fancydescrip_custom_l2">
               <span>[fancyfilter_product]</span>
               <a href="<?php echo esc_url(admin_url('/')).'edit.php?post_type=morefilter' ?>"><?php echo esc_html__('Create More Shortcode','fancy-fiter') ?></a>
               </li>
               <?php } ?>
            </ul>

               </div>
               <?php } ?>
         <div class="fancyfilter-accordion_item">
            <ul class="fancydescrip">
               <li>
         <p class="item_title"><?php echo esc_html__('Grid Style ','fancy-fiter') ?></p>
         <?php
            $options = get_option('fancyfilter_options');
            
            $fancyfilter_pro_main_style = isset($options['fancyfilter_pro_main_style']) ? $options['fancyfilter_pro_main_style'] : 'portfolio_wrap_free';
             
         echo '<select class="item_slct"  id="id_style_method" name="fancyfilter_options[fancyfilter_pro_main_style]">

            <option value="st-free" ' . selected('st-free', $fancyfilter_pro_main_style, false) . '>'.esc_html('Free Style', 'fancy-fiter').'</option>

            <option value="portfolio_wrap_one" class="prodataver">'.esc_html('Style One (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_two" class="prodataver">'.esc_html('Style Two (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_three" class="prodataver">'.esc_html('Style Three (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_four" class="prodataver">'.esc_html('Style Four (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_five" class="prodataver">'.esc_html('Style Five (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_six" class="prodataver">'.esc_html('Style Six (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_seven" class="prodataver">'.esc_html('Style Seven (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_eight" class="prodataver">'.esc_html('Style Eight (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_nine" class="prodataver">'.esc_html('Style Nine (Pro)', 'fancy-fiter').'</option>
            <option value="portfolio_wrap_ten" class="prodataver">'.esc_html('Style Ten (Pro)', 'fancy-fiter').'</option>
         </select>'; ?>
         <p class="filtersesdb"><?php echo esc_html__('Choose Item Design','fancy-fiter') ?></p>
      </li><li>
         <p class="item_title"><?php echo esc_html__('Free Style- Animation','fancy-fiter') ?></p>
         <?php
            $fancyfilter_pro_style_animation = isset($options['fancyfilter_pro_style_animation']) ? $options['fancyfilter_pro_style_animation'] : 'fancyfilter_pro-free-item--eff1';
                ?>
         <select class="item_slct" name="fancyfilter_options[fancyfilter_pro_style_animation]" id="id_free_method" >
            <option value="fancyfilter_pro-free-item--eff1" <?php echo esc_attr($fancyfilter_pro_style_animation) == 'fancyfilter_pro-free-item--eff1' ? 'selected' : '' ?>><?php esc_html_e('Effect 1', 'fancy-fiter'); ?></option>
            <option value="fancyfilter_pro-free-item--eff2" <?php echo esc_attr($fancyfilter_pro_style_animation) == 'fancyfilter_pro-free-item--eff2' ? 'selected' : '' ?>><?php esc_html_e('Effect 2', 'fancy-fiter'); ?></option>
            <option value="fancyfilter_pro-free-item--eff3" <?php echo esc_attr($fancyfilter_pro_style_animation) == 'fancyfilter_pro-free-item--eff3' ? 'selected' : '' ?>><?php esc_html_e('Effect 3', 'fancy-fiter'); ?></option>
            <option value="fancyfilter_pro-free-item--eff4" <?php echo esc_attr($fancyfilter_pro_style_animation) == 'fancyfilter_pro-free-item--eff4' ? 'selected' : '' ?>><?php esc_html_e('Effect 4', 'fancy-fiter'); ?></option>
            <option value="fancyfilter_pro-free-item--eff5" <?php echo esc_attr($fancyfilter_pro_style_animation) == 'fancyfilter_pro-free-item--eff5' ? 'selected' : '' ?>><?php esc_html_e('Effect 5', 'fancy-fiter'); ?></option>
         </select>
         <p class="filtersesdb"><?php echo esc_html__('Choose Animation for Free Style','fancy-fiter') ?></p>
      </li></ul>

      <div id="tr-st-free">
         <div id="method_free" class="ferjfdjfh">
            <p id="tr-fancyfilter_pro-free-item--eff1" class="method_options">
               <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/ef-1.gif' ?> " alt="style-2-demo">
            </p>
            <p id="tr-fancyfilter_pro-free-item--eff2" class="method_options">
               <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/ef-2.gif' ?> " alt="style-2-demo">
            </p>
            <p id="tr-fancyfilter_pro-free-item--eff3" class="method_options">
               <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/ef-3.gif' ?> " alt="style-2-demo">
            </p>
            <p id="tr-fancyfilter_pro-free-item--eff4" class="method_options">
               <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/ef-4.gif' ?> " alt="style-2-demo">
            </p>
            <p id="tr-fancyfilter_pro-free-item--eff5" class="method_options">
               <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/ef-5.gif' ?> " alt="style-2-demo">
            </p>
         </div>
      </div>
      <div id="method_free">
         <p id="tr-portfolio_wrap_one" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/2-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_two" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/3-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_three" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/4-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_four" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/5-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_five" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/6-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_six" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/7-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_seven" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/8-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_eight" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/9-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_nine" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/10-min.gif' ?> " alt="style-2-demo">
         </p>
         <p id="tr-portfolio_wrap_ten" class="method_options">
            <img class="efdemo-img" src=" <?php echo esc_url(FANCYFILTER_URL).'/assets/img/gif/11-min.gif' ?> " alt="style-2-demo">
         </p>
      </div>
      </div>
      <div class="fancyfilter-accordion_item">
         <ul class="fancydescrip">
         <li>
         <span class="item_title"><?php echo esc_html__('Posts Per Page','fancy-fiter') ?></span>
         <?php
            $fancyfilter_pro_per_page = isset($options['fancyfilter_pro_per_page']) ? $options['fancyfilter_pro_per_page'] : '-1';
                ?>
         <input type="text" name="fancyfilter_options[fancyfilter_pro_per_page]"   value="<?php echo esc_attr($fancyfilter_pro_per_page); ?>" placeholder="-1"><p class="filtersesdb"><?php echo esc_html__('input item Per page, for All, write: -1','fancy-fiter') ?></p>
         </li><li>
         <span class="item_title bbfgfgfg"><?php echo esc_html__('Order By','fancy-fiter') ?></span>
         <?php
            $fancyfilter_pro_order_by = isset($options['fancyfilter_pro_order_by']) ? $options['fancyfilter_pro_order_by'] : 'none';
                ?>
         <select class="item_slct" name="fancyfilter_options[fancyfilter_pro_order_by]">
            <option value="id" <?php echo esc_attr($fancyfilter_pro_order_by) == 'id' ? 'selected' : '' ?>><?php esc_html_e('Post ID', 'fancy-fiter'); ?></option>
            <option value="title" <?php echo esc_attr($fancyfilter_pro_order_by) == 'title' ? 'selected' : '' ?>><?php esc_html_e('Title', 'fancy-fiter'); ?></option>
            <option value="date" <?php echo esc_attr($fancyfilter_pro_order_by) == 'date' ? 'selected' : '' ?>><?php esc_html_e('Date', 'fancy-fiter'); ?></option>
            <option value="menu_order" <?php echo esc_attr($fancyfilter_pro_order_by) == 'menu_order' ? 'selected' : '' ?>><?php esc_html_e('Menu Order', 'fancy-fiter'); ?></option>
            <option value="rand" <?php echo esc_attr($fancyfilter_pro_order_by) == 'rand' ? 'selected' : '' ?>><?php esc_html_e('Random', 'fancy-fiter'); ?></option>
         </select>
         <p class="filtersesdb"><?php echo esc_html__('Sort retrieved posts by parameter,default: date. ','fancy-fiter') ?><a href="https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters"><?php echo esc_html__('See Orderby Parameters','fancy-fiter') ?></a></p>
      </li>
      </ul>
      </div>
      <div class="fancyfilter-accordion_item">
         <p class="item_title"><?php echo esc_html__('Column Per Row','fancy-fiter') ?></p>
         <?php 
            $fancyfilter_pro_col_by = isset($options['fancyfilter_pro_col_by']) ? $options['fancyfilter_pro_col_by'] : 'none';
            ?>
         <select class="item_slct" id="clmn_per_row" name="fancyfilter_options[fancyfilter_pro_col_by]">
            <option value="col-1" <?php echo esc_attr($fancyfilter_pro_col_by) == 'col-1' ? 'selected' : '' ?>><?php esc_html_e('Column 2', 'fancy-fiter'); ?></option>
            <option value="col-2" <?php echo esc_attr($fancyfilter_pro_col_by) == 'col-2' ? 'selected' : '' ?>><?php esc_html_e('Column 3', 'fancy-fiter'); ?></option>
            <option value="col-3" <?php echo esc_attr($fancyfilter_pro_col_by) == 'col-3' ? 'selected' : '' ?>><?php esc_html_e('Column 4', 'fancy-fiter'); ?></option>
         </select>
         <span  id="tr-col-1"  class="cled">
         <img src="<?php echo esc_url(FANCYFILTER_URL).'/assets/img/2cl-min.png' ?>" alt="2col">
         </span>
         <img id="tr-col-2" class="cled"  src="<?php echo esc_url(FANCYFILTER_URL).'/assets/img/3cl-min.png' ?>" alt="2col">
         <span  id="tr-col-3"  class="cled">
         <img  src="<?php echo esc_url(FANCYFILTER_URL).'/assets/img/4cl-min.png' ?>" alt="2col">
         </span>
      </div>
      <div class="fancyfilter-accordion_item">
         <ul class="fancydescrip">
            <li>
         <p class="item_title"><?php echo esc_html__('Hide Category?','fancy-fiter') ?></p>
         <?php 
            $fancyfilter_pro_hide_cat = isset($options['fancyfilter_pro_hide_cat']) && $options['fancyfilter_pro_hide_cat'] === 'fancyfilter_pro_hide_cat' ? 'checked' : '';
            
                  printf('<input type="checkbox" class="fancyfil_apple-switch" id="fancyfilter_pro_hide_cat" name="fancyfilter_options[fancyfilter_pro_hide_cat]" value="fancyfilter_pro_hide_cat" %s>', esc_attr($fancyfilter_pro_hide_cat));
                  
                      ?>
                      <p class="filtersesdb"><?php echo esc_html__('Click the Switcher for remove Category text from the item','fancy-fiter') ?></p>
                   </li><li>
            <p class="item_title bbfgfgfg"><?php echo esc_html__('Show Full Title?','fancy-fiter') ?></p>
            <?php 
            $show_fancyfilter_pro_title = isset($options['show_fancyfilter_pro_title']) && $options['show_fancyfilter_pro_title'] === 'show_fancyfilter_pro_title' ? 'checked' : '';

            printf('<input type="checkbox" class="fancyfil_apple-switch" id="show_fancyfilter_pro_title" name="fancyfilter_options[show_fancyfilter_pro_title]" value="show_fancyfilter_pro_title" %s>', esc_attr($show_fancyfilter_pro_title));

            ?>
            <p class="filtersesdb"><?php echo esc_html__('Click the Switcher for Display Full Titile of the item','fancy-fiter') ?></p>
            </li>
            </ul>
      </div>
      <div class="fancyfilter-accordion_item">
         <ul class="fancydescrip">
            <li>
         <p class="item_title"><?php echo esc_html__('Item background Color','fancy-fiter') ?></p>
         <?php 
            $el_item_bg_color = isset($options['el_item_bg_color']) ? $options['el_item_bg_color'] : '#e91e63';
            printf('<input type="text" name="fancyfilter_options[el_item_bg_color]" value="%s" class="fancyfilter_color" data-alpha-enabled="true">', esc_attr($el_item_bg_color)); ?>
            <p class="filtersesdb"><?php echo esc_html__('Choose the Item Warpper background color','fancy-fiter') ?></p>
               </li></ul>
      </div>
      <div class="fancyfilter-accordion_item">
         <p class="item_title"><?php echo esc_html__('Title Color','fancy-fiter') ?></p>
         <?php 
            $el_title_color = isset($options['el_title_color']) ? $options['el_title_color'] : '#ccc';
            printf('<input type="text" name="fancyfilter_options[el_title_color]" value="%s" class="fancyfilter_color" data-alpha-enabled="true">', esc_attr($el_title_color));
            
                 ?>
      </div>
     
      <div class="fancyfilter-accordion_item">
         <ul class="fancydescrip">
            <li>
         <p class="item_title"><?php echo esc_html__('Font Size(px) for Title','fancy-fiter') ?> </p>
         <?php 
            $el_ti_font = isset($options['el_ti_font']) ? $options['el_ti_font'] : '20';
            printf('<input type="number" name="fancyfilter_options[el_ti_font]" value="%s" >', esc_attr($el_ti_font));
            
            
            ?>
         </li><li>
            <p class="item_title bbfgfgfg"><?php echo esc_html__('Font Weight for Title','fancy-fiter') ?></p>
            <?php 
               $el_ti_font_w = isset($options['el_ti_font_w']) ? $options['el_ti_font_w'] : '600';
               printf('<input type="number" name="fancyfilter_options[el_ti_font_w]" value="%s" >',esc_attr($el_ti_font_w));
                         
                ?>  
                </li>                
      </div>
      <div class="fancyfilter-accordion_item">
         <ul class="fancydescrip">
            <li>
         <p class="item_title"><?php echo esc_html__('Category Color','fancy-fiter') ?></p>
         <?php 
            $el_cat_color = isset($options['el_cat_color']) ? $options['el_cat_color'] : '#ccc';
            printf('<input type="text" name="fancyfilter_options[el_cat_color]" value="%s" class="fancyfilter_color" data-alpha-enabled="true">', esc_attr($el_cat_color));
            
                 ?>
              </li></ul>
      </div>            
   </div>

</div>