{% include 'AdminTemplates/adminDash.html' %}
{% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Product List</h4>
                <h6>Filtered By Company</h6>
                <h7 id="noti"></h7>
            </div>
            <div class="page-btn">
                <a href="{% url 'addProduct' %}" class="btn btn-added">
                    <img src="{% static 'assets/img/icons/plus.svg' %}" alt="img" class="me-1">Add New Product
                </a>
            </div>
        </div>
        {% if added %}
        <h3 style="color: blue; font-size: 16px;">
            <span style="color: black;">Product </span> '{{added}}' <span style="color: black;"> is </span>
            <span style="color: green;">Modified</span>
        </h3>
        {% endif %}
        {% if pro_deleted %}
        <h3 style="color: blue; font-size: 16px;">
            <span style="color: black;">Product </span>'{{pro_deleted}}' <span style="color: black;"> is </span>
            <span style="color: red;">Deleted</span>
        </h3>
        {% endif %}
        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <a class="btn btn-searchset">
                                <img src="{% static 'assets/img/icons/search-white.svg' %}" alt="img">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    {% csrf_token %}
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Product Name</th>
                                <th>Category</th>
                                <th>Brand</th>
                                <th>Company</th>
                                <th>Contact Person</th>
                                <th>Contact No.</th>
                                <th>Expiry Date</th>
                                <th>Model No.</th>
                                <th>QAR price</th>
                                <th>QAR Market price</th>
                                <th>Qty</th>
                                <th>Active</th>
                                <th>Featured</th>
                                <th>Action&emsp;&emsp;&emsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pro in pro_list %}
                            <tr id="product-{{ pro.id }}">
                                <td class="productimgname">
                                    <a href="#" class="product-img">
                                        {% for image in pro.productimage_set.all %}
                                        {% if image.fea_img == 1 %}
                                        <img src="{{ image.product_image.url }}" alt="{{ image.product_image.url }}">
                                        {% endif %}
                                        {% endfor %}
                                    </a>
                                    <a href="#">{{ pro.product_name }}</a>
                                </td>
                                <td>{{ pro.category.category_name }}</td>
                                <td>{{ pro.brand }}</td>
                                <td>{{ pro.company }}</td>
                                <td>{{ pro.contact_person }}</td>
                                <td>{{ pro.contact_no }}</td>
                                <td>{{ pro.exp_date }}</td>
                                <td>{{ pro.model_no }}</td>
                                <td>{{ pro.price }}</td>
                                <td>{{ pro.market_price }}</td>
                                <td>{{ pro.quantity }}</td>
                                <td>
                                    {% if pro.status == "1" %}
                                    <button class="btn btn-sm btn-success status" type="button" value="{{ pro.id }}">Active</button>
                                    {% else %}
                                    <button class="btn btn-sm btn-danger status" type="button" value="{{ pro.id }}">Inactive</button>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if pro.special == "1" %}
                                    <button class="btn btn-sm btn-success change" type="button" value="{{ pro.id }}">Special</button>
                                    {% else %}
                                    <button class="btn btn-sm btn-danger change" type="button" value="{{ pro.id }}">NotSpl</button>
                                    {% endif %}
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'productDetails' pro.id %}">
                                        <img src="{% static 'assets/img/icons/eye.svg' %}" alt="img">
                                    </a>
                                    <a class="me-3" href="{% url 'editProduct' pro.id %}">
                                        <img src="{% static 'assets/img/icons/edit.svg' %}" alt="img">
                                    </a>
                                    <a class="me-3 delete-product" href="#" data-id="{{ pro.id }}">
                                        <img src="{% static 'assets/img/icons/delete.svg' %}" alt="img">
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('body').on('click', 'button.change', function (e) {
        $this = $(this);
        if ($(this).attr('value')) {
            $.ajax({
                type: 'POST',
                url: "{% url 'actdea' %}",
                data: {
                    activedea: $(this).attr('value'),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                },
                dataType: 'json',
                success: function (data) {
                    $('#noti').html(data.success);
                    $this.html(data.html).removeClass('btn-success btn-danger').addClass(data.class);
                }
            });
        }
    });
</script>
<script>
    $('body').on('click', 'button.status', function (e) {
        $this = $(this);
        if ($(this).attr('value')) {
            $.ajax({
                type: 'POST',
                url: "{% url 'actsts' %}",
                data: {
                    activedea: $(this).attr('value'),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                },
                dataType: 'json',
                success: function (data) {
                    $('#noti').html(data.success);
                    $this.html(data.html).removeClass('btn-success btn-danger').addClass(data.class);
                }
            });
        }
    });
</script>
<script>
    $('body').on('click', '.delete-product', function (e) {
        e.preventDefault();
        const productId = $(this).data('id');
        const productName = $(this).closest('tr').find('td a:eq(1)').text();
        const csrfToken = $('input[name=csrfmiddlewaretoken]').val();

        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to delete this product: ' + productName + '?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'POST',
                    url: "{% url 'deleteProduct' 0 %}".replace('0', productId),
                    data: {
                        csrfmiddlewaretoken: csrfToken
                    },
                    dataType: 'json',
                    success: function (response) {
                        if (response.status === 'success') {
                            $('#product-' + productId).remove();
                            Swal.fire(
                                'Deleted!',
                                response.message,
                                'success'
                            );
                        } else {
                            Swal.fire(
                                'Error!',
                                response.message,
                                'error'
                            );
                        }
                    },
                    error: function () {
                        Swal.fire(
                            'Error!',
                            'An error occurred. Please try again.',
                            'error'
                        );
                    }
                });
            }
        });
    });
</script>

{% endblock body %}