@extends('admin.layouts.app')

@section('title', 'Add Product')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<div class="page-header">
          <div class="page-title">
            <h1>Add New Product</h1>
            <p>Create a new product listing</p>
          </div>
          <div class="btn-group-top">
            <button class="btn-typ1">
              BULK UPLOAD
            </button>
            <button class="btn-typ2">
              + ADD PRODUCT
            </button>
          </div>
        </div>

        <form id="addProductForm">
          <!-- Basic Information -->
          <div class="card mb-4">
            <div class="card-body">
              <h5 class="section-title">Basic Information</h5>
              <div class="row mb-3">
                <div class="col-12">
                  <label class="form-label required">Product Name</label>
                  <input type="text" class="form-control" placeholder="Enter product name" required>
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-md-6">
                  <label class="form-label required">SKU</label>
                  <input type="text" class="form-control" placeholder="Product SKU" required>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Barcode (UPC/EAN)</label>
                  <input type="text" class="form-control" placeholder="Barcode number">
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <label class="form-label required">Product Description</label>
                  <textarea class="form-control" rows="4"
                    placeholder="Describe your product features, benefits, and specifications..." required></textarea>
                </div>
              </div>
            </div>
          </div>

          <!-- Product Images -->
          <div class="card mb-4">
            <div class="card-body">
              <h5 class="section-title required">Product Images</h5>
              <div class="row g-2">
                <div class="col-md-2">
                  <div class="upload-box" onclick="triggerFileUpload(this)">
                    <div class="upload-placeholder">
                      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_107_6223)">
                          <path
                            d="M24.8442 16.5498C23.5306 16.5498 22.2548 16.8046 21.0523 17.3068C20.6542 17.4732 20.4663 17.9307 20.6325 18.3289C20.7988 18.7271 21.2564 18.9147 21.6546 18.7486C22.6653 18.3264 23.7385 18.1123 24.8442 18.1123C29.4106 18.1123 33.1255 21.8273 33.1255 26.3936C33.1255 30.9598 29.4106 34.6748 24.8442 34.6748C20.2779 34.6748 16.563 30.9598 16.563 26.3936C16.563 25.2895 16.7764 24.2178 17.1974 23.2084C17.3635 22.8101 17.1753 22.3527 16.7771 22.1866C16.3792 22.0207 15.9214 22.2087 15.7553 22.6069C15.2545 23.8079 15.0005 25.0819 15.0005 26.3936C15.0005 31.8214 19.4163 36.2373 24.8442 36.2373C30.2721 36.2373 34.688 31.8214 34.688 26.3936C34.688 20.9657 30.2721 16.5498 24.8442 16.5498Z"
                            fill="#717171" />
                          <path
                            d="M24.8442 32.7998C28.3767 32.7998 31.2505 29.926 31.2505 26.3936C31.2505 22.8611 28.3767 19.9873 24.8442 19.9873C21.3118 19.9873 18.438 22.8611 18.438 26.3936C18.438 29.926 21.3119 32.7998 24.8442 32.7998ZM24.8442 21.5498C27.5151 21.5498 29.688 23.7228 29.688 26.3936C29.688 29.0643 27.5151 31.2373 24.8442 31.2373C22.1734 31.2373 20.0005 29.0644 20.0005 26.3936C20.0005 23.7227 22.1734 21.5498 24.8442 21.5498Z"
                            fill="#717171" />
                          <path
                            d="M36.0378 12.7998H33.6613L30.9335 8.18363C30.8644 8.06672 30.7661 7.96983 30.6481 7.90252C30.5302 7.83521 30.3967 7.79981 30.2609 7.7998H19.4276C19.2918 7.7998 19.1583 7.8352 19.0404 7.90251C18.9224 7.96982 18.8241 8.06671 18.755 8.18363L16.0273 12.7998H11.5625V11.8623C11.5625 10.3114 10.3009 9.0498 8.75 9.0498C7.19914 9.0498 5.9375 10.3114 5.9375 11.8623V12.7998H3.96219C1.77742 12.7998 0 14.5772 0 16.7621V36.025C0 38.2099 1.77742 39.9873 3.96219 39.9873H36.0377C38.2225 39.9873 39.9999 38.2099 39.9999 36.025V16.7621C40 14.5772 38.2225 12.7998 36.0378 12.7998ZM19.8734 9.3623H29.8151L31.8463 12.7998H17.8421L19.8734 9.3623ZM7.5 11.8623C7.5 11.1731 8.06078 10.6123 8.75 10.6123C9.43922 10.6123 10 11.1731 10 11.8623V12.7998H7.5V11.8623ZM38.4375 36.025C38.4375 37.3483 37.361 38.4248 36.0378 38.4248H3.96219C2.63898 38.4248 1.5625 37.3482 1.5625 36.025V16.7621C1.5625 15.4388 2.63898 14.3623 3.96219 14.3623H36.0377C37.3609 14.3623 38.4374 15.4388 38.4374 16.7621V36.025H38.4375Z"
                            fill="#717171" />
                          <path
                            d="M24.8442 24.8702C25.6843 24.8702 26.3677 25.5536 26.3677 26.3936C26.3677 26.8251 26.7174 27.1749 27.1489 27.1749C27.5804 27.1749 27.9302 26.8251 27.9302 26.3936C27.9302 24.6921 26.5458 23.3077 24.8442 23.3077C24.4127 23.3077 24.063 23.6575 24.063 24.0889C24.063 24.5203 24.4127 24.8702 24.8442 24.8702ZM24.8442 5.74447C25.2757 5.74447 25.6255 5.39463 25.6255 4.96322V0.793457C25.6255 0.362051 25.2757 0.012207 24.8442 0.012207C24.4127 0.012207 24.063 0.361973 24.063 0.793457V4.96322C24.063 5.39471 24.4127 5.74447 24.8442 5.74447ZM28.5618 5.74447C28.6644 5.7446 28.766 5.72445 28.8608 5.68518C28.9556 5.64591 29.0417 5.58829 29.1142 5.51564L31.9807 2.64916C32.2858 2.34408 32.2858 1.84939 31.9806 1.54424C31.6755 1.23924 31.1809 1.23924 30.8758 1.54424L28.0094 4.4108C27.7043 4.71588 27.7043 5.21057 28.0094 5.51572C28.0819 5.58836 28.168 5.64595 28.2628 5.68521C28.3576 5.72447 28.4592 5.74461 28.5618 5.74447ZM20.5742 5.51572C20.7268 5.66822 20.9267 5.74455 21.1266 5.74455C21.3266 5.74455 21.5266 5.66822 21.6791 5.51572C21.9841 5.21064 21.9842 4.71596 21.6791 4.4108L18.8127 1.54432C18.5076 1.23939 18.0129 1.23932 17.7078 1.54432C17.4027 1.84939 17.4027 2.34408 17.7077 2.64924L20.5742 5.51572ZM10.7812 19.2061H6.71875C6.28727 19.2061 5.9375 19.556 5.9375 19.9874C5.9375 20.4188 6.28727 20.7686 6.71875 20.7686H10.7812C11.2127 20.7686 11.5625 20.4188 11.5625 19.9874C11.5625 19.5559 11.2127 19.2061 10.7812 19.2061ZM18.4344 20.7685C18.6398 20.7685 18.8414 20.6849 18.9867 20.5396C19.132 20.3943 19.2156 20.1935 19.2156 19.9873C19.2156 19.7818 19.132 19.5803 18.9867 19.4349C18.8414 19.2897 18.6398 19.206 18.4344 19.206C18.2289 19.206 18.0273 19.2896 17.882 19.4349C17.7358 19.5816 17.6535 19.7802 17.6531 19.9873C17.6531 20.1928 17.7359 20.3943 17.882 20.5396C18.0273 20.6849 18.2281 20.7685 18.4344 20.7685Z"
                            fill="#717171" />
                        </g>
                      </svg>

                      <small class="d-block mt-2 text-success">Main Image</small>
                    </div>
                  </div>
                  <input type="file" accept="image/*" style="display:none;" onchange="previewImage(this)">
                </div>
                <div class="col-md-2">
                  <div class="upload-box" onclick="triggerFileUpload(this)">
                    <div class="upload-placeholder">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.208 18V9.792H0V8.172H8.208V0H9.828V8.172H18V9.792H9.828V18H8.208Z" fill="#D1D5DC"/>
