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

{% block title %}
Jasa Medis
{% endblock %}


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

    .tabcontent {
        display: none;
    }

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

</style>
<style>
    /* .dataTables_filter{
        float: right;
    } */
    #item-rajal_length label {
        display: flex;
    }
    select[name="item-rajal_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
    }
    select[name="item-rajal_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }
    .tab-container {
        width:100%; 
        overflow-x: auto;
        display: -webkit-box;
    }
    @media (max-width: 768px) {
        .tab-container {
            width:250px; 
            overflow-x: auto;
            display: -webkit-box;
        }
    }
    a {
        text-decoration: none !important;
    }
</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="//code.jquery.com/jquery-1.12.4.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> -->
        <script>
            // Display the first tab by default
            document.getElementsByClassName("tablinks")[0].click();

        </script>
        <div class="row mb-3 m-2">
            <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
                <ol class="breadcrumb" style="background-color: transparent;display: flex;justify-content: flex-end;">
                  <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
                  <li class="breadcrumb-item"><a href="/">Pemeriksaan</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Jasa Medis</li>
                </ol>
            </nav>
            <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">Jasa Medis
                            </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">Riwayat Jasa Medis
                            </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/jasmed/daftar_jasmed.html' %}
                        </div>
                        <div class="tab-pane fade" id="pills-lab" role="tabpanel" aria-labelledby="pills-lab-tab"
                             tabindex="0">
                             {% include 'pemeriksaan/jasmed/riwayat_jasmed.html' %}
                        </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 %}