{% extends 'base_admin.html' %}

{% block title %}Data ARPU{% endblock %}

{% block content %}
<div class="container-fluid">

    <!-- Judul -->
    <h4 class="text-center text-white p-3 rounded mt-4 mb-4 custom-bg">
        ARPU PS Digital Channel CWN {{ bulan }} {{ tahun }}
    </h4>

    <!-- Filter -->
    <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 Bulan & Tahun</h6>
            </div>
            <div class="card-body">
                <form method="get" class="row align-items-end g-3">
                    <div class="col-md-4">
                        <label for="bulan" class="form-label fw-semibold">Bulan</label>
                        <select name="bulan" id="bulan" class="form-control">
                            <option value="01" {% if bulan_num == 1 %}selected{% endif %}>01</option>
                            <option value="02" {% if bulan_num == 2 %}selected{% endif %}>02</option>
                            <option value="03" {% if bulan_num == 3 %}selected{% endif %}>03</option>
                            <option value="04" {% if bulan_num == 4 %}selected{% endif %}>04</option>
                            <option value="05" {% if bulan_num == 5 %}selected{% endif %}>05</option>
                            <option value="06" {% if bulan_num == 6 %}selected{% endif %}>06</option>
                            <option value="07" {% if bulan_num == 7 %}selected{% endif %}>07</option>
                            <option value="08" {% if bulan_num == 8 %}selected{% endif %}>08</option>
                            <option value="09" {% if bulan_num == 9 %}selected{% endif %}>09</option>
                            <option value="10" {% if bulan_num == 10 %}selected{% endif %}>10</option>
                            <option value="11" {% if bulan_num == 11 %}selected{% endif %}>11</option>
                            <option value="12" {% if bulan_num == 12 %}selected{% endif %}>12</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="tahun" class="form-label fw-semibold">Tahun</label>
                        <input type="number" name="tahun" id="tahun" class="form-control" value="{{ tahun }}">
                    </div>
                    <div class="col-md-4 mb-1">
                        <button type="submit" class="btn btn-danger px-4">Tampilkan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Tabel ARPU -->
    <div class="card shadow">
        <div class="card-header custom-bg text-white fw-bold text-center">
            Rekapitulasi PS & ARPU
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="thead-dark">
                        <tr>
                            <th>Nama Paket</th>
                            <th>Jumlah PS</th>
                            <th>ARPU Rata-Rata</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ table_html|safe }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
{% endblock %}