{% assign coverages_categories = "Auto,Accident & Health,Builders Risk,Business Income/Extra Expense,Business Owners Policy (BOP),Chubb Services,Claims,Commercial Lines Products,Construction,Crime,Cyber Security,Directors & Officers Liability,Employment Practices Liability,Equipment Breakdown,Errors & Omissions,Family Office,Farm,Fiduciary,Financial Fidelity,Flood,Group Personal Excess Liability,Home,Kidnap, Ransom & Extortion,Liability,Liquor Liability,Loss Control,Management Liability,Marine-Inland/Ocean,Medical Liability,Multinational,Natural Disasters,Package,$Personal Lines Products,Pollution Liability,Product Recall,Professional Liability,Property,Rec. Marine,Risk Management,Services,Surety,Transactional Risk,Travel,Umbrella & Excess Liability,Valuable Articles,Worker’s Compensation,Workplace Violence" | split: "," %}
{% assign categories = "$Commercial Lines,$Gen. Ins. & Risk Mgmt.,$Leadership & Prof. Dev.,Onboarding,$Personal Lines,$Sales & Service" | split: ","%}
{% assign competencies_categories = "Agency Operations,Business Etiquette,Business Financials,Centers of Influence,Change Management,$Chubb Systems,Coaching,Communication Styles,Conflict Management,Cross Selling,Customer Service,DiSC,Diversity - DEI&B,Effective Listening,Emotional Intelligence,Employee Onboarding,Executive Development,Goal Setting,Influencing,Innovation,Leadership,Managing People,Marketing / Branding,Mergers & Acquisition,Negotiation,Networking,Overcoming Objections,Perpetuation Planning,Pipeline Management,Presentation Skills,Professional Presence,Referrals,Sales Management,Sales Skills,Storytelling,Team Building,Technology Training,Time Management,Writing Skills" | split: "," %}
{% assign industry_practices_categories = "Agriculture,Aviation,Broadcasters,Clean Tech,Construction,Cultural Institutions,Educational Institutions,Energy,Entertainment,Federal Gov. Contractors,Financial Institutions,Food,Healthcare,Hospitality,Life Sciences,Manufacturing,Private Equity,Professional Service Firms,Public Entities,Real Estate,Retail,Technology,Transportation,Wholesale,Wineries" | split: "," %}
{% assign level_categories = "Elements (L1),Enhance (L2),Elevate (L3)" | split: "," %}


