{% extends 'panel/base.html' %}
{% load static %}

{% block css %}
<link rel="stylesheet" href="/static/panel/assets/libs/quill/quill.snow.css">
<link rel="stylesheet" href="/static/panel/assets/libs/quill/quill.bubble.css">

<!-- Filepond CSS -->
<link rel="stylesheet" href="/static/panel/assets/libs/filepond/filepond.min.css">
<link rel="stylesheet"
  href="/static/panel/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css">
<link rel="stylesheet" href="/static/panel/assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.css">
<!-- Date & Time Picker CSS -->
<link rel="stylesheet" href="/static/panel/assets/libs/flatpickr/flatpickr.min.css">

{% endblock css %}

{% block content %}
<!-- Start::app-content -->
<div class="main-content app-content">
  <div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
      <h1 class="page-title fw-semibold fs-18 mb-0">Add Product</h1>
      <div class="ms-md-1 ms-0">
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Ecommerce</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add Product</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card custom-card">
          <div class="card-body add-products p-0">
            <form action="">
              <div class="p-4">
                <div class="row gx-5">




                  <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-6">
                    <div class="card custom-card shadow-none mb-0 border-0">
                      <div class="card-body p-0">
                        <div class="row gy-3">

                          <form class="row g-3 mt-0">
                            <div class="col-md-6">
                              <label class="form-label">Title</label>
                              <input type="text" class="form-control" placeholder="Title" aria-label="Title">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Short Description</label>
                              <input type="text" class="form-control" placeholder="Short Description"
                                aria-label="Short Description">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Price</label>
                              <input type="text" class="form-control" placeholder="Price" aria-label="Price">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Points</label>
                              <input type="number" class="form-control" placeholder="Points" aria-label="Points">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Discount</label>
                              <input type="checkbox" class="form-check-input" id="discount">
                              <label class="form-check-label" for="discount">Check if there's a discount</label>
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Discount Price</label>
                              <input type="text" class="form-control" placeholder="Discount Price"
                                aria-label="Discount Price">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Image</label>
                              <input type="file" class="filepond-image" id="image" accept="image/*">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Stock</label>
                              <input type="checkbox" class="form-check-input" id="stock">
                              <label class="form-check-label" for="stock">Check if in stock</label>
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Star</label>
                              <input type="number" class="form-control" placeholder="Star" aria-label="Star">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Remark</label>
                              <select id="remark" class="form-select" data-trigger-choice>
                                <option value="popular">Popular</option>
                                <option value="new">New</option>
                                <option value="top">Top</option>
                                <option value="special">Special</option>
                                <option value="trending">Trending</option>
                                <option value="regular">Regular</option>
                              </select>
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Category</label>
                              <select id="category" class="form-select" data-trigger-choice>
                                <option selected>Choose...</option>
                                <!-- Populate with category options -->
                              </select>
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Brand</label>
                              <select id="brand" class="form-select" data-trigger-choice>
                                <option selected>Choose...</option>
                                <!-- Populate with brand options -->
                              </select>
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Image 1</label>
                              <input type="file" class="filepond-image" id="img1" accept="image/*">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Image 2</label>
                              <input type="file" class="filepond-image" id="img2" accept="image/*">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Image 3</label>
                              <input type="file" class="filepond-image" id="img3" accept="image/*">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Image 4</label>
                              <input type="file" class="filepond-image" id="img4" accept="image/*">
                            </div>
                            <div class="col-12">
                              <label class="form-label">Description</label>
                              <textarea class="form-control" placeholder="Description"
                                aria-label="Description"></textarea>
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Color</label>
                              <input type="text" class="form-control" placeholder="Color" aria-label="Color">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Size</label>
                              <input type="text" class="form-control" placeholder="Size" aria-label="Size">
                            </div>
                            <div class="col-md-6">
                              <label for="status" class="form-label">Status</label>
                              <select class="form-select" id="status" name="status" data-trigger-choice>
                                <option>Select Publish status</option>

                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                              </select>
                            </div>
                            <div class="col-12">
                              <label class="form-label">Variations (JSON)</label>
                              <textarea class="form-control" placeholder="Variations"
                                aria-label="Variations"></textarea>
                            </div>
                            <div class="col-12">
                              <label class="form-label">Additional Info (JSON)</label>
                              <textarea class="form-control" placeholder="Additional Info"
                                aria-label="Additional Info"></textarea>
                            </div>
                            <div class="col-12">
                              <button type="submit" class="btn btn-primary">Save Product</button>
                            </div>
                          </form>



                        </div>
                      </div>
                    </div>
                  </div>



                  <form method="post" >
                    {% csrf_token %}
            
                    <label for="id_one">One:</label>
                    <input type="text" name="one" id="id_one" value="{{ form.one.value|default:'' }}" >
                    {% if form.one.errors %}
                        <span class="error">{{ form.one.errors.0 }}</span>
                    {% endif %}
            
            
            
                    <label for="id_two">Two:</label>
                    <select name="two" id="id_two" >
                        {% for two_value, two_label in form.two.field.choices %}
                            <option value="{{ two_value }}" 
                            {% if form.two.value|stringformat:"s" == two_value|stringformat:"s" %}selected{% endif %}
                            >
                                {{ two_label }}
                            </option>
                        {% endfor %}
                    </select>
                    {% if form.two.errors %}
                        <span class="error">{{ form.two.errors.0 }}</span>
                    {% endif %}
            
                    <br>
            
                    <button type="submit">Save</button>
                </form>



                </div>

            </form>
          </div>
        </div>
      </div>
    </div>
    <!--End::row-1 -->

  </div>
</div>
<!-- End::app-content -->



{% endblock content %}

{% block js %}
<!-- Date & Time Picker JS -->
<script src="/static/panel/assets/libs/flatpickr/flatpickr.min.js"></script>

<!-- Quill Editor JS -->
<script src="/static/panel/assets/libs/quill/quill.min.js"></script>

<!-- Filepond JS -->
<script src="/static/panel/assets/libs/filepond/filepond.min.js"></script>
<script src="/static/panel/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
<script>
  FilePond.registerPlugin(
    FilePondPluginImagePreview
  );

  // for product images upload
  const MultipleElements = document.querySelectorAll('.filepond-image');

  MultipleElements.forEach(element => {
    FilePond.create(element);
  });


  var choiceElements = document.querySelectorAll('[data-trigger-choice]');
  for (i = 0; i < choiceElements.length; ++i) {
    var element = choiceElements[i];
    new Choices(element, {
      allowHTML: true,
      placeholderValue: 'This is a placeholder set in the config',
      searchPlaceholderValue: 'This is a search placeholder',
    });
  }

</script>

<!-- Internal Add Products JS -->
<script src="/static/panel/assets/js/add-products.js"></script>
{% endblock js %}