{% extends "shopyo_base/module_base.html" %}
{% set active_page ='products' %}
{% block pagehead %}
<title>Upload Products</title>
<style>
  .loader,
  .loader:before,
  .loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
  }
  .loader {
    color: #fcba03;
    font-size: 10px;
    margin: 30px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  .loader:before,
  .loader:after {
    content: '';
    position: absolute;
    top: 0;
  }
  .loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .loader:after {
    left: 3.5em;
  }
  @-webkit-keyframes load7 {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
    40% { box-shadow: 0 2.5em 0 0; }
  }
  @keyframes load7 {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
    40% { box-shadow: 0 2.5em 0 0; }
  }
</style>
{% endblock %}
{% block sidebar %}
{%include 'category/blocks/sidebar.html'%}
{%endblock%}
{% block module_content %}
<div class="max-w-2xl mx-auto">
  <div class="card">
    <div class="card-body">
      <div class="mb-8">
        <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Upload Products</h3>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Bulk import from spreadsheet</p>
      </div>

      <div id="request-loader"></div>

      <form action="{{url_for('shopyo_ecommerce.category.upload_check')}}" method="POST" enctype="multipart/form-data" class="space-y-6">
        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">
            Product File
            <a href="{{ url_for('static', filename='default/data/products.xlsx') }}" class="text-primary hover:underline ml-2">download sample data</a>
          </label>
          <div class="relative">
            <i class="fa fa-file-excel absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
            {{ product_form.product_file(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none file:mr-4 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-[10px] file:font-bold file:bg-primary/10 file:text-primary hover:file:bg-primary/20") }}
          </div>
        </div>

        {{ product_form.csrf_token }}

        <button id="upload-btn" type="submit" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 active:scale-[0.98] text-xs uppercase tracking-widest">
          <i class="fas fa-upload mr-2"></i>Upload
        </button>
      </form>

      <script>
        document.getElementById('upload-btn')?.addEventListener('click', function() {
          var input = document.querySelector('input[type="file"]');
          if (input && input.files.length > 0) {
            document.getElementById('request-loader').innerHTML =
              '<div class="loader"></div><p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center">Processing...</p>';
          }
        });
      </script>
    </div>
  </div>
</div>
{% endblock %}