@extends('vendor.layouts.app')

@section('title', 'Category Selection')

@section('style')
@endsection

@section('content')
<main class="dash-content cat-select">
  <div class="page-header">
    <div class="page-title">
      <h1>Category Selection</h1>
      <p>Choose the right category for your product</p>
    </div>
  </div>

  <div class="cat-select-grid">
    <div class="cat-select-left">
      <div class="card mb-4">
        <div class="card-body">
          <h5 class="section-title">Selected Category</h5>

          <div class="category-box main active" id="box1" onclick="toggleBoxState(this)">
            <div class="category-name">Electronics</div>
            <div class="category-type">Main Category</div>
          </div>

          <div class="category-box active" id="box2" onclick="toggleBoxState(this)">
            <div class="category-name">Audio</div>
            <div class="category-type">Sub-Category</div>
          </div>

          <div class="category-box inactive" id="box3" onclick="toggleBoxState(this)">
            <div class="category-name">Audio</div>
            <div class="category-type">Sub-Category</div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <div>
            <h6 class="section-title" >Category Attributes</h6>
            <span class="required-text">Required fields for this category</span>

            <div class="attribute-group">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="brand" checked>
                <label class="form-check-label" for="brand">Brand</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="model" checked>
                <label class="form-check-label" for="model">Model</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="color" checked>
                <label class="form-check-label" for="color">Color</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="warranty" checked>
                <label class="form-check-label" for="warranty">Warranty Period</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="connectivity" checked>
                <label class="form-check-label" for="connectivity">Connectivity Type</label>
              </div>
            </div>

            <button type="button" class="btn-typ2 mt-3" onclick="confirmCategory()">Confirm
              Category</button>
          </div>
        </div>
      </div>
    </div>

    <div class="cat-select-right">
      <div class="card mb-4">
        <div class="card-body">
          <h5 class="section-title">Browse Categories</h5>

          <div class="cat-search">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.4"/>
              <path d="M11.5 11.5L14.5 14.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
            </svg>
            <input type="text" placeholder="Search...">
          </div>
        </div>
      </div>
      
      <div class="card">
        <div class="card-body">
          <div class="cat-parent-list">
            <div class="cat-parent">
              <div class="cat-parent-head open" data-category="electronics" onclick="toggleCategory(event)">
                <div>
                  <div class="cat-parent-name">Electronics</div>
                  <div class="cat-parent-count">5 - Sub-Categories</div>
                </div>
                <span class="cat-parent-arrow">
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M23.0681 11.9928L18.8183 7.75732L17.4065 9.17392L19.2419 11.0031L0.932836 11.0011L0.932617 13.0011L19.2373 13.0031L17.4158 14.8308L18.8324 16.2426L23.0681 11.9928Z" fill="#000000"/>
                  </svg>
                </span>
              </div>
              <div class="cat-sub-list">
                <div class="cat-sub-item" data-parent="electronics" onclick="selectSubcategory(this, 'Smart phones')">
                  Smart phones
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" data-parent="electronics" onclick="selectSubcategory(this, 'Laptops')">
                  Laptops
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" data-parent="electronics" onclick="selectSubcategory(this, 'Audio')">
                  Audio
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" data-parent="electronics" onclick="selectSubcategory(this, 'Cameras')">
                  Cameras
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" data-parent="electronics" onclick="selectSubcategory(this, 'Accessories')">
                  Accessories
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>

            <div class="cat-parent">
              <div class="cat-parent-head" data-category="fashion" onclick="toggleCategory(event)">
                <div>
                  <div class="cat-parent-name">Fashion &amp; Apparel</div>
                  <div class="cat-parent-count">4 - Sub-Categories</div>
                </div>
                <span class="cat-parent-arrow">
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M23.0681 11.9928L18.8183 7.75732L17.4065 9.17392L19.2419 11.0031L0.932836 11.0011L0.932617 13.0011L19.2373 13.0031L17.4158 14.8308L18.8324 16.2426L23.0681 11.9928Z" fill="#000000"/>
                  </svg>
                </span>
              </div>
              <div class="cat-sub-list">
                <div class="cat-sub-item" style="display:none" data-parent="fashion" onclick="selectSubcategory(this, 'Men')">
                  Men
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="fashion" onclick="selectSubcategory(this, 'Women')">
                  Women
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="fashion" onclick="selectSubcategory(this, 'Kids')">
                  Kids
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="fashion" onclick="selectSubcategory(this, 'Footwear')">
                  Footwear
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>

            <div class="cat-parent">
              <div class="cat-parent-head" data-category="home" onclick="toggleCategory(event)">
                <div>
                  <div class="cat-parent-name">Home &amp; Living</div>
                  <div class="cat-parent-count">3 - Sub-Categories</div>
                </div>
                <span class="cat-parent-arrow">
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M23.0681 11.9928L18.8183 7.75732L17.4065 9.17392L19.2419 11.0031L0.932836 11.0011L0.932617 13.0011L19.2373 13.0031L17.4158 14.8308L18.8324 16.2426L23.0681 11.9928Z" fill="#000000"/>
                  </svg>
                </span>
              </div>
              <div class="cat-sub-list">
                <div class="cat-sub-item" style="display:none" data-parent="home" onclick="selectSubcategory(this, 'Furniture')">
                  Furniture
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="home" onclick="selectSubcategory(this, 'Decor')">
                  Decor
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="home" onclick="selectSubcategory(this, 'Kitchen')">
                  Kitchen
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>

            <div class="cat-parent">
              <div class="cat-parent-head" data-category="beauty" onclick="toggleCategory(event)">
                <div>
                  <div class="cat-parent-name">Beauty &amp; Personal Care</div>
                  <div class="cat-parent-count">2 - Sub-Categories</div>
                </div>
                <span class="cat-parent-arrow">
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M23.0681 11.9928L18.8183 7.75732L17.4065 9.17392L19.2419 11.0031L0.932836 11.0011L0.932617 13.0011L19.2373 13.0031L17.4158 14.8308L18.8324 16.2426L23.0681 11.9928Z" fill="#000000"/>
                  </svg>
                </span>
              </div>
              <div class="cat-sub-list">
                <div class="cat-sub-item" style="display:none" data-parent="beauty" onclick="selectSubcategory(this, 'Skincare')">
                  Skincare
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="beauty" onclick="selectSubcategory(this, 'Haircare')">
                  Haircare
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>

            <div class="cat-parent">
              <div class="cat-parent-head" data-category="sports" onclick="toggleCategory(event)">
                <div>
                  <div class="cat-parent-name">Sports &amp; Outdoors</div>
                  <div class="cat-parent-count">4 - Sub-Categories</div>
                </div>
                <span class="cat-parent-arrow">
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M23.0681 11.9928L18.8183 7.75732L17.4065 9.17392L19.2419 11.0031L0.932836 11.0011L0.932617 13.0011L19.2373 13.0031L17.4158 14.8308L18.8324 16.2426L23.0681 11.9928Z" fill="#000000"/>
                  </svg>
                </span>
              </div>
              <div class="cat-sub-list">
                <div class="cat-sub-item" style="display:none" data-parent="sports" onclick="selectSubcategory(this, 'Fitness')">
                  Fitness
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="sports" onclick="selectSubcategory(this, 'Camping')">
                  Camping
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="sports" onclick="selectSubcategory(this, 'Cycling')">
                  Cycling
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="cat-sub-item" style="display:none" data-parent="sports" onclick="selectSubcategory(this, 'Team Sports')">
                  Team Sports
                  <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
