<!-- search modal -->
<div class="search-modal">

    <!-- head -->
    <div class="d-flex align-items-center justify-content-between border-bottom pb-2">
        <span class="fw-bold font-20">
            <?php echo empty(get_option(TEXT_DOMAIN . '_search_modal_title')) ? _e('Search',TEXT_DOMAIN) : get_option(TEXT_DOMAIN . '_search_modal_title'); ?>
        </span>
        <button type="button" class="btn-close-search-modal">
            <span class="iconly iconlyBulk-Close-Square font-30"><span class="path1"></span><span class="path2"></span></span>
        </button>
    </div>

    <!-- form -->
    <form action="" class="my-4">
        <div class="search-form-inputs">
            <input type="search" name="s" class="form-control form-control-custom"
                   autocomplete="off" aria-label="search" value="<?php echo get_search_query();?>" id="search_keyword"
                   onkeyup="fetchSearch()"
                   placeholder="<?php echo empty(get_option(TEXT_DOMAIN . '_search_placeholder')) ? _e('Enter keyword...',TEXT_DOMAIN) : get_option(TEXT_DOMAIN . '_search_placeholder'); ?>">

            <div class="search-form-icon">
                <i class="icon-search"></i>
            </div>
        </div>
    </form>

    <!-- search results -->
    <div class="search-results">
        <!-- loader -->
        <div id="searchLoader" class="circle-loader d-none">Loading...</div>

        <!-- search results container -->
        <div id="search_datafetch" class="d-none">
            <?php
            $searchInPortfolios = get_option(TEXT_DOMAIN . '_search_in_portfolios');
            $searchInPortfoliosTitle = get_option(TEXT_DOMAIN . '_search_in_portfolios_title','پروژه‌ها');
            $searchInCats = get_option(TEXT_DOMAIN . '_search_in_cats');
            $searchInCatsTitle = get_option(TEXT_DOMAIN . '_search_in_cats_title','دسته‌بندی‌ها');
            $searchInProducts = get_option(TEXT_DOMAIN . '_search_in_products');
            $searchInProductsTitle = get_option(TEXT_DOMAIN . '_search_in_products_title','محصولات');
            $searchInPosts = get_option(TEXT_DOMAIN . '_search_in_posts');
            $searchInPostsTitle = get_option(TEXT_DOMAIN . '_search_in_posts_title','نوشته‌ها');
            $showTabs = false;
            $activeTab = 'products';

            $enabledTabsCount = 0;
            if ($searchInPortfolios != 'false'){
                $enabledTabsCount ++;
            }
            if ($searchInCats != 'false'){
                $enabledTabsCount ++;
            }
            if ($searchInProducts != 'false'){
                $enabledTabsCount ++;
            }
            if ($searchInPosts != 'false'){
                $enabledTabsCount ++;
            }
            if ($enabledTabsCount > 1){
                $showTabs = true;
            }
            if ($searchInProducts == 'false' && $searchInCats == 'false' || !class_exists( 'WooCommerce' )){
                $activeTab = 'posts';
            }elseif ($searchInProducts == 'false' && $searchInCats != 'false'){
                $activeTab = 'cats';
            }elseif ($searchInProducts == 'false' && $searchInCats == 'false' && $searchInPosts == 'false'){
                $activeTab = 'portfolios';
            }
            ?>

            <?php if($showTabs):?>
            <ul class="nav nav-tabs nav-pills" role="tablist">
                <?php if ($searchInProducts != 'false' && class_exists( 'WooCommerce' )):?>
                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link <?php echo $activeTab == 'products' ? 'active' : '' ?>" id="products-search-tab" data-bs-toggle="tab" data-bs-target="#products-search-panel" type="button" role="tab"
                                aria-controls="products" aria-selected="false"><?php echo $searchInProductsTitle?></a>
                    </li>
                <?php endif;?>

                <?php if ($searchInCats != 'false' && class_exists( 'WooCommerce' )):?>
                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link <?php echo $activeTab == 'cats' ? 'active' : '' ?>" id="categories-search-tab" data-bs-toggle="tab" data-bs-target="#categories-search-panel" type="button" role="tab"
                                aria-controls="categories" aria-selected="true"><?php echo $searchInCatsTitle?></a>
                    </li>
                <?php endif;?>

                <?php if ($searchInPosts != 'false'):?>
                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link <?php echo $activeTab == 'posts' ? 'active' : '' ?>" id="posts-search-tab" data-bs-toggle="tab" data-bs-target="#posts-search-panel" type="button"
                           role="tab" aria-controls="posts" aria-selected="false"><?php echo $searchInPostsTitle?></a>
                    </li>
                <?php endif;?>

                <?php if ($searchInPortfolios != 'false'):?>
                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link <?php echo $activeTab == 'portfolios' ? 'active' : '' ?>" id="portfolios-search-tab" data-bs-toggle="tab" data-bs-target="#portfolios-search-panel" type="button"
                           role="tab" aria-controls="portfolios" aria-selected="false"><?php echo $searchInPortfoliosTitle;?></a>
                    </li>
                <?php endif;?>
            </ul>
            <?php endif;?>



            <div class="tab-content">
                <?php if ($searchInProducts != 'false' && class_exists( 'WooCommerce' )):?>
                <div class="tab-pane fade <?php echo $activeTab == 'products' ? 'show active' : '' ?>" id="products-search-panel" role="tabpanel" aria-labelledby="products-search-tab"></div>
                <?php endif;?>

                <?php if ($searchInCats != 'false' && class_exists( 'WooCommerce' )):?>
                <div class="tab-pane fade <?php echo $activeTab == 'cats' ? 'show active' : '' ?>" id="categories-search-panel" role="tabpanel" aria-labelledby="categories-search-tab"></div>
                <?php endif;?>

                <?php if ($searchInPosts != 'false'):?>
                    <div class="tab-pane fade <?php echo $activeTab == 'posts' ? 'show active' : '' ?>" id="posts-search-panel" role="tabpanel" aria-labelledby="posts-search-tab"></div>
                <?php endif;?>

                <?php if ($searchInPortfolios != 'false'):?>
                    <div class="tab-pane fade <?php echo $activeTab == 'portfolios' ? 'show active' : '' ?>" id="portfolios-search-panel" role="tabpanel" aria-labelledby="portfolios-search-tab"></div>
                <?php endif;?>
            </div>
        </div>

        <!-- search suggestions section -->
        <?php $searchSuggestionsTitle = get_option(TEXT_DOMAIN . '_search_suggestions_title');
        $suggestions = get_option(TEXT_DOMAIN . '_search_suggestions');
        if(!empty($searchSuggestionsTitle) && !empty($suggestions)):?>
            <div class="search-result-section" id="search-result-suggestions">
                <span class="suggestions-title"><?php echo get_option(TEXT_DOMAIN . '_search_suggestions_title');?></span>
                <?php
                $suggestionsArr = explode('-',$suggestions);
                foreach ($suggestionsArr as $item){?>
                    <span class="rounded-link md-ripples ripples-dark m-1px search-suggestion-link"><?php echo $item?></span>
                <?php }
                ?>
            </div>
        <?php endif;?>
    </div>
</div>