<div class="filter-courses-container">
  <div class="filter-heading border-bottom">Filters</div>
  <div class="filter-option-container">
    <button class="filter-option" onclick="toggleFilter('categories-container-1')" >Type <i class="fal fa-plus plus-icon"></i></button>
    <div class="categories-container" id="categories-container-1">
      <div class="input-container">
        <input type="checkbox" id="learning_path" class="type-filter">Learning Path
      </div>
      <div class="input-container">
        <input type="checkbox" id="webinar" class="type-filter">Webinar
      </div>
      <div class="input-container">
        <input type="checkbox" id="resource" class="type-filter">Resource
      </div>
      <div class="input-container">
        <input type="checkbox" id="course" class="type-filter">Course
      </div>
    </div>
  </div>

  <div class="filter-option-container">
    <button class="filter-option" onclick="toggleFilter('categories-container-2')" >Categories <i class="fal fa-plus plus-icon"></i></button>
    <div class="categories-container" id="categories-container-2">
      {% assign unique_categories = "" %}
      {% for course in courses.in_catalog %}
        {% for category in course.categories %}
          {% if categories contains category.name%}
            {% unless unique_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_categories = unique_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% for learning_path in learning_paths.available %}
        {% for category in learning_path.categories %}
          {% if categories contains category.name%}
            {% unless unique_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_categories = unique_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
  </div>

  <div class="filter-option-container">
    <button class="filter-option" onclick="toggleFilter('categories-container-3')">
        Coverages <i class="fal fa-plus plus-icon"></i>
    </button>
    <div class="categories-container" id="categories-container-3">
      {% assign unique_coverages_categories = "" %}
      {% for course in courses.in_catalog %}
        {% for category in course.categories %}
          {% if coverages_categories contains category.name %}
            {% unless unique_coverages_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_coverages_categories = unique_coverages_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% for learning_path in learning_paths.available %}
        {% for category in learning_path.categories %}
          {% if coverages_categories contains category.name%}
            {% unless unique_coverages_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_coverages_categories = unique_coverages_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
  </div>

  <div class="filter-option-container">
    <button class="filter-option" onclick="toggleFilter('categories-container-4')">
      Competencies <i class="fal fa-plus plus-icon"></i>

    </button>
    <div class="categories-container" id="categories-container-4">
      {% assign unique_competencies_categories = "" %}
      {% for course in courses.in_catalog %}
        {% for category in course.categories %}
          {% if competencies_categories contains category.name %}
            {% unless unique_competencies_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_competencies_categories = unique_competencies_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% for learning_path in learning_paths.available %}
        {% for category in learning_path.categories %}
          {% if competencies_categories contains category.name%}
            {% unless unique_competencies_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_competencies_categories = unique_competencies_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
  </div>

  <div class="filter-option-container">
    <button class="filter-option" onclick="toggleFilter('categories-container-5')">
      Industry Practices <i class="fal fa-plus plus-icon"></i>
    </button>
    <div class="categories-container" id="categories-container-5">
      {% assign unique_industry_practices_categories = "" %}
      {% for course in courses.in_catalog %}
        {% for category in course.categories %}
          {% if industry_practices_categories contains category.name %}
            {% unless unique_industry_practices_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_industry_practices_categories = unique_industry_practices_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% for learning_path in learning_paths.available %}
        {% for category in learning_path.categories %}
          {% if industry_practices_categories  contains category.name%}
            {% unless unique_industry_practices_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_industry_practices_categories = unique_industry_practices_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
  </div>

  <div class="filter-option-container">
    <button class="filter-option" onclick="toggleFilter('categories-container-6')">
      Level <i class="fal fa-plus plus-icon"></i>
    </button>
    <div class="categories-container" id="categories-container-6">
      {% assign unique_level_categories = "" %}
      {% for course in courses.in_catalog %}
        {% for category in course.categories %}
          {% if level_categories contains category.name %}
            {% unless unique_level_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_level_categories = unique_level_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% for learning_path in learning_paths.available %}
        {% for category in learning_path.categories %}
          {% if level_categories  contains category.name%}
            {% unless unique_level_categories contains category.name %}
              <div class="input-container">
                  <input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
              </div>
              {% assign unique_level_categories = unique_level_categories | append: category.name %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      
    </div>
  </div>

  <div class="filter-option-container">
    <button class="filter-option" onclick="toggleFilter('categories-container-7')">
      Duration (Course Only) <i class="fal fa-plus plus-icon"></i>
    </button>
    <div class="categories-container" id="categories-container-7">
      <div class="input-container">
        <input type="checkbox" id="duration-<10" class="duration-filter"> < 10 mins
      </div>
      <div class="input-container">
        <input type="checkbox" id="duration-10-30" class="duration-filter">10-30 mins
      </div>
      <div class="input-container">
        <input type="checkbox" id="duration-30-60" class="duration-filter">30-60 mins
      </div>
      <div class="input-container">
        <input type="checkbox" id="duration-60-120" class="duration-filter">1-2 hours
      </div>
      <div class="input-container">
        <input type="checkbox" id="duration->120" class="duration-filter">> 2 hours
      </div>
    </div>
  </div>
  </div>
  <div class="filter-button-container">
    <button class="filter-clear-button" onclick="clearFilters()">Clear Filters</button>
  </div>
  <style>
.filter-heading {
  font-weight: 700;
  color: #000;
  padding-bottom: 15px;
}
.border-bottom {
    border-bottom: 1px solid rgba(0, 0, 0 ,0.5);
}
.catalog-search-input {
  position: relative;
  width: 100%;
  padding: 0.5rem 0 0.5rem 2rem;
}
.catalog-search-icon {
  position: absolute;
  top: 30%;
  left: 0;
  color: #000;
  opacity: 0.5;
  font-size: 1rem;
  padding-left: 10px;
}
.catalog-form {
    position: relative;
}
.filter-courses-container {
  margin-bottom: 20px;
}
.filter-option {
    border: none;
    cursor: pointer;
    display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0 ,0.5);
  color: #000;
  width: 100%;
  background: none;
  text-align: inherit;
}
.category-filter, .type-filter, .duration-filter {
    margin-right: 5px;
}

.category-filter-container {
    display: none;
    margin-left: 10px;
    padding: 5px 0;
    color: #000;
}
.input-container {
  display: flex;
  margin: 5px;
  color: #000;
}
.categories-container {
  display: none;
}
.filter-button-container {
  padding-bottom: 15px;
}
.filter-clear-button {
  background: #000;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 10px 20px;
  color: #fff;
  font-size: .875rem;
  font-weight: bold;
  width: 100%;
  cursor: pointer;
}
</style>

<script>
    var openFilters = {};
    var selectedCategories = [];
    var selectedTypes = [];
    var selectedDuration = [];
    console.log(selectedDuration)

    function toggleFilter(containerId) {
        var container = document.getElementById(containerId);
        var icon = container.previousElementSibling.children[0];
        openFilters[containerId] = !openFilters[containerId];

        if (openFilters[containerId]) {
            container.style.display = 'block';
            icon.classList.remove("fa-plus")
            icon.classList.add("fa-minus")
        } else {
            container.style.display = 'none';
            icon.classList.add("fa-plus")
            icon.classList.remove("fa-minus")
        }
    }

  function updateCourses() {
     var allCourses = document.querySelectorAll('.card');

    allCourses.forEach(function (course) {
    var courseCategories = course.getAttribute('categories').split(',');
    var courseType = course.getAttribute('type');
    var courseDuration = parseInt(course.getAttribute('duration')); 

    if (!courseType) {
      courseType = "";
    }

    var categoryFilter = selectedCategories.length === 0 || selectedCategories.some(function (category) {
      return courseCategories.includes(category);
    });


    var typeFilter = selectedTypes.length === 0 || selectedTypes.includes(courseType);

    var durationFilter = true;
    if (selectedDuration.length > 0) {
      var durationFilterValue = selectedDuration[0]; 
      switch (durationFilterValue) {
        case 'duration-<10':
          durationFilter = courseDuration < 10;
          break;
        case 'duration-10-30':
          durationFilter = courseDuration >= 10 && courseDuration <= 30;
          break;
        case 'duration-30-60':
          durationFilter = courseDuration >= 30 && courseDuration <= 60;
          break;
        case 'duration-60-120':
          durationFilter = courseDuration >= 60 && courseDuration <= 120;
          break;
        case 'duration->120':
          durationFilter = courseDuration > 120;
          break;
        default:
          break;
      }
    }

    var shouldShow = categoryFilter && typeFilter && durationFilter;

    if (shouldShow) {
      course.parentElement.style.display = 'flex';
    } else {
      course.parentElement.style.display = 'none';
    }
  });
}


    document.addEventListener('change', function(event) {
        if (event.target.classList.contains('category-filter')) {
            var category = event.target.id;

            if (event.target.checked) {
                selectedCategories.push(category);
            } else {
                selectedCategories = selectedCategories.filter(function(cat) {
                    return cat !== category;
                });
            }
        }

        if (event.target.classList.contains('type-filter')) {
            var type = event.target.id;

            if (event.target.checked) {
                selectedTypes.push(type);
            } else {
                selectedTypes = selectedTypes.filter(function(t) {
                    return t !== type;
                });
            }
        }

        if (event.target.classList.contains('duration-filter')) {
          var duration = event.target.id;

          if (event.target.checked) {
            selectedDuration.push(duration);
          } else {
            selectedDuration = selectedDuration.filter(function(d){
              return d !== duration
            });
          }
        }

        updateCourses();
    });
    function setInitialFilterState() {
    var urlParams = new URLSearchParams(window.location.search);
    var typeParam = urlParams.get('type');
    var categoryParam = urlParams.get('category');

    if (typeParam === 'learning_path' || typeParam === 'course') {

        toggleFilter('categories-container-1');

        var typeCheckbox = document.getElementById(typeParam);
        if (typeCheckbox) {
            typeCheckbox.click();
        }
    }

    if (categoryParam) {
      toggleFilter('categories-container-2');
      var typeCheckbox = document.getElementById(categoryParam);
        if (typeCheckbox) {
            typeCheckbox.click();
        }
    }
}

function clearFilters() {
    var checkboxes = document.querySelectorAll('.category-filter, .type-filter, .duration-filter');
    checkboxes.forEach(function (checkbox) {
      checkbox.checked = false;
    });

    selectedCategories = [];
    selectedTypes = [];
    selectedDuration = [];

    updateCourses();
  }

  function hideUnusedTypes() {
    var allTypeCheckboxes = document.querySelectorAll('.type-filter');
    var allCourses = document.querySelectorAll('.card');

    var availableTypes = [];

    allCourses.forEach(function (course) {
      var courseType = course.getAttribute('type');
      if (courseType && !availableTypes.includes(courseType)) {
        availableTypes.push(courseType);
      }
    });

    allTypeCheckboxes.forEach(function (checkbox) {
      var type = checkbox.id;
      var isAvailable = availableTypes.includes(type);
      checkbox.parentNode.style.display = isAvailable ? 'block' : 'none';
    });
  }

  document.addEventListener('DOMContentLoaded', function() {
      setInitialFilterState();
      hideUnusedTypes();
  });
</script>