@extends('vendor.layouts.app')

@section('title', 'Products')

@section('style')
<style>
.prod-search-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 20px;
}
.prod-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    padding: 10px 14px;
    background: #fff;
    max-width: 300px;
    width: 100%;
}
.prod-search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    font-family: 'Poppins', sans-serif;
    min-width: 0;
    padding: 0;
    width: auto !important;
    float: none !important;
}
.prod-search-box input::placeholder {
    color: #9CA3AF;
}
.prod-search-box .prod-search-icon {
    flex-shrink: 0;
}
.prod-filter-btn {
    background: none;
    border: none;
    border-left: 1px solid #E5E7EB;
    padding: 2px 0 2px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
</style>
@endsection

@section('content')
<main class="dash-content">
<!-- Page Header -->
        <div class="page-header">
          <div class="page-title">
            <h1>Products</h1>
            <p>Manage your product catalog</p>
          </div>
          <div class="btn-group-top">
            <button class="btn-typ1">
              <i class="fas fa-upload"></i> BULK UPLOAD
            </button>
            <button class="btn-typ2">
              <i class="fas fa-plus"></i> ADD PRODUCT
            </button>
          </div>
        </div>
        <div class="product_list">

          <!-- Search & Export -->
          <div class="prod-search-wrap">
            <div class="prod-search-box">
              <svg class="prod-search-icon" width="16" height="16" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M25.7538 24.5855L19.041 17.98C20.7989 16.0701 21.879 13.5443 21.879 10.7649C21.8781 4.81922 16.9808 0 10.9393 0C4.89775 0 0.000488281 4.81922 0.000488281 10.7649C0.000488281 16.7105 4.89775 21.5298 10.9393 21.5298C13.5497 21.5298 15.9438 20.6269 17.8244 19.1258L24.5632 25.7574C24.8916 26.0808 25.4247 26.0808 25.753 25.7574C25.8311 25.6811 25.8932 25.59 25.9356 25.4894C25.978 25.3888 25.9999 25.2808 26 25.1716C26 25.0624 25.9783 24.9543 25.936 24.8537C25.8937 24.753 25.8318 24.6619 25.7538 24.5855ZM10.9393 19.8735C5.82749 19.8735 1.68358 15.7955 1.68358 10.7649C1.68358 5.73431 5.82749 1.65624 10.9393 1.65624C16.0511 1.65624 20.195 5.73431 20.195 10.7649C20.195 15.7955 16.0511 19.8735 10.9393 19.8735Z" fill="#928FA6"/>
              </svg>
              <input type="text" placeholder="Search..." id="searchInput">
              <button class="prod-filter-btn" title="Filter">
                <svg width="16" height="15" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.33186 17C7.15505 17 6.98548 16.9298 6.86046 16.8047C6.73543 16.6797 6.6652 16.5101 6.6652 16.3333V9.92333L0.485195 3.12667C0.24192 2.85858 0.0816867 2.52565 0.0239433 2.16828C-0.0338 1.8109 0.0134288 1.44445 0.159898 1.1134C0.306367 0.782342 0.545779 0.500917 0.849077 0.303279C1.15237 0.10564 1.50652 0.000285075 1.86853 0H16.1285C16.4905 0.000285075 16.8447 0.10564 17.148 0.303279C17.4513 0.500917 17.6907 0.782342 17.8372 1.1134C17.9836 1.44445 18.0309 1.8109 17.9731 2.16828C17.9154 2.52565 17.7551 2.85858 17.5119 3.12667L11.3319 9.92333V13.6667C11.3318 13.7665 11.3093 13.8651 11.266 13.9551C11.2228 14.0451 11.1598 14.1243 11.0819 14.1867L7.74853 16.8533C7.63034 16.9482 7.48338 16.9999 7.33186 17ZM1.86853 1.33333C1.76479 1.33359 1.66335 1.36391 1.57648 1.42063C1.48962 1.47734 1.42105 1.55801 1.37908 1.65288C1.33711 1.74776 1.32354 1.85276 1.34001 1.95518C1.35647 2.05761 1.40227 2.15306 1.47186 2.23L7.8252 9.23C7.93405 9.3497 7.99565 9.5049 7.99853 9.66667V14.9467L9.99853 13.3333V9.66667C9.99813 9.50029 10.06 9.33978 10.1719 9.21667L16.5252 2.21667C16.5906 2.13939 16.6329 2.04517 16.647 1.94489C16.6612 1.84462 16.6467 1.74238 16.6052 1.65C16.5637 1.55762 16.497 1.47886 16.4126 1.42282C16.3283 1.36679 16.2298 1.33576 16.1285 1.33333H1.86853Z" fill="#928FA6"/>
                </svg>
              </button>
            </div>
            <button class="export-btn">EXPORT</button>
          </div>

          <!-- Toolbar -->
          <div class="toolbar">
            <div class="select-all">
              <input type="checkbox" id="selectAll">
              <label for="selectAll" class="m-0">Select All</label>
              <span class="products-count" id="productCount">234 Products</span>
            </div>
            <div class="bulk-actions">
              <button class="btn-secondary">Bulk Edit</button>
              <button class="btn-danger-secondary">Delete Selected</button>
            </div>
          </div>

          <!-- Products Table -->
          <div class="products-table" id="productsTable">
            <!-- Products will be dynamically inserted here -->
          </div>

          <!-- Pagination -->
          <div class="pagination-section">
            <div class="pagination-info">
              <span id="paginationInfo">Showing 1-5 of 234 products</span>
            </div>
            <div class="pagination">
              <button class="pagination-btn" id="prevBtn">? Previous</button>
              <button class="pagination-btn active" data-page="1">1</button>
              <button class="pagination-btn" data-page="2">2</button>
              <button class="pagination-btn" data-page="3">3</button>
              <button class="pagination-btn" id="nextBtn">Next ?</button>
            </div>
          </div>
        </div>
      </main>
</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>
    // Sample product data
    const allProducts = [
      { id: 1, name: 'Wireless Headphones Pro', sku: 'WHP-001', price: 149.99, stock: 45, status: 'Active' },
      { id: 2, name: 'Smart Watch Ultra', sku: 'SWU-002', price: 149.99, stock: 45, status: 'Active' },
      { id: 3, name: 'USB-C Cable 6ft', sku: 'WHP-003', price: 149.99, stock: 45, status: 'Out of Stock' },
      { id: 4, name: 'Laptop Stand Aluminum', sku: 'LSA-005', price: 149.99, stock: 45, status: 'Low Stock' },
      { id: 5, name: 'Mechanical Keyboard', sku: 'MK-006', price: 199.99, stock: 30, status: 'Active' },
      { id: 6, name: 'Wireless Mouse', sku: 'WM-007', price: 49.99, stock: 120, status: 'Active' },
      { id: 7, name: 'Monitor 27" 4K', sku: 'MON-008', price: 399.99, stock: 15, status: 'Low Stock' },
      { id: 8, name: 'USB Hub 7-Port', sku: 'UH-009', price: 39.99, stock: 0, status: 'Out of Stock' },
      { id: 9, name: 'Phone Stand', sku: 'PS-010', price: 19.99, stock: 200, status: 'Active' },
      { id: 10, name: 'Webcam HD 1080p', sku: 'WC-011', price: 79.99, stock: 60, status: 'Active' },
    ];

    let currentPage = 1;
    const itemsPerPage = 5;
    let filteredProducts = [...allProducts];

    // Initialize page
    document.addEventListener('DOMContentLoaded', function () {
      renderProducts();
      setupEventListeners();
    });

    function renderProducts() {
      const startIdx = (currentPage - 1) * itemsPerPage;
      const endIdx = startIdx + itemsPerPage;
      const productsToShow = filteredProducts.slice(startIdx, endIdx);

      const table = document.getElementById('productsTable');
      table.innerHTML = '';

      productsToShow.forEach(product => {
        const statusClass = `status-${product.status.toLowerCase().replace(/\s+/g, '-')}`;
        const row = document.createElement('div');
        row.className = 'product-row';
        row.innerHTML = `
                    <input type="checkbox" class="product-checkbox" data-id="${product.id}">
                    <div class="product-img">
                      <img src="images/profile-img.webp" width="80" height="80" alt="" />
                    </div>
                    <div class="product-info">
                        <div class="product-name">${product.name}</div>
                        <div class="product-sku">SKU: ${product.sku}</div>
                    </div>
                    <div class="product-price">$${product.price.toFixed(2)}
                    <span class="product-stock">Stock: ${product.stock}</span></div>
                    <div class="product-status">
                        <span class="status-badge ${statusClass}">${product.status}</span>
                    </div>
                    <div class="product-actions">
                        <button class="action-btn" title="Edit">
                            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M23.997 16.2344C23.6393 16.2344 23.3494 16.5242 23.3494 16.8819V22.6313C23.3482 23.7038 22.4793 24.5729 21.4068 24.5739H3.23767C2.16516 24.5729 1.29636 23.7038 1.29507 22.6313V5.7572C1.29636 4.68495 2.16523 3.8159 3.23767 3.8146H8.98713C9.34476 3.8146 9.63467 3.5247 9.63467 3.16707C9.63467 2.80963 9.34476 2.51953 8.98713 2.51953H3.23767C1.45035 2.52154 0.00200736 3.96988 0 5.7572V22.6316C0.00200736 24.4188 1.45035 25.8672 3.23767 25.8692H21.4068C23.1941 25.8672 24.6425 24.4188 24.6445 22.6316V16.8819C24.6445 16.5242 24.3546 16.2344 23.997 16.2344Z" fill="#4D9BFF"/>
                              <path d="M24.388 0.853483C23.25 -0.284494 21.405 -0.284494 20.2671 0.853483L8.71455 12.406C8.63547 12.485 8.57823 12.5832 8.54839 12.691L7.02921 18.1756C6.99855 18.286 6.99776 18.4026 7.02691 18.5135C7.05606 18.6243 7.11412 18.7254 7.19514 18.8065C7.27617 18.8875 7.37726 18.9456 7.48808 18.9748C7.59891 19.004 7.7155 19.0032 7.82594 18.9726L13.3106 17.4532C13.4183 17.4233 13.5165 17.3661 13.5956 17.287L25.1477 5.73434C26.284 4.59552 26.284 2.75212 25.1477 1.61336L24.388 0.853483ZM10.1255 12.8268L19.5803 3.37181L22.6295 6.42105L13.1745 15.8761L10.1255 12.8268ZM9.51639 14.0491L11.9524 16.4854L8.58278 17.419L9.51639 14.0491ZM24.2322 4.81866L23.5454 5.50531L20.4959 2.45581L21.183 1.7691C21.8151 1.13697 22.84 1.13697 23.4721 1.7691L24.2322 2.52891C24.8633 3.16181 24.8633 4.18602 24.2322 4.81866Z" fill="#4D9BFF"/>
                            </svg>
                        </button>
                        <button class="action-btn" title="More options">
                           <svg width="19" height="4" viewBox="0 0 19 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M1.875 3.75C2.875 3.75 3.75 2.875 3.75 1.875C3.75 0.875 2.875 0 1.875 0C0.875 0 0 0.875 0 1.875C0 2.875 0.875 3.75 1.875 3.75ZM9.375 3.75C10.375 3.75 11.25 2.875 11.25 1.875C11.25 0.875 10.375 0 9.375 0C8.375 0 7.5 0.875 7.5 1.875C7.5 2.875 8.375 3.75 9.375 3.75ZM16.875 3.75C17.875 3.75 18.75 2.875 18.75 1.875C18.75 0.875 17.875 0 16.875 0C15.875 0 15 0.875 15 1.875C15 2.875 15.875 3.75 16.875 3.75Z" fill="black"/>
                            </svg>
                        </button>
                    </div>
                `;
        table.appendChild(row);
      });

      updatePagination();
    }

    function updatePagination() {
      const totalPages = Math.ceil(filteredProducts.length / itemsPerPage);
      const startIdx = (currentPage - 1) * itemsPerPage + 1;
      const endIdx = Math.min(currentPage * itemsPerPage, filteredProducts.length);

      document.getElementById('paginationInfo').textContent =
        `Showing ${startIdx}-${endIdx} of ${filteredProducts.length} products`;

      // Update page buttons
      document.querySelectorAll('[data-page]').forEach(btn => {
        btn.classList.remove('active');
        if (parseInt(btn.dataset.page) === currentPage) {
          btn.classList.add('active');
        }
      });

      // Update prev/next buttons
      document.getElementById('prevBtn').disabled = currentPage === 1;
      document.getElementById('nextBtn').disabled = currentPage === totalPages;
    }

    function setupEventListeners() {
      // Search functionality
      document.getElementById('searchInput').addEventListener('input', function (e) {
        const query = e.target.value.toLowerCase();
        filteredProducts = allProducts.filter(p =>
          p.name.toLowerCase().includes(query) ||
          p.sku.toLowerCase().includes(query)
        );
        currentPage = 1;
        renderProducts();
      });

      // Select all checkbox
      document.getElementById('selectAll').addEventListener('change', function () {
        document.querySelectorAll('.product-checkbox').forEach(cb => {
          cb.checked = this.checked;
        });
      });

      // Pagination
      document.getElementById('prevBtn').addEventListener('click', function () {
        if (currentPage > 1) {
          currentPage--;
          renderProducts();
        }
      });

      document.getElementById('nextBtn').addEventListener('click', function () {
        const totalPages = Math.ceil(filteredProducts.length / itemsPerPage);
        if (currentPage < totalPages) {
          currentPage++;
          renderProducts();
        }
      });

      document.querySelectorAll('[data-page]').forEach(btn => {
        btn.addEventListener('click', function () {
          currentPage = parseInt(this.dataset.page);
          renderProducts();
        });
      });

      // Delete selected button
      document.querySelector('.btn-danger-secondary').addEventListener('click', function () {
        const selected = document.querySelectorAll('.product-checkbox:checked');
        if (selected.length === 0) {
          alert('Please select products to delete');
          return;
        }
        if (confirm(`Delete ${selected.length} selected product(s)?`)) {
          const selectedIds = Array.from(selected).map(cb => parseInt(cb.dataset.id));
          allProducts.splice(0, allProducts.length, ...allProducts.filter(p => !selectedIds.includes(p.id)));
          filteredProducts = [...allProducts];
          currentPage = 1;
          renderProducts();
          document.getElementById('selectAll').checked = false;
        }
      });

      // Bulk Edit button
      document.querySelector('.btn-secondary').addEventListener('click', function () {
        const selected = document.querySelectorAll('.product-checkbox:checked');
        if (selected.length === 0) {
          alert('Please select products to edit');
        } else {
          alert(`Edit ${selected.length} selected product(s)`);
        }
      });

      // Edit button
      document.addEventListener('click', function (e) {
        if (e.target.closest('.fa-edit')) {
          const productId = e.target.closest('.action-btn').parentElement.parentElement.querySelector('.product-checkbox').dataset.id;
          alert(`Edit product ${productId}`);
        }
      });

      // More options button
      document.addEventListener('click', function (e) {
        if (e.target.closest('.fa-ellipsis-v')) {
          alert('More options menu would open here');
        }
      });

      // Add Product button
      document.querySelector('.btn-orange').addEventListener('click', function () {
        alert('Add Product modal would open here');
      });

      // Bulk Upload button
      document.querySelector('.btn-outline-orange').addEventListener('click', function () {
        alert('Bulk Upload modal would open here');
      });

      // Export button
      document.querySelector('.export-btn').addEventListener('click', function () {
        alert('Export functionality would be implemented here');
      });
    }
</script>
@endsection