{% extends 'basic.html' %}
{% load humanize i18n static %}
{% block title %}
Laboratorium
{% endblock %}
{% block head %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
{% endblock %}
{% block content %}
{% language 'id' %}
<main class="h-100">
    {% include "header.html" %}
    <!-- main page content -->
    <div class="main-container container" style="width: 100%;">
        <!--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="container-fluid">
            <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 active" aria-current="page">Laboratorium</li>
                  <li class="breadcrumb-item active" aria-current="page">Masukan Layanan</li>
                </ol>
            </nav>
            <style>
                .modal-dialog {
                    max-width: 90%;
                }
            
                .custom-popover {
                    position: relative;
                    display: inline-block;
                    cursor: pointer;
                }
            
                .popover-content {
                    display: none;
                    position: absolute;
                    top: 0%; /* Center vertically */
                    left: 50%; /* Center horizontally */
                    transform: translate(-50%, -50%); /* Move it back by 50% of its own width and height */
                    background-color: #3ac79b;
                    padding: 10px;
                    border-radius: 10px;
                    z-index: 1000;
                    opacity: 0;
                    transition: opacity 0.3s;
                }
            
                .custom-popover:hover .popover-content {
                    display: block;
                    opacity: 1;
                }
            
                .btn-container {
                    display: flex;
                    gap: 5px;
                }
            
                .btn-container button {
                    padding: 5px;
                }
            
                td, th {
                    border-color: #dee2e6 !important;
                }
            
                .table-bordered {
                    border-color: #dee2e6 !important;
                }
            </style>
            <div class="row g-5">
                <div class="card">
                    <div class="col-md-12">
                        <h5 class="mt-3 mb-3" style="padding-left: var(--fimobile-padding)"><a href="#" onclick="confirm('Apakah anda yakin?');">Input Request Dokter</a></h5>
                        {% include 'requestdokter/inputrequestdokter/data-pasien.html' %}
                        <hr class="my-3 text-primary">
                        <!-- nav start  -->
                        <div class="row">
                            <div class="col">
                                
                                <div class="col-md-12" style="padding: 0px;display: flex;">
                                    <div class="col-md-6" style="padding: 0px;padding-right: 10px;">
                                        <div class="mt-4 mb-3">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="form-group">
                                                        <div class="mt-2 mb-2" style="display: flex;flex-direction: row;justify-content: space-between;">
                                                            <div>
                                                                <label for="permintaan-resep">Catatan Terapi Laboratorium</label>
                                                            </div>
                                                            <div style="position: absolute;right: 15px;top: 10px;">
                                                                <span class="btn btn-warning btn-sm" style="text-transform: capitalize;">{{ pendaftaran.status_plan }}</span>
                                                            </div>
                                                        </div>
                                                        
                                                        <textarea class="form-control" id="permintaan-resep" style="height: 225px;"
                                                                disabled>{{ pendaftaran.tindakan_lab }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6" style="padding: 0px;padding-left: 10px;">
                                        <form method="POST" class="mt-4 mb-3" action="/pemeriksaan/postinvoicelab">
                                            {% csrf_token %}
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="form-group">
                                                        <div class="mt-2 mb-2" style="display: flex;flex-direction: row;justify-content: space-between;">
                                                            <div>
                                                                <label for="permintaan-resep">Masukan Layanan</label>
                                                            </div>
                                                        </div>
                                                        <select class="form-control selectpicker" name="lab"
                                                                data-live-search="true" required
                                                                aria-required="true" id="lab">
                                                            {% for x in lab %}
                                                            <option value="{{ x.id }}">{{ x.nama }} | Rp{{ x.harga }}
                                                            </option>
                                                            {% endfor %}
                                                        </select>
                                                        <div class="row gy-3">
                                                            <div class="col-12">
                                                                <label for="kuantitas" class="form-label mt-3">Kuantitas</label>
                                                                <div class="form-group" id="kuantitas">
                                                                    <input type="number" class="form-control" name="kuantitas" id="qty">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- <textarea class="form-control" id="permintaan-resep" style="height: 200px;"
                                                                disabled>{{ pendaftaran.rencana_terapi_pemeriksaan_penunjang_rujukan }}</textarea> -->
                                                    </div>
                                                    <div class="form-group">
                                                        <label><i>*Tambahkan layanan Lab</i></label>
                                                        <input type="hidden" name="id_pendaftaran" value="{{ pendaftaran.id }}">
                                                        <button {% if pendaftaran.status|striptags == 'selesai' %}disabled{% endif %} style="border-radius: 10px;" class="btn btn-primary me-md-2 form-control">Tambah</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 20px;">
                                    <div class="col">
                                        <div class="card mr-1">
                                            <div class="card-body">
                                                <div class="card-header">Layanan Yang Diberikan</div>
                                                <div class="row mt-4 mb-4">
                                                    <div class="col">
                                                        <div class="table-responsive">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th>#</th>
                                                                        <th>Nama</th>
                                                                        <th>Harga</th>
                                                                        <th width="10%">Qty</th>
                                                                        <th>Diskon</th>
                                                                        <th>Jumlah</th>
                                                                        <th class="text-center">Dokumen</th>
                                                                    </tr>
                                                                </thead>
                                                                {% if invoicelab %}
                                                                <tbody>
                                                                    {% for x in invoicelab %}
                                                                    <tr>
                                                                        <td style="border: 1px solid #dee2e6 !important;">
                                                                            <form method="post" action="/pemeriksaan/hapusinvoicelab/{{ x.id }}/">{% csrf_token %}
                                                                            <button type="submit">{{ forloop.counter }}</button></form>
                                                                        </td>
                                                                        <td style="border: 1px solid #dee2e6 !important;">{{ x.tarif_lab.nama }}</td>
                                                                        <td style="border: 1px solid #dee2e6 !important;">{{ x.tarif_lab.harga|floatformat|default:"0"|intcomma }}</td>
                                                                        <td style="border: 1px solid #dee2e6 !important;">{{ x.kuantitas|floatformat|default:"0" }}</td>
                                                                        <td>
                                                                            {% if x.tipe_diskon != "%" %}-{%endif%}{{ x.diskon_layanan|floatformat:0|intcomma }} {% if x.tipe_diskon == "%" %}%{%endif%}
                                                                            <div class="custom-popover" style="z-index: 3;">
                                                                                <button style="margin-right: 5px;height: fit-content;" class="btn btn-sm" onclick="editDiskon({{x.id}})"><i style="color: orange;" class="bi bi-pencil"></i></button>
                                                                                <div class="popover-content edit-{{x.id}}" style="z-index: 1000;">
                                                                                    <div style="display: flex;" id="form-edit">
                                                                                        <input type="hidden" id="tipe_diskon_{{x.id}}" value="{{x.tipe_diskon}}">
                                                                                        <input style="width: 100px;" class="form-control" id="diskon_harga_{{x.id}}" value="{{x.diskon_layanan}}" oninput="updateVal(this)">
                                                                                        <button style="margin-left: 5px;width: 40px;" class="btn btn-sm btn-info" id="show_tipe_{{x.id}}" onclick="editTipe({{x.id}})">{{x.tipe_diskon}}</button>
                                                                                        <button style="margin-left: 5px;" class="btn btn-sm btn-success" onclick="submitDiskon({{x.id}})">edit</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                        <!-- ( x.biaya harga / 1 ) * x.kuantitas -->
                                                                        <td>{{ x.total_harga|intcomma }}</td>
                                                                        <!-- <td><a href="#" class="btn btn-success text-light" onclick="tampilkanModal();">Upload Dokumen</a></td> -->
                                                                        <td style="text-align:center !important;border: 1px solid #dee2e6 !important;">
                                                                            {% if x.doc|striptags != 'None' %}
                                                                                <button style="margin-right: 5px;height: fit-content;" class="btn btn-success btn-sm" data-target="#mdLabPdfShow" data-toggle="modal" onclick="showPDF('{{x.doc}}')"><i class="bi bi-filetype-pdf"></i></button>
                                                                            {% endif %}
                                                                            <div class="custom-popover" style="z-index: 3;">
                                                                                <button style="margin-right: 5px;height: fit-content;" class="btn btn-success btn-sm"><i class="bi bi-folder"></i> DOKUMEN</button>
                                                                                <div class="popover-content" style="z-index: 1000;">
                                                                                    <div style="border-bottom: 1px solid #fff;margin-bottom: 5px"><b>PILIH FORM LAB - {{ forloop.counter }}</b></div>
                                                                                    <div class="btn-container">
                                                                                        <button style="background-color: white;border-radius: 5px;height: fit-content;width: max-content;" class="btn btn-sm" data-dokumen="{{x.doc}}" data-target="#mdLabPDF" data-toggle="modal" onclick="tampilkanUpload('{{x.tarif_lab_id}}', '{{x.tarif_lab.nama}}')">IMAGE</button>
                                                                                        <button style="background-color: white;border-radius: 5px;height: fit-content;width: max-content;" class="btn btn-sm" data-dokumen="{{x.doc}}" data-target="#mdLabUmum" data-toggle="modal" onclick="tampilkanUploadUmum('{{x.pendaftaran_id}}','{{x.tarif_lab_id}}')">UMUM</button>
                                                                                        <button style="background-color: white;border-radius: 5px;height: fit-content;width: max-content;" class="btn btn-sm" data-dokumen="{{x.doc}}" data-target="#mdLabTripleE" data-toggle="modal" onclick="tampilkanUploadTripleE('{{x.pendaftaran_id}}', '{{x.tarif_lab_id}}')">TRIPLE-E</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    {% endfor %}
                                                                    <tr>
                                                                        <td style="border: 1px solid #dee2e6 !important;" colspan="4">Total: </td>
                                                                        <!-- ( x.biaya harga / 1 ) * x.kuantitas -->
                                                                        <td style="border: 1px solid #dee2e6 !important;" colspan="4"><b>{{ summaryinvoicelab|intcomma }}</b></td>
                                                                    </tr>
                                                                </tbody>
                                                                {% else %}
                                                                    <tbody id="table-obat">
                                                                        <tr id="data-not-found">
                                                                            <td colspan="7" class="text-center" style="background-color: rgb(186, 184, 184);">Belum ada data.</td>
                                                                        </tr>
                                                                    </tbody>
                                                                {% endif %}
                                                            </table>
                                                        </div>
                                                        <!-- Modal FORM IMAGE-->
                                                        <div class="modal fade" id="mdLabPDF" tabindex="-1" role="dialog" aria-labelledby="mdLabPDFLabel" aria-hidden="true">
                                                            <div class="modal-dialog" style="max-width: 50%" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                    <h5 class="modal-title" id="mdLabPDFLabel">FORMULIR LAB</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                    </div>
                                                                    <form action="{% url 'dokumen_lab' %}" method="post" enctype="multipart/form-data">
                                                                    <div class="modal-body">
                                                                        {% csrf_token %}
                                                                        <div>
                                                                            <label for="nama_lab" class="form-label">Nama Pemeriksaan Lab</label>
                                                                            <div style="display:flex">
                                                                            <input type="hidden" class="form-control" id="id" name="lab_id" value="">
                                                                            <input type="hidden" class="form-control" name="pendaftaran_id" value="{{pendaftaran.id}}">
                                                                            <input readonly type="text" class="form-control" id="nama_lab" name="nama_lab" value="{{data.nama_lab}}">
                                                                            </div>
                                                                        </div>
                                                
                                                                        <div>
                                                                            <label for="tanggal_pemeriksaan" class="form-label">Tanggal Pemeriksaan</label>
                                                                            <div style="display:flex">
                                                                            <input type="date" class="form-control" id="tanggal_pemeriksaan" name="tanggal_pemeriksaan" value="{{data.tanggal_pemeriksaan}}">
                                                                            </div>
                                                                        </div>
                                                
                                                                        <div>
                                                                            <label for="doc" class="form-label">Upload Dokumen</label>
                                                                            <div style="display:flex">
                                                                                <input type="file" class="form-control" id="doc_file" name="doc">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!-- Modal Footer -->
                                                                        <div class="modal-footer">
                                                                            <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- Modal LAB PDF-->
                                                        <div class="modal fade" id="mdLabPdfShow" tabindex="-1" role="dialog" aria-labelledby="mdLabPdfShowLabel" aria-hidden="true">
                                                            <div class="modal-dialog" style="max-width: 80%" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                    <h5 class="modal-title" id="mdLabPDFLabel">HASIL LABORATORIUM</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <canvas id="pdfCanvas" style="width: 100%;"></canvas>
                                                                    </div>
                                                                    <!-- Modal Footer -->
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-primary btn-sm" id="download-pdf">Download</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- Modal FORM UMUM-->
                                                        <div class="modal fade" id="mdLabUmum" tabindex="-1" role="dialog" aria-labelledby="mdLabUmumLabel" aria-hidden="true">
                                                            <div class="modal-dialog" style="max-width: 80%" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                    <h5 class="modal-title" id="mdLabPDFLabel">FORMULIR LAB UMUM</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        
                                                                    </div>
                                                                    <!-- Modal Footer -->
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-info text-light btn-sm" onclick="cetakPrint('formLabUmum')">PRINT</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Modal FORM TRIPLE E-->
                                                        <div class="modal fade" id="mdLabTripleE" tabindex="-1" role="dialog" aria-labelledby="mdLabTripleELabel" aria-hidden="true">
                                                            <div class="modal-dialog" style="max-width: 80%" role="document">
                                                                <div class="modal-content">
                                                                    <div class="  modal-header">
                                                                    <h5 class="modal-title" id="mdLabPDFLabel">FORMULIR LAB TRIPLE-E</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        
                                                                    </div>
                                                                    <!-- Modal Footer -->
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-info text-light btn-sm" onclick="cetakPrint('formLabTriplee')">PRINT</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% include 'footer.html' %}
</main>

<script>
    function fakeProgressBarAnimation() {
        var progressBar = document.getElementById('progress-bar');
        var currentValue = parseInt(progressBar.getAttribute('aria-valuenow'), 10);

        // Increment the progress value
        if (currentValue < 100) {
            currentValue += 10; // You can adjust the increment value as needed
            progressBar.setAttribute('aria-valuenow', currentValue);
            progressBar.style.width = currentValue + '%';
            progressBar.textContent = currentValue + '%';

            // Call the function again after a delay (simulating animation frames)
            setTimeout(fakeProgressBarAnimation, 500); // Adjust the delay as needed
        }
    }
    function tampilkanUpload(id, nama_layanan) {
        $("#mdLabPDF #id").val(id);
        $("#mdLabPDF #nama_lab").val(nama_layanan);
    }
    function tampilkanUploadUmum(id, lab_id){
        $('#mdLabUmum .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/dokumen_lab_umum/' + id + '/' + lab_id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdLabUmum .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 
    function tampilkanUploadTripleE(id, lab_id) {
        $('#mdLabTripleE .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/dokumen_lab_triple_e/' + id + '/' + lab_id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdLabTripleE .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }
    lastValUmum = 0;
    function updateUmum(inputElement) {
        var initialValue; 
        var changedValue = 0;
        var words = inputElement.value;
        if(inputElement.value.length > 0){
            initialValue = inputElement.value;
        }
        inputElement.setAttribute('value', inputElement.value);
        inputElement.addEventListener('focus', function(event) {
            changedValue = this.value;
        });

        inputElement.addEventListener('blur', function(event) {
            var inputValue = inputElement.value;
            
            if (initialValue == inputElement.value && initialValue != changedValue && changedValue == 0) {
                var idPemeriksaan = this.getAttribute('id-pemeriksaan');
                var idPendaftaran = this.getAttribute('id-pendaftaran');
                var idLab = this.getAttribute('id-lab');
                var value = inputElement.value
                postLab(value, idLab, idPemeriksaan, idPendaftaran)
            }
        });

        inputElement.addEventListener('keypress', function(event) {
            if (event.which === 13) {
                if (initialValue == inputElement.value && initialValue != changedValue && changedValue == 0 && initialValue != lastValUmum) {
                    var idPemeriksaan = this.getAttribute('id-pemeriksaan');
                    var idPendaftaran = this.getAttribute('id-pendaftaran');
                    var idLab = this.getAttribute('id-lab');
                    var value = inputElement.value
                    lastValUmum = initialValue
                    postLab(value, idLab, idPemeriksaan, idPendaftaran)
                }
            }
        });
    }
        
    function postLab(value, lab_id, idPemeriksaan, idPendaftaran){
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url: '/pemeriksaan/post_lab_umum/'+ idPendaftaran,
            type: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            data: {
                lab_id : lab_id,
                pemeriksaan_id : idPemeriksaan,
                pendaftaran_id : idPendaftaran,
                hasil_lab : value
            },
            success: function(data) {
                console.log(data)
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }

    lastVal = 0;
    function updateTriple(inputElement) {
        var initialValue; 
        var changedValue = 0;
        var words = inputElement.value;
        if(inputElement.value.length > 0){
            initialValue = inputElement.value;
        }
        inputElement.setAttribute('value', inputElement.value);
        inputElement.addEventListener('focus', function(event) {
            changedValue = this.value;
        });

        inputElement.addEventListener('blur', function(event) {
            var inputValue = inputElement.value;
            
            if (initialValue == inputElement.value && initialValue != changedValue && changedValue == 0) {
                var idPemeriksaan = this.getAttribute('id-pemeriksaan');
                var idPendaftaran = this.getAttribute('id-pendaftaran');
                var idLab = this.getAttribute('id-lab');
                var value = inputElement.value
                postLabTriple(value, idLab, idPemeriksaan, idPendaftaran)
            }
        });

        inputElement.addEventListener('keypress', function(event) {
            if (event.which === 13) {
                if (initialValue == inputElement.value && initialValue != changedValue && changedValue == 0 && initialValue != lastVal) {
                    var idPemeriksaan = this.getAttribute('id-pemeriksaan');
                    var idPendaftaran = this.getAttribute('id-pendaftaran');
                    var idLab = this.getAttribute('id-lab');
                    var value = inputElement.value
                    lastVal = initialValue
                    postLabTriple(value, idLab, idPemeriksaan, idPendaftaran)
                }
            }
        });
    }   

    function postLabTriple(value, lab_id, idPemeriksaan, idPendaftaran){
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url: '/pemeriksaan/post_lab_triplee/'+ idPendaftaran,
            type: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            data: {
                lab_id : lab_id,
                pemeriksaan_id : idPemeriksaan,
                pendaftaran_id : idPendaftaran,
                hasil_lab : value
            },
            success: function(data) {
                console.log(data)
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
</script>
<script>
    function downloadPdf(url) {
      var link = document.createElement('a');
      link.href = `/media/filelab/${url}`;
      link.download = url; // Change the filename here if needed
      link.click();
    }

    function showPDF(url){
        var pdfUrl = `/media/filelab/${url}`;
        document.getElementById('download-pdf').onclick = function() {
            downloadPdf(url);
        };
    
        // PDF.js worker url
        var pdfWorkerUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
    
        // Asynchronous download PDF
        pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
          // Fetch the first page
          pdf.getPage(1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale });
    
            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById('pdfCanvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
    
            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            page.render(renderContext);
          });
        });
    }

    function cetakPrint(form) {
        var printContents = document.getElementById(form).innerHTML;
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
        
        // Get the iframe's document
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        
        // Write your print contents to the iframe's document
        iframeDoc.write(printContents);
        iframeDoc.close();
        
        // Trigger the print action
        iframe.contentWindow.print();
        
        // Remove the iframe when done
        iframe.onload = function () {
        document.body.removeChild(iframe);
        };
    }
</script>
<script>
    function editDiskon(id){
        $('.edit-'+id).css('display', 'block');
        $('.edit-'+id).css('opacity', '1');
    }
    function editTipe(id){
        var tipe = $('#tipe_diskon_'+id).val()

        if(tipe == "%"){
            $('#tipe_diskon_'+id).val('rp');
            $('#show_tipe_'+id).text('RP');
        } else {
            $('#tipe_diskon_'+id).val('%');
            $('#show_tipe_'+id).text('%');
        }
    }
    function submitDiskon(id){
       var tipe_diskon = $('#tipe_diskon_'+id).val()
       var diskon_harga = $('#diskon_harga_'+id).val()
       var csrftoken = $("[name=csrfmiddlewaretoken]").val();
       $.ajax({
            url: '/promotion/edit_lab_diskon',
            type: 'POST',
            data:{
                'inv_id': id,
                'tipe_diskon': tipe_diskon,
                'diskon_pembelian': diskon_harga,
            },
            headers: {
                'X-CSRFToken': csrftoken 
            },
            success: function(data) {
                console.log(data)
                window.location.reload()
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
    function updateVal(inputElement) {
        inputElement.setAttribute('value', inputElement.value);
    }
    
</script>
<style>
    .select2-container {
        width: 100%;
    }

    .form-control {
        border-color: #aaa !important;
        border-radius: 5px !important;
    }

    .select2-selection__rendered {
        line-height: 31px !important;
    }
    .select2-container .select2-selection--single {
        height: 35px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }
</style>
{% endlanguage %}
{% endblock %}