{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block styles %}
    {% endblock %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl|safe }}',
                current_messages: '{{ saccoBranchSmsQuantity }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_broadcast_sms.js' %}"></script>
    {% endblock %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <ul class="nav nav-tabs mb-3" id="defaultTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home"
                               role="tab" aria-controls="home" aria-selected="true">SMS to members</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
                               aria-controls="profile" aria-selected="false">SMS to groups</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="defaultTabContent">

                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <div class="card border border-mute">
                                            <h3 class="card-header text-center">Send messages to the specified
                                                member/Client</h3>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label class="form-label" for="members_select">Select
                                                        member/Client(s)</label>
                                                    <select class="chosen-select" tabindex="4"
                                                            onchange="onchangeMemberSelect()" id="members_select"
                                                            name="states4[]" multiple
                                                            data-placeholder="Choose members or Clients to send to...">
                                                        <optgroup label="Members or Clients">
                                                            {% for member in all_members %}
                                                                <option value={{ member.id }}>{{ member.biodata.name }}
                                                                    -
                                                                    +{{ member.biodata.contact }}</option>
                                                            {% endfor %}
                                                        </optgroup>
                                                    </select>
                                                    <div style="margin-top: 10px;display: none" id="total_members_div">
                                                <span style="font-weight: bold;color: green">Total members selected: <span
                                                        id="member_count_selected">0</span></span>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="inputTextareaMembers">Message</label>
                                                    <textarea class="form-control" name="inputTextarea"
                                                              id="inputTextareaMembers" rows="3"
                                                              placeholder="Type message here" style="height: 80px;"
                                                              oninput="onchangeTextAreaMembers()"></textarea>

                                                    <span style="display: none" id="continueContentMember">
                                                        <div class="alert alert-warning" role="alert"
                                                             style="margin-top: 10px"
                                                             id="insuffient_messages_alert_member">
                                                          Insufficient messages
                                                        </div>

                                                        <div style="margin-top: 10px">
                                                            <button type="submit" class="btn btn-primary"
                                                                    id="continueSubmitMember"
                                                                    onclick="doContinueMember()">Continue</button>
                                                        </div>
                                                    </span>

                                                    <div style="margin-top: 10px; display: none" id="character_count">
                                                        <div><span><span
                                                                style="color:green;font-weight: bold; font-size: 16px; margin-right: 5px">Characters:</span><span
                                                                id="the_count">0</span><span id="per_member"
                                                                                             style="margin-left: 10px">Per member</span></span>
                                                        </div>
                                                        <div style="margin-top: 10px">
                                                            <p><span style="font-weight: bold">Note:</span> One single
                                                                message
                                                                can only contain 160 characters. If the characters
                                                                provided
                                                                exceed 160, another message will be created</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <button type="submit" class="btn btn-primary" id="memberSubmit"
                                                            onclick="handleSubmit('member')">Send SMS
                                                    </button>
                                                    <div class="spinner-border text-danger" role="status"
                                                         id="submittingMember"
                                                         style="display: none">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <div class="card border border-mute">
                                            <h3 class="card-header text-center">Send messages to the specified groups of
                                                people</h3>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label for="group_select">Select group(s)</label>
                                                    <select class="select2 form-control  border border-primary"
                                                            name="edit_group_single_select" id="group_select"
                                                            onchange="onchangeGroupSelect()">
                                                        <option value="" selected disabled>select a group</option>
                                                        <option value='members'>All members</option>
                                                        <option value='shareholder'>Shareholder members</option>
                                                        <option value='ordinary'>Ordinary members</option>
                                                        <option value='staff'>Staff members</option>
                                                        <option value='loans'>All loanees</option>
                                                        {#                                                //member for saving products#}
                                                        <optgroup label="Savings products">
                                                            {% for product in savingProductObj %}
                                                                <option value='saving_product{{ product.id }}'>{{ product.name }}
                                                                    (saving product) members
                                                                </option>
                                                            {% endfor %}
                                                        </optgroup>

                                                        {#                                                //members with certain loan types#}
                                                        <optgroup label="Loan types">
                                                            {% for loan in loanTypesObj %}
                                                                <option value='loan_type{{ loan.id }}'>{{ loan.name }}
                                                                    (loan
                                                                    type) loanees
                                                                </option>
                                                            {% endfor %}
                                                        </optgroup>

                                                        <optgroup label="Loan statuses">
                                                            <option value='status_applied'>Applied status</option>
                                                            <option value='status_appraised'>Appraised status</option>
                                                            <option value='status_approved'>Approved status</option>
                                                            <option value='status_disbursed'>Disbursed status</option>
                                                            <option value='status_closed'>Closed status</option>
                                                            <option value='status_rejected'>Rejected status</option>
                                                            <option value='status_waived_off'>Waived off status</option>
                                                            <option value='status_written_off'>Written off status
                                                            </option>
                                                            <option value='status_topped_up'>Topped up status</option>
                                                        </optgroup>

                                                    </select>
                                                    <div class="spinner-border text-danger" role="status"
                                                         id="fetchingCount"
                                                         style="display: none; margin-top: 10px">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                    <div style="margin-top: 10px;display: none" id="total_group_div">
                                                    <span style="font-weight: bold;color: green">Total members for selected groups:
                                                        <span id="group_count_selected">0</span>
                                                    </span>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="inputTextareaGroup">Message</label>
                                                    <textarea class="form-control" name="inputTextarea"
                                                              id="inputTextareaGroup" rows="3"
                                                              placeholder="Type message here" style="height: 80px;"
                                                              oninput="onchangeTextAreaGroup()"></textarea>
                                                    <span style="display: none" id="continueContent">
                                                        <div class="alert alert-warning" role="alert"
                                                             style="margin-top: 10px"
                                                             id="insuffient_messages_alert">
                                                          Insufficient messages
                                                        </div>

                                                        <div style="margin-top: 10px">
                                                            <button type="submit" class="btn btn-primary"
                                                                    id="continueSubmit"
                                                                    onclick="doContinue()">Continue</button>
                                                        </div>
                                                    </span>
                                                    <div style="margin-top: 10px; display: none"
                                                         id="character_count_group">
                                                        <span><span
                                                                style="color:green;font-weight: bold; font-size: 16px; margin-right: 5px">Characters:</span>
                                                            <span id="the_count_group">0</span><span
                                                                    id="per_member_group" style="margin-left: 10px">Per member</span>
                                                        </span>
                                                        <div style="margin-top: 10px">
                                                            <p><span style="font-weight: bold">Note:</span> One single
                                                                message
                                                                can only contain 160 characters. If the characters
                                                                provided
                                                                exceed 160, another message will be created</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <button type="submit" class="btn btn-primary" id="groupSubmit"
                                                            onclick="handleSubmit('group')" style="display: none">Send
                                                        SMS
                                                    </button>
                                                    <div class="spinner-border text-danger" role="status"
                                                         id="submittingGroup"
                                                         style="display: none">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}