{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% load mathfilters %}
{% block content %}
    {% block scripts %}
         <script>
            function showDetails(worker) {
                var workerType = worker.getAttribute("data-delete-id");
                var role = '/user-role/delete/' + workerType + '/';
                if (confirm("Are you sure you want to delete this transaction")) {
                    location.href = role
                }
            }

            const handleDeleteShare = (id) => {
                var role = 'shares/remove-share-transaction/' + id + '/';
                if (confirm("Are you sure you want to revert this transaction")) {
                    location.href = role
                }

            }
        </script>
        <script>

            function calculateShares(val) {
                let price = parseInt("{{ share_price_selling_at }}");
                let cap = parseInt("{{ market_cap_at }}");
                let sold = parseInt("{{ sold_at }}");
                let share_balance = cap / price - sold;
                let share_limit = parseInt("{{ share_limit_at }}");
                let amount = parseInt(val);
                let total_shares = amount / price;

                console.log(`Price ${price}, cap:${cap}, sold:${sold}`)

                {#console.log(share_balance + ' - ' + share_limit)#}

                if (Number.isInteger(amount) === true) {
                    if (amount > 0) {
                        if (total_shares > share_balance) {
                            document.getElementById("share-text").classList.add('text-warning');
                            document.getElementById("share-text").classList.remove('d-none');
                            document.getElementById("share-text").classList.remove('text-success');
                            document.getElementById("share-text").classList.remove('text-danger');
                            document.getElementById("confirm-btn").disabled = true;
                            document.getElementById("share-text").innerHTML = "Note! You have insufficient shares (" + share_balance + ") to sell " + total_shares + " shares";
                        } else {
                            document.getElementById("share-text").classList.add('text-success');
                            document.getElementById("share-text").classList.remove('d-none');
                            document.getElementById("share-text").classList.remove('text-warning');
                            document.getElementById("share-text").classList.remove('text-danger');
                            document.getElementById("confirm-btn").disabled = false;
                            document.getElementById("share-text").innerHTML = "A total of " + total_shares + " shares will be sold.";
                        }
                    } else {
                        document.getElementById("share-text").classList.add('text-warning');
                        document.getElementById("share-text").classList.remove('d-none');
                        document.getElementById("share-text").classList.remove('text-success');
                        document.getElementById("share-text").classList.remove('text-danger');
                        document.getElementById("confirm-btn").disabled = true;
                        document.getElementById("share-text").innerHTML = "Note! Enter the amount being spent on shares, not the number of shares being purchased.";
                    }
                } else {
                    document.getElementById("share-text").classList.add('text-danger');
                    document.getElementById("share-text").classList.remove('d-none');
                    document.getElementById("share-text").classList.remove('text-warning');
                    document.getElementById("share-text").classList.remove('text-success');
                    document.getElementById("confirm-btn").disabled = true;
                    document.getElementById("share-text").innerHTML = "Please! Enter the amount being spent on shares";
                }
            }

            function checkSimilarity(val) {
                console.log(val)
                let sender = document.getElementById('transfer').value;
                let receiver = val;

                if (sender == receiver) {
                    console.log('You can not transfer to the member')
                    document.getElementById("share-txt").classList.add('text-danger');
                    document.getElementById("share-txt").classList.remove('d-none');
                    document.getElementById('share-txt').innerHTML = "You can not transfer to the same member";
                    document.getElementById('transfer-btn').disabled = true;
                } else {
                    console.log('You can');
                }
            }

        </script>
    {% endblock %}
    <div class="card">
        {% if show_business_filters %}
        <div class="card-body">
            <form method="get">
                <div class="row">
                    <div class="col-md-2 form-group" >
                        <select class="form-control" name="business_filter" id="business_filter" required>
                            <option value="" >Select branch</option>
                            <option value="all_branches" {% if business_filter == 'all_branches' %}selected{% endif %}>All branches</option>

                            {% for branch in businesses_list_filter %}
                                <option value="{{ branch.business.id }}" {% if business_filter == branch.business.id|stringformat:"s" %}selected{% endif %}>{{ branch.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-2">
                        <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-filter"></i>
                            Filter
                        </button>
                        <a href="{% url 'index' %}"><button class="btn btn-secondary btn-sm" type="button"><i class="fa fa-filter"></i>
                            Reset
                        </button></a>
                    </div>
                    {% if the_filter_branch %}
                        <div class="col-md-8">
                            <span style="font-weight: bold;font-size: 15px">Showing results for {{ the_filter_branch }}</span>
                        </div>
                    {% endif %}

                </div>
            </form>
        </div>

    </div>
    {% endif %}
    <!-- Start row -->
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12 col-xl-12">
            <!-- Start row -->
            <div class="row">
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-circle-dollar-to-slot fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14"><abbr
                                            title="The value of {{ request.user.staff.biodata.business.name }} as determined by the market price of its shares and the total number of shares in issue.">Capitalisation </abbr>
                                    </h5>
                                    <p class="mb-0 text-dark font-weight-bold">
                                        <small>{{ currency }}</small> {{ cap|intcomma }}/=</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-filter-circle-dollar fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14">share price</h5>
                                    <p class="mb-0 text-dark font-weight-bold">
                                        <small>{{ currency }}</small> {{ price|intcomma }}/=</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-battery-full fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14"><abbr
                                            title="All the shares of {{ request.user.staff.biodata.business.name }} that have been authorized, issued and purchased by shareholder">Outstanding
                                        Shares</abbr></h5>
                                    <p class="mb-0 text-dark font-weight-bold">{{ shares|floatformat:1|intcomma }}
                                        <small>Shares</small></p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-sack-dollar fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14"><abbr
                                            title="The portion of {{ request.user.staff.biodata.business.name }}'s equity that has been derived by the issue of shares to shareholders">Share
                                        Capital</abbr></h5>
                                    <p class="mb-0 text-dark font-weight-bold">
                                        <small>{{ currency }}</small> {{ share_capital|floatformat:1|intcomma }}/=</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-circle fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14">Shares Sold</h5>
                                    <p class="mb-0 text-dark font-weight-bold">{{ sold|floatformat:1|intcomma }}
                                        <small>Shares</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-battery-half fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14"><abbr
                                            title="{{ request.user.staff.biodata.business.name }} shares that are not in circulation, nor have they been put up for sale">Shares
                                        Balance</abbr></h5>
                                    <p class="mb-0 text-dark font-weight-bold">{{ share_balance|floatformat:1|intcomma }}
                                        <small>Shares</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-people-group fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14">Total Shareholders</h5>
                                    <p class="mb-0 text-dark font-weight-bold">{{ share_holders.count|intcomma }}
                                        <small>Members</small></p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
                <!-- Start col -->
                <div class="col-lg-3 col-xl-3">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <i class="fa fa-street-view fa-3x"></i>
                                </div>
                                <div class="col-md-9 text-right">
                                    <h5 class="card-title font-14">Shares Limit</h5>
                                    <p class="mb-0 text-dark font-weight-bold">{{ share_limit|intcomma }}
                                        <small>Shares</small></p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <span class="font-13">Updated {% now "jS F Y H:i" %}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End col -->
            </div>
            <!-- End row -->
        </div>
        <!-- End col -->
        <!-- Start col -->
        <div class="col-lg-12 col-xl-12">
            <!-- Start row -->
            <div class="row">
                <!-- Start col -->
                <div class="col-lg-12 col-xl-12">
                    <div class="card m-b-15 border border-primary">
                        <div class="card-header">
                            <div class="row justify-content-between">
                                <div class="col-md-6">
                                    <h5 class="card-title mb-0 text-uppercase">Recent shares transactions</h5>
                                </div>
                                <div class="col-md-6">
                                    <div class="button-list d-flex justify-content-end">
                                        {% if not show_business_filters %}
                                        <a class="pull-right btn btn-sm btn-outline-dark text-capitalize mr-3"
                                           data-bs-toggle="modal" href="#sellShares">Sell Shares</a>
                                        {% endif %}
                                        <!-- Sell shares Modal -->
                                        <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade"
                                             id="sellShares"
                                             role="dialog" tabindex="-1">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <form method="post" action="{% url 'sell_shares' %}">
                                                        {% csrf_token %}
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="sellingModalLabel">Sell
                                                                Shares</h5>
                                                            <button aria-label="Close" class="btn-close"
                                                                    data-bs-dismiss="modal"
                                                                    type="button">
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <!-- <label class="col-form-label" for="buyer">Select Member
                                                                    *</label>
                                                                <select class="chosen-select"
                                                                        id="buyer" name="buyer" required>
                                                                    <option disabled selected value="">Select a member
                                                                        buying shares
                                                                    </option>
                                                                    {% for holder in share_holders %}
                                                                        <option value="{{ holder.id }}">{{ holder.biodata.name }}
                                                                        </option>
                                                                    {% endfor %}
                                                                </select> -->
                                                                <label class="col-form-label" for="buyer">Select Member
                                                                    *</label>
                                                                <select class="chosen-select"
                                                                        id="buyer" name="buyer" required>
                                                                    <option disabled selected value="">Select a member
                                                                        buying shares
                                                                    </option>
                                                                    {% for holder in all_shareholders %}
                                                                        <option value="{{ holder.members__id }}">{{ holder.members__biodata__name }} ({{holder.the_account__acc_number}})
                                                                        </option>
                                                                    {% endfor %}
                                                                </select>
                                                                <span class="text-primary italic small">A member buying the shares. Only shareholders appear here</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-form-label" for="pay_mode">Buyer
                                                                    Payment
                                                                    mode *</label>
                                                                <select class="form-control"
                                                                        id="pay_mode" name="pay_mode" required>
                                                                    <option disabled selected value="">Select an account
                                                                        receiving money
                                                                    </option>

                                                                    <option value="m">Members Acct
                                                                    </option>
                                                                    {% for account in finance_accounts %}
                                                                        <option value="{{ account.id }}">{{ account.name }}
                                                                            - {{ account.category.name }}
                                                                        </option>
                                                                    {% endfor %}
                                                                </select>
                                                                <span class="text-primary italic small">How does the customer want to pay for the shares?</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-form-label" for="sell-amount">Amount
                                                                    *</label>
                                                                <input class="form-control"
                                                                       id="sell-amount"
                                                                       name="selling_amount"
                                                                       onkeyup="calculateShares(this.value)"
                                                                       required type="text"/>
                                                                <span class="text-primary italic small">At {{ currency }} {{ share_price }} per share. How much is the customer paying?</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <p class="d-none" id="share-text"></p>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-form-label" for="sell-date">Transaction
                                                                    Date *</label>
                                                                <input class="form-control"
                                                                       id="sell-date"
                                                                       max="{% now 'Y-m-d' %}" name="selling_date"
                                                                       required
                                                                       type="date" value="{% now 'Y-m-d' %}"/>
                                                                <span class="text-primary italic small">The date this transaction occurred.</span>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn btn-secondary" data-bs-dismiss="modal"
                                                                    type="button">Close
                                                            </button>
                                                            <button class="btn btn-primary" id="confirm-btn"
                                                                    type="submit">
                                                                <i class="fa fa-check"></i> Confirm
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>

                                        {% if not show_business_filters %}
                                        <button class="pull-right btn btn-sm btn-outline-dark text-capitalize mr-3"
                                                data-bs-toggle="modal" href="#transferShares">transfer Shares
                                        </button>
                                        {% endif %}
                                        <!-- transfer shares Modal -->
                                        <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade"
                                             id="transferShares"
                                             role="dialog" tabindex="-1">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <form method="post" action="{% url 'transfer_shares' %}">
                                                        {% csrf_token %}
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="transferringModalLabel">Transfer
                                                                Shares</h5>
                                                            <button aria-label="Close" class="btn-close"
                                                                    data-bs-dismiss="modal"
                                                                    type="button">
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <label class="col-form-label" for="transfer">Select
                                                                    Member Transferring *</label>
                                                                <select class="chosen-select"
                                                                        id="transfer" name="transfer" required>
                                                                    <option disabled selected value="">Select a member
                                                                        transferring shares
                                                                    </option>
                                                                    {% for holder in all_shareholders %}
                                                                        <option value="{{ holder.members__id }}">{{ holder.members__biodata__name }} ({{holder.the_account__acc_number}})
                                                                        </option>
                                                                    {% endfor %}
                                                                </select>
                                                                <span class="text-primary italic small">A member transferring the shares. Only shareholders appear here</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-form-label" for="receiver">Select
                                                                    Member Receiving *</label>
                                                                <select class="chosen-select"
                                                                        onchange="checkSimilarity(this.value)"
                                                                        id="receiver" name="receiver" required>
                                                                    <option disabled selected value="">Select a member
                                                                        receiving shares
                                                                    </option>
                                                                    {% for holder in all_shareholders %}
                                                                        <option value="{{ holder.members__id }}">{{ holder.members__biodata__name }} ({{holder.the_account__acc_number}})
                                                                        </option>
                                                                    {% endfor %}
                                                                </select>
                                                                <span class="text-primary italic small">A member receiving the shares. Only shareholders appear here</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <p class="d-none" id="share-txt"></p>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-form-label" for="shares">Number of
                                                                    Shares *</label>
                                                                <input class="form-control"
                                                                       id="shares"
                                                                       name="shares"
                                                                       required
                                                                       type="number" value="0"/>
                                                                <span class="text-primary italic small">The number of shares being transferred.</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-form-label" for="transfer-date">Transaction
                                                                    Date *</label>
                                                                <input class="form-control"
                                                                       id="transfer-date"
                                                                       max="{% now 'Y-m-d' %}" name="transfer_date"
                                                                       required
                                                                       type="date" value="{% now 'Y-m-d' %}"/>
                                                                <span class="text-primary italic small">The date this transaction occurred.</span>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn btn-secondary" data-bs-dismiss="modal"
                                                                    type="button">Close
                                                            </button>
                                                            <button class="btn btn-primary" id="transfer-btn"
                                                                    type="submit">Confirm transfer
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body py-0 pl-0 pr-2">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover mb-0">
                                    <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Date</th>
                                        <th>Reference</th>
                                        <th>Buyer</th>
                                        <th>Shares</th>
                                        <th>Seller</th>
                                        <th>Narration</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for transact in transactions %}
                                        <tr>
                                            <td>{{ forloop.counter }}.</td>
                                            <td>{{ transact.date }}</td>
                                            <td>{% if transact.transaction.txno %}
                                                {{ transact.transaction.txno }} {% else %} NA {% endif %}</td>
                                            <td>{{ transact.buyer.biodata.name }}</td>
                                            <td>{{ transact.shares }}</td>
                                            <td>{% if transact.seller %} {{ transact.seller.biodata.name }} {% else %}
                                                {{ mybranch.business.name }} {% endif %}</td>
                                            <td>{{ transact.narration }}</td>
                                            <td>
                                                <div class="button-list d-flex justify-content-end">

                                                    <button class="btn btn-outline-dark btn-sm" onclick="handleDeleteShare('{{ transact.id }}')">
                                                        <i class=" fa fa-undo"></i> Revert
                                                    </button>


                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end">
                                    {% if transactions.has_previous %}
                                        <li class="page-item"><a class="page-link"
                                                                 href="?page={{ transactions.previous_page_number }}">«
                                            Previous</a></li>

                                        {% if transactions.number > 3 %}
                                            <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
                                            {% if transactions.number > 4 %}
                                                <li class="page-item"><a class="page-link">...</a></li>
                                            {% endif %}
                                        {% endif %}
                                    {% endif %}

                                    {% for num in transactions.paginator.page_range %}
                                        {% if transactions.number == num %}
                                            <li class="page-item"><a class="page-link"
                                                                     href="?page={{ num }}">{{ num }}</a></li>
                                        {% elif num > transactions.number|add:'-3' and num < transactions.number|add:'3' %}
                                            <li class="page-item"><a class="page-link"
                                                                     href="?page={{ num }}">{{ num }}</a></li>
                                        {% endif %}
                                    {% endfor %}

                                    {% if transactions.has_next %}
                                        {% if transactions.number < transactions.paginator.num_pages|add:'-3' %}
                                            <li class="page-item"><a class="page-link">...</a></li>
                                            <li class="page-item"><a class="page-link"
                                                                     href="?page={{ transactions.paginator.num_pages }}">{{ transactions.paginator.num_pages }}</a>
                                            </li>
                                        {% elif transactions.number < transactions.paginator.num_pages|add:'-2' %}
                                            <li class="page-item"><a class="page-link"
                                                                     href="?page={{ transactions.paginator.num_pages }}">{{ transactions.paginator.num_pages }}</a>
                                            </li>
                                        {% endif %}

                                        <li class="page-item"><a class="page-link"
                                                                 href="?page={{ transactions.next_page_number }}">Next
                                            »</a></li>
                                    {% endif %}

                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <!-- End col -->
            </div>
            <!-- End row -->
        </div>
        <!-- End col -->
    </div>
    <!-- End row -->
    <!-- End Contentbar -->
{% endblock %}