{% load humanize i18n static %}
{% language 'en-US' %}
{% 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>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></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: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 15%;
        transform: translateY(-50%);

    }
    .circle1{
        left: -25px;
    }
    .circle2{
        right: 10px;
    }
    .select2-container--open .select2-dropdown {
        z-index: 9999; /* Set a high z-index value */
    }
    .select2.select2-container {
    width: 100% !important;
    }

    .select2.select2-container .select2-selection {
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 34px;
    margin-bottom: 15px;
    outline: none !important;
    transition: all .15s ease-in-out;
    }

    .select2.select2-container .select2-selection .select2-selection__rendered {
    color: #333;
    line-height: 32px;
    padding-right: 33px;
    }

    .select2.select2-container .select2-selection .select2-selection__arrow {
    background: #f8f8f8;
    border-left: 1px solid #ccc;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    height: 32px;
    width: 33px;
    }

    .select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
    background: #f8f8f8;
    }

    .select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0;
    }

    .select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
    border: 1px solid #34495e;
    }

    .select2.select2-container .select2-selection--multiple {
    background-color: #e8e8e8;
    height: 120px;
    border-radius: 10px;
    overflow-y: scroll;
    min-height: 34px;
    }

    #jenis-diskon .select2.select2-container .select2-selection--multiple {
        background-color: #e8e8e8;
        height: auto;
        border-radius: 10px;
        overflow-y: scroll;
        min-height: 34px;
    }

    .select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
        margin-top: 0;
        height: 32px;
        width: 98% !important;
        position: absolute !important;
        bottom: 5px !important;
        font-size: 14px;
    }

    .select2-results__option {
        font-size: 12px;
        padding: 4px;
    }

    .select2.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0 4px;
    line-height: 29px;
    }

    .select2.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 4px 4px 0 0;
    padding: 0 6px 0 22px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    position: relative;
    }

    .select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    margin: 0;
    text-align: center;
    color: #e74c3c;
    font-weight: bold;
    font-size: 16px;
    }

    .select2-container .select2-dropdown {
    background: transparent;
    border: none;
    margin-top: -5px;
    }

    .select2-container .select2-dropdown .select2-search {
    padding: 0;
    }

    .select2-container .select2-dropdown .select2-search input {
    outline: none !important;
    border: 1px solid #34495e !important;
    border-bottom: none !important;
    padding: 4px 6px !important;
    }

    .select2-container .select2-dropdown .select2-results {
    padding: 0;
    }

    .select2-container .select2-dropdown .select2-results ul {
    background: #fff;
    border: 1px solid #34495e;
    }

    .select2-results__options .select2-results__options--nested {
        border: none !important;
    }

    .select2-container--default .select2-results__group {
        font-size: 12px !important;
        padding: 4px !important;
    }

    .select2-container--default .select2-results__option .select2-results__option {
        font-size: 12px !important;
        padding: 4px !important;
    }

    .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
    background-color: #3498db;
    }

    #toggle-layanan .toggle-group span {
        display: none;
    }
    #toggle-layanan .toggle-group label {
        color: #fff;
        margin-top: 2px;
    }
    .btn:focus,
    .btn.focus {
        outline: none !important;
        box-shadow: none !important;
    }
    /* Set the width of the scrollbar in Select2 dropdown */
    ::-webkit-scrollbar {
        width: 5px; /* Adjust the width as needed */
        position: relative;
    }

    /* Optionally, you can customize the appearance of the scrollbar */
    ::-webkit-scrollbar-track {
        background: transparent; /* Track color */
    }

    ::-webkit-scrollbar-thumb {
        background: #888; /* Thumb color */
    }

    .clicked{
        background-color: #007bff;
        color : #ffff
    }

    strong {
        background-color: #888888;
        color: #fff;
    }
