@extends('vendor.layouts.app')

@section('title', 'Pricing & Discounts')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<div class="main-content">
          <!-- Header -->
          <div class="page-header">
          <div class="page-title">
            <h1>Pricing & Discounts</h1>
            <p>Set competitive prices and promotional offers</p>
          </div>
        </div>

          <form id="pricingForm">
            <!-- Base Pricing -->
            <div class="card mb-4">
              <div class="card-body">
                <h2 class="section-title mb-4">Base Pricing</h2>
                <div class="row g-4">
                  <div class="col-md-4">
                    <label class="form-label required">Regular Price</label>
                    <input type="number" class="form-control" placeholder="$149.99" step="0.01" required>
                    <small class="field-help">Customer sees this price</small>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Cost Price</label>
                    <input type="number" class="form-control" placeholder="$129.99" step="0.01">
                    <small class="field-help">Your cost per unit</small>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Profit Margin</label>
                    <input type="text" class="form-control val green" value="38%" readonly>
                    <small class="field-help">Calculated automatically</small>
                  </div>
                </div>
              </div>
            </div>

            <!-- Sale/Discount Pricing -->
            <div class="card mb-4">
              <div class="card-body">
                <div class="toggle-container mb-4">
                  <h2 class="section-title mb-0">Sale/Discount Pricing</h2>
                  <div class="toggle-switch active" id="saleToggle" onclick="toggleSale()"></div>
                </div>
                <div class="row g-4">
                  <div class="col-md-6">
                    <label class="form-label">Sale Price</label>
                    <input type="number" class="form-control" placeholder="$0.00" step="0.01">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Discount Percentage</label>
                    <input type="number" class="form-control" placeholder="0%">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Sale Start Date</label>
                    <input type="text" class="form-control" placeholder="Select date" onfocus="this.type='date'"
                      onblur="if(!this.value)this.type='text'">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Sale End Date</label>
                    <input type="text" class="form-control" placeholder="Select date" onfocus="this.type='date'"
                      onblur="if(!this.value)this.type='text'">
                  </div>
                </div>
                <div class="sale-note">
                 ?? Schedule your sale to automatically start and end at specific dates
                </div>
              </div>
            </div>

            <!-- Bulk Pricing Tiers -->
            <div class="card mb-4">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap">
                  <div>
                    <h2 class="section-title">Bulk Pricing Tiers</h2>
                    <p class="section-subtitle">Offer discounts for larger quantities</p>
                  </div>
                  <button type="button" class="btn-add-tier" onclick="addTier()">+ Add Tier</button>
                </div>

                <div id="tiers" class="mt-4">
                  <div class="tier-row">
                    <div class="tier-item">
                      <div class="tier-value">10</div>
                      <div class="tier-label">Min Qty.</div>
                    </div>
                    <div class="tier-item">
                      <div class="tier-value">49</div>
                      <div class="tier-label">Max Qty.</div>
                    </div>
                    <div class="tier-item">
                      <div class="tier-value tier-discount">5%</div>
                      <div class="tier-label">Discount</div>
                    </div>
                    <div class="tier-item">
                      <div class="tier-value">$142.49</div>
                      <div class="tier-label">Price Per Unit</div>
                    </div>
                    <div class="tier-actions">
                      <a class="edit-link" onclick="editTier()">Edit</a>
                      <a class="remove-link" onclick="removeTier(this)">Remove</a>
                    </div>
                  </div>
                  <div class="tier-row">
                    <div class="tier-item">
                      <div class="tier-value">10</div>
                      <div class="tier-label">Min Qty.</div>
                    </div>
                    <div class="tier-item">
                      <div class="tier-value">49</div>
                      <div class="tier-label">Max Qty.</div>
                    </div>
                    <div class="tier-item">
                      <div class="tier-value tier-discount">5%</div>
                      <div class="tier-label">Discount</div>
                    </div>
                    <div class="tier-item">
                      <div class="tier-value">$142.49</div>
                      <div class="tier-label">Price Per Unit</div>
                    </div>
                    <div class="tier-actions">
                      <a class="edit-link" onclick="editTier()">Edit</a>
                      <a class="remove-link" onclick="removeTier(this)">Remove</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Tax Settings -->
            <div class="card mb-4">
              <div class="card-body">
                <h2 class="section-title mb-4">Tax Settings</h2>
                <div class="toggle-container mb-4">
                  <div>
                    <p class="mb-1 toggle-tit1">Product is Taxable</p>
                    <p class="mb-0 toggle-desc">Apply standard tax rates to this product
                    </p>
                  </div>
                  <div class="toggle-switch active" id="taxToggle" onclick="toggleTax()"></div>
                </div>
                <div>
                  <label class="form-label">Tax Class</label>
                  <select class="form-select">
                    <option>Standard Rate (18%)</option>
                    <option>Reduced Rate (5%)</option>
                    <option>Zero Rate (0%)</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Pricing Summary -->
            <div class="pricing-summary">
              <div class="summary-title">Pricing Summary</div>
              <div class="summary-row"><span>Base Price</span><span class="val">$149.99</span></div>
              <div class="summary-row"><span>Sale Price</span><span class="val green">$129.99</span></div>
              <div class="summary-row"><span>Tax (18%)</span><span class="val">$23.40</span></div>
              <div class="summary-row total"><span>Customer Pays</span><span class="val">$153.39</span></div>
            </div>

            <!-- Action Buttons -->
            <div class="btn-group-custom pricing-align">
              <button type="button" class="btn-typ1">Cancel</button>
              <button type="submit" class="btn-typ2">Save Pricing</button>
            </div>
          </form>
        </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>
    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