@extends('admin.layouts.app')

@section('title', 'Bulk Upload Products')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<div class="main-content">
          <div class="page-header">
            <div class="page-title">
              <h1>Bulk Upload Products</h1>
              <p>Upload multiple products using CSV or Excel file</p>
            </div>
          </div>


          <!-- Instructions -->
          <div class="card section-card">
            <div class="card-body">
              <h5 class="fw-bold mb-3">How to Bulk Upload</h5>

              <ol class="step-list">
                <li>Download the template file and fill in your product information</li>
                <li>Ensure all required fields are completed (marked with *)</li>
                <li>Upload your file using the form below</li>
                <li>Review and confirm the products before publishing</li>
              </ol>
            </div>
          </div>

          <!-- Download Template -->
          <div class="card section-card">
            <div class="card-body">

              <div class="row align-items-center">

                <div class="col-md">
                  <div class="download-template">
                    <h5 class="fw-bold mb-2">Download Template</h5>
                    <small>
                      Use our template to ensure proper formatting
                    </small>
                  </div>
                </div>

                <div class="col-auto pt-2 px-0">
                  <button class="btn-typ2">
                    📄 Download CSV
                  </button>

                  <button class="btn-typ2">
                    📊 Download Excel
                  </button>
                </div>

              </div>

            </div>
          </div>

          <!-- Upload -->
          <div class="card section-card">
            <div class="card-body">

              <h5 class="fw-bold mb-3">
                Upload Product File
              </h5>

              <div id="alertBox"></div>

              <div id="uploadArea" class="upload-area d-flex flex-column justify-content-center align-items-center">

                <svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_109_6620)">
                    <path
                      d="M73.0719 28.0585C72.6432 27.4819 72.085 27.014 71.4423 26.6927C70.7997 26.3713 70.0905 26.2055 69.3719 26.2085H64.75V21.5835C64.748 19.9486 64.0976 18.3813 62.9416 17.2253C61.7855 16.0692 60.2182 15.4189 58.5833 15.4168H35.0698C34.6111 15.4174 34.1581 15.3153 33.7441 15.1179C33.33 14.9204 32.9655 14.6328 32.6772 14.276L29.6555 10.5575C28.9347 9.66624 28.0234 8.94773 26.9886 8.45473C25.9538 7.96172 24.8216 7.70674 23.6754 7.70851H6.16667C4.53179 7.71054 2.96446 8.3609 1.80843 9.51693C0.652395 10.673 0.00203977 12.2403 0 13.8752L0 59.4638C0.00204022 61.2741 0.722076 63.0096 2.00214 64.2897C3.28221 65.5698 5.01776 66.2898 6.82804 66.2918H58.7252C60.2019 66.2865 61.6375 65.8051 62.8189 64.9192C64.0003 64.0333 64.8646 62.79 65.2834 61.3739L73.8135 32.1285C74.0176 31.4396 74.0569 30.7123 73.9284 30.0053C73.7999 29.2984 73.5055 28.6315 73.0719 28.0585ZM6.8265 63.2085C5.83386 63.2073 4.88225 62.8123 4.18049 62.1103C3.47873 61.4082 3.08415 60.4564 3.08333 59.4638V13.8752C3.08415 13.0577 3.40926 12.2739 3.98732 11.6958C4.56538 11.1178 5.34917 10.7927 6.16667 10.7918H23.6723C24.3608 10.7901 25.0409 10.9427 25.6626 11.2386C26.2842 11.5345 26.8316 11.9661 27.2644 12.5015L30.283 16.2216C30.8601 16.9347 31.5896 17.5095 32.418 17.9038C33.2463 18.2981 34.1524 18.5019 35.0698 18.5002H58.5833C59.4008 18.501 60.1846 18.8261 60.7627 19.4042C61.3407 19.9822 61.6659 20.766 61.6667 21.5835V26.2085H25.5485C24.0723 26.2145 22.6374 26.6962 21.4566 27.5821C20.2758 28.468 19.412 29.7109 18.9933 31.1264L10.4217 60.5121C10.192 61.2881 9.71845 61.9695 9.07115 62.4551C8.42385 62.9408 7.63574 63.205 6.8265 63.2085ZM70.8519 31.2652L62.3234 60.5106C62.0935 61.2877 61.6191 61.97 60.9706 62.456C60.3221 62.9421 59.5341 63.206 58.7236 63.2085H12.5338C12.9075 62.6437 13.1938 62.0257 13.3832 61.3755L21.9549 31.9898C22.1845 31.2136 22.658 30.5321 23.3053 30.0461C23.9525 29.5602 24.7391 29.2957 25.5485 29.2918H69.375C69.6143 29.2918 69.8504 29.3476 70.0645 29.4546C70.2785 29.5616 70.4647 29.717 70.6083 29.9085C70.7519 30.1 70.849 30.3223 70.8918 30.5577C70.9346 30.7932 70.922 31.0354 70.855 31.2652H70.8519Z"
                      fill="#A7A7A7" />
                  </g>
                </svg>

                <div class="fw-semibold mt-3">
                  Click to upload or drag and drop
                </div>

                <small class="text-muted mb-3">
                  CSV or Excel files (Max 10MB)
                </small>

                <button type="button" id="browseBtn" class="btn-orange me-2">
                  Browse Files
                </button>

                <input type="file" id="fileInput" class="d-none" accept=".csv,.xls,.xlsx">
              </div>

              <div id="fileInfo" class="file-info mt-3">

                <div class="alert alert-success d-flex justify-content-between align-items-center">

                  <div>
                    <strong id="selectedFileName"></strong>
                  </div>

                  <button class="btn btn-sm btn-outline-danger" id="removeFile">
                    Remove
                  </button>

                </div>

                <button id="uploadBtn" class="btn btn-primary">
                  Upload File
                </button>

              </div>

            </div>
          </div>

          <!-- Recent Uploads -->
          <div class="card section-card">
            <div class="card-body">

              <h5 class="fw-bold mb-4">
                Recent Uploads
              </h5>

              <div id="uploadsContainer"></div>

            </div>
          </div>

          <!-- Tips -->
          <div class="tips-card p-4">

            <div class="d-flex align-items-center mb-3">
              <i class="bi bi-lightbulb text-warning me-2"></i>
              <strong>💡  Tips for Successful Upload</strong>
            </div>

            <ul>
              <li>Ensure SKUs are unique and don't already exist</li>
              <li>Use valid category names from your store</li>
              <li>Price format should be numbers only (e.g. 99.99)</li>
              <li>Stock quantity must be a positive integer</li>
            </ul>

          </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>

    let selectedFile = null;

    const uploads = [
      {
        id: 1,
        fileName: "electronics-products.csv",
        date: "April 5, 2026",
        products: 156,
        status: "success"
      },
      {
        id: 2,
        fileName: "fashion-items.xlsx",
        date: "April 3, 2026",
        products: 89,
        status: "success"
      },
      {
        id: 3,
        fileName: "home-goods.csv",
        date: "April 1, 2026",
        products: 156,
        status: "failed"
      }
    ];

    const uploadArea = document.getElementById("uploadArea");
    const fileInput = document.getElementById("fileInput");
    const browseBtn = document.getElementById("browseBtn");
    const fileInfo = document.getElementById("fileInfo");

    browseBtn.onclick = () => fileInput.click();

    uploadArea.onclick = (e) => {
      if (e.target.tagName !== "BUTTON") {
        fileInput.click();
      }
    };

    uploadArea.addEventListener("dragover", (e) => {
      e.preventDefault();
      uploadArea.classList.add("dragover");
    });

    uploadArea.addEventListener("dragleave", () => {
      uploadArea.classList.remove("dragover");
    });

    uploadArea.addEventListener("drop", (e) => {
      e.preventDefault();
      uploadArea.classList.remove("dragover");

      if (e.dataTransfer.files.length) {
        processFile(e.dataTransfer.files[0]);
      }
    });

    fileInput.addEventListener("change", (e) => {
      if (e.target.files.length) {
        processFile(e.target.files[0]);
      }
    });

    function processFile(file) {

      const ext = file.name.split('.').pop().toLowerCase();

      if (!["csv", "xls", "xlsx"].includes(ext)) {
        showAlert("Invalid file format", "danger");
        return;
      }

      if (file.size > 10485760) {
        showAlert("File exceeds 10MB limit", "danger");
        return;
      }

      selectedFile = file;

      document.getElementById("selectedFileName").textContent = file.name;

      fileInfo.style.display = "block";

      showAlert("File selected successfully", "success");
    }

    document.getElementById("removeFile").onclick = () => {
      selectedFile = null;
      fileInput.value = "";
      fileInfo.style.display = "none";
    };

    document.getElementById("uploadBtn").onclick = () => {

      if (!selectedFile) return;

      uploads.unshift({
        id: Date.now(),
        fileName: selectedFile.name,
        date: new Date().toLocaleDateString(),
        products: Math.floor(Math.random() * 200) + 1,
        status: "success"
      });

      renderUploads();

      showAlert("File uploaded successfully", "success");

      selectedFile = null;
      fileInput.value = "";
      fileInfo.style.display = "none";
    };

    function renderUploads() {

      const container = document.getElementById("uploadsContainer");

      container.innerHTML = "";

      uploads.forEach(item => {

        container.innerHTML += `
        <div class="upload-item row align-items-center">

            <div class="col-auto">
                <div class="file-icon">
                    <i class="bi bi-file-earmark"></i>
                </div>
            </div>

            <div class="col">
                <div class="fw-semibold">${item.fileName}</div>
                <small class="text-muted">${item.date}</small>
            </div>

            <div class="col-auto">
                <span class="products-count">
                    ${item.products} products
                </span>
            </div>

            <div class="col-auto">
                ${item.status === "success"
            ? '<span class="status-success">Success</span>'
            : '<span class="status-failed">Failed</span>'
          }
            </div>

            <div class="col-auto view_btn">
                <a href="#" onclick="viewUpload(${item.id})">
                    View
                </a>

                ${item.status === "failed"
            ? `<a href="#" class="text-danger ms-3"
                        onclick="retryUpload(${item.id})">
                        Retry
                       </a>`
            : ""
          }
            </div>

        </div>`;
      });
    }

    function viewUpload(id) {
      const file = uploads.find(x => x.id === id);
      alert(file.fileName);
    }

    function retryUpload(id) {

      const file = uploads.find(x => x.id === id);

      file.status = "success";

      renderUploads();

      showAlert("Upload retried successfully", "success");
    }

    function showAlert(message, type) {

      document.getElementById("alertBox").innerHTML =
        `<div class="alert alert-${type}">
        ${message}
     </div>`;

      setTimeout(() => {
        document.getElementById("alertBox").innerHTML = "";
      }, 3000);
    }

    renderUploads();
</script>
@endsection