{% extends 'common/base.html' %}
{% load static %}
{% block title %} Product Variant Add {% endblock %}
{% block content %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="container-fluid" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-2">
        <h1 class="h3 mb-0 text-gray-800 mt-2">
            Product Variant Add
            <span style="margin-left:30px;float:right">
                <a href="{% url 'product_list' %}" class="btn btn-info btn-sm">
                    <i class="fas fa-list"></i> Product List
                </a>
            </span>
        </h1>
    </div>

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="row">
            <div class="col-lg-12">
                <div class="card shadow mb-4">
                    <div class="card-body">

                        <!-- Brand -->
                        <div class="form-group">
                            <label><strong>Select Brand</strong></label>
                            <select id="brandSelect" name="brand_id" class="form-control">
                                <option value="">-- Select Brand --</option>
                                {% for brand in brands %}
                                    <option value="{{ brand.id }}">{{ brand.brand_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Category -->
                        <div class="form-group">
                            <label><strong>Select Category</strong></label>
                            <select id="categorySelect" class="form-control">
                                <option value="">-- Select Category --</option>
                                {% for category in categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <table class="table table-bordered" id="categoryTable" style="display:none; width: 350px;">
                            <thead class="thead-light">
                                <tr>
                                    <th>Category</th>
                                    <th style="width: 95px;">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                     
                  
                        <!-- Color -->
                        <div class="form-group">
                            <label><strong>Select Color</strong></label>
                            <select id="colorSelect" class="form-control">
                                <option value="">-- Select Color --</option>
                                {% for color in colors %}
                                    <option value="{{ color.id }}">{{ color.color_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <table class="table table-bordered" id="colorTable" style="display:none;">
                            <thead class="thead-light">
                                <tr>
                                    <th>Color</th>
                                    <th>Price</th>
                                    <th>Discount Price</th>
                                    <th>Image</th>
                                    <th style="width: 95px;">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                        <!-- Size -->
                        <div class="form-group mt-3">
                            <label><strong>Select Size</strong></label>
                            <select id="sizeSelect" class="form-control">
                                <option value="">-- Select Size --</option>
                                {% for size in sizes %}
                                    <option value="{{ size.id }}">{{ size.size_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <table class="table table-bordered" id="sizeTable" style="display:none; width: 350px;">
                            <thead class="thead-light">
                                <tr>
                                    <th>Size</th>
                                    <th style="width: 95px;">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <br>
                        <button type="submit" class="btn btn-success btn-sm">Save Variant</button>

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

<script>
$(document).ready(function () {

    // === Category add ===
    $('#categorySelect').change(function () {
        let id = $(this).val();
        let name = $("#categorySelect option:selected").text();
        if (id) {
            if ($("#categoryTable tbody tr[data-id='" + id + "']").length === 0) {
                $("#categoryTable").show();
                let row = `
                    <tr data-id="${id}">
                        <td>
                            ${name}
                            <input type="hidden" name="category_id[]" value="${id}">
                        </td>
                        <td><button type="button" class="btn btn-danger btn-sm removeCategory">X</button></td>
                    </tr>`;
                $("#categoryTable tbody").append(row);
            }
            $(this).val("");
        }
    });
    $(document).on("click", ".removeCategory", function () {
        $(this).closest("tr").remove();
        if($("#categoryTable tbody tr").length === 0){
            $("#categoryTable").hide();
        }
    });

     

    // === Color add ===
    $('#colorSelect').change(function () {
        let id = $(this).val();
        let name = $("#colorSelect option:selected").text();
        if (id) {
            if ($("#colorTable tbody tr[data-id='" + id + "']").length === 0) {
                $("#colorTable").show();
                let row = `
                    <tr data-id="${id}">
                        <td>
                            ${name}
                            <input type="hidden" name="color_id[]" value="${id}">
                        </td>
                        <td><input type="number" step="0.01" name="color_price_${id}" class="form-control" placeholder="Price"></td>
                        <td><input type="number" step="0.01" name="color_discount_${id}" class="form-control" placeholder="Discount"></td>
                        <td><input type="file" name="color_image_${id}" class="form-control-file"></td>
                        <td><button type="button" class="btn btn-danger btn-sm removeColor">X</button></td>
                    </tr>`;
                $("#colorTable tbody").append(row);
            }
            $(this).val("");
        }
    });
    $(document).on("click", ".removeColor", function () {
        $(this).closest("tr").remove();
        if($("#colorTable tbody tr").length === 0){
            $("#colorTable").hide();
        }
    });

    // === Size add ===
    $('#sizeSelect').change(function () {
        let id = $(this).val();
        let name = $("#sizeSelect option:selected").text();
        if (id) {
            if ($("#sizeTable tbody tr[data-id='" + id + "']").length === 0) {
                $("#sizeTable").show();
                let row = `
                    <tr data-id="${id}">
                        <td>
                            ${name}
                            <input type="hidden" name="size_id[]" value="${id}">
                        </td>
                        <td><button type="button" class="btn btn-danger btn-sm removeSize">X</button></td>
                    </tr>`;
                $("#sizeTable tbody").append(row);
            }
            $(this).val("");
        }
    });
    $(document).on("click", ".removeSize", function () {
        $(this).closest("tr").remove();
        if($("#sizeTable tbody tr").length === 0){
            $("#sizeTable").hide();
        }
    });

});
</script>

{% endblock %}