{% include 'AdminTemplates/adminDash.html' %} {% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Add Category</h4>
                <h6>Create New Category</h6>
            </div>
            <div class="page-btn">
                <a href="{% url 'categoryList' %}" class="btn btn-added">
                    <img src="{% static 'assets/img/icons/eye.svg' %}" class="me-1" alt="img">View Category
                </a>
            </div>
        </div>
        {% if added %}
        <h6 style="color: blue; font-size: 16px;">'{{added}}' <span style="color: green;">Category is added</span></h6>
        {% endif %}
        <div class="card">
            <form action="{% url 'addCategoryForm' %}" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6 col-sm-6 col-12">
                            <div class="form-group">
                                {% if name_exists %}
                                <label style="color: blue;">'{{name_exists}}' <span style="color: red;">Category already
                                        exists!</span></label>
                                {% else %}
                                <label>Category Name</label>
                                {% endif %}
                                <input type="text" name="cat_name" required>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Parent Category Name</label>
                                <select class="form-control" name="pc" id="pc">
                                    <option value="current" selected>Current</option>
                                    {% for cat in newOptions %}
                                    <option value="{{cat.id}}">{{ cat }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea class="form-control" name="cat_desc" required></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>META Tags (*press space after each words)</label>
                                <input type="text" name="meta_tags" style="font-weight: bold;"/>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>META Description</label>
                                <textarea class="form-control" name="meta_description" required></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label> Category Image</label>
                                <div class="image-upload">
                                    <input type="file" name="cat_img" required>
                                    <div class="image-uploads">
                                        <img src="{% static 'assets/img/icons/upload.svg' %}" alt="img">
                                        <h4>Drag and drop a file to upload</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-submit me-2">Add Category</button>
                            <a href="#" class="btn btn-cancel">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
</div>
<script>
    $('input[name="meta_tags"]').on('keyup', function (e) {
        if (e.which === 32) {
            var str = $(this).val().split('');
            if (str[str.length - 2] === ',') {
                $(this).val($(this).val().replace(' ', ''));
            }
            $(this).val($(this).val().replace(' ', ','));
        }
    });
</script>
<script>
    $(".js-example-tags").select2({
        tags: true
    });
</script>
{% endblock body %}