</style>
    <div style="display: flex; justify-content: space-between;border-bottom: 1px solid;padding-bottom: 10px;align-items: center;">
        <h5 class="h5">List Diskon</h5>
        <button type="button" id="daftarkan-pasien" data-toggle="modal" data-target="#mdTambahDiskon" class="btn btn-info btn-sm text-light"><i class="fas fa-plus"></i> Tambah Diskon</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-diskon">
                    <thead>
                        <th>#</th>
                        <th>No Batch</th>
                        <th>Tgl Mulai</th>
                        <th>Kadaluarsa</th>
                        <th>Layanan</th>
                        <th>Diskon</th>
                        <th>Status</th>
                        <th>Dibuat oleh</th>
                        <th>Act</th>
                    </thead>
                    <tbody>
                        {% for item in diskonlist %}
                            <tr>
                                <td class="text-center">{{forloop.counter}}</td>
                                <td class="text-center">B00{{item.kode}}</td>
                                <td class="text-center">{{item.start_at|date:"d M Y"}}</td>
                                <td class="text-center">{{item.expired_at|date:"d M Y"}}</td>
                                <td class="text-center"><button class="btn btn-sm btn-info text-light" data-toggle="modal" data-target="#mdListLayanan" onclick="checkLayanan({{item.id}})"><i class="bi bi-search"></i></button></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">{% 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-danger text-light" onclick="deleteDiskon({{item.id}})"><i class="bi bi-trash"></i></button></td>
                            </tr>
                        {%endfor%}
                    </tbody>
                </table>
            </div>
            <!-- MODAL LIST LAYANAN -->
            <div class="modal fade" id="mdListLayanan" tabindex="-1" role="dialog" aria-labelledby="mdListLayananLabel" 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="mdListLayananLabel">DISKON LAYANAN</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>
                    </div>
                </div>
            </div> 
            <!-- Modal Tambah Voucher-->
            <div class="modal fade" id="mdTambahDiskon" tabindex="-1" role="dialog" aria-labelledby="mdTambahDiskonLabel" 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="mdTambahDiskonLabel">CREATE DISKON</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <form id="formDiskon" enctype="multipart/form-data">
                        <div class="modal-body">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <div>
                                        <label for="kode" class="form-label">JENIS DISKON</label>
                                        <div style="display: flex;">
                                            <button style="width:100%; border-radius: 5px;" id="add_obat" type="button" onclick="addObat()" class="btn btn-outline-primary btn-sm clicked">OBAT</button>
                                            <button style="width:100%; border-radius: 5px;margin: 0px 10px" id="add_tindakan" type="button" onclick="addTindakan()" class="btn btn-outline-primary btn-sm">TINDAKAN</button>
                                            <button style="width:100%; border-radius: 5px;" id="add_tindakan_lab" type="button" onclick="addTindakanLab()" class="btn btn-outline-primary btn-sm">LAB</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6" style="position: absolute;right: 0px;top: 8px;">
                                    <div>
                                        <label for="select-layanan" class="form-label" style="margin-top: 10px">PILIH LAYANAN</label>
                                        <div onclick="select_all()" id="toggle-layanan" style="width: 100px;float: right;margin-top: 10px;"><input type="checkbox" id="select_all" name="select_all" checked data-toggle="toggle" data-size="xs" data-on="SELECT ALL" data-off="CLEAR" data-onstyle="info" data-offstyle="success"></div>
                                        <div style="display:flex">
                                            <select style="width: 100%" id="select-layanan" name="select-layanan">
                                            </select>
                                        </div>
                                    </div>
                                </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" id="tipe_diskon" 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>

                            <div>
                                <label for="min_qty" class="form-label" style="margin-top: 10px">MINIMUM KUANTITAS</label>
                                <div style="display:flex">
                                <input type="number" class="form-control" id="min_qty" name="min_qty" value="{{data.min_qty}}" required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div>
                                        <label for="start_at" class="form-label" style="margin-top: 10px">Mulai Tanggal</label>
                                        <div style="display:flex">
                                        <input type="date" class="form-control" id="start_at" name="start_at" value="{{data.start_at}}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div>
                                        <label for="expired_at" class="form-label" style="margin-top: 10px">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>
    
                        </div>
                            <div class="modal-footer">
                                <button type="button" onclick="tambahDiskon()" class="btn btn-primary btn-sm">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endlanguage %}
