{% extends 'basic.html' %}
{% load humanize i18n static %}

{% block title %}
Daftar Pasien
{% endblock %}

{% block head %}
<style>
        label {
            display: block;
            text-align: right;
        }
        .tabcontent {
            display: none;
        }

        .tablinks {
            cursor: pointer;
            padding: 10px;
        }

</style>
<script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

</script>
{{ block.super }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
{% endblock %}

{% block content %}
{% language 'id' %}
<main class="h-100">

    {% include "header.html" %}
    <!-- main page content -->
    <div class="main-container container">
        <!--card pelayanan-->
        <div class="row mb-2">
            {% for x in messages %}
            <button class="btn btn-primary col-lg-12">{{ x }}</button>
            {% endfor %}
        </div>

        <div class="d-flex justify-content-center">
            <div class="row mb-3 mt-4">
                <div class="col">
                    <h4>Daftar Pasien</h4>
                </div>
            </div>
        </div>
        <div class="row mb-3 mt-4">
            <div class="card">
                <div class="card-body">
                    <form method="post" action="">
                        {% csrf_token %}
                        <div class="form-group mb-2">
                            <form action="/submit_form" method="post">
                                <label for="choice">Dokter:</label><br>
                                <select id="choice" class="form-control" name="choice">
                                    <option>Pilih Dokter</option>
                                    {% for x in dokter %}
                                    <option value="{{ x.id }}">KLINIK {{ x.poli.nama }} | {{ x.last_name }} {{ x.first_name }}</option>
                                    {% endfor %}
                                </select>
                            </form>
                        </div>
<!--                        <h3>dr. A. Aziz Asopari Sp.A M.Kes MM.Kes</h3><br><br>-->
                        <div class="form-group mb-2">
                            <label>Filter Berdasarkan Tanggal</label>
                            <input class="form-control" type="date" id="date" name="date">
                        </div>
                        <div class="form-group mb-2">
                            <label for="name">No RM :</label>
                            <input class="form-control" type="text" id="norm" name="norm">
                        </div>
                        <div class="form-group mb-2">
                            <label for="name">Nama Pasien</label>
                            <input class="form-control" type="text" id="name" name="name">
                        </div>
                        <div class="form-group mb-2">
                            <label for="name">Tipe Pasien</label>
                            <form action="" method="post">
                                <div class="row">
                                    <div class="col-4">
                                        <input type="radio" name="option" value="SEMUA">&nbsp;All
                                    </div>
                                    <div class="col-4">
                                        <input type="radio" name="option" value="SUDAH">&nbsp;Sudah&nbsp;Diperiksa
                                    </div>
                                    <div class="col-4">
                                        <input type="radio" name="option" value="BELUM">&nbsp;Belum&nbsp;Diperiksa
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="form-group mt-2">
                            <button type="submit" class="btn btn-primary btn-block">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
    // Display the first tab by default
    document.getElementsByClassName("tablinks")[0].click();

        </script>
        <div class="row mb-3 mt-4">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-vital-sign-tab" data-bs-toggle="pill" data-bs-target="#pills-vital-sign" type="button" role="tab" aria-controls="pills-vital-sign" aria-selected="true">Semua Pasien</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-soapic-tab" data-bs-toggle="pill" data-bs-target="#pills-soapic" type="button" role="tab" aria-controls="pills-soapic" aria-selected="true">Rawat Jalan</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-resep-tab" data-bs-toggle="pill" data-bs-target="#pills-resep" type="button" role="tab" aria-controls="pills-resep" aria-selected="true">Rawat Inap</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-radiologi-tab" data-bs-toggle="pill" data-bs-target="#pills-radiologi" type="button" role="tab" aria-controls="pills-radiologi" aria-selected="true">IGD</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-lab-tab" data-bs-toggle="pill" data-bs-target="#pills-lab" type="button" role="tab" aria-controls="pills-lab" aria-selected="true">History</button>
              </li>
            </ul>
                        <div class="tab-content" id="pills-tabContent">
              <div class="tab-pane fade show active" id="pills-vital-sign" role="tabpanel" aria-labelledby="pills-vital-sign-tab" tabindex="0">
                {% include 'pemeriksaan/pendaftaran/semuapasien.html' %}
              </div>
              <div class="tab-pane fade" id="pills-soapic" role="tabpanel" aria-labelledby="pills-soapic-tab" tabindex="0">
                {% include 'pemeriksaan/pendaftaran/rajal.html' %}
              </div>
              <div class="tab-pane fade" id="pills-resep" role="tabpanel" aria-labelledby="pills-resep-tab" tabindex="0">
                {% include 'pemeriksaan/pendaftaran/ranap.html' %}
              </div>
              <div class="tab-pane fade" id="pills-radiologi" role="tabpanel" aria-labelledby="pills-radiologi-tab" tabindex="0">
                {% include 'pemeriksaan/pendaftaran/igd.html' %}
              </div>
              <div class="tab-pane fade" id="pills-lab" role="tabpanel" aria-labelledby="pills-lab-tab" tabindex="0">
                {% include 'pemeriksaan/pendaftaran/history.html' %}
              </div>
            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
</main>
    <script>
        function speak(text) {
            var speech = new SpeechSynthesisUtterance();
            speech.text = text
            speech.lang = 'id'
            speech.rate = 0.7
            window.speechSynthesis.speak(speech)
        }


    </script>
{% endlanguage %}
{% endblock %}