{% include 'AdminTemplates/xlsx_dash.html' %} {% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>XLSX Uploads</h4>
                <h6>All XLSX uploads</h6>
                <h7 id="noti"></h7>
            </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 class="search-set">
                        <div class="category-input me-2">
                            <select class="form-control" id="category-filter">
                                <option value="">Select List</option>
                                {% for option in formatted_pur_values %}
                                <option value="{{ option.pur_value }}">{{ option.date }} | {{ option.hour }}:{{ option.minutes }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    {% csrf_token %}
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="selectAllCheckbox"></th>
                                <th>Product Name</th>
                                <th>Company Name</th>
                                <th>Brand</th>
                                <th>Model No.</th>
                                <th>Email</th>
                                <th>Contact Person</th>
                                <th>Contact Number</th>
                                <th>Category</th>
                                <th>Active</th>
                                <th>Featured</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in xlsx_products %}
                            <tr>
                                <td><input type="checkbox" class="rowCheckbox" value="{{ i.id }}"></td>
                                <td class="productimgname">
                                    <a href="#" class="product-img">
                                        {% for image in i.productimage_set.all %}
                                        {% if image.fea_img == 1 %}
                                        <img src="{{ image.product_image.url }}" alt="{{ image.product_image.url }}">
                                        {% endif %}
                                        {% endfor %}
                                    </a>
                                    <a href="#">{{ i.product_name }}</a>
                                </td>
                                <td>{{ i.company }}</td>
                                <td>{{ i.brand }}</td>
                                <td>{{ i.model_no }}</td>
                                <td>{{ i.email }}</td>
                                <td>{{ i.contact_person }}</td>
                                <td>{{ i.contact_no }}</td>

                                {% if i.other_category == "" %}
                                <td>
                                    <span style="color: green;">Registered Category</span>
                                </td>
                                {% else %}
                                <td>
                                    <span style="color: red;">Other Category</span>
                                </td>
                                {% endif %}
                                <td>
                                    {% if i.status == "1" %}
                                    <button class="btn btn-sm btn-success status" type="button"
                                        value="{{ i.id }}">Active</button>
                                    {% else %}
                                    <button class="btn btn-sm btn-danger status" type="button"
                                        value="{{ i.id }}">Inactive</button>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if i.special == "1" %}
                                    <button class="btn btn-sm btn-success change" type="button"
                                        value="{{ i.id }}">Special</button>
                                    {% else %}
                                    <button class="btn btn-sm btn-danger change" type="button"
                                        value="{{ i.id }}">NotSpl</button>
                                    {% endif %}
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'xlsx_details' i.id %}">
                                        <img src="{% static 'assets/img/icons/eye.svg' %}" alt="img">
                                    </a>
                                    <a class="me-3" href="{% url 'xlsx_edit' i.id %}">
                                        <img src="{% static 'assets/img/icons/edit.svg' %}" alt="img">
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#category-filter').change(function () {
            var purValue = $(this).val();
            if (purValue) {
                $.ajax({
                    url: "{% url 'filter_products_by_pur' %}",
                    data: {
                        'pur_value': purValue,
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    },
                    type: 'GET',
                    success: function (response) {
                        var products = response.products;
                        var tableBody = $('table.datanew tbody');
                        tableBody.empty();  // Clear the existing rows

                        // Populate new rows with the filtered products
                        $.each(products, function (index, product) {
                            var detailsUrlTemplate = "{% url 'xlsx_details' '0' %}";
                            var editUrlTemplate = "{% url 'xlsx_edit' '0' %}";
                            var detailsUrl = detailsUrlTemplate.replace('0', product.id);
                            var editUrl = editUrlTemplate.replace('0', product.id);

                            var row = `
                                <tr>
                                    <td><input type="checkbox" class="rowCheckbox" value="${product.id}"></td>
                                    <td class="productimgname">
                                        <a href="#" class="product-img">
                                            ${product.product_image ? `<img src="${product.product_image}" alt="${product.product_image}">` : ''}
                                        </a>
                                        <a href="#">${product.product_name}</a>
                                    </td>
                                    <td>${product.company}</td>
                                    <td>${product.brand}</td>
                                    <td>${product.model_no}</td>
                                    <td>${product.email}</td>
                                    <td>${product.contact_person}</td>
                                    <td>${product.contact_no}</td>
                                    <td>
                                        ${product.other_category ? '<span style="color: red;">Other Category</span>' : '<span style="color: green;">Registered Category</span>'}
                                    </td>
                                    <td>
                                        ${product.status == "1" ? '<button class="btn btn-sm btn-success status" type="button" value="' + product.id + '">Active</button>' : '<button class="btn btn-sm btn-danger status" type="button" value="' + product.id + '">Inactive</button>'}
                                    </td>
                                    <td>
                                        ${product.special == "1" ? '<button class="btn btn-sm btn-success change" type="button" value="' + product.id + '">Special</button>' : '<button class="btn btn-sm btn-danger change" type="button" value="' + product.id + '">NotSpl</button>'}
                                    </td>
                                    <td>
                                        <a class="me-3" href="${detailsUrl}">
                                            <img src="{% static 'assets/img/icons/eye.svg' %}" alt="img">
                                        </a>
                                        <a class="me-3" href="${editUrl}">
                                            <img src="{% static 'assets/img/icons/edit.svg' %}" alt="img">
                                        </a>
                                    </td>
                                </tr>
                            `;
                            tableBody.append(row);
                        });

                        // Reinitialize any event listeners or plugins for the new rows, if necessary
                    },
                    error: function (xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            }
        });
    });
