{% extends "base_admin.html" %}

{% block title %}Rekap PSB Harian Agent{% endblock %}

{% block content %}
<div class="container-fluid mt-4" style="max-width: 1300px; margin-left: auto; margin-right: auto;">
    <h1 class="mb-4 text-center text-white p-3 rounded mt-2 custom-bg" style="margin-bottom: 15px;">Rekap Harian Agent</h1>

    <div class="d-flex justify-content-center">
        <div class="card shadow mb-4 w-100" style="max-width: 900px;">
            <!-- <div class="card-header custom-bg text-white">
                <h5 class="mb-0">📅 Filter Periode</h5>
            </div> -->
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-5">
                        <label for="year" class="form-label text-dark fw-bold">Tahun</label>
                        <input type="text" name="year" id="year" value="{{ selected_year }}" class="form-control border-danger text-dark" placeholder="Contoh: 2024">
                    </div>
                    <div class="col-md-5">
                        <label for="month" class="form-label text-dark fw-bold">Bulan</label>
                        <select name="month" id="month" class="form-control border-danger text-dark">
                            <option value="01" {% if selected_month == "01" %}selected{% endif %}>Januari</option>
                            <option value="02" {% if selected_month == "02" %}selected{% endif %}>Februari</option>
                            <option value="03" {% if selected_month == "03" %}selected{% endif %}>Maret</option>
                            <option value="04" {% if selected_month == "04" %}selected{% endif %}>April</option>
                            <option value="05" {% if selected_month == "05" %}selected{% endif %}>Mei</option>
                            <option value="06" {% if selected_month == "06" %}selected{% endif %}>Juni</option>
                            <option value="07" {% if selected_month == "07" %}selected{% endif %}>Juli</option>
                            <option value="08" {% if selected_month == "08" %}selected{% endif %}>Agustus</option>
                            <option value="09" {% if selected_month == "09" %}selected{% endif %}>September</option>
                            <option value="10" {% if selected_month == "10" %}selected{% endif %}>Oktober</option>
                            <option value="11" {% if selected_month == "11" %}selected{% endif %}>November</option>
                            <option value="12" {% if selected_month == "12" %}selected{% endif %}>Desember</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-grid align-items-end">
                        <button type="submit" class="btn btn-danger fw-bold mt-md-4">🔍 Filter</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <!-- TABEL OUTLET -->
    <div class="card shadow mb-5">
        <div class="card-header custom-bg text-white">
            <h5 class="m-0">Data Outlet</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive" style="max-width: 100%; overflow-x: auto;">
                <table class="table table-bordered table-sm text-center text-nowrap align-middle" style="min-width: 1800px;">
                    <thead class="thead-dark text-white">
                        <tr>
                            <th>Agent ID</th>
                            <th>Nama Agent</th>
                            <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
                            <th>6</th><th>7</th><th>8</th><th>9</th><th>10</th>
                            <th>11</th><th>12</th><th>13</th><th>14</th><th>15</th>
                            <th>16</th><th>17</th><th>18</th><th>19</th><th>20</th>
                            <th>21</th><th>22</th><th>23</th><th>24</th><th>25</th>
                            <th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th>
                            <th>Total PSB</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in data_outlet %}
                        <tr>
                            <td>{{ row.1 }}</td>
                            <td>{{ row.2 }}</td>
                            <td>{{ row.5 }}</td><td>{{ row.6 }}</td><td>{{ row.7 }}</td><td>{{ row.8 }}</td><td>{{ row.9 }}</td>
                            <td>{{ row.10 }}</td><td>{{ row.11 }}</td><td>{{ row.12 }}</td><td>{{ row.13 }}</td><td>{{ row.14 }}</td>
                            <td>{{ row.15 }}</td><td>{{ row.16 }}</td><td>{{ row.17 }}</td><td>{{ row.18 }}</td><td>{{ row.19 }}</td>
                            <td>{{ row.20 }}</td><td>{{ row.21 }}</td><td>{{ row.22 }}</td><td>{{ row.23 }}</td><td>{{ row.24 }}</td>
                            <td>{{ row.25 }}</td><td>{{ row.26 }}</td><td>{{ row.27 }}</td><td>{{ row.28 }}</td><td>{{ row.29 }}</td>
                            <td>{{ row.30 }}</td><td>{{ row.31 }}</td><td>{{ row.32 }}</td><td>{{ row.33 }}</td><td>{{ row.34 }}</td>
                            <td>{{ row.35 }}</td><td>{{ row.36 }}</td>
                        </tr>
                        {% endfor %}
                        <tr class="bg-danger text-white fw-bold">
                            <td colspan="2">Total</td>
                            <td>{{ total_outlet.0 }}</td><td>{{ total_outlet.1 }}</td><td>{{ total_outlet.2 }}</td><td>{{ total_outlet.3 }}</td><td>{{ total_outlet.4 }}</td>
                            <td>{{ total_outlet.5 }}</td><td>{{ total_outlet.6 }}</td><td>{{ total_outlet.7 }}</td><td>{{ total_outlet.8 }}</td><td>{{ total_outlet.9 }}</td>
                            <td>{{ total_outlet.10 }}</td><td>{{ total_outlet.11 }}</td><td>{{ total_outlet.12 }}</td><td>{{ total_outlet.13 }}</td><td>{{ total_outlet.14 }}</td>
                            <td>{{ total_outlet.15 }}</td><td>{{ total_outlet.16 }}</td><td>{{ total_outlet.17 }}</td><td>{{ total_outlet.18 }}</td><td>{{ total_outlet.19 }}</td>
                            <td>{{ total_outlet.20 }}</td><td>{{ total_outlet.21 }}</td><td>{{ total_outlet.22 }}</td><td>{{ total_outlet.23 }}</td><td>{{ total_outlet.24 }}</td>
                            <td>{{ total_outlet.25 }}</td><td>{{ total_outlet.26 }}</td><td>{{ total_outlet.27 }}</td><td>{{ total_outlet.28 }}</td><td>{{ total_outlet.29 }}</td>
                            <td>{{ total_outlet.30 }}</td><td>{{ total_psb_outlet }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- TABEL SOBI -->
    <div class="card shadow mb-5">
        <div class="card-header custom-bg text-white">
            <h5 class="m-0">Data SOBI</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive" style="max-width: 100%; overflow-x: auto;">
                <table class="table table-bordered table-sm text-center text-nowrap align-middle" style="min-width: 1800px;">
                    <thead class="thead-dark text-white">
                        <tr>
                            <th>Agent ID</th>
                            <th>Nama Agent</th>
                            <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
                            <th>6</th><th>7</th><th>8</th><th>9</th><th>10</th>
                            <th>11</th><th>12</th><th>13</th><th>14</th><th>15</th>
                            <th>16</th><th>17</th><th>18</th><th>19</th><th>20</th>
                            <th>21</th><th>22</th><th>23</th><th>24</th><th>25</th>
                            <th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th>
                            <th>Total PSB</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in data_sobi %}
                        <tr>
                            <td>{{ row.1 }}</td>
                            <td>{{ row.2 }}</td>
                            <td>{{ row.5 }}</td><td>{{ row.6 }}</td><td>{{ row.7 }}</td><td>{{ row.8 }}</td><td>{{ row.9 }}</td>
                            <td>{{ row.10 }}</td><td>{{ row.11 }}</td><td>{{ row.12 }}</td><td>{{ row.13 }}</td><td>{{ row.14 }}</td>
                            <td>{{ row.15 }}</td><td>{{ row.16 }}</td><td>{{ row.17 }}</td><td>{{ row.18 }}</td><td>{{ row.19 }}</td>
                            <td>{{ row.20 }}</td><td>{{ row.21 }}</td><td>{{ row.22 }}</td><td>{{ row.23 }}</td><td>{{ row.24 }}</td>
                            <td>{{ row.25 }}</td><td>{{ row.26 }}</td><td>{{ row.27 }}</td><td>{{ row.28 }}</td><td>{{ row.29 }}</td>
                            <td>{{ row.30 }}</td><td>{{ row.31 }}</td><td>{{ row.32 }}</td><td>{{ row.33 }}</td><td>{{ row.34 }}</td>
                            <td>{{ row.35 }}</td><td>{{ row.36 }}</td>
                        </tr>
                        {% endfor %}
                        <tr class="bg-danger text-white fw-bold">
                            <td colspan="2">Total</td>
                            <td>{{ total_sobi.0 }}</td><td>{{ total_sobi.1 }}</td><td>{{ total_sobi.2 }}</td><td>{{ total_sobi.3 }}</td><td>{{ total_sobi.4 }}</td>
                            <td>{{ total_sobi.5 }}</td><td>{{ total_sobi.6 }}</td><td>{{ total_sobi.7 }}</td><td>{{ total_sobi.8 }}</td><td>{{ total_sobi.9 }}</td>
                            <td>{{ total_sobi.10 }}</td><td>{{ total_sobi.11 }}</td><td>{{ total_sobi.12 }}</td><td>{{ total_sobi.13 }}</td><td>{{ total_sobi.14 }}</td>
                            <td>{{ total_sobi.15 }}</td><td>{{ total_sobi.16 }}</td><td>{{ total_sobi.17 }}</td><td>{{ total_sobi.18 }}</td><td>{{ total_sobi.19 }}</td>
                            <td>{{ total_sobi.20 }}</td><td>{{ total_sobi.21 }}</td><td>{{ total_sobi.22 }}</td><td>{{ total_sobi.23 }}</td><td>{{ total_sobi.24 }}</td>
                            <td>{{ total_sobi.25 }}</td><td>{{ total_sobi.26 }}</td><td>{{ total_sobi.27 }}</td><td>{{ total_sobi.28 }}</td><td>{{ total_sobi.29 }}</td>
                            <td>{{ total_sobi.30 }}</td><td>{{ total_psb_sobi }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}