{% load humanize i18n static %}
{% language 'ID' %}
{% csrf_token %}
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>

<style>
    .toggle {
        width: 100% !important;
    }
    .container-card{
        width: 100%;
        /* height: 100vh; */
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .coupon-card{
        background: linear-gradient(135deg, #3ac79b, #3e8f75);
        color: #fff;
        text-align: center;
        /* padding: 20px 80px; */
        border-radius: 15px;
        box-shadow: 0 10px 10px 0 rgba(0,0,0,0.15);
        position: relative;

    }
    .logo{
        width: 80px;
        border-radius: 8px;
        margin-bottom: 20px;

    }
    .coupon-card h3{
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;

    }
    .coupon-card p{
        font-size: 15px;

    }
    .coupon-row{
        display: flex;
        align-items: center;
        margin: 10px auto;
        width: fit-content;

    }
    #cpnCode{
        border: 1px dashed #fff;
        padding: 10px 20px;
        border-right: 0;
    }
    #cpnBtn{
        border: 1px solid #fff;
        background: #fff;
        /* padding: 10px 20px; */
        color: #3ac79b;
        cursor: pointer;
    }
    .circle1{
        background: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

    }
    .circle2{
        background: #fff;
        width: 100px;
        height: 30px;
        border-radius: 20px;
        position: absolute;
        top: 15%;
        transform: translateY(-50%);

    }
    .circle1{
        left: -25px;
    }
    .circle2{
        right: 10px;
    }
</style>
<div style="display: flex; justify-content: space-between;border-bottom: 1px solid;padding-bottom: 10px;align-items: center;">
        <h5 class="h5">List Voucher</h5>
        <button type="button" id="daftarkan-pasien" data-toggle="modal" data-target="#mdTambahVoucher" class="btn btn-info btn-sm text-light"><i class="fas fa-plus"></i> Tambah Voucher</button>
    </div>
    <div id="collapseOneVitalSign" class="accordion-collapse collapse show collapse show"
        aria-labelledby="headingOneVitalSign" data-bs-parent="#accordionVitalSign">
        <div class="accordion-body">
            <!-- <h5 class="mt-3 h5">Semua Pasien</h5> -->
            <div class="row gy-3">
                <table width="100%" style="width:100% !important; cursor: pointer;" class="table dataTable table-striped table-bordered" id="table-voucher">
                    <thead>
                        <th>#</th>
                        <th>Kode</th>
                        <th>Kadaluarsa</th>
                        <th>Diskon</th>
                        <th>Kuota</th>
                        <th>Kuota Terpakai</th>
                        <th>Status</th>
                        <th>Dibuat oleh</th>
                        <th>Act</th>
                    </thead>
                    <tbody>
                        {% for item in voucherlist %}
                            <tr>
                                <td class="text-center">{{forloop.counter}}</td>
                                <td class="text-center">{{item.kode}}</td>
                                <td class="text-center">{{item.expired_at|date:"d F Y"}}</td>
                                <td class="text-center">{% if item.tipe_diskon != "%" %}-{%endif%}{{ item.diskon|floatformat:0|intcomma }} {% if item.tipe_diskon == "%" %}%{%endif%}</td>
                                <td class="text-center">{{item.kuota}}</td>
                                <td class="text-center">{{item.kuota_terpakai}}</td>
                                <td class="text-center">{% if item.is_active%}<span style="color: #3ac79b">Aktif</span>{% else %}<span style="color: red">Tidak Aktif</span>{% endif %}</td>
                                <td class="text-center">{{item.created_by}}</td>
                                <td class="text-center"><button class="btn btn-sm btn-info text-light" data-toggle="modal" data-target="#mdVoucher" onclick="showVoucher('{{item.kode}}', '{{ item.expired_at|date:'d F Y' }}', '{{item.diskon}}', '{{item.tipe_diskon}}')",>SHOW</button></td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- Modal Tambah Voucher-->
            <div class="modal fade" id="mdTambahVoucher" tabindex="-1" role="dialog" aria-labelledby="mdTambahVoucherLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 40%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdTambahVoucherLabel">CREATE VOUCHER</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <form action="{% url 'tambah_voucher' %}" method="post" enctype="multipart/form-data">
                        <div class="modal-body">
                            {% csrf_token %}
                            <div>
                                <label for="kode" class="form-label">KODE</label>
                                <div style="display:flex">
                                <input type="hidden" id="id" name="id" value="{{data.id}}">
                                <input autocomplete="off" type="text" class="form-control" id="kode" name="kode" value="{{data.kode}}" required>
                                </div>
                            </div>
    
                            <div class="row">
                                <div class="col-md-6">
                                    <div>
                                        <label for="diskon" class="form-label" style="margin-top: 10px;display: block;">
                                            <div style="display: flex;justify-content: space-between;">
                                                <div>DISKON</div>
                                                <div style="width: 40px;"><input type="checkbox" name="tipe_diskon" checked data-toggle="toggle" data-size="xs" data-on="%" data-off="RP" data-onstyle="info" data-offstyle="success"></div>
                                            </div>
                                        </label>
                                        <div style="display:flex">
                                        <input type="number" class="form-control" id="diskon" name="diskon" value="{{data.diskon}}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div>
                                        <label for="kuota" class="form-label" style="margin-top: 10px">KUOTA PAKAI</label>
                                        <div style="display:flex">
                                        <input type="number" class="form-control" id="kuota" name="kuota" value="{{data.kuota}}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label for="min_pembayaran" class="form-label" style="margin-top: 10px">MINIMAL PEMBAYARAN</label>
                                <div style="display:flex">
                                <input type="number" class="form-control" id="min_pembayaran" name="min_pembayaran" value="{{data.min_pembayaran}}" required>
                                </div>
                            </div>
    
                            <div>
                                <label for="expired_at" class="form-label" style="margin-top: 10px">TANGGAL KADALUARSA</label>
                                <div style="display:flex">
                                <input type="date" class="form-control" id="expired_at" name="expired_at" value="{{data.expired_at}}" required>
                                </div>
                            </div>
    
                        </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal Tambah Voucher-->
            <div class="modal fade" id="mdVoucher" tabindex="-1" role="dialog" aria-labelledby="mdVoucherLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 60%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdVoucherLabel">VOUCHER - <span id="kode_voucher"></span></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 class="container-card">
                                <div id="contentImg" class="coupon-card">
                                    <div id="circle1" class="circle1"></div>
                                    <div class="avatar avatar-50">
                                        <img style="mix-blend-mode: multiply;" alt="" src="{{ info_dasar_faskes.logo.url }}">
                                    </div>
                                    <h3>KLINIK NINA<br>DENTAL CARE</h3>
                                    <di class="coupon-row">
                                        <!-- <span id="cpnCode">STEALDEAL20</span> -->
                                        <div style="min-width: 400px;width: 100%;display: flex;" id="cpnBtn">
                                            <span style="width: 50%;border: 1px dashed #fff;padding: 10px 20px;border-right: 0;"><b>GUNAKAN KODE :</b></span>
                                            <span style="width: 50%;" id="cpnCode"><b><span id="show_kode"></span></b></span>
                                        </div>
                                    </di>
                                    <div id="circle2" class="circle2" style="color: #3ac79b;display: flex;justify-content: center;align-items: center;"><b style="font-size: 20px;"><span id="show_diskon"></span></span></b></div>
                                    <p style="padding-bottom: 10px;">Berlaku sampai: <span id="show_expired"></span></p>
                                </div>
                            </div>
                        </div>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button id="convertButton" type="button" class="btn btn-primary btn-sm">DOWNLOAD AS IMAGE</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endlanguage %}
