{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            let global_state = {
                share_settingsJson: '{{ share_settingsJson }}',
                baseUrl: '{{ baseUrl }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/currency_formatter.js' %}"></script>
        <script src="{% static 'sacco/assets/custom_js/custom_share_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-1">
                            <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">
                                        Dividends Sharing 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">
                                    {% if 'update_share_settings' in user_perms %}
                                        <h6 class="font-13 mt-3">Select who to share dividends</h6>
                                        <form>
                                            <div class="row gy-2 gx-2 align-items-center">
                                                <div class="col-md-6">
                                                    <label class="visually-hidden" for="inlineFormInput">Select who to
                                                        share
                                                        dividends</label>
                                                    <select class="form-control mb-2 border border-primary"
                                                            id="dividend_setting"
                                                            name="who_setting">
                                                        <option value="" selected disabled>select account type</option>
                                                        <option value="s"
                                                                {% if share_settings.dividends_sharing %}selected{% endif %}>
                                                            Share holders only
                                                        </option>
                                                        <option value="a"
                                                                {% if not share_settings.dividends_sharing %}selected{% endif %}>
                                                            All sacco accounts
                                                        </option>
                                                    </select>
                                                </div>

                                                <div class="col-auto">
                                                    <button type="submit" class="btn btn-primary mb-2"
                                                            id="changeDividend"
                                                            onclick="handleSubmitDividend({{ share_settings.id }})">
                                                        Update dividend sharing
                                                    </button>
                                                    <div class="spinner-border mb-2 text-danger" role="status"
                                                         id="submittingDividend" style="display: none;margin-top: 10px">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="card mb-1">
                            <div class="card-header" id="headingFive">
                                <h5 class="m-0">
                                    <a class="custom-accordion-title text-uppercase collapsed d-block py-1"
                                       data-bs-toggle="collapse" href="#collapseFive"
                                       aria-expanded="false" aria-controls="collapseFive">
                                        Edit shares <i class="mdi mdi-chevron-down accordion-arrow"></i>
                                    </a>
                                </h5>
                            </div>

                            <div id="collapseFive" class="collapse"
                                 aria-labelledby="headingFive"
                                 data-bs-parent="#custom-accordion-one">
                                <div class="card-body">
                                    <h6 class="font-13 mt-3">Share price & Share limit</h6>
                                    {% if 'update_share_settings' in user_perms %}
                                        <form>
                                            <div class="row gy-2 gx-2 align-items-center">
                                                <div class="col-auto">
                                                    <label class="visually-hidden" for="share_price">Share price</label>
                                                    <div class="input-group mb-2">
                                                        <div class="input-group-text">Share price</div>
                                                        <input type="text" data-type="currency"
                                                               class="form-control" id="share_price"
                                                               name="" placeholder="Share price"
                                                               value='{{ share_settings.share_price|intcomma }}' min="0"
                                                               required>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="visually-hidden" for="share_price">Share limit</label>
                                                    <div class="input-group mb-2">
                                                        <div class="input-group-text">Shares limit</div>
                                                        <input type="text" class="form-control"
                                                               id="share_limit" name="maturity"
                                                               placeholder="Shares limit"
                                                               value='{{ share_settings.share_limit }}' min="0"
                                                               required>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="submit" class="btn btn-primary mb-2" id="changeEdit"
                                                            onclick="handleSubmitEditShares({{ share_settings.id }})">
                                                        Update Share
                                                    </button>
                                                    <div class="spinner-border mb-2 text-danger" role="status"
                                                         id="submittingEdit" style="display: none;">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="card mb-0">
                            <div class="card-header" id="headingSix">
                                <h5 class="m-0">
                                    <a class="custom-accordion-title text-uppercase collapsed d-block py-1"
                                       data-bs-toggle="collapse" href="#collapseSix"
                                       aria-expanded="false" aria-controls="collapseSix">
                                        Set membership type on registration <i
                                            class="mdi mdi-chevron-down accordion-arrow"></i>
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseSix" class="collapse" aria-labelledby="headingSix"
                                 data-bs-parent="#custom-accordion-one">
                                <div class="card-body">
                                    <h6 class="font-13 mt-3">Select how all members should be registered(set as
                                        shareholder
                                        or not)</h6>
                                    {% if 'update_share_settings' in user_perms %}
                                        <form>
                                            <div class="row gy-2 gx-2 align-items-center">
                                                <div class="col-auto">
                                                    <label class="visually-hidden" for="registration_select">member
                                                        select</label>
                                                    <select class="form-control mb-2 border border-primary"
                                                            id="registration_select" name="member_select">
                                                        <option value="" selected disabled>select</option>
                                                        <option value='a'
                                                                {% if not share_settings.set_ordinary %}selected{% endif %}>
                                                            Automatically make member a shareholder
                                                        </option>
                                                        <option value='o'
                                                                {% if share_settings.set_ordinary %}selected{% endif %}>
                                                            Make
                                                            member an ordinary member
                                                        </option>
                                                    </select>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="submit" class="btn btn-primary mb-2"
                                                            id="changeRegistration"
                                                            onclick="handleSubmitRegistration({{ share_settings.id }})">
                                                        Update settings
                                                    </button>

                                                    <div class="spinner-border mb-2 text-danger" role="status"
                                                         id="submittingRegistration" style="display: none;">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End col -->
        </div>
    </div>

{% endblock %}