{% extends 'base.html' %}


{% block contentbody %}

{% csrf_token %}

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

<div class="table-responsive">
    <table class="table table-striped">
        <thead class="bg-secondary text-white">
            <tr>
                <td>SN</td>
                <td>Name</td>
                <td>Order</td>

                <td>Status</td>
                <td>Actions</td>
            </tr>
        </thead>
        <tbody>
            {% for program in program_levels %}
            <tr>
                <td>{{ program.id }}</td>
                <td>{{ program.name }}</td>
                <td>{{ program.program_order }}</td>

                <td>
                        {% if program.program_status %}
                        <span class="label label-success">
                            Active
                        </span>
                        {% else %}
                        <span class="label label-danger">
                            Not-active
                        </span>
                        {% endif %}
                    </td>

                <td class="d-flex justify-content-between">
                    {% if perms.program.change_programlevel %}
                    <a href="#" data-id="{{ program.id }}" class="btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#exampleModal" onclick="edit_level(this)">
                        <i class="icon icon-pencil"> Edit</i>
                    </a>
                    {%endif%}
                    {% if perms.program.delete_programlevel %}
                    <a href="#" class="btn btn-danger btn-sm" data-id="{{ program.id }}" data-name="{{program.name}}"
                        onclick="delete_level(this)">
                        <i class="icon icon-trash"> Delete</i>
                    </a>
                    {%endif%}
                    <form action="{% url 'program:delete_program_level' pk=program.id %}" method="post"
                        id="delete_form_{{program.id}}">
                        {% csrf_token %}
                    </form>
                </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">Add Program Level</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>
{% include 'pages/pagination.html' %}
{% endblock contentbody %}

{% block js %}
<script>
    function edit_level(elem) {
        var id = $(elem).data('id');
        var csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
        console.log(id);
        document.getElementById("exampleModalLabel").innerHTML = "Edit Level";
        $.ajax({
            url: '/programs/get_program_level_info/',
            type: "POST",
            headers: { 'X-CSRFToken': csrf_token },
            data: { 'id': id },
            dataType: "json",
            success: function (data) {


                $("#edit_country").attr('action', '/programs/edit_program_level/' + id + '/');
                console.log(data)
                $("#name").val(data.name);
                $("#order").val(data.program_order);

                if (data.status == false) {
                    $('#id_program_status').prop('checked', false);

                }
                else {
                    $('#id_program_status').prop('checked', true);

                }
            }
        });

    }
    
    function add_program_level(elem) {

        document.getElementById("exampleModalLabel").innerHTML = "Add Program Level";
        $("#edit_country").attr('action', '/programs/add_program_level/');
        $("#name").val("");
        $("#order").val("");
        $('#id_program_status').prop('checked', false);
    }
    function delete_level(elem) {
        var id = $(elem).data('id');
        var name = $(elem).data('name');
        var del = confirm("Are you sure you want to delete " + name + "?");

        if (del == true) {
            $("#delete_form_" + id).submit();
        }

    }

</script>
{% endblock %}