</script>


<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>
    $(document).ready(function() {
        let selectAllChecked = false;

        // Event listener for the "Select All" checkbox
        $('#selectAllCheckbox').on('change', function() {
            selectAllChecked = $(this).prop('checked');
        });

        $('body').on('click', '#deleteButton', function (e) {
            e.preventDefault();
            const productIds = [];
            const productNames = [];
            $('.rowCheckbox:checked').each(function () {
                const productId = $(this).val();
                const productName = $(this).closest('tr').find('td:eq(1)').text().trim();
                productIds.push(productId);
                productNames.push(productName);
            });

            const csrfToken = $('input[name=csrfmiddlewaretoken]').val();

            if (productIds.length > 0) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: 'Do you really want to delete the selected product/s?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete!',
                    cancelButtonText: 'No, keep'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'POST',
                            url: "{% url 'xlsx_del' %}",
                            data: {
                                product_ids: productIds,
                                csrfmiddlewaretoken: csrfToken
                            },
                            dataType: 'json',
                            success: function (response) {
                                if (response.status === 'success') {
                                    $('.rowCheckbox:checked').closest('tr').remove();
                                    $('#noti').html(response.message).css('color', 'green');
                                    Swal.fire({
                                        title: 'Deleted!',
                                        text: 'The selected product/s have been deleted.',
                                        icon: 'success'
                                    }).then(() => {
                                        if (selectAllChecked) {
                                            location.reload();
                                        } else {
                                            updateSelectAllCheckbox();
                                            toggleDeleteButton();
                                        }
                                    });
                                } else {
                                    $('#noti').html(response.message).css('color', 'red');
                                    Swal.fire(
                                        'Error!',
                                        'There was a problem deleting the product/s.',
                                        'error'
                                    );
                                }
                            },
                            error: function () {
                                $('#noti').html('An error occurred. Please try again.').css('color', 'red');
                                Swal.fire(
                                    'Error!',
                                    'An error occurred. Please try again.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            } else {
                Swal.fire(
                    'No products selected',
                    'Please select at least one product to delete.',
                    'warning'
                );
            }
        });

        function updateSelectAllCheckbox() {
            var totalCheckboxes = $('.rowCheckbox:not(:disabled)').length;
            var checkedCheckboxes = $('.rowCheckbox:checked').length;
            $('#selectAllCheckbox').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes);
        }

        function toggleDeleteButton() {
            if ($('.rowCheckbox:checked').length > 0) {
                if ($('#deleteButton').length === 0) {
                    $('<button id="deleteButton" type="button" class="btn btn-sm btn-outline-danger"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"></path><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"></path></svg> Delete</button>').insertBefore('.table-responsive');
                }
            } else {
                $('#deleteButton').remove();
            }
        }
    });
</script>


<script>
    $(document).ready(function () {
        // Event delegation for checkbox clicks
        $(document).on('change', '.rowCheckbox', function () {
            var allChecked = $('.rowCheckbox:checked').length === $('.rowCheckbox').length;
            $('#selectAllCheckbox').prop('checked', allChecked);
            toggleDeleteButton(); // Toggle delete button based on checkbox states
        });

        // Event delegation for "check all" checkbox
        $(document).on('change', '#selectAllCheckbox', function () {
            $('.rowCheckbox').prop('checked', $(this).prop('checked'));
            toggleDeleteButton(); // Toggle delete button based on checkbox states
        });

        // Toggle the delete button visibility
        function toggleDeleteButton() {
            if ($('.rowCheckbox:checked').length > 0) {
                if ($('#deleteButton').length === 0) {
                    $('<button id="deleteButton" type="button" class="btn btn-sm btn-outline-danger"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"></path><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"></path></svg> Delete</button>').insertBefore('.table-responsive');
                }
            } else {
                $('#deleteButton').remove();
            }
        }
    });

</script>

{% endblock body %}