{% extends 'layout.html' %}

{% block content %}


<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center bg-dark border border-dark-blue rounded shadow-md px-3 py-2">
    <div class="">
        <h1>{{ title }}</h1>
    </div>
    <div class="d-flex gap-2">

        <select name="status" id="status" class="form-select form-select-sm">
            <option value="">Filtre Seç</option>
            <option value="0">Tümü</option>
            <option value="1">Beklemede</option>
            <option value="2">YZ-Tahmin</option>
        </select>
        <a href="{{ url_for('main.patient_create') }}" style="min-width: 120px;" class="btn btn-sm btn-outline-info"><i class="bi bi-clipboard2-plus-fill"></i> Vaka Oluştur</a>
        <a href="{{ url_for('main.export') }}" style="min-width: 120px;" class="btn btn-sm btn-outline-warning"><i class="bi bi-file-earmark-excel-fill"></i> Excel'e Aktar</a>
    </div>
</div>

<div class="row mt-3">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Vaka Listesi</h5>
            </div>
            <div class="card-body table-responsive">
                {% if patients.items %}
                    <table class="table table-hover table-dark">
                        <thead>
                            <tr>
                                <th scope="col">Yükleyen</th>
                                <th scope="col">Vaka Klasörü</th>
                                <th scope="col">Vaka Tipi</th>
                                <th scope="col">Durumu</th>
                                <th scope="col">Vaka Seçimi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for patient in patients.items %}
                            <tr>
                                <td class="align-middle">{{ patient.get_user().full_name }}</td>
                                <td class="align-middle">{{ patient.case_dir }}</td>
                                <td class="align-middle">{{ patient.case_type }}</td>
                                <td class="align-middle">
                                    {% if patient.status == 1 %}
                                        <span class="badge w-50 bg-danger">Beklemede</span>
                                    {% elif patient.status == 2 and current_user.id in patient.assessor_ids %}
                                        <span class="badge w-50 bg-info text-dark">Yorumlandı</span>
                                    {% else %}
                                        <span class="badge w-50 bg-warning text-dark">Yorum Bekleniyor</span>
                                    {% endif %}
                                </td>
                                <td class="align-middle"><a href="{{ url_for('main.patient_detail', patient_id=patient.id) }}" class="btn btn-sm btn-outline-info">Vaka Seç</a></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                <div class="alert alert-info">Henüz vaka oluşturulmamıştır.</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-center">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% for page_num in patients.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                {% if page_num %}
                    {% if patients.page == page_num %}
                    <li class="page-item active"><span class="page-link">{{ page_num }}</span></li>
                    {% else %}
                    <li class="page-item"><a class="page-link" href="{{ url_for('main.home', page=page_num) }}&status={{ status }}">{{ page_num }}</a></li>
                    {% endif %}
                {% else %}
            {% endif %}

            {% endfor %}
        </ul>
    </nav>
</div>



{% endblock content %}


{% block scripts %}
    <script>

        document.addEventListener('DOMContentLoaded', function() {
            // 1. Get the select element
            const statusSelect = document.getElementById('status');
            const baseUrl = "/home"; // Define the base URL for redirection
            const status = "{{ status }}"; // Get the current status value

            // 2. Add an 'change' event listener
            statusSelect.addEventListener('change', function() {
                // 3. Get the selected value
                const selectedValue = this.value;

                // 4. Construct the new URL
                const newUrl = `${baseUrl}?status=${selectedValue}`;

                // 5. Redirect the page
                window.location.href = newUrl;
            });
        });

    </script>
{% endblock scripts %}