<script>
    $(document).ready(function() {
        $('#table-voucher').DataTable({
            "scrollX": true,
            "responsive": true,
        })
    })
    function showVoucher(kode, expired_at, diskon, tipe_diskon){
        if(tipe_diskon == '%'){
            diskon = diskon + ' ' + tipe_diskon
        } else {
            diskon = '- ' + diskon.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }

        $('#mdVoucher #show_kode').html(kode)
        $('#mdVoucher #show_expired').html(expired_at)
        $('#mdVoucher #show_diskon').html(diskon)
        $('#mdVoucher #show_tipe_diskon').html(tipe_diskon)
    }
    function panggilPasien(nama){
        let name = nama.split(',')[0].trim();
        speak(`pasien atas nama ${name} silahkan ke loket pembayaran`)
    }
    var cpnBtn = document.getElementById("cpnBtn");
    var cpnCode = document.getElementById("cpnCode");

    cpnBtn.onclick = function(){
        navigator.clipboard.writeText(cpnCode.innerHTML);
        cpnBtn.innerHTML ="COPIED";
        setTimeout(function(){
            cpnBtn.innerHTML="COPY CODE";
        }, 3000);
    }

    document.getElementById('convertButton').addEventListener('click', function() {
            var content = document.getElementById('contentImg');
            domtoimage.toPng(content)
            .then(function(dataUrl) {
                // Create a link element for download
                var link = document.createElement('a');
                link.href = dataUrl;
                link.download = 'image.png'; // Set the filename for download

                // Add the link to the document and trigger the click event
                document.body.appendChild(link);
                link.click();

                // Remove the link from the document
                document.body.removeChild(link);
            })
            .catch(function(error) {
                console.error('Error converting to image:', error);
            });
        });
</script>