{% extends 'base_admin.html' %}
{% block title %}Rekap MoM PSB{% endblock %}

{% block content %}
<div class="container-fluid my-4">
    <h2 class="text-center text-white p-3 rounded mb-4 custom-bg">Rekap Month over Month PSB</h2>

    <!-- Filter Card -->
    <div class="d-flex justify-content-center">
        <div class="card shadow mb-4 w-100" style="max-width: 600px;">
            <div class="card-header py-3 custom-bg text-center">
                <h6 class="m-0 font-weight-bold text-white">Filter Tanggal</h6>
            </div>
            <div class="card-body">
                <form method="get" class="row justify-content-center">
                    <div class="col-md-8 text-center">
                        <label for="tanggal" class="form-label fw-semibold">Pilih Tanggal</label>
                        <input type="date" class="form-control text-center" name="tanggal" id="tanggal" value="{{ tanggal_input|default:'' }}">
                    </div>
                    <div class="col-md-4 d-flex align-items-end justify-content-center mt-2">
                        <button type="submit" class="btn btn-danger w-100">Tampilkan</button>
                    </div>
                </form>
                <p class="text-muted text-center mt-3">
                    Data membandingkan total PSB <strong>1–{{ tanggal }} {{ bulan_lalu }} {{ tahun_lalu }}</strong>
                    dengan <strong>1–{{ tanggal }} {{ bulan_ini }} {{ tahun_ini }}</strong>
                </p>
            </div>
        </div>
    </div>



    <!-- Total PSB -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 custom-bg">
            <h6 class="m-0 font-weight-bold text-white">Total Seluruh Agent</h6>
        </div>
        <div class="card-body">
            <table class="table table-bordered text-dark mb-0">
                <thead class="thead-dark fw-bold">
                    <tr>
                        <th>Total PSB {{ bulan_ini }}</th>
                        <th>Total PSB {{ bulan_lalu }}</th>
                        <th>Total Selisih</th>
                        <th>Total MoM (%)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ total_ini }}</td>
                        <td>{{ total_lalu }}</td>
                        <td>{{ total_selisih }}</td>
                        <td>{{ total_mom }}%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- SOBI Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 custom-bg">
            <h6 class="m-0 font-weight-bold text-white">Channel SOBI</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th>Nama Agent</th>
                            <th>ID Agent</th>
                            <th>Channel</th>
                            <th>PSB {{ bulan_ini }}</th>
                            <th>PSB {{ bulan_lalu }}</th>
                            <th>Selisih</th>
                            <th>MoM (%)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in data_mom %}
                            {% if item.channel|lower == 'sobi' %}
                            <tr>
                                <td>{{ item.nama }}</td>
                                <td>{{ item.id }}</td>
                                <td>{{ item.channel }}</td>
                                <td>{{ item.psb_ini }}</td>
                                <td>{{ item.psb_lalu }}</td>
                                <td>{{ item.selisih }}</td>
                                <td>{{ item.mom }}%</td>
                            </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-success fw-bold">
                        <tr>
                            <td colspan="3" class="text-end"><strong> SOBI</strong> </td>
                            <td><strong> {{ total_ini_sobi }} </strong> </td>
                            <td><strong> {{ total_lalu_sobi }} </strong> </td>
                            <td><strong> {{ total_selisih_sobi }} </strong> </td>
                            <td><strong> {{ total_mom_sobi }}% </strong> </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <!-- Outlet Table -->
    <div class="card shadow mb-5">
        <div class="card-header py-3 custom-bg">
            <h6 class="m-0 font-weight-bold text-white">Channel Outlet</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th>Nama Agent</th>
                            <th>ID Agent</th>
                            <th>Channel</th>
                            <th>PSB {{ bulan_ini }}</th>
                            <th>PSB {{ bulan_lalu }}</th>
                            <th>Selisih</th>
                            <th>MoM (%)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in data_mom %}
                            {% if item.channel|lower == 'outlet' %}
                            <tr>
                                <td>{{ item.nama }}</td>
                                <td>{{ item.id }}</td>
                                <td>{{ item.channel }}</td>
                                <td>{{ item.psb_ini }}</td>
                                <td>{{ item.psb_lalu }}</td>
                                <td>{{ item.selisih }}</td>
                                <td>{{ item.mom }}%</td>
                            </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-success fw-bold">
                        <tr>
                            <td colspan="3" class="text-end"><strong> Total Outlet</strong> </td>
                            <td><strong> {{ total_ini_outlet }} </strong> </td>
                            <td><strong> {{ total_lalu_outlet }} </strong> </td>
                            <td><strong> {{ total_selisih_outlet }} </strong> </td>
                            <td><strong> {{ total_mom_outlet }}% </strong>  </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}