{% include 'AdminTemplates/adminDash.html' %}
{% load static %}
{% block body %}
<style>
    .tag-button {
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
        font-size: 14px;
    }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Country List</h4>
                <h6>View/Search Product Country</h6>
            </div>
            <div class="page-btn">
                <a href="{% url 'addCountry' %}" class="btn btn-added">
                    <img src="{% static 'assets/img/icons/plus.svg' %}" class="me-1" alt="img"> Add Country
                </a>
            </div>
        </div>
        {% if cat_deleted %}
        <h3 style="color: blue; font-size: 16px;">'{{cat_deleted}}' <span style="color: black;">Country is </span>
            <span style="color: red;">Deleted</span> and the related Products also Deleted
        </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">
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Country Name</th>
                                <th>Country Code</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in countryList %}
                            {% csrf_token %}
                            <tr>
                                <td class="productimgname">
                                    <a href="#" class="product-img">
                                        <img src="{{ i.con_image.url }}" alt="product">
                                    </a>
                                    <span>{{ i.con_name }}</span>
                                </td>
                                <td>{{ i.con_code|upper }}</td>
                                <td>
                                    {% if i.con_name != "Qatar" %}
                                    <a class="me-3" href="{% url 'editCountry' i.id %}">
                                        <img src="{% static 'assets/img/icons/edit.svg' %}" alt="Edit">
                                    </a>
                                    <a class="me-3 delete-btn" href="#" data-url="{% url 'deleteCountry' i.id %}">
                                        <img src="{% static 'assets/img/icons/delete.svg' %}" alt="Delete">
                                    </a>
                                    {% else %}
                                    <span class="forbidden-text" style="color: red; cursor: pointer;">Forbidden</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteButtons = document.querySelectorAll('.delete-btn');
        const forbiddenTexts = document.querySelectorAll('.forbidden-text');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function (event) {
                event.preventDefault();
                const url = this.getAttribute('data-url');
                const row = this.closest('tr');
                const countryName = row.querySelector('.productimgname span').textContent.trim();

                if (countryName === "Qatar") {
                    Swal.fire({
                        title: 'Forbidden!',
                        text: 'It is forbidden to delete the Primary Country.',
                        icon: 'error',
                        confirmButtonColor: '#007BFF',
                    });
                } else {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "Related Products will be Removed too. You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            fetch(url, {
                                method: 'POST',
                                headers: {
                                    'X-CSRFToken': '{{ csrf_token }}',
                                    'Content-Type': 'application/json'
                                }
                            }).then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire({
                                        title: 'Deleted!',
                                        text: `${countryName} and related Products have been Removed.`,
                                        icon: 'success',
                                        confirmButtonColor: '#007BFF'
                                    }).then(() => {
                                        row.remove();
                                    });
                                } else {
                                    Swal.fire({
                                        title: 'Error!',
                                        text: 'There was an error deleting the country. Please try again.',
                                        icon: 'error',
                                        confirmButtonColor: '#007BFF'
                                    });
                                }
                            });
                        }
                    });
                }
            });
        });

        forbiddenTexts.forEach(text => {
            text.addEventListener('click', function () {
                Swal.fire({
                    title: 'Forbidden!',
                    text: 'It is forbidden to delete the Primary Country.',
                    icon: 'error',
                    confirmButtonColor: '#007BFF',
                });
            });
        });
    });
</script>
{% endblock body %}