{% extends 'base.html' %}

{% block contentbody %}
{% csrf_token %}
<div class="d-flex py-3 align-items-center justify-content-between">
    <div>
        <h4>Country</h4>
    </div>
    {% if perms.projsettings.add_country %}
    <div>
        <a data-toggle="modal" class="btn btn-info btn-md" style="color: white;" data-target="#exampleModal"
            onclick="add_country()">
            <i class="mdi mdi-plus-outline"></i>
            Add Country
        </a>
    </div>
    {% endif %}
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead class="bg-secondary text-white">
            <tr>
                <td>SN</td>
                <td>Name</td>
                <td>Currency</td>
                <td>Abbreviation</td>
                <td>Status</td>
                <td>Actions</td>
            </tr>
        </thead>
        <tbody>
            {% for country in countries %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ country.name }}</td>
                <td>{{ country.currency }}</td>
                <td>{{ country.abbrevation }}</td>
                <td>
                    {% if country.status %}
                    <span class="badge badge-pill badge-success">
                        Active
                    </span>
                    {% else %}
                    <span class="badge badge-pill badge-warning">
                        Inactive
                    </span>
                    {% endif %}
                </td>
                <td class="d-flex justify-content-between">
                    {% if perms.projsettings.change_country %}
                        <a href="#" data-id="{{ country.id }}" class="btn btn-secondary btn-sm" data-toggle="modal"
                            data-target="#exampleModal" onclick="edit_country(this)">
                            <i class="icon icon-pencil"> Edit</i>
                        </a>
                    {%endif%}
                    {% if perms.projsettings.delete_country %}
                        <a href="#" class="btn btn-danger btn-sm" data-id="{{ country.id }}" data-name="{{country.name}}"
                            onclick="delete_country(this)">
                            <i class="icon icon-trash"> Delete</i>
                        </a>
                        <form action="{% url 'settings:delete_country' pk=country.id %}" method="post"
                            id="delete_form_{{country.id}}">
                            {% csrf_token %}
                        </form>
                    {%endif%}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Country</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="edit_country">
                <div class="modal-body">
                    {% csrf_token %}
                    {{ form.as_p }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
        </div>
        </form>
    </div>
</div>
{% endblock contentbody %}
{% block js %}
<script>
    $('#id_abbrevation').addClass('form-control');

    function edit_country(elem) {
        var id = $(elem).data('id');
        var csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
        console.log(id);
        document.getElementById("exampleModalLabel").innerHTML = "Edit Country";
        $.ajax({
            url: '/settings/get_country_info/',
            type: "POST",
            headers: { 'X-CSRFToken': csrf_token },
            data: { 'id': id },
            dataType: "json",
            success: function (data) {
                // edit_country/<int:pk>/
                $("#edit_country").attr('action', '/settings/edit_country/' + id + '/');
                console.log(data)
                $("#name").val(data.name);
                $("#currency").val(data.currency);
                $("#id_abbrevation").val(data.abbrevation);
                console.log(data.status.length);
                if (data.status == false) {
                    $('#id_status').prop('checked', false);
                    console.log("true")
                }
                else {
                    $('#id_status').prop('checked', true);
                    console.log('false')
                }
            }
        });

    }
    function add_country() {
        document.getElementById("exampleModalLabel").innerHTML = "Add Country";
        $("#edit_country").attr('action', '/settings/add-country/');
        $("#name").val("");
        $("#currency").val("");
        $("#id_abbrevation").val("");
        $('#id_status').prop('checked', false);
    }

    function delete_country(elem) {
        var id = $(elem).data('id');
        var name = $(elem).data('name');
        var del = confirm("Are you sure you want to delete " + name + "?");
        // delete_form_{{country.id}}
        if (del == true) {
            $("#delete_form_" + id).submit();
        }
        // document.getElementById("delete_form_"+id).submit();
    }


</script>
{% endblock js%}