</svg>
                    </div>
                  </div>
                  <input type="file" accept="image/*" style="display:none;" onchange="previewImage(this)">
                </div>
                <div class="col-md-2">
                  <div class="upload-box" onclick="triggerFileUpload(this)">
                    <div class="upload-placeholder">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.208 18V9.792H0V8.172H8.208V0H9.828V8.172H18V9.792H9.828V18H8.208Z" fill="#D1D5DC"/>
</svg>
                    </div>
                  </div>
                  <input type="file" accept="image/*" style="display:none;" onchange="previewImage(this)">
                </div>
                <div class="col-md-2">
                  <div class="upload-box" onclick="triggerFileUpload(this)">
                    <div class="upload-placeholder">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.208 18V9.792H0V8.172H8.208V0H9.828V8.172H18V9.792H9.828V18H8.208Z" fill="#D1D5DC"/>
</svg>
                    </div>
                  </div>
                  <input type="file" accept="image/*" style="display:none;" onchange="previewImage(this)">
                </div>
                <div class="col-md-2">
                  <div class="upload-box" onclick="triggerFileUpload(this)">
                    <div class="upload-placeholder">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.208 18V9.792H0V8.172H8.208V0H9.828V8.172H18V9.792H9.828V18H8.208Z" fill="#D1D5DC"/>
