{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Toggle date filter inputs
                document.getElementById('date_type').addEventListener('change', function () {
                    const singleDateDiv = document.getElementById('single_date_div');
                    const dateRangeDiv = document.getElementById('date_range_div');

                    if (this.value === 'single') {
                        singleDateDiv.style.display = 'block';
                        dateRangeDiv.style.display = 'none';
                    } else {
                        singleDateDiv.style.display = 'none';
                        dateRangeDiv.style.display = 'block';
                    }
                });

                // Set initial date type based on URL parameters
                const urlParams = new URLSearchParams(window.location.search);
                const dateType = urlParams.get('date_type');
                if (dateType) {
                    document.getElementById('date_type').value = dateType;
                    document.getElementById('date_type').dispatchEvent(new Event('change'));
                }

                // Set initial dates if they exist in URL
                const singleDate = urlParams.get('single_date');
                const startDate = urlParams.get('start_date');
                const endDate = urlParams.get('end_date');

                if (singleDate) document.getElementById('single_date').value = singleDate;
                if (startDate) document.getElementById('start_date').value = startDate;
                if (endDate) document.getElementById('end_date').value = endDate;
            });
        </script>
    {% endblock %}

    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">

            <div class="card m-b-30">
                <!-- <div class="card-header">
                </div> -->

                <div class="card-body">
                    <div class="">
                        <div class="row mb-4">
                            <div class="col">
                                <h5 class="text-muted">
                                    {% if date_type == 'single' and single_date %}
                                        Showing data for {{ single_date|date:"l, F d, Y" }}
                                    {% elif date_type == 'range' and start_date and end_date %}
                                        Showing data from {{ start_date }} to
                                        {{ end_date }}
                                    {% else %}
                                        Today: {{ today|date:"l, F d, Y" }}
                                    {% endif %}
                                </h5>
                            </div>

                            <div class="col button-list d-flex align-items-center justify-content-end">
                                {% if  single_date or start_date or end_date %}
                                    <a href="{% url 'daily_member_report' %}"
                                       class="btn btn-sm btn-outline-secondary me-2">Reset Filters</a>
                                {% endif %}

                                <form method="GET" class="" action="{% url 'export_daily_member_report' %}">


                                            <select hidden class="form-control form-control-sm" name="business_filter" id="business_filter">
                                                <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>
                                    <select hidden class="form-select" id="date_type" name="date_type"
                                            style="display: none">
                                        <option value="single" {% if date_type == 'single' %}selected{% endif %}>
                                            Single Date
                                        </option>
                                        <option value="range" {% if date_type == 'range' %}selected{% endif %}>Date
                                            Range
                                        </option>
                                    </select>

                                    <input type="hidden" class="form-control form-control-sm" id="single_date"
                                           name="single_date" value="{{ single_date|date:'Y-m-d' }}">

                                    <input type="hidden" class="form-control form-control-sm"
                                           id="start_date"
                                           name="start_date"
                                           value="{{ start_date|date:'Y-m-d' }}"
                                    >
                                    <input type="hidden" class="form-control form-control-sm"
                                           id="end_date"
                                           name="end_date"
                                           value="{{ end_date|date:'Y-m-d' }}"
                                    >

                                    <button type="submit" class="btn btn-sm btn-outline-primary">Export
                                    </button>
                                </form>

                                {% comment %}
                                <a href="{% url 'export_daily_member_report' %}"
                               class="btn btn-sm btn-outline-primary">Export</a>
                               {% endcomment %}
                            </div>
                        </div>

                        <!-- Date Filter Form -->
                        <div class="row mb-3">
                            <div class="">
                                <form method="GET" class="row g-3">

                                    {% if show_business_filters %}
                                        <div class="col-md-2 form-group" >
                                            <label class="form-label">Filter branch</label>
                                            <select class="form-control form-control-sm" name="business_filter" id="business_filter">
                                                <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>
                                        {% endif %}
                                    <div class="col-md-3">
                                        <label class="form-label">Filter Type</label>
                                        <select class="form-select" id="date_type" name="date_type">
                                            <option value="single" {% if date_type == 'single' %}selected{% endif %}>
                                                Single Date
                                            </option>
                                            <option value="range" {% if date_type == 'range' %}selected{% endif %}>Date
                                                Range
                                            </option>
                                        </select>
                                    </div>

                                    <div class="col-md-3" id="single_date_div"
                                         {% if date_type == 'range' %}style="display: none;"{% endif %}>
                                        <label class="form-label">Date</label>
                                        <input type="date" class="form-control form-control-sm" id="single_date"
                                               name="single_date" value="{{ single_date|date:'Y-m-d' }}">
                                    </div>

                                    <div class="col-md-6" id="date_range_div"
                                         {% if date_type != 'range' %}style="display: none;"{% endif %}>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label">Start Date</label>
                                                <input type="date" class="form-control form-control-sm"
                                                       id="start_date"
                                                       name="start_date"
                                                       value="{{ start_date|date:'Y-m-d' }}"
                                                >
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">End Date</label>
                                                <input type="date" class="form-control form-control-sm"
                                                       id="end_date"
                                                       name="end_date"
                                                       value="{{ end_date|date:'Y-m-d' }}"
                                                >
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">&nbsp;</label>
                                        <button type="submit" class="btn btn-outline-primary d-block">Filter
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row">
                            <!-- Daily Statistics Cards -->
                            <div class="col-md-4 mb-4">
                                <a href="#savings-tab" data-bs-toggle="tab" aria-expanded="true"
                                   class="card bg-primary text-white h-100">
                                    <div class="card-body">
                                        <h5 class="card-title">Total Savings </h5>
                                        <h2 class="card-text">{{ total_savings|intcomma }} UGX</h2>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-4 mb-4">
                                <a href="#shares-tab" data-bs-toggle="tab" aria-expanded="false"
                                   class="card bg-success text-white h-100">
                                    <div class="card-body">
                                        <h5 class="card-title">Shares Bought </h5>
                                        <h2 class="card-text">{{ total_shares|default:0|intcomma }}</h2>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-4 mb-4">
                                <a href="#members-tab" data-bs-toggle="tab" aria-expanded="false"
                                   class="card bg-info text-white h-100">
                                    <div class="card-body">
                                        <h5 class="card-title">New Members </h5>
                                        <h2 class="card-text">{{ new_members_count|intcomma }}</h2>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>


                    <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
                        <li class="nav-item">
                            <a href="#savings-tab" data-bs-toggle="tab" aria-expanded="true"
                               class="nav-link rounded-0 active">
                                <i class="fa fa-user-circle-o d-md-none d-block"></i>
                                <span class="d-none d-md-block">Savings</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#shares-tab" data-bs-toggle="tab" aria-expanded="false"
                               class="nav-link rounded-0 ">
                                <i class="faf fa-list-check d-md-none d-block"></i>
                                <span class="d-none d-md-block">Shares</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#members-tab" data-bs-toggle="tab" aria-expanded="false"
                               class="nav-link rounded-0">
                                <i class="fa fa-bills d-md-none d-block"></i>
                                <span class="d-none d-md-block">New Members</span>
                            </a>
                        </li>

                    </ul>

                    <div class="tab-content" id="pills-tab-content-button">

                        <div class="tab-pane fade show active" id="savings-tab" role="tabpanel"
                             aria-labelledby="pills-loan-tab-button">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Account No.</th>
                                    <th scope="col">Amount</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for transaction in today_savings %}
                                    <tr>
                                        <th>{{ forloop.counter }}.</th>
                                        <td>{{ transaction.account_number }}</td>
                                        <td>{{ transaction.amount|intcomma }}</td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="3" class="text-center">No Savings</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <div class="tab-pane fade" id="shares-tab" role="tabpanel"
                             aria-labelledby="pills-trans-tab-button">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Shares</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for share in today_shares %}
                                    <tr>
                                        <th>{{ forloop.counter }}.</th>
                                        <td>{{ share.name }}</td>
                                        <td>{{ share.shares }}</td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="3" class="text-center">No Shares bought</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>

                            <nav aria-label="Page navigation">
                                <ul class="pagination d-flex justify-content-end">
                                    {% if combined.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page=1" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">begin</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                    {% for n in combined.paginator.page_range %}
                                        {% if combined.number == n %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ n }}<span
                                                        class="sr-only">(current)</span></span>
                                            </li>
                                        {% elif n > combined.number|add:'-3' and n < combined.number|add:'3' %}
                                            <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}

                                    {% if combined.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ combined.paginator.num_pages }}"
                                               aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">end</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>

                        <div class="tab-pane fade" id="members-tab" role="tabpanel"
                             aria-labelledby="pills-trans-tab-button">
                            <!-- New Members Table -->
                            <div class="row mt-4">
                                {% if new_members %}
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Gender</th>
                                                <th>Contact</th>
                                                <th>Shares Bought</th>
                                                <th>Amount Saved</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for member in new_members %}
                                                <tr>
                                                    <td>{{ forloop.counter }}</td>
                                                    <td>{{ member.biodata.name|default:member.name }}</td>
                                                    <td>{{ member.biodata.gender }}</td>
                                                    <td>{{ member.biodata.contact }}</td>
                                                    <td>{{ member.shares_bought }}</td>
                                                    <td>{{ member.amount_saved }}</td>
                                                </tr>
                                            {% empty %}
                                                <tr>
                                                    <td colspan="5" class="text-center">No New Members</td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% else %}
                                    <p class="text-muted text-center mb-0">No members joined.</p>
                                {% endif %}
                            </div>

                            <nav aria-label="Page navigation">
                                <ul class="pagination justify-content-end">
                                    {% if members_list.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page=1" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">begin</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                    {% for n in members_list.paginator.page_range %}
                                        {% if members_list.number == n %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ n }}<span
                                                        class="sr-only">(current)</span></span>
                                            </li>
                                        {% elif n > members_list.number|add:'-3' and n < members_list.number|add:'3' %}
                                            <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}

                                    {% if members_list.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ members_list.paginator.num_pages }}"
                                               aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">end</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>

                        </div>


                    </div>


                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}