{% extends "base.html" %}

{% block header %}
    {{ super() }}
{% endblock header %}

{% block content %}
    {% include "partials/navbar.html" %}

    <div class="container" style="padding-top: 5px;">
        <h2>Exotel Call Toggle</h2>
        <p class="text-muted">Use this panel to pause or resume outgoing Exotel calls across the system.</p>

        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-5">
                <div class="panel panel-default">
                    <div class="panel-body {% if exotel_calls_permitted %}bg-success text-black{% else %}bg-danger text-black{% endif %}">
                        <h4>
                            {% if exotel_calls_permitted %}
                                Outgoing Exotel calls are currently: <span class="text-success">Enabled</span>
                            {% else %}
                                Outgoing Exotel calls are currently: <span class="text-danger">Disabled</span>
                            {% endif %}
                        </h4>
                        <button
                            id="openConfirmModal"
                            class="btn {% if exotel_calls_permitted %}btn-danger{% else %}btn-success{% endif %}"
                            data-action="{% if exotel_calls_permitted %}FALSE{% else %}TRUE{% endif %}">
                            {% if exotel_calls_permitted %}Disable Calls{% else %}Enable Calls{% endif %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="toggleConfirmModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">Confirm Action</h4>
                </div>
                <div class="modal-body">
                    Are you sure you want to toggle the Exotel call configuration?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button id="confirmToggleBtn" type="button" class="btn btn-success">Yes, Proceed</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var toggleAction = "";

        $(document).on('click', '#openConfirmModal', function () {
            toggleAction = $(this).data("action");
            $('#toggleConfirmModal').modal('show');
        });

        $('#confirmToggleBtn').on("click", function () {
            $('#toggleConfirmModal').modal('hide');

            $.ajax({
                url: "/set_config",
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    name: "EXOTEL_CALLS_PERMITTED",
                    value: toggleAction
                }),
                success: function (data) {
                    if (data.error) {
                        alert("Error: " + data.error);
                    } else if (data.success) {
                        location.reload();
                    }
                },
                error: function () {
                    alert("Something went wrong while trying to toggle the configuration.");
                }
            });
        });
    </script>
{% endblock content %}