<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CienteMedia</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <link rel="icon" type="image/png" href="https://cientemedia.io/wp-content/uploads/2023/10/cropped-sub-domain-logo-Ciente-Media-04.png">
        <!-- <link rel="icon" type="image/png" href="https://b2bneed.com/wp-content/uploads/2023/08/B2bneed-logo.png"> -->
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
        />
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>
            body {
                 
                 font-size: 16px;
                 font-family: Work Sans;
              }
              .column{
                /*padding-right: 37px;*/
                /*padding-left: 37px;*/
                justify-content:center;
              }

              .category{
                color: #05a8aa;
                padding-top: 10px; 
                color:#023b3c;
                font-size:13px;
              }
              .title{
                /*font-size: 22px; */
                color: #000; 
                text-align: center;
                font-weight: bold;
                line-height: normal; 
                /*padding-top: 18px;*/
              }
              .btn1{
                border-radius: 6px; 
                /*font-size:16px; */
                background-color:#43f7fa;
                 color:  #023b3c; 
                 font-weight: bold;
                /*letter-spacing: 1px;*/
                padding-left: 30px;
                padding-right: 30px;
              }
        
              .card {
                  /*width:340px;*/
                border: transparent;
            box-shadow: 10px 10px #b9fcfd;
            border-style: solid;
            border-radius: 11px;
            padding: 16px 16px 16px 16px;
            background-color: #e8fefe !important;
            text-align: center;
        }
        
              .nav-item a {
                 text-decoration: none;
                 color: white;
              }
        
              .nav-item a:hover {
                 text-decoration: underline;
                 color: white !important;
              }
        
              .img {
                 width: 100%;
                 height: 246px;
            max-height: 200%;
            object-fit: contain ;
            background-color: #fff;
            /* padding-top:25px;
            padding-bottom:25px; */
              }
        
            
        
              .navbar {
                 width: 100%;
                 margin: auto;
                 padding-top: 10px;
    padding-bottom: 10px;
              }
        
              /* Style the links inside the navigation bar */
              .navbar a {
                 float: left;
                 color: white;
        
                 text-decoration: none;
              }
              .nav-link:focus, .nav-link:hover {
            color: #fff !important;
        }
        .navbar-toggler:focus {
            text-decoration: none;
            outline: 0;
            box-shadow: none !important;
        }
        @media screen and (max-width:768px){
            .title{
                font-size: 14px; 
                
              }
              .btn1{
                
                font-size:10px; 
                
              } 
              .category{
                font-size:13px;
              }
              .type{
                font-size:13px;
              }
              .img {
   
    height: 178px;
   
}
        }
              @media screen and (min-width:1200px) {
                 .navbar .nav-item .nav-link {
                    padding-right: 1.5rem;
                    padding-left: 1.5rem;
                 }
              }
        
              @media screen and (min-width:992px) and (max-width:1199px) {
                 .navbar .nav-item .nav-link {
                    padding-right: 0.5rem;
                    padding-left: 0.5rem;
                 }
              }
        
              .fas {
                 color: white !important;
              }
        </style>

        <style>
            @media (max-width: 767px) {
                 .tg-searchbox {
                    width: 100%;
                    margin-top: 10px;
                 }
              }
        
              .tg-searchbox {
                 position: relative;
                 display: inline-block;
              }
        
              .search-icon {
                 position: absolute;
                 left: 10px;
                 top: 50%;
                 transform: translateY(-50%);
                 color: #05a8aa;
                 /* Adjust icon color as needed */
                 z-index: 2;
                 /* Ensure the icon is above the input field */
              }
        
              .form-control:focus {
            color: #212529;
            background-color: #fff;
            border-color:#05a8aa !important;
            outline: 0;
            box-shadow: none !important;
        }
        </style>
        <script>
            //function for get subcategory
              function getSubCategory(val) {
                 $.ajax({
                    type: "POST",
                    url: "get_sub_category.php",
                    data: 'res_category=' + val,
                    success: function(data) {
                       $("#sub_category_list").html(data);
                    }
                 });
              }
        
              function btnAction() {
                 $("#cards_list").hide();
                 $("#cards_list_filter").show();
              }
              $(document).ready(function() {
                 $('.tg-searchbox input[type="text"]').on("keyup input", function() {
                    /* Get input value on change */
                    var inputVal = $(this).val();
                    var resultDropdown = $(this).siblings(".result");
                    if (inputVal.length) {
                       $.get("backend-search.php", {
                          term: inputVal
                       }).done(function(data) {
                          // Display the returned data in browser
                          resultDropdown.html(data);
                       });
                    } else {
                       resultDropdown.empty();
                    }
                 });
                 // Set search input value on click of result item
                 $(document).on("click", ".result li", function() {
                    $(this).parents(".tg-searchbox").find('input[type="text"]').val($(this).text());
                    $(this).parent(".result").empty();
                 });
              });
        </script>
    </head>

    <body>
        <div class="container-fluid">
            <div class="main-wrapper">
                <div class="mouse-cursor cursor-outer"></div>
                <div class="mouse-cursor cursor-inner"></div>
                <!-- Start Featured Area  -->
                <!-- <div class="container"> -->
                <div class="wrapper ">
                    <div class="container">
                        <div class="row text-center ">
                            <div class="row">
                                <div class="col-md-4">

                                </div>
                                <div class="col-md-4">
                                    <a href="https://cientemedia.io/">
                                        <img style="" src="https://cientemedia.io/wp-content/uploads/2024/08/sub-domain-logo-Ciente-Media-04.png" alt="" width="180px">
                                    </a>
                                </div>
                                <div class="tg-searchbox col-md-4">
                                    <!-- <input class="typeahead form-control d-flex"  type="text" name="search" placeholder="Search Resource Library..." autocomplete="off"
                        aria-label="Search Topic">
                     <div class="result position-absolute" style="z-index: 1; background-color: #F7F7F7;"></div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="background: #05a8aa;">
                        <nav class="navbar navbar-expand-lg  ">
                            <div class="container">
                                <!-- <a href="https://cientemedia.io/"> <img width="110" src="https://cientemedia.io/wp-content/uploads/2024/08/sub-domain-logo-Ciente-Media-04.png" class="main_logo" alt=""></a> -->
                                <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" ><span class="navbar-toggler-icon"></span></button> -->
                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                                    <i class="fas fa-bars"></i>
                                </button>
                                <div class="collapse navbar-collapse fs-6 " id="navbarToggleExternalContent">
                                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                        <li class="nav-item">
                                            <a class="nav-link active" aria-current="page" href="https://cientemedia.io/" style="font-weight :semi-bold;">HOME</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="https://cientemedia.io/category/b2b-blogs/" style="    font-weight :semi-bold;">B2B BLOGS</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="https://cientemedia.io/category/hr/" style="    font-weight :semi-bold;">HUMAN RESOURCE</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="https://cientemedia.io/category/it/" style="    font-weight :semi-bold;">INFORMATION TECHNOLOGY</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="https://cientemedia.io/category/sales/" style="    font-weight :semi-bold;">SALES</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="https://cientemedia.io/contact-us/" style="    font-weight :semi-bold;">CONTACT US</a>
                                        </li>
                                    </ul>
                                    <!-- <form class="d-flex" role="search"><input class="form-control" type="search" placeholder="Search" aria-label="Search" oninput="liveSearch(this.value)"></form> -->
                                </div>

                                <div class="tg-searchbox">
                                    <input class="typeahead form-control d-flex" id="searchInput" style="padding-left:34px !important;     padding-right: 34px !important;" type="text" name="search" placeholder="Search Resource Library..." autocomplete="off" aria-label="Search Topic">
                                    <button type="reset" id="cancelButton" style="background: none; border: none; cursor: pointer; position: absolute; top: 50%;    right: 2px; transform: translateY(-50%); display: none;">

                                        <i class="fa fa-times-circle " style="color:#05a8aa;"></i>
                                        <!-- Assuming you're using Font Awesome for icons -->
                                    </button>
                                    <div class="result position-absolute" style="z-index: 1; background-color: #F7F7F7; color:black;"></div>
                                    <i class="fa fa-search search-icon" id="searchIcon"></i>
                                    <!-- Font Awesome search icon -->
                                </div>
                                <script>
                                    // Get references to the input field and cancel button
                                    const searchInput = document.getElementById('searchInput');
                                    const cancelButton = document.getElementById('cancelButton');
            
                                    // Add event listener to input field
                                    searchInput.addEventListener('input', function() {
                                       // If input field is not empty, show the cancel button; otherwise, hide it
                                       cancelButton.style.display = this.value.trim() !== '' ? 'block' : 'none';
                                    });
            
                                    // Add event listener to cancel button
                                    cancelButton.addEventListener('click', function() {
                                       // Clear the input field
                                       searchInput.value = '';
                                       // Hide the cancel button
                                       this.style.display = 'none';
                                       // Additional actions if needed
                                       window.location.reload();
                                    });
                                </script>
                            </div>
                        </nav>
                    </div>
                    <!-- </div> -->
                                            <div class="container">
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-md-3 mb-1">
                                            <form method="post" action="">
                                                <select class="form-control " onChange="getSubCategory(this.value);" name="res_category" id="" required>
                                                    <option class="active" value="">Category</option>
                                                                                                    </select>
                                        </div>
                                        <div class="col-md-3 mb-1 ">
                                            <select class="form-control" name="res_sub_category" id="sub_category_list" required>
                                                <option class="active" value="">Sub Category</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3 mb-1">
                                            <select class="form-control " name="res_type" id="">
                                                <option class="active" value="">Resource Type</option>
                                                <option value="Whitepapers">Whitepapers</option>
                                                <option value="Webinars">Webinars</option>
                                                <option value="Infographics">Infographics</option>
                                                <option value="Podcast">Podcast</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2 mb-1">
                                            <select class="form-control" name="res_language" id="">
                                                <option class="active" value="">Language</option>
                                                <option value="EN">English </option>
                                                <option value="ES">Spanish </option>
                                                <option value="ZH">Chinese </option>
                                                <option value="DE">German </option>
                                                <option value="FR">French </option>
                                                <option value="RU">Russian </option>
                                                <option value="IT">Italian </option>
                                                <option value="PT">Portuguese </option>
                                                <option value="DT">Dach </option>
                                            </select>
                                        </div>
                                        <div class="col-md-1 mb-1">
                                            <button class="btn text-right" name="filter_btn" style="    background-color: #05a8aa; color: white;" onclick="btnAction()">
                                                <i class="fa fa-search" type="submit" placeholder="Search resource library"></i>
                                            </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="container">
                                                                                </div>
                                            <!-- RESOURCE INFORMATION CARDS END -->
                                                                            </div>
                            </div>
                            <!-- End Featured Area  -->
                        </div>
                </div>
                <script type="text/javascript">
                    $(document).ready(function() {
        
                       $(document).on("click", ".load", function() {
        
                          var ids = $(this).attr("id");
        
                          $(".load").html('<img height="15px" width="500px" src="admin/assets/loader.gif"/>');
        
                          $.ajax({
        
                             type: 'POST',
        
                             url: 'load_more.php',
        
                             cache: false,
        
                             data: {
        
                                'lastid': ids
        
                             },
        
        
                             success: function(response) {
        
                                $('#cards_list').append(response);
        
                                $('#load' + ids).remove();
        
                                if (!response) {
        
                                   $('.cards_body').text('No more record to load');
        
                                }
        
                             }
        
                          });
        
                       });
        
                    });
                </script>
    </body>

    </html>