@push('style')
  {{-- @vite('resources/css/tutor.css') --}}
  <style>
    .category-container {
      margin-bottom: 20px;
    }

    .category-title {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .category-button-group {
      margin-right: 5px;
      margin-bottom: 5px;
    }

    .level-dropdown {
      position: absolute;
      z-index: 1000;
      display: none;
    }

    .selected-skill-textbox {
      margin-top: 10px;
      padding: 8px;
      border: 1px solid #ced4da;
      border-radius: 0.5rem;
      background-color: #f8f9fa;
      display: inline-block;
      margin-right: 5px;
      margin-bottom: 5px;
    }

    .remove-skill {
      cursor: pointer;
      margin-left: 5px;
      color: red;
    }

    .selected-textboxes-container {
      /* Container cho textbox đã chọn, nằm dưới mỗi danh mục */
      margin-top: 10px;
    }
  </style>
@endpush
@php
  use App\Enums\TutorSubjectEnum;
  use App\Enums\TutorSkillEnum;
  use App\Enums\TutorLevelEnum;
  use App\Enums\TutorLanguageEnum;
  use App\Enums\TutorGradeEnum;

  $categories = [
      'subjects' => [
          'textLabel' => 'Môn Học',
          'skills' => TutorSubjectEnum::toSelectArray(),
          'levels' => TutorGradeEnum::toSelectArray(),
      ],
      'skills' => [
          'textLabel' => 'lớp kỹ năng ',
          'skills' => TutorSkillEnum::toSelectArray(),
          'levels' => TutorLevelEnum::toSelectArray(),
      ],
      'languages' => [
          'textLabel' => 'Ngoại ngữ',
          'skills' => TutorLanguageEnum::toSelectArray(),
          'levels' => TutorLevelEnum::toSelectArray(),
      ],
      // Thêm các danh mục khác nếu cần
  ];
@endphp

<div id="skill-categories-container">
  <input type="hidden" name="tutor_info" value="{{ $tutor_info ?? '' }}">
  @error('tutor_info')
    <span class="text-danger">{{ $message }}</span>
  @enderror
  @foreach ($categories as $categoryName => $categoryData)
    <div class="category-container">
      <label for="category-title" class="text-capitalize mb-2">{{ $categoryData['textLabel'] }}</label>
      <div class="skill-items-container">
        @foreach ($categoryData['skills'] as $skillId => $skillLabel)
          {{-- Lặp qua skills với key là ID và value là label --}}
          <div class="btn-group category-button-group">
            <a type="button" class="btn btn-light dropdown-toggle text-capitalize" data-bs-toggle="dropdown"
              aria-expanded="false" data-category-name="{{ $categoryName }}" data-skill-id="{{ $skillId }}">
              {{ $skillLabel }}
            </a>
            @if (isset($categoryData['levels']))
              <ul class="dropdown-menu">
                @foreach ($categoryData['levels'] as $levelId => $levelLabel)
                  <li><a class="dropdown-item level-item text-capitalize" data-category-name="{{ $categoryName }}"
                      data-skill-id="{{ $skillId }}" data-level-id="{{ $levelId }}"
                      href="javascript:void(0)">{{ $levelLabel }}</a></li>
                @endforeach
              </ul>
            @endif
          </div>
        @endforeach
      </div>
      <div class="selected-textboxes-container text-capitalize" id="selected-textboxes-{{ Str::slug($categoryName) }}">
      </div>
    </div>
  @endforeach
</div>

@push('script')
  {{-- @vite('resources/js/tutor_info.js') --}}
  <script>
    var getListCategoryData = {!! json_encode($categories) !!};
    $(document).ready(function() {
      var categoryName = null;
      var categoryLabel = null;
      var getCategoryData = document.querySelector('input[name="tutor_info"]').value;
      var categoryData = getCategoryData ? JSON.parse(getCategoryData) : {};

      function getSkillText(categoryKey, skillId, levelId) {
        var category = getListCategoryData[categoryKey]; // Lấy danh mục tương ứng
        if (!category) return categoryKey + ' - Level ' + levelId; // Trường hợp lỗi dữ liệu

        var skillName = category.skills[skillId] || 'Unknown Skill';
        var levelName = category.levels[levelId] || 'Unknown Level';

        return skillName + ' - ' + levelName;
      }

      // Duyệt qua dữ liệu để tạo lại các selected-skill-textbox
      for (var categoryKey in categoryData) {
        if (categoryData.hasOwnProperty(categoryKey)) {
          var category = categoryData[categoryKey];

          for (var skill of category) {
            for (var level of skill.levels) {
              var skillText = getSkillText(categoryKey, skill.id, level);
              var selectedTextboxContainerId = '#selected-textboxes-' + categoryKey;

              var textbox = $('<div class="selected-skill-textbox" data-skill-id="' + skill.id + '" data-level-id="' +
                level + '">' +
                skillText +
                '<span class="remove-skill" data-category-name="' + categoryKey +
                '" data-skill-id="' + skill.id + '" data-level-id="' + level +
                '"> <i class="fa fa-times"></i></span>' +
                '</div>');

              $(selectedTextboxContainerId).append(textbox);
            }
          }
        }
      }
      // Function to update categoryData and prevent duplicates and handle removals
      function updateCategoryData(action, categoryName, skillId, levelId) {
        if (!categoryData[categoryName] || !skillId || !levelId) {
          console.error("Invalid categoryName:", categoryName);
          return;
        }

        let category = categoryData[categoryName];
        let skill = category.find(s => s.id === skillId);

        if (action === 'add') {
          if (!skill) {
            category.push({
              id: skillId,
              levels: [levelId]
            });
          } else if (!skill.levels.includes(levelId)) {
            skill.levels.push(levelId);
          }
        } else if (action === 'remove' && skill) {
          skill.levels = skill.levels.filter(level => level !== levelId);
          if (skill.levels.length === 0) {
            categoryData[categoryName] = category.filter(s => s.id !== skillId);
          }
        }
      }

      // Xử lý click trên button danh mục (nếu có dropdown level)
      $(document).on('click', 'a.btn', function(e) {
        categoryName = $(this).data('category-name');
        categoryLabel = $(this).text();
        if (categoryData[categoryName] == undefined) categoryData[categoryName] = [];
      });

      // Xử lý click trên item level trong dropdown
      $(document).on('click', '.level-item', function(e) {
        e.preventDefault();
        var skillId = $(this).data('skill-id');
        var levelId = $(this).data('level-id');
        var levelLabel = $(this).text();
        var skillText = categoryLabel + ' - ' + levelLabel;
        var selectedTextboxContainerId = '#selected-textboxes-' + categoryName;
        var existingTextbox = $(selectedTextboxContainerId).find('.selected-skill-textbox[data-skill-id="' +
          skillId + '"][data-level-id="' + levelId + '"]');
        if (existingTextbox.length === 0) {
          var textbox = $('<div class="selected-skill-textbox">' +
            skillText +
            '<span class="remove-skill" data-category-name="' + categoryName + '" data-skill-text="' +
            skillText + '" data-skill-id="' + skillId +
            '" data-level-id="' + levelId + '"> <i class="fa fa-times"></i></span>' +
            '</div>');

          let category = categoryData[categoryName];
          let skill = category.find(s => s.id === skillId);

          if (!skill || !skill.levels.includes(levelId)) {
            $(selectedTextboxContainerId).append(textbox);
          }

          // Update categoryData
          updateCategoryData('add', categoryName, skillId, levelId);
          document.querySelector('input[name="tutor_info"]').value = JSON.stringify(categoryData);
        }
        $(this).closest('.level-dropdown').hide();
      });
      $(document).on('click', '.remove-skill', function() {
        var skillTextToRemove = $(this).data('skill-text');
        var skillIdToRemove = $(this).data('skill-id');
        var levelIdToRemove = $(this).data('level-id');
        var levelIdToRemove = $(this).data('level-id');
        var categoryName = $(this).data('category-name');
        // Remove categoryData
        updateCategoryData('remove', categoryName, skillIdToRemove, levelIdToRemove);
        document.querySelector('input[name="tutor_info"]').value = JSON.stringify(categoryData);
        $(this).closest('.selected-skill-textbox').remove();
      });
    });
  </script>
@endpush