<script type="text/javascript">
    $(document).ready(function() {
        showOption('get_obat')
        $('#table-diskon').DataTable({
            "scrollX": true,
            "responsive": true,
        })
        $('#select-layanan').select2({
            multiple: true,
            closeOnSelect: false
        });
        $('#select-jenis').select2({
            multiple: true,
            closeOnSelect: false
        });
    })

    var randNum;
    var dataSelect = [];
    function randomID() {
        randNum = '';
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        const charactersLength = characters.length;
        for (let i = 0; i < 6; i++) {
            randNum += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return randNum;
    }

    function addObat() {
        if ($('#add_obat').hasClass('clicked')) {
            $('#add_obat').removeClass('clicked');
            hideOption('OBAT')
        } else {
            $('#add_obat').addClass('clicked');
            showOption('get_obat')
        }
    }

    function addTindakan() {
        if ($('#add_tindakan').hasClass('clicked')) {
            $('#add_tindakan').removeClass('clicked');
            hideOption('TINDAKAN')
        } else {
            $('#add_tindakan').addClass('clicked');
            showOption('get_tindakan')
        }
    }

    function addTindakanLab() {
        if ($('#add_tindakan_lab').hasClass('clicked')) {
            $('#add_tindakan_lab').removeClass('clicked');
            hideOption('TINDAKAN LAB')
        } else {
            $('#add_tindakan_lab').addClass('clicked');
            showOption('get_tindakan_lab')
        }
    }

    function showOption(route){
        $.ajax({
            url: '/promotion/'+route,
            type: 'GET',
            success: function(data) {
                dataSelect.push(data);
                $('#select-layanan').empty()
                $('#select-layanan').select2({
                    data: dataSelect,
                    multiple: true,
                    closeOnSelect: false
                });
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }

    function noOptionSelect2(){
        if(dataSelect.length == 0){
            var newObject = {
                text: 'No results found',
                value: ''
            };
            $('#select-layanan').empty()
            $('#select-layanan').select2({
                data: [newObject]
            });
        }
    }

    function hideOption(label){
        for (let index = 0; index < 3; index++) {
            if (dataSelect[index] && dataSelect[index].text === label) {
                dataSelect.splice(index, 1);
                $('#select-layanan').empty()
                $('#select-layanan').select2({
                    data: dataSelect,
                    multiple: true,
                    closeOnSelect: false
                });
            }
        }
        noOptionSelect2()
    }

    function tambahDiskon(){
        value = $('#select-layanan').val()
        diskon = $('#diskon').val()
        tipe_diskon = $('#tipe_diskon').val()
        min_qty = $('#min_qty').val()
        start_at = $('#start_at').val()
        expired_at = $('#expired_at').val()

        console.log(value)
        // console.log(diskon)
        // console.log(tipe_diskon)
        // console.log(min_qty)
        // console.log(start_at)
        // console.log(expired_at)

        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url: '/promotion/tambah_diskon',
            type: 'POST',
            data:{
                'ids_layanan': JSON.stringify(value),
                'diskon': diskon,
                'tipe_diskon': tipe_diskon,
                'min_qty': min_qty,
                'start_at': start_at,
                'expired_at': expired_at
            },
            headers: {
                'X-CSRFToken': csrftoken 
            },
            success: function(data) {
                console.log(data)
                window.location.reload()
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }

    function select_all(){
        $('#toggle-layanan input[type="checkbox"]').each(function() {
            // Check if the checkbox is checked
            if ($(this).is(':checked')) {
                var select2Instance = $('#select-layanan').data('select2');

                // Get all options
                var options = $('#select-layanan option');

                // Get values of all options
                var values = $.map(options ,function(option) {
                    return option.value;
                });

                // Set the values in Select2
                $('#select-layanan').val(values).trigger('change');
            } else {
                $('#select-layanan').val([]).trigger('change');
            }
        });
    }

    function checkLayanan(idDiskon){
        $.ajax({
            url: '/promotion/check_layanan/'+idDiskon,
            success: function(data) {
                if(data.obat.length > 0){
                    var data_obat = '';
                    $.each(data.obat, function(index, value){
                        data_obat += `<tr>
                            <td>${value.nama}</td>
                            <td>${value.harga_jual.toLocaleString()}</td>
                        </tr>`;
                    })
                } else {
                    var data_obat = '<tr><td colspan="2" class="text-center">Data not found.</td></tr>';
                }
                if(data.layanan.length > 0){
                    var data_layanan = '';
                    $.each(data.layanan, function(index, value){
                        data_layanan += `<tr>
                            <td>${value.nama}</td>
                            <td>${value.harga.toLocaleString()}</td>
                        </tr>`;
                    })
                } else {
                    var data_layanan = '<tr><td colspan="2" class="text-center">Data not found.</td></tr>';
                }
                if(data.lab.length > 0){
                    var data_layanan_lab = '';
                    $.each(data.lab, function(index, value){
                        data_layanan_lab += `<tr>
                            <td>${value.nama}</td>
                            <td>${value.harga.toLocaleString()}</td>
                        </tr>`;
                    })
                } else {
                    var data_layanan_lab = '<tr><td colspan="2" class="text-center">Data not found.</td></tr>';
                }
                var list_obat = `<div class="col-md-4">
                    <h5 style="margin-bottom: 10px;font-size: 16px;">OBAT</h5>
                    <table width="100%" style="width:100% !important; cursor: pointer;" class="table table-striped table-bordered">
                        <thead>
                            <th>Nama</th>
                            <th>Harga</th>
                        </thead>
                        <tbody>
                            ${data_obat}
                        </tbody>
                    </table>
                </div>`;
                var list_layanan = `<div class="col-md-4">
                    <h5 style="margin-bottom: 10px;font-size: 16px;">LAYANAN</h5>
                    <table width="100%" style="width:100% !important; cursor: pointer;" class="table table-striped table-bordered">
                        <thead>
                            <th>Nama</th>
                            <th>Harga</th>
                        </thead>
                        <tbody>
                            ${data_layanan}
                        </tbody>
                    </table>
                </div>`;
                var list_layanan_lab = `<div class="col-md-4">
                    <h5 style="margin-bottom: 10px;font-size: 16px;">LAYANAN LAB</h5>
                    <table width="100%" style="width:100% !important; cursor: pointer;" class="table table-striped table-bordered">
                        <thead>
                            <th>Nama</th>
                            <th>Harga</th>
                        </thead>
                        <tbody>
                            ${data_layanan_lab}
                        </tbody>
                    </table>
                </div>`;
                var html = `<div class="row">${list_obat}${list_layanan}${list_layanan_lab}</div>`;
                $('#mdListLayanan .modal-body').html(html)
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
    function deleteDiskon(idDiskon){
        Swal.fire({
            title: 'Hi, Admin!',
            text: 'Apakah kamu yakin untuk hapus diskon ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/promotion/hapus_diskon/'+idDiskon,
                    success: function(data) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Diskon berhasil dihapus!',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                        window.location.reload()
                    },
                    error: function(error) {
                        console.error('Error:', error);
                    }
                });
            }
        });
    }
</script>