@endsection

@section('script')
<script>
(function () {
      /* Revenue overview chart */
      const ctx = document.getElementById('revenueChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['0', '1'],
          datasets: [
            { label: 'Series A', data: [25, 42], backgroundColor: '#AD46FF', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series B', data: [38, 30], backgroundColor: '#77BD65', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series C', data: [20, 47], backgroundColor: '#EB8F48', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series D', data: [14, 28], backgroundColor: '#EABC49', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: {
            x: { grid: { display: false }, border: { display: false }, ticks: { color: '#8B929C', font: { family: 'Poppins', size: 12 } } },
            y: { grid: { color: '#F1F2F4' }, border: { display: false }, ticks: { stepSize: 15, color: '#8B929C', font: { family: 'Poppins', size: 12 } } }
          }
        }
      });

      /* Mobile sidebar */
      const hamburgerBtn = document.getElementById('hamburgerBtn');
      const dashSidebar = document.getElementById('dashSidebar');
      const sidebarOverlay = document.getElementById('sidebarOverlay');
      const sidebarClose = document.getElementById('sidebarClose');

      function openSidebar() {
        dashSidebar.classList.add('sidebar-open');
        sidebarOverlay.classList.add('overlay-active');
        hamburgerBtn.setAttribute('aria-expanded', 'true');
        document.body.classList.add('sidebar-is-open');
      }

      function closeSidebar() {
        dashSidebar.classList.remove('sidebar-open');
        sidebarOverlay.classList.remove('overlay-active');
        hamburgerBtn.setAttribute('aria-expanded', 'false');
        document.body.classList.remove('sidebar-is-open');
      }

      hamburgerBtn.addEventListener('click', openSidebar);
      sidebarClose.addEventListener('click', closeSidebar);
      sidebarOverlay.addEventListener('click', closeSidebar);

      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeSidebar();
      });
    })();
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/app.js"></script>
  <script>
    // Store selected categories state
    const categoriesState = {
      box1: { name: 'Electronics', type: 'Main Category', active: true },
      box2: { name: 'Audio', type: 'Sub-Category', active: true },
      box3: { name: 'Audio', type: 'Sub-Category', active: false }
    };

    // Toggle subcategories visibility
    function toggleCategory(event) {
      event.stopPropagation();
      const categoryElement = event.currentTarget;
      const categoryId = categoryElement.getAttribute('data-category');
      const parentList = categoryElement.parentElement;

      // Get all subcategories with matching parent
      const subcategories = Array.from(parentList.querySelectorAll(`[data-parent="${categoryId}"]`));

      // Toggle visibility
      const isHidden = subcategories[0]?.style.display === 'none';
      subcategories.forEach(item => {
        item.style.display = isHidden ? 'flex' : 'none';
      });

      categoryElement.classList.toggle('open', isHidden);
    }

    // Select subcategory from browse list
    function selectSubcategory(element, categoryName) {
      event.stopPropagation();

      // Find first inactive box
      let inactiveBoxId = null;
      for (let boxId in categoriesState) {
        if (!categoriesState[boxId].active) {
          inactiveBoxId = boxId;
          break;
        }
      }

      if (inactiveBoxId) {
        const box = document.getElementById(inactiveBoxId);
        const nameEl = box.querySelector('.category-name');
        const typeEl = box.querySelector('.category-type');

        nameEl.textContent = categoryName;
        typeEl.textContent = 'Sub-Category';

        box.classList.remove('inactive');
        box.classList.add('active');

        categoriesState[inactiveBoxId] = { name: categoryName, type: 'Sub-Category', active: true };
      }
    }

    // Toggle box active/inactive state
    function toggleBoxState(element) {
      const boxId = element.id;
      const isActive = element.classList.contains('active');

      if (isActive) {
        // Make inactive
        element.classList.remove('active');
        element.classList.add('inactive');
        categoriesState[boxId].active = false;
      } else {
        // Make active
        element.classList.remove('inactive');
        element.classList.add('active');
        categoriesState[boxId].active = true;
      }
    }

    // Confirm category button
    function confirmCategory() {
      const activeCategories = Object.values(categoriesState).filter(cat => cat.active);

      if (activeCategories.length > 0) {
        const selections = activeCategories.map(cat => `• ${cat.name} (${cat.type})`);
        alert('Category confirmed!\n\nActive Categories:\n' + selections.join('\n'));
      } else {
        alert('Please activate at least one category!');
      }
    }
</script>
@endsection