</svg>
                    </div>
                  </div>
                  <input type="file" accept="image/*" style="display:none;" onchange="previewImage(this)">
                </div>
                <div class="col-md-2">
                  <div class="upload-box" onclick="triggerFileUpload(this)">
                    <div class="upload-placeholder">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.208 18V9.792H0V8.172H8.208V0H9.828V8.172H18V9.792H9.828V18H8.208Z" fill="#D1D5DC"/>
</svg>
                    </div>
                  </div>
                  <input type="file" accept="image/*" style="display:none;" onchange="previewImage(this)">
                </div>
              </div>
              <small class="text-muted d-block mt-3">Upload up to 6 images. First image will be used as main product
                image. Max 2MB each.</small>
            </div>
          </div>

          <!-- Category & Attributes -->
          <div class="card mb-4">
            <div class="card-body">
              <h5 class="section-title">Category & Attributes</h5>
              <div class="row mb-3">
                <div class="col-md-6">
                  <label class="form-label required">Category</label>
                  <select class="form-select" required>
                    <option value="">Select category</option>
                    <option value="electronics">Electronics</option>
                    <option value="fashion">Fashion & Apparel</option>
                    <option value="home">Home & Living</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Sub-Category</label>
                  <select class="form-select">
                    <option value="">Select sub-category</option>
                  </select>
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-12">
                  <label class="form-label">Brand</label>
                  <select class="form-select">
                    <option value="">Enter or select brand</option>
                  </select>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <label class="form-label">Color</label>
                  <select class="form-select">
                    <option value="">Select colors</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label class="form-label">Size</label>
                  <select class="form-select">
                    <option value="">Select sizes</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label class="form-label">Material</label>
                  <select class="form-select">
                    <option value="">Enter material</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <!-- Pricing -->
          <div class="card mb-4">
            <div class="card-body">
              <h5 class="section-title">Pricing</h5>
              <div class="row">
                <div class="col-md-4">
                  <label class="form-label required">Regular Price</label>
                  <input type="number" class="form-control" placeholder="$0.00" step="0.01" required>
                </div>
                <div class="col-md-4">
                  <label class="form-label">Sale Price</label>
                  <input type="number" class="form-control" placeholder="$0.00" step="0.01">
                </div>
                <div class="col-md-4">
                  <label class="form-label">Cost per Item</label>
                  <input type="number" class="form-control" placeholder="$0.00" step="0.01">
                </div>
              </div>
            </div>
          </div>

          <!-- Inventory -->
          <div class="card mb-4">
            <div class="card-body">
              <h5 class="section-title">Inventory</h5>
              <div class="row">
                <div class="col-md-4">
                  <label class="form-label required">Stock Quantity</label>
                  <input type="number" class="form-control" placeholder="0" required>
                </div>
                <div class="col-md-4">
                  <label class="form-label">Low Stock Alert</label>
                  <input type="number" class="form-control" placeholder="10">
                </div>
                <div class="col-md-4">
                  <label class="form-label">Weight (kg)</label>
                  <input type="number" class="form-control" placeholder="0.0" step="0.01">
                </div>
              </div>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="btn-group-custom mb-4">
            <div></div>
            <div>
              
            <button type="button" class="btn-typ1">Cancel</button>
            <button type="button" class="btn-typ2">Save as Draft</button>
            <button type="submit" class="btn-typ2">Publish Product</button>
            </div>
          </div>
        </form>
</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>
    document.getElementById('addProductForm').addEventListener('submit', function (e) {
      e.preventDefault();
      alert('Product saved successfully!');
    });

    // Trigger file input click
    function triggerFileUpload(element) {
      const fileInput = element.nextElementSibling;
      fileInput.click();
    }

    // Preview image after upload
    function previewImage(fileInput) {
      const file = fileInput.files[0];
      if (file) {
        // Check file size (max 2MB)
        if (file.size > 2 * 1024 * 1024) {
          alert('File size should not exceed 2MB');
          return;
        }

        // Check file type
        if (!file.type.startsWith('image/')) {
          alert('Please select a valid image file');
          return;
        }

        // Create FileReader
        const reader = new FileReader();
        reader.onload = function (e) {
          const uploadBox = fileInput.previousElementSibling;

          // Remove existing content
          uploadBox.innerHTML = '';

          // Create and add image
          const img = document.createElement('img');
          img.src = e.target.result;
          img.style.cursor = 'pointer';
          img.title = 'Click to change image';

          uploadBox.appendChild(img);

          // Add click to change
          uploadBox.onclick = function () {
            if (confirm('Do you want to change this image?')) {
              triggerFileUpload(this);
            }
          };
        };
        reader.readAsDataURL(file);
      }
    }
</script>
@endsection