{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_advanced_settings.js' %}"></script>
    {% endblock %}
    <div class="row">
    <!-- Start col -->
    <div class="col-lg-12">
        <div class="card m-b-30">
            <div class="card-body">
                <div class="accordion custom-accordion" id="custom-accordion-one">
                    <div class="card mb-0">
                        <div class="card-header" id="headingFour">
                            <h5 class="m-0">
                                <a class="custom-accordion-title text-uppercase d-block py-1"
                                   data-bs-toggle="collapse" href="#collapseFour"
                                   aria-expanded="true" aria-controls="collapseFour">
                                    Notification settings <i
                                        class="mdi mdi-chevron-down accordion-arrow"></i>
                                </a>
                            </h5>
                        </div>

                        <div id="collapseFour" class="collapse show"
                             aria-labelledby="headingFour"
                             data-bs-parent="#custom-accordion-one">
                            <div class="card-body">
                                <h6 class="font-13 mt-3">Auto-sizing</h6>
                                <form>
                                    <div class="row gy-2 gx-2 align-items-center">
                                        <div class="col-auto">
                                            <label class="visually-hidden" for="notification_select">Choose how
                                                notifications should be
                                                handled</label>
                                            <select class="form-control" id="notification_select"
                                                    name="who_setting" value="">
                                                <option value="" selected disabled>Select notification</option>
                                                <option value=1
                                                        {% if notificationSettingObj.notification_type == 1 %}selected{% endif %}>
                                                    Send notifications by SMS
                                                </option>
                                                <option value=2
                                                        {% if notificationSettingObj.notification_type == 2 %}selected{% endif %}>
                                                    Send notifications by EMAIL
                                                </option>
                                                <option value=3
                                                        {% if notificationSettingObj.notification_type == 3 %}selected{% endif %}>
                                                    Send notifications both by SMS and EMAIL
                                                </option>
                                                <option value=0
                                                        {% if notificationSettingObj.notification_type == 0 %}selected{% endif %}>
                                                    None
                                                </option>
                                            </select>
                                        </div>

                                        <div class="col-auto">
                                            <button type="submit" class="btn btn-primary" id="changeNotification"
                                                    onclick="handleSubmitNotificationSettings()">
                                                Update settings
                                            </button>
                                            <div class="spinner-border text-danger" role="status"
                                                 id="submittingNotification" style="display: none;">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}