{% extends 'basic.html' %}
{% load humanize i18n static %}
{% block title %}
Pembiayaan Layanan
{% 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>
{% endblock %}
{% block content %}
{% language 'en-US' %}
<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">Layanan</li>
                  <li class="breadcrumb-item active" aria-current="page">Pembiayaan Layanan</li>
                </ol>
            </nav>
            <style>
                .btn:focus {
                    outline: none !important;
                    box-shadow: none !important;
                }
                .custom-popover {
                    position: relative;
                    display: inline-block;
                    cursor: pointer;
                }
            
                .popover-content {
                    display: none;
                    position: absolute;
                    top: 50%; /* Center vertically */
                    left: 125%; /* Center horizontally */
                    transform: translate(-50%, -50%); /* Move it back by 50% of its own width and height */
                    background-color: #fff;
                    padding: 10px;
                    border-radius: 10px;
                    z-index: 1000;
                    opacity: 0;
                    transition: opacity 0.3s;
                }
            </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="row">
                                <div class="col-6">
                                    <form method="POST" class="mt-4 mb-3" action="/pemeriksaan/postinvoicelayanan">
                                        {% 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" id="layanan-select" name="layanan" data-live-search="true" required aria-required="true">
                                                            {% for x in layanan %}
                                                            <option value="{{ x.id }}">{{ x.nama }} | Rp{{ x.harga|floatformat:0|intcomma }} 
                                                            </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">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label><i>*Tambahkan layanan per item</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 class="col-6 mt-4 mb-3">
                                    <div class="card">
                                        <div class="card-body">

                                            <div class="form-group">
                                                <div class="mb-2 mt-2" style="display: flex;flex-direction: row;justify-content: space-between;">
                                                    <div>
                                                        <label for="permintaan-resep">Catatan Tindakan</label>
                                                    </div>
                                                    <div style="position: absolute;right: 15px;top: 10px;">
                                                        <span class="btn btn-warning btn-sm" style="text-transform: capitalize;">{{ pendaftaran.status }}</span>
                                                    </div>
                                                </div>
                                                
                                                <textarea class="form-control" id="permintaan-resep" style="height: 182px;font-size: 14px;"
                                                        readonly>{{ pendaftaran.tindakan }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="card mr-1 mb-3">
                                        <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>Kuantitas</th>
                                                                <th>Diskon</th>
                                                                <th>Jumlah</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            {% for x in invoicelayanan %}
                                                            <tr>
                                                                <td>
                                                                    <form method="post" action="/pemeriksaan/hapusinvoicelayanan/{{ x.id }}/">{% csrf_token %}
                                                                    <button type="submit">{{ forloop.counter }}</button></form>
                                                                </td>
                                                                <td>{{ x.tarif_layanan.nama }}</td>
                                                                <td>{{ x.tarif_layanan.harga|floatformat:"-3g" }}</td>
                                                                <td>{{ 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 id="tarif">{{ x.total_harga|floatformat:0|intcomma }}</td>
                                                            </tr>
                                                            {% endfor %}
                                                            <tr>
                                                                <td colspan="4">Total: </td>
                                                                
                                                                <td colspan="4"><b>Rp {{ total_layanan|floatformat:0|intcomma }}</b></td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include 'footer.html' %}
</main>
<script>
    $(document).ready(function() {
        $(document.body).click(function(event) {
            if (!$(event.target).closest('.custom-popover').length) {
                $('.popover-content').css('display', 'none');
                $('.popover-content').css('opacity', '0');
            }
        });
    });
    $('#layanan-select').select2()
    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_layanan_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);
    }
    function isRupiah(num) {
        // Check if num is a valid number
        if (typeof num !== 'number' || isNaN(num)) {
            return 'Invalid number';
        }
    
        // Format the number as Rupiah
        const rupiah = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(num);
    
        return rupiah;
    }
    function totalLayanan() {
        const tdElements = document.querySelectorAll('td#tarif');
        let totalSum = 0;
    
        for (const td of tdElements) {
            const text = td.textContent;
            const intValue = parseInt(text.replace('.', ''), 10);
            
            if (!isNaN(intValue)) {
                totalSum += intValue;
            }
        }
    
        $('#totalLayanan').html(isRupiah(totalSum))
    }
    totalLayanan()
</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 %}