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

{% block title %}
Pemanggil Antrian
{% endblock %}

{% block head %}
{{ 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>Loket Pendaftaran</h4>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center">
            <div class="row mb-3 mt-4 ">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <form method="post" action="/pemeriksaan/antrianpilihloket">
                                {% csrf_token %}
                                <div class="form-group mb-2">
                                    <center><label>Loket Anda</label></center>
                                    <input class="form-control" type="text" name="nama" value="{{ loketanda.nama }}">
                                </div>
                                <div class="form-group mt-2">
                                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% if antrian %}
        <div class="row mb-3 mt-4 ">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="card-header bg-primary text-light text-center">
                            ANTRIAN UMUM
                        </div>

                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th scope="col">Nomor Antrian</th>
                                <th scope="col">Waktu Mengantri</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for x in antrian %}
                            <tr>
                                <th rowspan="2"><center>{{ x.nomor_antrian }}</center></th>
                                <td><b>Kode Booking:</b> {{ x.kode_booking }} <b>| Waktu:</b> {{ x.created_at }} WIB</td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="row">
                                        {% if x.loket %}
                                        {% else %}
                                        <center>
                                            <div class="col">
                                                <form method="post" action="/pemeriksaan/antrianclaim" class="mb-2">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="id" value="{{ x.id }}">
                                                    <button type="submit" class="btn btn-primary btn-block">Mulai
                                                        Panggil
                                                    </button>
                                                </form>
                                            </div>
                                        </center>
                                        {% endif %}

                                        {% if x.loket.petugas.username == request.user.username %}
                                            <div class="col">
                                                <div class="form-group mb-2">
                                                    <input type="hidden" id="text{{ forloop.counter }}"
                                                           value="Nomor Antrian {{ x.nomor_antrian }}, silahkan ke loket {{ loketanda.nama }}">
                                                    <button type="submit" class="btn btn-warning btn-block text-light"
                                                            onclick="speak{{ forloop.counter }}()">Panggil
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <form method="post" action="/pemeriksaan/pendaftaran"
                                                      class="mb-2">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="kode_booking" value="{{ x.kode_booking }}">
                                                    <button type="submit" class="btn btn-success btn-block text-light">
                                                        Pasien Hadir
                                                    </button>
                                                </form>
                                            </div>
                                            <div class="col">
                                                <form method="post" action="/pemeriksaan/antrianbatal" class="mb-2">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="id" value="{{ x.id }}">
                                                    <button type="submit" class="btn btn-danger btn-block text-light">
                                                        Batalkan
                                                    </button>
                                                </form>
                                            </div>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% if antrianbpjs %}
        <div class="row mb-3 mt-4 ">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="card-header bg-success text-light text-center">
                            ANTRIAN BPJS
                        </div>

                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th scope="col">Nomor Antrian</th>
                                <th scope="col">Waktu Mengantri</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for x in antrianbpjs %}
                            <tr>
                                <th rowspan="2"><center>{{ x.nomor_antrian }}</center></th>
                                <td><b>Kode Booking:</b> {{ x.kode_booking }} <b>| Waktu:</b> {{ x.created_at }} WIB</td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="row">
                                        {% if x.loket %}
                                        {% else %}
                                        <center>
                                            <div class="col">
                                                <form method="post" action="/pemeriksaan/antrianclaimbpjs" class="mb-2">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="id" value="{{ x.id }}">
                                                    <button type="submit" class="btn btn-primary btn-block">Mulai
                                                        Panggil
                                                    </button>
                                                </form>
                                            </div>
                                        </center>
                                        {% endif %}

                                        {% if x.loket.petugas.username == request.user.username %}
                                            <div class="col">
                                                <div class="form-group mb-2">
                                                    <input type="hidden" id="text{{ forloop.counter }}"
                                                           value="Nomor Antrian {{ x.nomor_antrian }}, silahkan ke loket {{ loketanda.nama }}">
                                                    <button type="submit" class="btn btn-warning btn-block text-light"
                                                            onclick="speak{{ forloop.counter }}()">Panggil
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <form method="post" action="/pemeriksaan/pendaftaran"
                                                      class="mb-2">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="kode_booking" value="{{ x.kode_booking }}">
                                                    <button type="submit" class="btn btn-success btn-block text-light">
                                                        Pasien Hadir
                                                    </button>
                                                </form>
                                            </div>
                                            <div class="col">
                                                <form method="post" action="/pemeriksaan/antrianbatalbpjs" class="mb-2">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="id" value="{{ x.id }}">
                                                    <button type="submit" class="btn btn-danger btn-block text-light">
                                                        Batalkan
                                                    </button>
                                                </form>
                                            </div>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    {% include "footer.html" %}
</main>
{% for x in antrian %}
<script>
    function speak{{ forloop.counter }}() {
      var text = document.getElementById('text{{ forloop.counter }}').value;
      if ('speechSynthesis' in window) {
        var speech{{ forloop.counter }} = new SpeechSynthesisUtterance();
        speech{{ forloop.counter }}.text = text; // Updated variable name
        speech{{ forloop.counter }}.lang = 'id-ID';
        speech{{ forloop.counter }}.rate = 0.8;
        setTimeout(function() {
          window.speechSynthesis.speak(speech{{ forloop.counter }});
        }, 1000 * {{ forloop.counter }}); // Delayed execution based on loop counter
      } else {
        alert('Browser tidak mendukung Text-to-Speech.');
      }
    }

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