{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Daftar ODP - CWN{% endblock %}

{% block content %}

<div class="max-w-[1300px] mx-auto">
    <h2 class="text-center text-white p-3 rounded mb-4 mt-2 bg-red-600">
        Monitoring ODP Tersedia
    </h2>

    <div class="bg-white shadow rounded-lg">
        <!-- Search -->
        <div class="p-4 border-b bg-red-300">
            <form method="get" class="flex gap-2">
                <input type="text" name="search_odp" 
                    value="{{ search_odp|default:'' }}"
                    class="w-full md:w-1/2 rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-md p-1"
                    placeholder="Cari ODP...">
                <button type="submit"
                        class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">
                    Cari
                </button>
            </form>
        </div>

        <!-- Filter -->
        <div class="p-4">
            <form method="get" class="space-y-3">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                    <!-- Kategori -->
                    <select name="kategori_occ" 
                            class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm">
                        <option value="">Semua Kategori</option>
                        <option value="BLACK" {% if request.GET.kategori_occ == 'BLACK' %}selected{% endif %}>BLACK</option>
                        <option value="BLACK (NEW ODP)" {% if request.GET.kategori_occ == 'BLACK (NEW ODP)' %}selected{% endif %}>BLACK (NEW ODP)</option>
                        <option value="GREEN" {% if request.GET.kategori_occ == 'GREEN' %}selected{% endif %}>GREEN</option>
                        <option value="YELLOW" {% if request.GET.kategori_occ == 'YELLOW' %}selected{% endif %}>YELLOW</option>
                        <option value="RED" {% if request.GET.kategori_occ == 'RED' %}selected{% endif %}>RED</option>
                        <option value="Unknown" {% if request.GET.kategori_occ == 'Unknown' %}selected{% endif %}>Unknown</option>
                    </select>

                    <!-- Kab/Kota -->
                    <input list="kabkota-list" name="kab_kota"
                           class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm"
                           placeholder="Kab/Kota" value="{{ request.GET.kab_kota }}">
                    <datalist id="kabkota-list">
                        {% for k in kab_kota_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>

                    <!-- Kecamatan -->
                    <input list="kecamatan-list" name="kecamatan"
                           class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm"
                           placeholder="Kecamatan" value="{{ request.GET.kecamatan }}">
                    <datalist id="kecamatan-list">
                        {% for k in kecamatan_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>

                    <!-- Kelurahan -->
                    <input list="kelurahan-list" name="kelurahan"
                           class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm"
                           placeholder="Kelurahan" value="{{ request.GET.kelurahan }}">
                    <datalist id="kelurahan-list">
                        {% for k in kelurahan_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                    <!-- Tgl Go Live -->
                    <input type="date" name="golive_date"
                           class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm"
                           value="{{ request.GET.golive_date }}">

                    <!-- Tahun -->
                    <input list="tahun-list" name="tahun" placeholder="Pilih Tahun"
                           class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm"
                           value="{{ request.GET.tahun }}">
                    <datalist id="tahun-list">
                        {% for k in tahun_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>

                    <!-- Bulan -->
                    <select name="bulan"
                            class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm">
                        <option value="">Bln</option>
                        <option value="01" {% if selected_bulan == "01" %}selected{% endif %}>01</option>
                        <option value="02" {% if selected_bulan == "02" %}selected{% endif %}>02</option>
                        <option value="03" {% if selected_bulan == "03" %}selected{% endif %}>03</option>
                        <option value="04" {% if selected_bulan == "04" %}selected{% endif %}>04</option>
                        <option value="05" {% if selected_bulan == "05" %}selected{% endif %}>05</option>
                        <option value="06" {% if selected_bulan == "06" %}selected{% endif %}>06</option>
                        <option value="07" {% if selected_bulan == "07" %}selected{% endif %}>07</option>
                        <option value="08" {% if selected_bulan == "08" %}selected{% endif %}>08</option>
                        <option value="09" {% if selected_bulan == "09" %}selected{% endif %}>09</option>
                        <option value="10" {% if selected_bulan == "10" %}selected{% endif %}>10</option>
                        <option value="11" {% if selected_bulan == "11" %}selected{% endif %}>11</option>
                        <option value="12" {% if selected_bulan == "12" %}selected{% endif %}>12</option>
                    </select>


                    <!-- Tanggal -->
                    <input type="number" name="tanggal" min="1" max="31" placeholder="Tgl"
                           class="rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500 text-sm"
                           value="{{ request.GET.tanggal }}">
                </div>

                <button type="submit" 
                        class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg text-sm">
                    Filter
                </button>
            </form>
        </div>

        <!-- Table -->
        <div class="p-4">
            {% if page_obj %}
            <div class="overflow-x-auto">
                <table id="table-odp" class="min-w-full border border-gray-200 text-sm text-center">
                    <thead class="bg-gray-800 text-white">
                        <tr>
                            <th class="p-2 border">No</th>
                            <th class="p-2 border">Nama ODP</th>
                            <th class="p-2 border">Latitude</th>
                            <th class="p-2 border">Longitude</th>
                            <th class="p-2 border">Available</th>
                            <th class="p-2 border">STO</th>
                            <th class="p-2 border">Kab/Kota</th>
                            <th class="p-2 border">Kecamatan</th>
                            <th class="p-2 border">Kelurahan</th>
                            <th class="p-2 border">SA</th>
                            <th class="p-2 border">HSA</th>
                            <th class="p-2 border">Kategori OCC</th>
                            <th class="p-2 border">Tgl Go Live</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in page_obj %}
                        <tr class="odd:bg-white even:bg-gray-50 hover:bg-red-50">
                            <td class="p-2 border">{{ forloop.counter }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.nama_odp }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.latitude }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.longitude }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.available }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.sto }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.kab_kota }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.kecamatan }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.kelurahan }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.sa }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.hsa }}</td>
                            <td class="p-2 border" contenteditable="false">{{ item.kategori_occ_calc }}</td>
                            <td class="p-2 border">{{ item.tanggal }}/{{ item.bulan }}/{{ item.tahun }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!-- PAGINATION -->
                <div class="mt-4 flex justify-center gap-2">
                    {% if page_obj.has_previous %}
                        <!-- First -->
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page=1"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&laquo;</a>

                        <!-- Previous -->
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.previous_page_number }}"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&lsaquo;</a>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
                            <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ num }}"
                            class="px-3 py-1 border rounded 
                                    {% if num == page_obj.number %}
                                        bg-red-600 text-white
                                    {% else %}
                                        bg-gray-200 hover:bg-gray-300
                                    {% endif %}">
                                {{ num }}
                            </a>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <!-- Next -->
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.next_page_number }}"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&rsaquo;</a>

                        <!-- Last -->
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.paginator.num_pages }}"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&raquo;</a>
                    {% endif %}
                </div>
            </div>
            <div class="pagination flex justify-center flex-wrap mt-4"></div>
            {% else %}
            <div class="text-center bg-blue-50 border border-blue-200 p-4 rounded-lg text-blue-700">
                Tidak ada data ODP untuk ditampilkan.
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Search --> 
<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('search-odp');
    searchInput.addEventListener('input', function () {
        const searchValue = this.value.toLowerCase();
        const rows = document.querySelectorAll('#table-odp tbody tr');
        rows.forEach(row => {
            const namaODP = row.cells[1].textContent.toLowerCase();
            row.style.display = namaODP.includes(searchValue) ? '' : 'none';
        });
    });
});
</script>


{% endblock %}