{% include 'AdminTemplates/adminDash.html' %}
{% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Email Enquiries</h4>
                <h6>All email enquiries</h6>
                <h7></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>

                <div class="table-responsive">
                    {% csrf_token %}
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Product Name</th>
                                <th>Company Name</th>
                                <th>Email </th>
                                <th>Contact Person</th>
                                <th>Contact Number</th>
                                <th>Category</th>
                                <th>Active</th>
                                <th>&emsp;&emsp;&emsp;Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in emenq %}
                            <tr>
                                <td>
                                    {{ i.product_name }}
                                </td>
                                <td>{{ i.company }}</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}}">Approved</button>
                                    {% elif i.status == "0" %}
                                    <button class="btn btn-sm btn-danger status" type="button" value="{{i.id}}">
                                        Pending</button>
                                    {% else %}
                                    {% endif %}

                                </td>

                                <td>
                                    <a class="me-3" href="{% url 'emailenqdetails' i.id %}">
                                        <img src="{% static 'assets/img/icons/eye.svg' %}" alt="img">
                                    </a>
                                    <a class="me-3" href="{% url 'emailenqedit' i.id %}">
                                        <img src="{% static 'assets/img/icons/edit.svg' %}" alt="img">
                                    </a>
                                    <a class="me-3" href="javascript:void(0);"
                                        onclick="confirmDelete('{{ i.id }}', '{{ i.product_name }}')">
                                        <img src="{% static 'assets/img/icons/delete.svg' %}" alt="img">
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <!-- Modal for Other Category -->
    <div class="modal fade" id="otherCategoryModal" tabindex="-1" aria-labelledby="otherCategoryModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="otherCategoryModalLabel">Assign Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Your existing modal body content goes here -->
                    <div class="modal-body custom-modal-body">
                        <form id="assignCategoryForm">
                            <div class="mb-3">
                                <label class="form-label">Other Category</label>
                                <input type="text" id="otherCategory" class="form-control" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Assign Category</label>
                                <select name="assignedCategory" id="assignedCategory" class="form-control" required>
                                    <option value=""> --- Please Select --- </option>
                                    {% for ca in cat %}
                                    <option value="{{ ca.id }}">{{ ca.category_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary">Assign Category and Approve</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    $(document).ready(function () {
        $('body').on('click', 'button.status', function (e) {
            var $this = $(this);
            var productId = $this.attr('value');
            var $row = $this.closest('tr');
            var categoryText = $row.find('td:eq(5)').text().trim();

            if (categoryText === 'Other Category') {
                $('#otherCategory').val($row.find('td:eq(0)').text().trim());
                $('#assignCategoryForm').data('productId', productId);
                $('#otherCategoryModal').modal('show');
            } else {
                $.ajax({
                    type: 'POST',
                    url: "{% url 'appden' %}",
                    data: {
                        activedea: productId,
                        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                    },
                    dataType: 'json',
                    success: function (data) {
                        $('h7').html(data.success);
                        $this.html(data.html).removeClass('btn-success btn-danger').addClass(data.class);
                    }
                });
            }
        });

        $(document).on('submit', '#assignCategoryForm', function (e) {
            e.preventDefault();
            console.log('Form submitted');

            var productId = $(this).data('productId');
            var assignedCategory = $('#assignedCategory').val();

            $.ajax({
                type: 'POST',
                url: "{% url 'appden' %}",
                data: {
                    activedea: productId,
                    assignedCategory: assignedCategory,
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                },
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        var $row = $('button.status[value="' + productId + '"]').closest('tr');
                        $row.find('td:eq(5)').html('<span style="color: green;">Registered Category</span>');
                        $row.find('button.status').html('Approved').removeClass('btn-danger').addClass('btn-success');
                        $('#otherCategoryModal').modal('hide');
                    } else {
                        alert(data.error || 'An error occurred. Please try again.');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX Error:', status, error);
                    console.log('Response:', xhr.responseText);
                    alert('An error occurred. Please check the console for more information.');
                }
            });
        });
    });

    function confirmDelete(productId, productName) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You are about to delete the product: " + productName,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "{% url 'emailenqdel' 0 %}".replace('0', productId);
            }
        });
    }
</script>

{% endblock body %}