<div class="modal fade modal-fullscreen-xl mymodal" id="OpenCart-1" tabindex="-1" aria-labelledby="OpenCart-1"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content cart-modal-content">
            <div class="modal-header cart-modal-header bg-cart">
                <div class="cart-header-title">
                    <i class="fa fa-file-text-o"></i>
                    <h5 class="modal-title">INVOICE #<span class="tinvoice"></span></h5>
                </div>
            </div>
            <div class="modal-body" id="keranjang">
                <div class="load-data"></div>
            </div>
            <div class="modal-footer cart-modal-footer">
                <div class="cart-footer-left">
                    <button type="button" data-toggle='tooltip' data-placement="top" title="Tutup [ESC]"
                        class="btn cart-close-btn" data-dismiss="modal"><i class="fa fa-times"></i> Tutup [ESC]</button>
                    <button type="button" class="btn batal_order cart-cancel-btn" data-toggle='tooltip'
                        title="Batal Order" id="batal_order"><i class="fa fa-ban"></i> Batal Order</button>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#modal-shortcut"
                        class="btn cart-settings-btn" data-url="transaksi" data-original-title="Shortcut" data-placement="top">
                        <i class="fa fa-cog"></i>
                    </a>
                </div>
                <div class="cart-footer-right">
                    <button type="button" class="btn print_pdf" data-toggle='tooltip' title="Print Pdf"
                        id="print_pdf"><i class="fa fa-file-pdf-o"></i> Print</button>
                    <button type="button" class="btn print cart-print-btn" data-toggle='tooltip'
                        title="Print [CTRL+P]" id="print"><i class="fa fa-print"></i> Simpan &amp; Cetak Order</button>
                    <button type="button" class="btn bayarin cart-pay-btn" id="bayarin"
                        data-can-bayar-order="<?=punya_akses_bayar_order() ? '1' : '0';?>" data-toggle='tooltip'
                        title="Bayar [CTRL+B]"><i class="fa fa-money"></i> Bayar</button>
                    <button type="button" class="btn cetak_spk cart-spk-btn" style="display:none" id="cetak_spk"
                        data-toggle='tooltip' title="Cetak SPK">Cetak SPK</button>
                    <button type="button" class="btn pending cart-pending-btn" id="pending" data-toggle='tooltip'
                        title="Pending"><i class="fa fa-clock-o"></i> Pending</button>
                </div>
                <!--button type="button" class="btn btn-danger btn-sm batalin" id="batalin" data-toggle='tooltip' title="Batal" disabled>Cancel</button-->
            </div>
        </div>
    </div>
</div>

<script>
(function(){
    if (window.__bayarOrderAccessGuard) return;
    window.__bayarOrderAccessGuard = true;
    document.addEventListener('click', function(event){
        var target = event.target && event.target.closest ? event.target.closest('#bayarin, .bayarin') : null;
        if (!target || target.getAttribute('data-can-bayar-order') !== '0') return;
        event.preventDefault();
        event.stopPropagation();
        if (event.stopImmediatePropagation) event.stopImmediatePropagation();
        if (typeof sweet === 'function') {
            sweet('Peringatan!!!', 'Maaf anda tidak punya akses', 'warning', 'warning');
        } else if (typeof Swal !== 'undefined' && Swal.fire) {
            Swal.fire('Peringatan!!!', 'Maaf anda tidak punya akses', 'warning');
        } else {
            alert('Maaf anda tidak punya akses');
        }
    }, true);
})();
</script>

<div class="modal fade" id="button-qr" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle"
    aria-hidden="true">
    <div class="modal-dialog flat" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Scan Barcode</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 id="qr-reader" style="width: 100%;text-align:center"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="show-harga" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable flat modal-lg daftar-harga-dialog" role="document">
        <div class="modal-content daftar-harga-modal">
            <div class="modal-header daftar-harga-header">
                <div class="daftar-harga-heading">
                    <span class="daftar-harga-heading__icon"><i class="fa fa-cube"></i></span>
                    <div>
                        <h5 class="modal-title">Daftar Harga</h5>
                        <p>Pilih produk untuk menambahkannya ke order.</p>
                    </div>
                </div>
                <button type="button" class="close daftar-harga-close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body daftar-harga-body">
                <div class="daftar-harga"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-shortcut" tabindex="-1" aria-labelledby="modal-shortcut" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content flat">
            <div class="modal-header py-1">
                <h5 class="modal-title">SHORTCUT TRANSAKSI</h5>
                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
            </div>
            <div class="modal-body">
                <ul class="pl-3">
                    <li><small>F1 : CARI PRODUK</small></li>
                    <li><small>F2 : CARI PELANGGAN</small></li>
                    <li><small>F3 : TAMBAH PELANGGAN</small></li>
                    <li><small>CTRL + P : SIMPAN | CETAK INVOICE</small></li>
                    <li><small>CTRL + B : BAYAR INVOICE</small></li>
                    <li><small>CTRL + L : KEMBALI KE AWAL BARIS KOLOM</small></li>
                    <li><small>ESC : TUTUP KERANJANG</small></li>
                    <li><small>TAB/ENTER/CTRL + ENTER : PINDAH KOLOM KE KANAN</small></li>
                    <li><small>SHIFT + ENTER : PINDAH KOLOM KE KIRI</small></li>
                </ul>
            </div>

        </div>
    </div>
</div>

<div class="modal fade modal-fullscreen-xl" id="OpenKon" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content flat">
            <div class="modal-header py-1">
                <h5 class="modal-title">Data Konsumen</h5>
                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
            </div>
            <div class="modal-body scrollbar-dynamic">
                <div class="load-data-konsumen"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-cari-2" tabindex="-1" aria-labelledby="modal-cari" aria-hidden="true"
    data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-md">
        <div class="modal-content flat">
            <form role="form" id="form-cari">
                <div class="modal-header py-1">
                    <h4 class="modal-title">Cari Pelanggan</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="data-cari"></div>
                    <p style="color:red;font-weight:bold;display:none" id="error_piutang"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-info mr-auto flat" data-toggle="popover"
                        title="Petunjuk"
                        data-content="<ol class='pl-3'><li>Cari</li><li>Pilih</li><li>Enter</li><li>Enter</li></ol>"><span
                            class="icon text-white-50">
                            <i class="fa fa-info-circle fa-fw fa-lg"></i>
                        </span>
                    </button>
                    <button type="button" class="btn btn-danger btn-sm flat tutup-cari"
                        data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary btn-sm flat" id="btn-simpan" disabled>Pilih</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="modal-cari-dropship" tabindex="-1" aria-labelledby="modal-cari" aria-hidden="true"
    data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-md">
        <div class="modal-content flat">
            <form role="form" class="form_dropship" id="form_dropship" name="form_dropship">
                <div class="modal-header py-1">
                    <h4 class="modal-title">Cari Dropship</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="data-cari-dropship"></div>
                    <p style="color:red;font-weight:bold;display:none" id="error_dropship"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-sm flat tutup-cari"
                        data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary btn-sm flat" id="btn-simpan-dropship"
                        disabled>Pilih</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div id="modal-tambah-1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle"
    aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-scrollable  modal-lg" role="document">
        <div class="modal-content flat">
            <div class="modal-header py-1">
                <h4 class="modal-title">Tambah Pelanggan</h4>
                <button type="button" class="close tutup-con" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form role="form" id="form-tambah" method="post">
                    <span id="error_input"></span>
                    <input type="hidden" class="form-control" id="id_nya" name="id_nya">
                    <div class="form-group row mb-0">
                        <label class="col-sm-4 col-form-label">No. HP</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input class="form-control form-control-sm flat shift-focus" type="tel" id="telepon_add"
                                    name="telepon_add" autofocus required>
                                <input type="hidden" id="type_add" name="type_add">
                                <div class="input-group-append" id="dispu"></div>
                            </div>
                            <div id="feedback-telp" class="feedback"></div>
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <label class="col-sm-4 col-form-label">Panggilan</label>
                        <div class="col-sm-8">
                            <select name="panggilan_add" id="panggilan_add"
                                class="custom-select form-control form-control-sm pl-1  flat shift-focus">
                                <option value="" selected>Pilih</option>
                                <option value="Bpk">Bpk</option>
                                <option value="Ibu">Ibu</option>
                                <option value="Mba">Mba</option>
                                <option value="Mas">Mas</option>
                                <option value="Kak">Kak</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-4 col-form-label">Nama</label>
                        <div class="col-sm-8">
                            <input class="form-control form-control-sm flat shift-focus" minlength="3" id="nama_add"
                                name="nama_add" required>
                            <div id="feedback-nama" class="feedback">Nama pelanggan</div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-4 col-form-label">Alamat</label>
                        <div class="col-sm-8">
                            <textarea id="alamat_add" name="alamat_add" class="form-control flat shift-focus"
                                minlength="5" rows="1" required></textarea>
                            <div class="feedback">Alamat pelanggan</div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-4 col-form-label">Member</label>
                        <div class="col-sm-8">
                            <select name="jenis_member_add" id="jenis_member_add"
                                class="custom-select form-control form-control-sm shift-focus" data-valueKey="id"
                                data-displayKey="name" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-4 col-form-label">Jenis</label>
                        <div class="col-sm-8">
                            <select name="jenis_lembaga_add" id="jenis_lembaga_add"
                                class="custom-select form-control form-control-sm flat shift-focus" data-valueKey="id"
                                data-displayKey="name" required>
                            </select>
                            <div class="feedback">personal/perusahaan/lembaga</div>
                        </div>
                    </div>
                    <div class="form-group row mb-0 tampil_add">
                        <label class="col-sm-4 col-form-label">Nama perusahaan</label>
                        <div class="col-sm-8">
                            <input class="form-control form-control-sm flat shift-focus" id="perusahaan_add"
                                name="perusahaan_add">
                            <div class="feedback">Nama perusahaan/lembaga</div>
                        </div>
                    </div>
                    <div class="form-group row mb-0 tampil_add">
                        <label class="col-sm-4 col-form-label">No. HP/Telepon perusahaan</label>
                        <div class="col-sm-8">
                            <input class="form-control form-control-sm flat shift-focus" id="no_telp_add"
                                name="no_telp_add" value="">
                            <div class="feedback">Telepon perusahaan</div>
                        </div>
                    </div>
                    <div class="form-group row mb-1 tampil_add">
                        <label class="col-sm-4 col-form-label">Alamat perusahaan</label>
                        <div class="col-sm-8">
                            <textarea id="alamat_perusahaan_add" name="alamat_perusahaan_add"
                                class="form-control flat shift-focus" rows="1"></textarea>
                            <div class="feedback">Alamat perusahaan/lembaga</div>
                        </div>
                    </div>

                    <div class="form-group row mb-0 tampil_add">
                        <label class="col-sm-4 col-form-label">Tampilkan Data</label>
                        <div class="col-sm-8">
                            <select name="tampil_data" id="tampil_data"
                                class="form-control custom-select form-control-sm pl-1 flat" required>
                                <option value="0" selected>Personal</option>
                                <option value="1">Perusahaan</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <label class="col-sm-4 col-form-label">Referal</label>
                        <div class="col-sm-8">
                            <select name="via_add" id="via_add"
                                class="form-control custom-select form-control-sm pl-1 flat shift-focus" required>
                                <option value="build" selected>LANGSUNG</option>
                                <option value="wa">WHATSAPP</option>
                                <option value="fb">FACEBOOK</option>
                                <option value="ig">INSTAGRAM</option>
                                <option value="tw">TWITTER</option>
                                <option value="em">EMAIL</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <label class="col-sm-4 col-form-label">Boleh Piutang</label>
                        <div class="col-sm-8">
                            <select name="status_add" id="status_add"
                                class="form-control custom-select form-control-sm pl-1 flat shift-focus" required>
                                <option value="0" selected>Tidak</option>
                                <option value="1">Ya</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <label class="col-sm-4 col-form-label">Max Piutang</label>
                        <div class="col-sm-8">
                            <div class="input-group input-group-sm">
                                <input type="number" min='0' class="form-control form-control-sm flat shift-focus"
                                    id="max_u_add" name="max_u_add" value="0">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Kali</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-info mr-auto flat" data-toggle="popover" title="Petunjuk"
                    data-content="Isi kolom Enter<br>Alamat gunakan tab"><span class="icon text-white-50">
                        <i class="fa fa-info-circle fa-fw fa-lg"></i>
                    </span>
                </button>
                <button type="button" class="btn btn-primary btn-sm flat" id="save-cari">Simpan</button>
                <button type="button" class="btn btn-danger tutup-con btn-sm flat" data-dismiss="modal">Batal</button>
            </div>
        </div>
    </div>
</div>

<div id="modal-edit-konsumen" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content flat">
            <form role="form" id="form-edit-k" method="post">
                <div class="modal-header py-1">
                    <h4 class="modal-title">Edit Pelanggan</h4>
                    <button type="button" class="close tutup-con" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <span id="error_input"></span>
                    <div class="form-group row mb-0">
                        <label for="telepon_edit" class="col-sm-5 col-form-label">pelanggan</label>
                        <div class="col-sm-7">
                            <div class="input-group">
                                <input class="form-control phone form-control-sm" id="telepon_edit" name="telepon_edit"
                                    autofocus="" required>
                                <input type="hidden" class="form-control" id="id_edit" name="id_edit">
                            </div>
                            <div id="feedback-telp" class="feedback"></div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Panggilan</label>
                        <div class="col-sm-7">
                            <select name="panggilan_edit" id="panggilan_edit" class="form-control custom-select pl-1">
                                <option value="" selected></option>
                                <option value="Bpk">Bpk</option>
                                <option value="Ibu">Ibu</option>
                                <option value="Mba">Mba</option>
                                <option value="Mas">Mas</option>
                                <option value="Kak">Kak</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <label class="col-sm-5 col-form-label">Nama</label>
                        <div class="col-sm-7">
                            <input class="form-control form-control-sm" id="nama_edit" name="nama_edit"
                                autofocus="autofocus" required>
                            <div id="feedback-nama" class="feedback">Nama pelanggan</div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Alamat</label>
                        <div class="col-sm-7">
                            <textarea id="alamat_edit" name="alamat_edit" class="form-control" rows="1"
                                required></textarea>
                            <div id="feedback-alamat" class="feedback">Alamat pelanggan</div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Member</label>
                        <div class="col-sm-7">
                            <select name="jenis_member_edit" id="jenis_member_edit"
                                class="custom-select form-control form-control-sm" data-valueKey="id"
                                data-displayKey="name" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Jenis</label>
                        <div class="col-sm-7">
                            <select name="jenis_lembaga_edit" id="jenis_lembaga_edit"
                                class="custom-select form-control form-control-sm" data-valueKey="id"
                                data-displayKey="name" required>
                            </select>
                            <div id="feedback-jenis" class="feedback">personal/perusahaan/lembaga</div>
                        </div>
                    </div>
                    <div class="form-group row mb-0 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">Nama perusahaan</label>
                        <div class="col-sm-7">
                            <input class="form-control form-control-sm" id="nama_perusahaan_edit"
                                name="nama_perusahaan_edit" value="Personal">
                            <div id="feedback-nama-perusahaan" class="feedback">Nama perusahaan/lembaga</div>
                        </div>
                    </div>
                    <div class="form-group row mb-0 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">No.HP/ Telepon perusahaan</label>
                        <div class="col-sm-7">
                            <input class="form-control form-control-sm" id="no_telp_edit" name="no_telp_edit"
                                value="Personal">
                        </div>
                    </div>
                    <div class="form-group row mb-1 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">Alamat perusahaan</label>
                        <div class="col-sm-7">
                            <textarea id="alamat_perusahaan_edit" name="alamat_perusahaan_edit" class="form-control"
                                rows="1"></textarea>
                            <div id="feedback-alamat-perusahaan" class="feedback">Alamat perusahaan/lembaga</div>
                        </div>
                    </div>

                    <div class="form-group row mb-1 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">Tampilkan Data</label>
                        <div class="col-sm-7">
                            <select name="tampil_edit" id="tampil_edit"
                                class="form-control custom-select form-control-sm pl-1 flat" required>
                                <option value="0" selected>Personal</option>
                                <option value="1">Perusahaan</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Referal</label>
                        <div class="col-sm-7">
                            <select name="via_edit" id="via_edit"
                                class="form-control custom-select form-control-sm pl-1" required>
                                <option value="build" selected>langsung</option>
                                <option value="wa">whatsapp</option>
                                <option value="fb">facebook</option>
                                <option value="ig">instagram</option>
                                <option value="tw">twitter</option>
                                <option value="em">email</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Boleh Utang</label>
                        <div class="col-sm-7">
                            <select name="status_edit" id="status_edit"
                                class="form-control custom-select form-control-sm pl-1" required>
                                <option value="1">Ya</option>
                                <option value="0">Tidak</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Max Ngutang</label>
                        <div class="col-sm-7">
                            <div class="input-group input-group-sm">
                                <input class="form-control form-control-sm" id="max_u" name="max_u">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Kali</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Update</button>
                    <button type="button" class="btn btn-danger tutup-con" data-dismiss="modal">Tutup</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- cetak invoice -->
<div class="modal fade modal-fullscreen-xl" id="print-4" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header p-2 flat">
                <h4 class="modal-title">Cetak Invoice #<span class="cetak_invoice"></span> <span
                        class="invoice_print_url"></span>&nbsp;&nbsp;<span class="print_url"></span></h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">Close</span></button>
            </div>
            <div class="modal-body p-0 scrollbar-inner">
                <div id="loading" class="text-center" style="">
                    <img src="<?php echo base_url('assets/img/ajax-loader.gif'); ?>" alt="" />
                    &nbsp;&nbsp;Sedang memuat INVOICE ORDER #<span class="cetak_invoice"></span>
                </div>
                <div id="error">Load Timeout Klik disini&nbsp;&nbsp;<span
                        class="invoice_print_url"></span>&nbsp;&nbsp;<span class="print_url"></span></div>
                <div class="load-pdf"></div>
            </div>
        </div>
    </div>
</div>

<!-- bayar invoice -->
<div class="modal fade payment-modal" id="pembayaran-5" tabindex="-1" role="dialog"
    aria-labelledby="payment-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered payment-modal-dialog" role="document">
        <div class="modal-content" id="saving-bayar">
            <div class="modal-header payment-modal-header">
                <div class="payment-title-wrap">
                    <span class="payment-title-icon"><i class="fa fa-credit-card"></i></span>
                    <span class="payment-title-divider"></span>
                    <h4 class="modal-title" id="payment-modal-title">Bayar Invoice #<span class="tinvoice"></span></h4>
                </div>
                <button type="button" class="close payment-close" data-dismiss="modal" aria-label="Tutup">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body payment-modal-body">
                <div class="payment-main-card">
                    <section class="payment-section">
                        <h5 class="payment-section-title">1. Cara Bayar</h5>
                        <div class="payment-radio-grid">
                            <label class="payment-radio-option" for="Bayar1">
                                <input type="radio" id="Bayar1" name="Bayar" class="Bayar" value="1" checked>
                                <span class="payment-radio-mark"></span>
                                <span>FULL / LUNAS</span>
                            </label>
                            <label class="payment-radio-option" for="Bayar2">
                                <input type="radio" id="Bayar2" name="Bayar" class="Bayar" value="2">
                                <span class="payment-radio-mark"></span>
                                <span>SEBAGIAN / DP</span>
                            </label>
                        </div>

                        <div class="payment-method-grid">
                            <div class="payment-field payment-method-field is-missing">
                                <label for="id_byr" class="payment-method-label">
                                    <span>Metode Pembayaran</span>
                                    <span class="payment-method-badge">Wajib dipilih</span>
                                </label>
                                <div class="payment-control-with-icon">
                                    <i class="fa fa-exchange"></i>
                                    <select name="id_byr" id="id_byr" onchange="sumawal()"
                                        class="custom-select form-control" data-valueKey="id" data-displayKey="name"
                                        required></select>
                                </div>
                                
                            </div>
                            <div class="payment-field payment-account-field">
                                <label for="rekening">Rekening Tujuan</label>
                                <div class="payment-control-with-icon muted-icon">
                                    <i class="fa fa-bank"></i>
                                    <select name="rekening" id="rekening"
                                        class="custom-select form-control rekening" disabled></select>
                                </div>
                            </div>
                        </div>

                        <div class="lampiran payment-upload-box">
                            <div class="payment-upload-label">Bukti Transfer (Opsional)</div>
                            <button type="button" class="preview payment-preview" id="preview" title="Preview bukti transfer">
                                <img class="img-preview mklbItem" id="imageresource"
                                    src="<?php echo base_url('assets/img/bone.jpg'); ?>" alt="Bukti transfer">
                            </button>
                            <i class="fa fa-cloud-upload payment-upload-icon"></i>
                            <div class="payment-upload-copy">
                                <strong>Klik untuk upload atau drag &amp; drop</strong>
                                <span>Format: jpg, jpeg, png, webp &bull; Maks. 5MB</span>
                            </div>
                            <div class="custom-file payment-file-control">
                                <input class="custom-file-input" name="lampiran" id="lampiran" type="file"
                                    accept="image/jpeg,image/png,image/webp">
                                <label class="custom-file-label" for="lampiran"><i class="fa fa-paperclip"></i> Pilih File</label>
                            </div>
                        </div>
                    </section>

                    <section class="payment-section payment-details-section">
                        <h5 class="payment-section-title">2. Rincian Pembayaran</h5>
                        <div class="payment-details-grid">
                            <div class="payment-field">
                                <label for="pajak">PPN / Pajak</label>
                                <div class="payment-tax-control">
                                    <input id="pajak" name="pajak" value="0" type="text" inputmode="numeric"
                                        autocomplete="off" class="form-control">
                                    <button type="button" class="btn pajakd" id="pajakd" disabled>% INPUT PAJAK</button>
                                    <div class="payment-tax-actions">
                                        <button style="display:none" type="button" onclick="savpajak();"
                                            class="btn btn-success savpajak" id="savpajak" title="Simpan Pajak">
                                            <i class="fa fa-save"></i>
                                        </button>
                                        <button style="display:none" type="button" onclick="batal();"
                                            class="btn btn-danger batal" id="batal"><i class="fa fa-times"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="payment-field">
                                <label for="diskon_harga">Diskon</label>
                                <div class="payment-discount-control">
                                    <select placeholder="Pilih" name="diskon_harga" id="diskon_harga"
                                        class="form-control custom-select fcs" readonly>
                                        <option value="0" selected>Pilih</option>
                                        <option value="1">Diskon</option>
                                    </select>
                                    <input id="total_diskon" name="total_diskon" type="text"
                                        inputmode="numeric" autocomplete="off" class="form-control input"
                                        value="Rp.0" readonly>
                                </div>
                                <div id="member-discount-info" class="small text-success mt-1"
                                    style="display:none" aria-live="polite"></div>
                            </div>
                        </div>
                    </section>

                    <section class="payment-section">
                        <h5 class="payment-section-title">3. Nominal Pembayaran Cepat</h5>
                        <div class="bayar-nominal-wrap" role="group" aria-label="Nominal pembayaran cepat">
                            <button class="btn n-bayar n-50" data-id="50000">Rp 50.000</button>
                            <button class="btn n-bayar n-100" data-id="100000">Rp 100.000</button>
                            <button class="btn n-bayar n-200" data-id="200000">Rp 200.000</button>
                            <button class="btn n-bayar n-300" data-id="300000">Rp 300.000</button>
                            <button class="btn n-bayar n-400" data-id="400000">Rp 400.000</button>
                            <button class="btn n-bayar n-500" data-id="500000">Rp 500.000</button>
                        </div>
                    </section>

                    <section class="payment-section payment-input-section">
                        <h5 class="payment-section-title">4. Input Pembayaran</h5>
                        <div class="payment-amount-row">
                            <div class="payment-amount-control">
                                <label for="uangm">Jumlah Bayar</label>
                                <input id="uangm" name="uangm" type="text" onchange="inputan()"
                                    inputmode="numeric" autocomplete="off" class="form-control input">
                            </div>
                            <button type="button" onclick="lunasd();" class="btn lunasd">UANG PAS</button>
                        </div>
                        <div class="payment-change-row">
                            <label for="kembalian">Kembalian</label>
                            <input id="kembalian" name="kembalian" type="text" class="form-control" readonly>
                        </div>
                    </section>

                    <div class="load-bayar"></div>
                </div>

                <aside class="payment-summary-card">
                    <div class="payment-summary-title">
                        <span><i class="fa fa-file-text"></i></span>
                        <h5>Ringkasan Pembayaran</h5>
                    </div>
                    <div class="payment-summary-primary">
                        <div class="payment-summary-line">
                            <span>TOTAL ORDER</span>
                            <strong id="payment-summary-total">Rp 0</strong>
                        </div>
                        <div class="payment-summary-line is-due">
                            <span>TOTAL / SISA BAYAR</span>
                            <strong id="payment-summary-due">Rp 0</strong>
                        </div>
                    </div>

                    <div class="payment-status-box">
                        <div class="payment-status-label">STATUS PEMBAYARAN</div>
                        <div class="payment-status-content">
                            <span class="payment-status-icon">Rp</span>
                            <div>
                                <strong id="payment-status-title">Belum Lunas</strong>
                                <span id="payment-status-copy">Sisa bayar Rp 0</span>
                            </div>
                        </div>

                        <div class="payment-summary-detail-title">RINCIAN</div>
                        <div class="payment-summary-detail-row">
                            <span>PPN / Total Pajak</span>
                            <strong id="payment-summary-tax">Rp 0</strong>
                        </div>
                        <div class="payment-summary-detail-row">
                            <span>Diskon</span>
                            <strong id="payment-summary-discount">Rp 0</strong>
                        </div>

                        <div class="payment-summary-legend">
                            <div><span class="legend-dot blue"></span><span>Total Order</span><strong id="payment-legend-total">Rp 0</strong></div>
                            <div><span class="legend-dot green"></span><span>Sudah Dibayar</span><strong id="payment-legend-paid">Rp 0</strong></div>
                            <div><span class="legend-dot red"></span><span>Sisa Bayar</span><strong id="payment-legend-due">Rp 0</strong></div>
                        </div>
                    </div>
                </aside>

                <div class="payment-data-fields" aria-hidden="true">
                    <input id="sisabayar" name="sisabayar" type="text" readonly>
                    <input id="totalbyr" name="totalbyr" type="text" value="0" readonly>
                    <input id="total_bayar" name="total_bayar" type="hidden" value="0" readonly>
                    <input id="sumpajak" name="sumpajak" type="text" readonly>
                    <input id="sumpajak_dummy" name="sumpajak_dummy" type="text" readonly>
                </div>
            </div>

            <div class="modal-footer payment-modal-footer">
                <div class="payment-footer-info">
                    <span><i class="fa fa-info-circle"></i></span>
                    <small>Pastikan data pembayaran sudah benar sebelum disimpan.</small>
                </div>
                <div class="payment-footer-actions">
                    <button type="button" class="btn payment-cancel" data-dismiss="modal">
                        <i class="fa fa-times"></i> TUTUP
                    </button>
                    <button type="submit" class="btn bayar_l payment-save" id="bayar_l" disabled>
                        <i class="fa fa-save"></i> SIMPAN PEMBAYARAN
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- bayar invoice pelunasan -->
<div class="modal fade payment-modal" id="pembayaran-sisa" tabindex="-1" role="dialog"
    aria-labelledby="payment-sisa-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered payment-modal-dialog" role="document">
        <div class="modal-content" id="saving-bayar-1">
            <div class="modal-header payment-modal-header">
                <div class="payment-title-wrap">
                    <span class="payment-title-icon"><i class="fa fa-credit-card"></i></span>
                    <span class="payment-title-divider"></span>
                    <h4 class="modal-title" id="payment-sisa-modal-title">Bayar Invoice #<span class="tinvoice-1"></span></h4>
                </div>
                <button type="button" class="close payment-close" data-dismiss="modal" aria-label="Tutup">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body payment-modal-body">
                <div class="payment-main-card">
                    <section class="payment-section">
                        <h5 class="payment-section-title">1. Cara Bayar</h5>
                        <div class="payment-radio-grid">
                            <label class="payment-radio-option" for="Bayar1-1">
                                <input type="radio" id="Bayar1-1" name="Bayar" class="Bayar" value="1" checked>
                                <span class="payment-radio-mark"></span>
                                <span>FULL / LUNAS</span>
                            </label>
                            <label class="payment-radio-option" for="Bayar2-1">
                                <input type="radio" id="Bayar2-1" name="Bayar" class="Bayar" value="2">
                                <span class="payment-radio-mark"></span>
                                <span>SEBAGIAN / DP</span>
                            </label>
                        </div>

                        <div class="payment-method-grid">
                            <div class="payment-field payment-method-field is-missing">
                                <label for="id_byr-1" class="payment-method-label">
                                    <span>Metode Pembayaran</span>
                                    <span class="payment-method-badge">Wajib dipilih</span>
                                </label>
                                <div class="payment-control-with-icon">
                                    <i class="fa fa-exchange"></i>
                                    <select name="id_byr" id="id_byr-1" class="custom-select form-control"
                                        data-valueKey="id" data-displayKey="name" required></select>
                                </div>
                            </div>
                            <div class="payment-field payment-account-field">
                                <label for="rekening-1">Rekening Tujuan</label>
                                <div class="payment-control-with-icon muted-icon">
                                    <i class="fa fa-bank"></i>
                                    <select name="rekening" id="rekening-1"
                                        class="custom-select form-control rekening-1" disabled></select>
                                </div>
                            </div>
                        </div>

                        <div class="lampiran-1 payment-upload-box">
                            <div class="payment-upload-label">Bukti Transfer (Opsional)</div>
                            <button type="button" class="preview payment-preview" id="preview-1" title="Preview bukti transfer">
                                <img class="img-preview mklbItem-1" id="imageresource-1"
                                    src="<?php echo base_url('assets/img/bone.jpg'); ?>" alt="Bukti transfer">
                            </button>
                            <i class="fa fa-cloud-upload payment-upload-icon"></i>
                            <div class="payment-upload-copy">
                                <strong>Klik untuk upload atau drag &amp; drop</strong>
                                <span>Format: jpg, jpeg, png, webp &bull; Maks. 5MB</span>
                            </div>
                            <div class="custom-file payment-file-control">
                                <input class="custom-file-input" name="lampiran" id="lampiran-1" type="file"
                                    accept="image/jpeg,image/png,image/webp">
                                <label class="custom-file-label" for="lampiran-1"><i class="fa fa-paperclip"></i> Pilih File</label>
                            </div>
                        </div>
                    </section>

                    <section class="payment-section payment-details-section">
                        <h5 class="payment-section-title">2. Rincian Pembayaran</h5>
                        <div class="payment-details-grid">
                            <div class="payment-field">
                                <label>Total Order</label>
                                <div class="payment-readonly-control">
                                    <input id="sisabayar-1" name="sisabayar" type="text" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="payment-field">
                                <label>Total / Sisa Bayar</label>
                                <div class="payment-readonly-control">
                                    <input id="totalbyr-1" name="totalbyr" type="text" value="0" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="payment-section">
                        <h5 class="payment-section-title">3. Nominal Pembayaran Cepat</h5>
                        <div class="bayar-nominal-wrap" role="group" aria-label="Nominal pembayaran cepat">
                            <button class="btn n-bayar-1 n-50" data-id="50000">Rp 50.000</button>
                            <button class="btn n-bayar-1 n-100" data-id="100000">Rp 100.000</button>
                            <button class="btn n-bayar-1 n-200" data-id="200000">Rp 200.000</button>
                            <button class="btn n-bayar-1 n-300" data-id="300000">Rp 300.000</button>
                            <button class="btn n-bayar-1 n-400" data-id="400000">Rp 400.000</button>
                            <button class="btn n-bayar-1 n-500" data-id="500000">Rp 500.000</button>
                        </div>
                    </section>

                    <section class="payment-section payment-input-section">
                        <h5 class="payment-section-title">4. Input Pembayaran</h5>
                        <div class="payment-amount-row">
                            <div class="payment-amount-control">
                                <label for="uangm-1">Jumlah Bayar</label>
                                <input id="uangm-1" name="uangm" type="text" onchange="inputan_1()"
                                    onkeyup="formatNumber(this);kembalian_1()" inputmode="numeric"
                                    autocomplete="off" class="form-control input">
                            </div>
                            <button type="button" onclick="lunas_1();" class="btn lunas-1">UANG PAS</button>
                        </div>
                        <div class="payment-change-row">
                            <label for="kembalian-1">Kembalian</label>
                            <input id="kembalian-1" name="kembalian" type="text" class="form-control" readonly>
                        </div>
                    </section>

                    <div class="load-bayar-sisa"></div>
                </div>

                <aside class="payment-summary-card">
                    <div class="payment-summary-title">
                        <span><i class="fa fa-file-text"></i></span>
                        <h5>Ringkasan Pembayaran</h5>
                    </div>
                    <div class="payment-summary-primary">
                        <div class="payment-summary-line">
                            <span>TOTAL ORDER</span>
                            <strong id="payment-sisa-summary-total">Rp 0</strong>
                        </div>
                        <div class="payment-summary-line is-due">
                            <span>TOTAL / SISA BAYAR</span>
                            <strong id="payment-sisa-summary-due">Rp 0</strong>
                        </div>
                    </div>

                    <div class="payment-status-box">
                        <div class="payment-status-label">STATUS PEMBAYARAN</div>
                        <div class="payment-status-content">
                            <span class="payment-status-icon">Rp</span>
                            <div>
                                <strong id="payment-sisa-status-title">Belum Lunas</strong>
                                <span id="payment-sisa-status-copy">Sisa bayar Rp 0</span>
                            </div>
                        </div>

                        <div class="payment-summary-detail-title">RINCIAN</div>
                        <div class="payment-summary-detail-row">
                            <span>PPN / Total Pajak</span>
                            <strong>Rp 0</strong>
                        </div>
                        <div class="payment-summary-detail-row">
                            <span>Diskon</span>
                            <strong>Rp 0</strong>
                        </div>

                        <div class="payment-summary-legend">
                            <div><span class="legend-dot blue"></span><span>Total Order</span><strong id="payment-sisa-legend-total">Rp 0</strong></div>
                            <div><span class="legend-dot green"></span><span>Sudah Dibayar</span><strong id="payment-sisa-legend-paid">Rp 0</strong></div>
                            <div><span class="legend-dot red"></span><span>Sisa Bayar</span><strong id="payment-sisa-legend-due">Rp 0</strong></div>
                        </div>
                    </div>
                </aside>

                <div class="payment-data-fields" aria-hidden="true">
                    <input id="total_bayar-1" name="total_bayar" type="hidden" value="0" readonly>
                    <input id="id_invoice_bayar" name="no_invoice" type="hidden" value="0" readonly>
                    <input id="type_bayar-1" name="type_bayar" type="hidden" readonly>
                    <input id="status_bayar-1" name="status_bayar" type="hidden" readonly>
                </div>
            </div>

            <div class="modal-footer payment-modal-footer">
                <div class="payment-footer-info">
                    <span><i class="fa fa-info-circle"></i></span>
                    <small>Pastikan data pembayaran sudah benar sebelum disimpan.</small>
                </div>
                <div class="payment-footer-actions">
                    <button type="button" class="btn payment-cancel" data-dismiss="modal">
                        <i class="fa fa-times"></i> TUTUP
                    </button>
                    <button type="submit" class="btn bayar_kan payment-save" id="bayar_kan" disabled>
                        <i class="fa fa-save"></i> SIMPAN PEMBAYARAN
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="DetailCart" tabindex="-1" aria-labelledby="DetailCart" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content flat">
            <form role="form" id="form-finishing">
                <div class="modal-header">
                    <h4 class="modal-title title-finishing">Finishing</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="finishing"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-sm tutup-cari flat"
                        data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-info btn-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="hitung_ukuran" tabindex="-1" aria-labelledby="hitung_ukuran" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content flat">
            <form role="form" id="form-finishing">
                <div class="modal-header">
                    <h4 class="modal-title title-finishing">Hitung Ukuran</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="load_hitung_ukuran"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-sm tutup-cari flat"
                        data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-info btn-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="cetaksimpan" class="modal fade">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content flat">
            <div class="modal-header py-1">
                <h3 class="modal-title">Cetak & Simpan data?</h3>
            </div>
            <div class="modal-body">
                <div class="form-group text-center">
                    <!-- Cetak dan Posting data-->
                    <p>Anda akan mencetak dan menyimpan data.
                        <br>Pastikan data yang anda masukan sudah benar.
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success okprint" type="button" id="print">Ya</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Tidak</button>
            </div>
        </div>
    </div>
</div>

<div id="modal-batal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content flat">
            <form role="form" id="form-batal" method="post">
                <div class="modal-header py-1">
                    <h4 class="modal-title">Batal Order</h4>
                    <button type="button" class="close tutup-con" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <span id="error_input"></span>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">NO. ORDER</label>
                        <div class="col-sm-7">
                            <div class="input-group">
                                <input class="form-control form-control-sm" id="no_transaksi" name="no_transaksi"
                                    readonly="readonly">
                                <input type="hidden" class="form-control form-control-sm" id="mod_batal"
                                    name="mod_batal" readonly="readonly">
                                <input type="hidden" class="form-control form-control-sm" id="no_order" name="no_order"
                                    readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">TOTAL ORDER</label>
                        <div class="col-sm-7">
                            <div class="input-group">
                                <input class="form-control form-control-sm" id="total_order_batal"
                                    name="total_order_batal" readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">TOTAL BAYAR</label>
                        <div class="col-sm-7">
                            <div class="input-group">
                                <input class="form-control form-control-sm" id="total_batal" name="total_batal"
                                    readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">KAS TUNAI & BANK</label>
                        <div class="col-sm-7">
                            <select name="id_akun" id="id_byrbatal" class="custom-select form-control form-control-sm"
                                data-valueKey="id" data-displayKey="name">
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">SALDO KAS</label>
                        <div class="col-sm-7">
                            <input class="form-control form-control-sm" id="saldo_kas_batal" name="saldo_kas_batal"
                                readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">KETERANGAN</label>
                        <div class="col-sm-7">
                            <textarea id="keterangan" name="keterangan" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="save-batal">Simpan</button>
                    <button type="button" class="btn btn-danger tutup-con" data-dismiss="modal">Tutup</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="modal-batalxx" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content flat">
            <form role="form" id="form-batal" method="post">
                <div class="modal-header py-1">
                    <h4 class="modal-title">Batal Order</h4>
                    <button type="button" class="close tutup-con" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <span id="error_input"></span>
                    <div class="form-group row mb-1">
                        <label class="col-sm-3 col-form-label">NO. ORDER</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <input class="form-control form-control-sm" id="notrx" name="notrx" readonly="readonly">
                                <input type="hidden" class="form-control form-control-sm" id="no_order" name="no_order"
                                    readonly="readonly">
                                <input type="hidden" class="form-control form-control-sm" id="mod_batal"
                                    name="mod_batal" readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-3 col-form-label">NOMINAL</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <input class="form-control form-control-sm" id="total_batal" name="total_batal"
                                    readonly="readonly">
                            </div>
                        </div>
                    </div>

                    <div class="form-group row mb-1">
                        <label class="col-sm-3 col-form-label">KETERANGAN</label>
                        <div class="col-sm-9">
                            <textarea id="keterangan" name="keterangan" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="save-batal">Simpan</button>
                    <button type="button" class="btn btn-danger tutup-con" data-dismiss="modal">Tutup</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="myModalTab" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
    class="modal fade text-left">
    <div role="document" class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header row d-flex justify-content-between mx-1 mx-sm-3 mb-0 pb-0 border-0">
                <div class="tabs active" id="tab01">
                    <h6 class="font-weight-bold">Akses Order</h6>
                </div>
                <div class="tabs" id="tab02">
                    <h6 class="text-muted">Cari Order</h6>
                </div>
                <div class="tabs" id="tab03">
                    <h6 class="text-muted">Manage File, Folder & Desain</h6>
                </div>
                <!--div class="tabs" id="tab04">
					<h6 class="text-muted">Operator</h6>
				</div-->
            </div>
            <div class="line"></div>
            <div class="modal-body p-0 load-cari">
                <fieldset class="show" id="tab011">
                    <div class="bg-light mt-3">
                        <div class="form-group pb-2 px-3">
                            <div class="input-group">
                                <input type="text" id="keyword_cari" class="form-control bg-light border-1 keyword_cari"
                                    placeholder="No. Order" aria-label="Search" style="border-color: #3f51b5;"
                                    oninput="this.value = this.value.toUpperCase()" autofocus>
                                <div class="input-group-append">
                                    <button class="btn btn-primary cari_invoice" type="button" id="cari_invoice">
                                        <i class="fa fa-search fa-sm"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="hasil_cari"></div>
                        </div>
                    </div>
                </fieldset>
                <fieldset id="tab021">
                    <div class="bg-light mt-3">
                        <div class="form-group pb-2 px-3">
                            <div class="input-group">
                                <input type="text" id="cari_order" class="form-control bg-light border-1"
                                    placeholder="No. Order | No. HP | Nama " aria-label="Search"
                                    oninput="this.value = this.value.toUpperCase()" autofocus>
                                <div class="input-group-append">
                                    <button class="btn btn-info cari_order" type="button" id="cari_invoice_order"
                                        disabled><i class="fa fa-search fa-sm"></i></button>
                                </div>
                            </div>

                            <div class="mt-2" id="hasil_cari_order"></div>
                        </div>
                    </div>
                </fieldset>
                <fieldset id="tab031">
                    <div class="bg-light">
                        <form class="mt-3" id="form-desain">
                            <div class="form-group pb-2 px-3">
                                <div class="input-group">
                                    <input type="text" id="cari_desain" class="form-control bg-light border-1"
                                        placeholder="No. Order" aria-label="Search"
                                        oninput="this.value = this.value.toUpperCase()" autofocus>
                                    <div class="input-group-append">
                                        <button class="btn btn-success cari_desain" type="button"
                                            id="cari_invoice_desain" onclick="cariDesain()">
                                            <i class="fa fa-search fa-sm"></i>
                                        </button>
                                        <button class="btn btn-info updateDesain" type="button" id="updateDesain">
                                            Update Desain
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group mt-3 mb-2">
                                    <label for="exampleFormControlInput1">Nama Folder</label>
                                    <div class="input-group input-group-sm mb-2">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Link Folder</span>
                                        </div>
                                        <input type="text" class="form-control" id="link_folder" name="link_folder"
                                            readonly>
                                        <input type="hidden" class="form-control" id="link_folder_hide"
                                            name="link_folder_hide" readonly>
                                        <div class="input-group-append">
                                            <button data-clipboard-action="copy" data-clipboard-target="#link_folder"
                                                class="btn btn-outline-secondary cbtn" type="button">Copy</button>
                                            <button class="btn btn-primary cek_folder" type="button">Cek & Buat
                                                Folder</button>
                                        </div>
                                    </div>
                                    <div class="input-group input-group-sm mb-2">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Nama Pelanggan</span>
                                        </div>
                                        <input type="text" class="form-control" id="link_pelanggan"
                                            name="link_pelanggan" readonly>
                                        <div class="input-group-append">
                                            <button data-clipboard-target="#link_pelanggan"
                                                class="btn btn-outline-secondary cbtn" type="button">Copy</button>
                                            <button class="btn btn-primary buka_folder" type="button">Buka
                                                Folder</button>
                                        </div>
                                    </div>

                                    <div class="input-group input-group-sm">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Nama Save File</span>
                                        </div>
                                        <input type="text" class="form-control" id="saved_file" name="saved_file"
                                            readonly>
                                        <div class="input-group-append">
                                            <button data-clipboard-target="#saved_file"
                                                class="btn btn-outline-secondary cbtn" type="button">Copy</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mt-3 mb-2">
                                    <label for="exampleFormControlInput1">Nama File Cetak</label>
                                    <div id="detail_cetak"></div>
                                    <p><code>U:Ukuran|Q:QTY|B:Bahan|P:Produk|K:Keterangan|TGL:Tgl. Ambil|FO:Kasir</code>
                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <fieldset id="tab041">
                    <div class="bg-light mt-3">
                        <div class="form-group pb-2 px-3">
                            <div class="input-group">
                                <input type="text" id="cari_operator" class="form-control bg-light border-1"
                                    placeholder="No. Order" aria-label="Search" autofocus>
                                <div class="input-group-append">
                                    <button class="btn btn-warning cari_operator" type="button"
                                        id="cari_invoice_operator">
                                        <i class="fa fa-search fa-sm"></i>
                                    </button>
                                </div>
                            </div>
                            <h5 class="text-center mb-4 mt-0 pt-4">Cari Operator Dalam pengembangan</h5>
                            <div id="hasil_cari_operator"></div>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="line"></div>
            <div class="modal-footer">
                <div id="tab01_">
                    <button type="button" class="btn btn-primary save_cari">Simpan</button>
                </div>
                <div id="tab02_" class="display-none">

                </div>
                <div id="tab03_" class="display-none">

                </div>
                <div id="tab04_" class="display-none">
                    <button type="button" class="btn btn-warning save_cari4">Simpan</button>
                </div>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
<style>
iframe,
#error {
    display: none;
}

#error {
    height: 100%;
    justify-content: center;
    align-items: center;
}

.error {
    color: #5a5c69;
    font-size: 8px;
    position: relative;
    line-height: 1;
    width: 12.5rem;
}

.custom-select.form-control-sm {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.feedback {
    font-size: 8pt
}

.bg-opacity {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

/* FIX: tombol nominal (termasuk UANGPAS) agar tidak overflow di modal bayar */
.bayar-nominal-wrap{
  display: flex !important;      /* override inline-flex btn-group */
  flex-wrap: wrap;               /* kunci supaya tombol bisa turun baris */
  align-items: center;
  max-width: 100%;
  gap: 6px;
}

/* hilangkan efek -1px dari btn-group bootstrap saat sudah wrap */
.bayar-nominal-wrap > .btn{
  margin-left: 0 !important;
  border-radius: .2rem !important;
}

/* responsif: di layar kecil rapihin jadi beberapa kolom */
@media (max-width: 768px){
  .bayar-nominal-wrap > .btn{
    flex: 1 1 calc(33.333% - 6px);  /* 3 tombol per baris */
    min-width: 90px;
  }

  /* UANGPAS biar turun baris dan full */
  .bayar-nominal-wrap > .btn.lunasd,
  .bayar-nominal-wrap > .btn.lunas-1{
    flex: 1 1 100%;
  }
}

/* =========================================================
   RAPihin Modal BAYAR INVOICE (Mobile) + FIX Nominal Wrap
   Scope: hanya modal pembayaran (aman, tidak ganggu halaman lain)
   ========================================================= */

/* ---- FIX: tombol nominal (termasuk UANGPAS) agar tidak overflow ---- */
.bayar-nominal-wrap{
  display: flex !important;     /* override inline-flex btn-group bootstrap */
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  gap: 6px;
}
.bayar-nominal-wrap > .btn{
  margin-left: 0 !important;    /* hilangkan efek btn-group saat wrap */
  border-radius: .2rem !important;
}

/* ---- TAMPILAN UMUM MODAL BAYAR: rapih & enak dibaca ---- */
#pembayaran-5 .modal-body,
#pembayaran-sisa .modal-body{
  padding-top: .75rem;
}

#pembayaran-5 .form-group.row,
#pembayaran-sisa .form-group.row{
  align-items: center;
}

/* label lebih jelas */
#pembayaran-5 .col-form-label,
#pembayaran-sisa .col-form-label{
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.15;
}

/* ---- MOBILE: label di atas input (stack), jarak lebih lega ---- */
@media (max-width: 576px){

  /* jadikan kolom label & input full width */
  #pembayaran-5 .form-group.row > label.col-4,
  #pembayaran-5 .form-group.row > .col-8,
  #pembayaran-5 .form-group.row > .col-4,
  #pembayaran-sisa .form-group.row > label.col-4,
  #pembayaran-sisa .form-group.row > .col-8,
  #pembayaran-sisa .form-group.row > .col-4{
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* meski HTML pakai mb-0, di mobile kita kasih jarak biar kebaca */
  #pembayaran-5 .form-group.row.mb-0,
  #pembayaran-sisa .form-group.row.mb-0{
    margin-bottom: .6rem !important;
  }

  /* spasi antara label dan input */
  #pembayaran-5 .form-group.row > label.col-4{
    padding-bottom: .35rem;
  }
  #pembayaran-sisa .form-group.row > label.col-4{
    padding-bottom: .35rem;
  }

  /* jika satu baris punya beberapa kolom (contoh PPN col-4 col-4),
     kasih jarak antar blok */
  #pembayaran-5 .form-group.row > div[class*="col-"],
  #pembayaran-sisa .form-group.row > div[class*="col-"]{
    margin-top: .25rem;
  }

  /* baris BAYAR FULL/SEBAGIAN: biar wrap rapih */
  #pembayaran-5 label .input-group,
  #pembayaran-sisa label .input-group{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
  }

  /* tombol nominal: jadi grid 3 kolom di mobile */
  .bayar-nominal-wrap > .btn{
    flex: 1 1 calc(33.333% - 6px);
    min-width: 92px;
  }
  /* UANGPAS full-width biar jelas */
  .bayar-nominal-wrap > .btn.lunasd,
  .bayar-nominal-wrap > .btn.lunas-1{
    flex: 1 1 100%;
  }
}

/* =========================================================
   Modal Bayar Invoice — scoped khusus #pembayaran-5
   ========================================================= */
:is(#pembayaran-5, #pembayaran-sisa) {
  color: #0f172a;
  background: rgba(38, 55, 80, .48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-modal-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

:is(#pembayaran-5, #pembayaran-sisa)::-webkit-scrollbar,
:is(#pembayaran-5, #pembayaran-sisa) .payment-modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-modal-dialog {
  width: calc(100% - 40px);
  max-width: 1530px;
  min-height: calc(100% - 28px);
  margin: 14px auto;
  display: flex;
  align-items: center;
}

:is(#pembayaran-5, #pembayaran-sisa) .modal-content {
  max-height: none;
  border: 1px solid rgba(224, 231, 241, .95);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 65px rgba(15, 23, 42, .28);
  overflow: hidden;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-modal-header {
  min-height: 60px;
  padding: 9px 24px 7px 28px;
  border-bottom: 0;
  align-items: center;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-title-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border-radius: 7px;
  color: #fff;
  font-size: 19px;
  background: linear-gradient(145deg, #4f8cff, #1f63eb);
  box-shadow: 0 6px 14px rgba(37, 99, 235, .18);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-title-divider {
  width: 1px;
  height: 30px;
  margin: 0 22px;
  background: #e6ebf3;
}

:is(#pembayaran-5, #pembayaran-sisa) .modal-title {
  margin: 0;
  color: #0b132b;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.35px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-close {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #526078;
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
  text-shadow: none;
  background: #f4f7fd;
  opacity: 1;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-close:hover {
  color: #1e40af;
  background: #edf3ff;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-modal-body {
  min-height: 0;
  flex: 0 1 auto;
  padding: 0 24px 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
  gap: 18px;
  overflow: visible;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-main-card,
:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-card {
  border: 1px solid #dfe5ee;
  border-radius: 11px;
  background: #fff;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-main-card {
  padding: 12px 18px;
}

/* Reset padding global theme pada elemen section agar baris tidak renggang. */
:is(#pembayaran-5, #pembayaran-sisa) .payment-section {
  margin: 0;
  padding: 0;
  overflow: visible;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-section + .payment-section {
  margin-top: 9px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-section-title {
  margin: 0 0 6px;
  color: #10172a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-radio-grid,
:is(#pembayaran-5, #pembayaran-sisa) .payment-method-grid,
:is(#pembayaran-5, #pembayaran-sisa) .payment-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-radio-option {
  position: relative;
  height: 38px;
  margin: 0;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #dfe4ec;
  border-radius: 9px;
  color: #20283a;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-radio-option:has(input:checked) {
  border-color: #5f91ff;
  color: #175bd7;
  background: linear-gradient(100deg, #f7faff, #edf4ff);
  box-shadow: 0 0 0 1px rgba(78, 132, 255, .08);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-radio-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-radio-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  flex: 0 0 24px;
  border: 1px solid #ccd4e2;
  border-radius: 50%;
  background: #fff;
}

:is(#pembayaran-5, #pembayaran-sisa) input:checked + .payment-radio-mark {
  border: 6px solid #4382f7;
  box-shadow: 0 0 0 2px #fff inset;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-grid {
  margin-top: 6px;
  align-items: start;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-field > label {
  display: block;
  margin: 0 0 4px;
  color: #3f4a60;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field {
  min-height: 82px;
  padding: 10px 11px 9px;
  border: 1px solid #f3c76a;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fffaf0;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-account-field {
  min-height: 82px;
  padding: 10px 11px 9px;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fbfcfe;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field .payment-method-label {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #7b4b05;
  font-size: 13px;
  font-weight: 700;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-account-field > label {
  margin-bottom: 7px;
  color: #536078;
  font-size: 13px;
  font-weight: 600;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-badge {
  padding: 3px 7px;
  border-radius: 999px;
  color: #9a5800;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: #ffe9b8;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field .payment-control-with-icon .form-control {
  height: 40px;
  border-color: #e9a928;
  color: #20283a;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(233, 169, 40, .09);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-account-field .payment-control-with-icon .form-control {
  height: 40px;
  border-color: #dfe4ec;
  color: #354158;
  font-size: 14px;
  font-weight: 500;
  background-color: #fff;
  box-shadow: none;
  opacity: 1;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field .payment-control-with-icon > i {
  color: #d58900;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-help {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9a5800;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field.is-selected {
  border-color: #a9dfbd;
  background: #f5fbf7;
  box-shadow: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field.is-selected .payment-method-label,
:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field.is-selected .payment-method-help {
  color: #18733a;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field.is-selected .payment-method-badge {
  color: #18733a;
  background: #dff3e6;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field.is-selected .payment-control-with-icon .form-control {
  border-color: #75c592;
  box-shadow: 0 0 0 3px rgba(49, 164, 91, .08);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-method-field.is-selected .payment-control-with-icon > i {
  color: #24914d;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-control-with-icon {
  position: relative;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-control-with-icon > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: #2872ed;
  font-size: 17px;
  pointer-events: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-control-with-icon.muted-icon > i {
  color: #9aa7bd;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-control-with-icon .form-control,
:is(#pembayaran-5, #pembayaran-sisa) .payment-details-grid .form-control {
  height: 38px;
  border: 1px solid #dfe4ec;
  border-radius: 9px;
  color: #20283a;
  font-size: 14px;
  background-color: #fff;
  box-shadow: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-control-with-icon select.form-control {
  padding-left: 51px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-control-with-icon .form-control:focus,
:is(#pembayaran-5, #pembayaran-sisa) .payment-details-grid .form-control:focus {
  border-color: #6090f7;
  box-shadow: 0 0 0 3px rgba(55, 116, 242, .1);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-upload-box {
  position: relative;
  min-height: 75px;
  margin-top: 7px;
  padding: 25px 140px 6px 74px;
  border: 1px dashed #3980f5;
  border-radius: 9px;
  background: #fff;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-upload-label {
  position: absolute;
  top: 6px;
  left: 15px;
  color: #53617a;
  font-size: 13px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-preview {
  display: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-upload-icon {
  position: absolute;
  top: 30px;
  left: 28px;
  color: #2170e7;
  font-size: 32px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-upload-copy {
  min-height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  color: #374259;
  font-size: 14px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-upload-copy strong {
  font-weight: 500;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-upload-copy span {
  color: #67738b;
  font-size: 13px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-file-control {
  position: absolute;
  top: 25px;
  right: 15px;
  width: 125px;
  height: 42px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-file-control .custom-file-input {
  width: 100%;
  height: 42px;
  cursor: pointer;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-file-control .custom-file-label {
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid #ccd4e1;
  border-radius: 9px;
  color: #263147;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #fff;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-file-control .custom-file-label::after {
  display: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-file-control .custom-file-label i {
  margin-right: 7px;
  color: #64748b;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-details-section {
  padding-top: 8px;
  border-top: 1px solid #dfe5ee;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-tax-control,
:is(#pembayaran-5, #pembayaran-sisa) .payment-discount-control {
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: 38px;
  overflow: hidden;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-tax-control:focus-within,
:is(#pembayaran-5, #pembayaran-sisa) .payment-discount-control:focus-within {
  border-color: #4e83ef;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-tax-control > input {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-tax-control .pajakd {
  width: 142px;
  height: 36px;
  flex: 0 0 142px;
  border: 0;
  border-left: 1px solid #d6e2f7;
  border-radius: 0;
  color: #2465d9;
  font-size: 13px;
  font-weight: 600;
  background: #edf4ff;
  opacity: 1;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-tax-actions {
  display: flex;
  flex: 0 0 auto;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-tax-actions .btn {
  width: 40px;
  height: 36px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-discount-control select {
  width: 56%;
  height: 36px;
  flex: 0 0 56%;
  padding-left: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #fff;
  box-shadow: none !important;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-discount-control input {
  width: 44%;
  height: 36px;
  flex: 1 1 44%;
  min-width: 0;
  padding: 0 12px;
  border: 0 !important;
  border-left: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-discount-control input:not([readonly]) {
  color: #0f172a;
  background: #fff !important;
}

:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .btn {
  min-width: 0;
  height: 38px;
  margin: 0 !important;
  border: 1px solid;
  border-radius: 9px !important;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  box-shadow: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .n-50 { color: #155ee8; border-color: #6798ff; background: linear-gradient(#fff, #f1f6ff); }
:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .n-100 { color: #172033; border-color: #dce1ea; background: linear-gradient(#fff, #fafbfc); }
:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .n-200 { color: #15944f; border-color: #a9e4c1; background: linear-gradient(#fff, #f0fbf5); }
:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .n-300 { color: #0794cb; border-color: #a8dded; background: linear-gradient(#fff, #effaff); }
:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .n-400 { color: #ec7800; border-color: #ffd0a1; background: linear-gradient(#fff, #fff7ed); }
:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .n-500 { color: #ef2c2c; border-color: #ff9c9c; background: linear-gradient(#fff, #fff2f2); }

:is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap > .btn:disabled {
  opacity: .48;
  cursor: not-allowed;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 6px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-control {
  height: 48px;
  padding: 0;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #b9c9e4;
  border-radius: 9px;
  background: #fff;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-control:focus-within {
  border-color: #3778ea;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-control label,
:is(#pembayaran-5, #pembayaran-sisa) .payment-change-row label {
  height: 100%;
  margin: 0;
  padding: 0 15px;
  display: flex;
  align-items: center;
  color: #20283a;
  font-size: 13px;
  font-weight: 600;
  background: #f7f9fc;
  border-right: 1px solid #e2e8f0;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-control label {
  cursor: text;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-control .form-control {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 17px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: #111827 !important;
  font-size: 20px;
  font-weight: 600;
  line-height: 46px;
  background: #fff !important;
  box-shadow: none !important;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-row .lunasd {
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(160deg, #2d77ef, #1459d7);
  box-shadow: 0 7px 15px rgba(37, 99, 235, .14);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-amount-row .lunas-1 {
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(160deg, #2d77ef, #1459d7);
  box-shadow: 0 7px 15px rgba(37, 99, 235, .14);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-change-row {
  min-height: 45px;
  margin-top: 5px;
  padding: 0;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #cbe9d8;
  border-radius: 9px;
  background: #fbfffc;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-change-row label {
  color: #21623f;
  background: #f2faf5;
  border-right-color: #d8eee1;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-change-row .form-control {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 43px !important;
  margin: 0 !important;
  padding: 0 17px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #16834e !important;
  font-size: 19px;
  font-weight: 600;
  line-height: 43px;
  background: #fbfffc !important;
  box-shadow: none !important;
}

:is(#pembayaran-5, #pembayaran-sisa) .load-bayar:empty {
  display: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .load-bayar-sisa:empty {
  display: none;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-title > span {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #52617c;
  font-size: 19px;
  background: #f3f6fc;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-title h5 {
  margin: 0;
  color: #11182a;
  font-size: 18px;
  font-weight: 700;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-primary {
  margin-top: 8px;
  border-top: 1px solid #d9e0ea;
  border-bottom: 1px dashed #d2d9e5;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-line {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #d9e0ea;
  color: #253047;
  font-size: 15px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-line:last-child {
  border-bottom: 0;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-line strong {
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-line.is-due {
  color: #1f66e5;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-line.is-due strong {
  font-weight: 700;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-label,
:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-detail-title {
  color: #59667f;
  font-size: 12px;
  font-weight: 600;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-content {
  min-height: 64px;
  margin-top: 7px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #b8d1ff;
  border-radius: 9px;
  background: linear-gradient(105deg, #edf4ff, #f7faff);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-icon {
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 39px;
  border: 3px double rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(145deg, #4d8df8, #1763df);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-content > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-content strong {
  color: #185fdc;
  font-size: 14px;
  font-weight: 700;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-content span:last-child {
  color: #59667c;
  font-size: 13px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-content.is-paid {
  border-color: #b9e7cc;
  background: linear-gradient(105deg, #effbf4, #f9fffb);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-content.is-paid .payment-status-icon {
  background: linear-gradient(145deg, #2fbd72, #159452);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-status-content.is-paid strong {
  color: #159452;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-detail-title {
  margin: 15px 0 7px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-detail-row {
  min-height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #46536b;
  font-size: 13px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-detail-row strong {
  color: #20283a;
  font-weight: 500;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-legend {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d2d9e5;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-legend > div {
  min-height: 32px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: #273349;
  font-size: 13px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-legend strong {
  font-weight: 500;
  white-space: nowrap;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-legend > div:nth-child(1) { color: #2563df; }
:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-legend > div:nth-child(2) { color: #16a357; }
:is(#pembayaran-5, #pembayaran-sisa) .payment-summary-legend > div:nth-child(3) { color: #f02e35; }

:is(#pembayaran-5, #pembayaran-sisa) .legend-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

:is(#pembayaran-5, #pembayaran-sisa) .legend-dot.blue { background: #4185f4; }
:is(#pembayaran-5, #pembayaran-sisa) .legend-dot.green { background: #18aa5c; }
:is(#pembayaran-5, #pembayaran-sisa) .legend-dot.red { background: #f2393e; }

:is(#pembayaran-5, #pembayaran-sisa) .payment-data-fields {
  display: none !important;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-modal-footer {
  min-height: 60px;
  padding: 7px 28px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-footer-info {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #68758c;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-footer-info > span {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #1769e3;
  font-size: 20px;
  background: #eaf1ff;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-footer-info small {
  font-size: 12px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-footer-actions .btn {
  height: 40px;
  padding: 0 23px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-footer-actions i {
  margin-right: 8px;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-cancel {
  border: 1px solid #ced6e3;
  color: #44516a;
  background: #fff;
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-save {
  min-width: 235px;
  border: 0;
  color: #fff;
  background: linear-gradient(150deg, #3d82f7, #1d61e9);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .2);
}

:is(#pembayaran-5, #pembayaran-sisa) .payment-save:disabled {
  opacity: .6;
  box-shadow: none;
}

@media (max-width: 1199.98px) {
  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-dialog {
    width: calc(100% - 24px);
  }

  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-body {
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 16px;
    padding: 0 16px;
  }

  :is(#pembayaran-5, #pembayaran-sisa) .modal-title { font-size: 24px; }
  :is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-upload-box { padding-right: 140px; }
}

@media (max-width: 899.98px) {
  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-dialog {
    min-height: calc(100% - 16px);
    margin: 8px auto;
  }

  :is(#pembayaran-5, #pembayaran-sisa) .modal-content {
    max-height: calc(100vh - 16px);
  }

  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-body {
    display: block;
    overflow-y: auto;
  }

  :is(#pembayaran-5, #pembayaran-sisa) .payment-summary-card {
    margin-top: 16px;
  }

  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-footer {
    min-height: 84px;
    padding: 14px 16px;
  }
}

@media (max-width: 575.98px) {
  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-dialog {
    width: calc(100% - 12px);
  }

  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-header {
    min-height: 66px;
    padding: 12px 14px;
  }

  :is(#pembayaran-5, #pembayaran-sisa) .payment-title-divider { margin: 0 12px; }
  :is(#pembayaran-5, #pembayaran-sisa) .modal-title { font-size: 18px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-close { width: 38px; height: 38px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-body { padding: 0 8px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-main-card,
  :is(#pembayaran-5, #pembayaran-sisa) .payment-summary-card { padding: 14px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-radio-grid,
  :is(#pembayaran-5, #pembayaran-sisa) .payment-method-grid,
  :is(#pembayaran-5, #pembayaran-sisa) .payment-details-grid { grid-template-columns: 1fr; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-upload-box { padding: 40px 14px 14px 74px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-upload-icon { left: 22px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-file-control {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 10px;
  }
  :is(#pembayaran-5, #pembayaran-sisa) .bayar-nominal-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-amount-row { grid-template-columns: 1fr; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-amount-row .lunasd { height: 48px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-amount-row .lunas-1 { height: 48px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-amount-control,
  :is(#pembayaran-5, #pembayaran-sisa) .payment-change-row { grid-template-columns: 105px minmax(0, 1fr); }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-modal-footer { display: block; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-footer-info { margin-bottom: 12px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-footer-actions { display: grid; grid-template-columns: 1fr 1.4fr; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-footer-actions .btn { padding: 0 10px; font-size: 12px; }
  :is(#pembayaran-5, #pembayaran-sisa) .payment-save { min-width: 0; }
}


</style>
<script>
$('[data-toggle="popover"]').popover({
    trigger: 'hover',
    html: true
});
</script>

<script>
(function ($) {
    var paymentSummaryTimer = null;
    var paymentMethodSelectedState = null;
    var paymentMethodObserver = null;

    function paymentNumber(selector) {
        var raw = String($(selector).val() || '0');
        var digits = raw.replace(/[^0-9-]/g, '');
        return parseInt(digits, 10) || 0;
    }

    function paymentRupiah(value) {
        var number = Math.max(0, parseInt(value, 10) || 0);
        return 'Rp ' + number.toLocaleString('id-ID');
    }

    function syncPaymentMethodState() {
        var $field = $('#pembayaran-5 .payment-method-field');
        var $select = $('#id_byr');
        var value = String($select.val() || '');
        var isSelected = value !== '' && value !== '0' && value !== 'loading';
        var $placeholder = $select.find('option[value=""], option[value="0"]').first();

        if ($placeholder.length && $placeholder.text() !== 'Pilih metode pembayaran') {
            $placeholder.text('Pilih metode pembayaran');
        }

        if (paymentMethodSelectedState === isSelected) {
            return;
        }

        paymentMethodSelectedState = isSelected;
        $field.toggleClass('is-missing', !isSelected).toggleClass('is-selected', isSelected);
        $field.find('.payment-method-badge').text(isSelected ? 'Terpilih' : 'Wajib dipilih');
        $field.find('.payment-method-help i')
            .attr('class', isSelected ? 'fa fa-check-circle' : 'fa fa-exclamation-circle');
        $field.find('.payment-method-help span').text(
            isSelected ? 'Metode pembayaran sudah dipilih.' : 'Pilih metode pembayaran sebelum menyimpan.'
        );
    }

    function syncPaymentSummary() {
        var total = paymentNumber('#sisabayar');
        var due = paymentNumber('#totalbyr');
        var paid = $('#uangmuka').length ? paymentNumber('#uangmuka') : Math.max(total - due, 0);
        var tax = paymentNumber('#sumpajak');
        var discount = paymentNumber('#total_diskon');
        var isPaid = total > 0 && due <= 0;

        $('#payment-summary-total, #payment-legend-total').text(paymentRupiah(total));
        $('#payment-summary-due, #payment-legend-due').text(paymentRupiah(due));
        $('#payment-legend-paid').text(paymentRupiah(paid));
        $('#payment-summary-tax').text(paymentRupiah(tax));
        $('#payment-summary-discount').text(paymentRupiah(discount));
        $('#payment-status-title').text(isPaid ? 'Lunas' : 'Belum Lunas');
        $('#payment-status-copy').text(isPaid ? 'Pembayaran sudah lunas' : 'Sisa bayar ' + paymentRupiah(due));
        $('#pembayaran-5 .payment-status-content').toggleClass('is-paid', isPaid);
    }

    $('#pembayaran-5')
        .on('shown.bs.modal', function () {
            syncPaymentSummary();
            syncPaymentMethodState();

            if (paymentMethodObserver) {
                paymentMethodObserver.disconnect();
            }

            var methodSelect = document.getElementById('id_byr');
            if (methodSelect && window.MutationObserver) {
                paymentMethodObserver = new MutationObserver(syncPaymentMethodState);
                paymentMethodObserver.observe(methodSelect, { childList: true, subtree: true });
            }

            clearInterval(paymentSummaryTimer);
            paymentSummaryTimer = setInterval(syncPaymentSummary, 150);
        })
        .on('hidden.bs.modal', function () {
            clearInterval(paymentSummaryTimer);
            paymentSummaryTimer = null;
            if (paymentMethodObserver) {
                paymentMethodObserver.disconnect();
                paymentMethodObserver = null;
            }
            paymentMethodSelectedState = null;
        });

    $('#pembayaran-5').on('input change click', 'input, select, button', syncPaymentSummary);
    $('#pembayaran-5').on('change', '#id_byr', syncPaymentMethodState);

    $('#pembayaran-5 .payment-amount-control').on('click', function (event) {
        var $amountInput = $('#uangm');
        if ($amountInput.prop('disabled')) {
            return;
        }

        $amountInput.prop('readonly', false);
        if (!$(event.target).is('#uangm')) {
            $amountInput.trigger('focus').trigger('select');
        }
    });
})(jQuery);

(function ($) {
    var paymentSisaSummaryTimer = null;
    var paymentSisaMethodSelectedState = null;
    var paymentSisaMethodObserver = null;

    function paymentSisaNumber(selector) {
        var raw = String($(selector).val() || '0');
        var digits = raw.replace(/[^0-9-]/g, '');
        return parseInt(digits, 10) || 0;
    }

    function paymentSisaRupiah(value) {
        var number = Math.max(0, parseInt(value, 10) || 0);
        return 'Rp ' + number.toLocaleString('id-ID');
    }

    function syncPaymentSisaMethodState() {
        var $field = $('#pembayaran-sisa .payment-method-field');
        var $select = $('#id_byr-1');
        var value = String($select.val() || '');
        var isSelected = value !== '' && value !== '0' && value !== 'loading';
        var $placeholder = $select.find('option[value=""], option[value="0"]').first();

        if ($placeholder.length && $placeholder.text() !== 'Pilih metode pembayaran') {
            $placeholder.text('Pilih metode pembayaran');
        }

        if (paymentSisaMethodSelectedState === isSelected) {
            return;
        }

        paymentSisaMethodSelectedState = isSelected;
        $field.toggleClass('is-missing', !isSelected).toggleClass('is-selected', isSelected);
        $field.find('.payment-method-badge').text(isSelected ? 'Terpilih' : 'Wajib dipilih');
    }

    function syncPaymentSisaSummary() {
        var total = paymentSisaNumber('#sisabayar-1');
        var due = paymentSisaNumber('#totalbyr-1');
        var paid = Math.max(total - due, 0);
        var isPaid = total > 0 && due <= 0;

        $('#payment-sisa-summary-total, #payment-sisa-legend-total').text(paymentSisaRupiah(total));
        $('#payment-sisa-summary-due, #payment-sisa-legend-due').text(paymentSisaRupiah(due));
        $('#payment-sisa-legend-paid').text(paymentSisaRupiah(paid));
        $('#payment-sisa-status-title').text(isPaid ? 'Lunas' : 'Belum Lunas');
        $('#payment-sisa-status-copy').text(isPaid ? 'Pembayaran sudah lunas' : 'Sisa bayar ' + paymentSisaRupiah(due));
        $('#pembayaran-sisa .payment-status-content').toggleClass('is-paid', isPaid);
    }

    $('#pembayaran-sisa')
        .on('shown.bs.modal', function () {
            syncPaymentSisaSummary();
            syncPaymentSisaMethodState();

            if (paymentSisaMethodObserver) {
                paymentSisaMethodObserver.disconnect();
            }

            var methodSelect = document.getElementById('id_byr-1');
            if (methodSelect && window.MutationObserver) {
                paymentSisaMethodObserver = new MutationObserver(syncPaymentSisaMethodState);
                paymentSisaMethodObserver.observe(methodSelect, { childList: true, subtree: true });
            }

            clearInterval(paymentSisaSummaryTimer);
            paymentSisaSummaryTimer = setInterval(function () {
                syncPaymentSisaSummary();
                syncPaymentSisaMethodState();
            }, 150);
        })
        .on('hidden.bs.modal', function () {
            clearInterval(paymentSisaSummaryTimer);
            paymentSisaSummaryTimer = null;
            if (paymentSisaMethodObserver) {
                paymentSisaMethodObserver.disconnect();
                paymentSisaMethodObserver = null;
            }
            paymentSisaMethodSelectedState = null;
        });

    $('#pembayaran-sisa').on('input change click', 'input, select, button', function () {
        syncPaymentSisaSummary();
        syncPaymentSisaMethodState();
    });

    $('#pembayaran-sisa .payment-amount-control').on('click', function (event) {
        var $amountInput = $('#uangm-1');
        if ($amountInput.prop('disabled') || $amountInput.prop('readonly')) {
            return;
        }

        if (!$(event.target).is('#uangm-1')) {
            $amountInput.trigger('focus').trigger('select');
        }
    });
})(jQuery);
</script>

<script>
const countryData = window.intlTelInputGlobals.getCountryData();
const input = document.querySelector("#telepon_add");
const no_telp_add = document.querySelector("#no_telp_add");
// const iform = document.querySelector("#form-tambah");
const output = document.querySelector("#feedback-telp");
//const message = document.querySelector("#message");

const iti = window.intlTelInput(input, {
    initialCountry: "id",
    hiddenInput: () => "full_phone",
    utilsScript: base_url +"assets/build/js/utils.js"
});

const iti2 = window.intlTelInput(no_telp_add, {
    initialCountry: "id",
    hiddenInput: () => "full_phone_add",
    utilsScript: base_url +"assets/build/js/utils.js"
});
input.addEventListener('keyup', function() {
    $('input[name="full_phone"]').val(iti.getNumber());
    $('input[name="full_phone_country"]').val(iti.getSelectedCountryData()['iso2']);
    // console.log(iti.getSelectedCountryData())

});
input.addEventListener('blur', function() {
    if (!iti.isValidNumber()) {
        $("#feedback-telp").html('Invalid nomor');
        $("#feedback-telp").addClass("text-danger");
        $("#telepon_add").addClass("is-invalid text-danger");

        $("#dispu").html('');
        $(".takada").hide();
        resetForm();
        $("#jenis_member_add,#panggilan_add,#nama_add,#alamat_add,#perusahaan_add,#jenis_lembaga_add,#alamat_perusahaan_add,#no_telp_add,#tampil_data,#via_add,#save-cari,#status_add,#max_u_add")
            .prop("disabled", true);
    } else {
        $("#jenis_member_add,#panggilan_add,#nama_add,#alamat_add,#perusahaan_add,#jenis_lembaga_add,#alamat_perusahaan_add,#no_telp_add,#tampil_data,#via_add,#save-cari,#status_add,#max_u_add")
            .prop("disabled", false);
    }
});
// listen to the telephone input for changes
input.addEventListener('countrychange', () => {
    $("#telepon_add").change();
});
// listen to the address dropdown for changes
no_telp_add.addEventListener('keyup', () => {
    $('input[name="full_phone_add"]').val(iti2.getNumber());
    $('input[name="full_phone_add_country"]').val(iti2.getSelectedCountryData()['iso2']);
    // console.log(iti.getSelectedCountryData())
});
// form.onchange= () => {
// if (!iti.isValidNumber()) {
// message.innerHTML = "Invalid number. Please try again.";
// return false;
// }
// };

// const urlParams = new URLSearchParams(window.location.search);
// const fullPhone = urlParams.get('full_phone')
// if (fullPhone) {
// message.innerHTML = `Submitted hidden input value: ${fullPhone}`;
// }


// const handleChange = () => {
// let text;
// if (input.value) {
// text = iti.isValidNumber()
// ? "Valid number! : " + iti.getNumber()
// : "Invalid number - please try again";
// } else {
// text = "Please enter a valid number below";

// }

// const textNode = document.createTextNode(text);
// output.innerHTML = "";
// output.appendChild(textNode);

// };

// // // listen to "keyup", but also "change" to update when the user selects a country
// input.addEventListener('change', handleChange);
// input.addEventListener('keyup', handleChange);

const input_edit = document.querySelector("#telepon_edit");
const no_telp_edit = document.querySelector("#no_telp_edit");

const iti_edit = window.intlTelInput(input_edit, {
    initialCountry: "id",
    hiddenInput: () => "full_phone",
    utilsScript: base_url +"assets/build/js/utils.js"
});

const iti2_edit = window.intlTelInput(no_telp_edit, {
    initialCountry: "id",
    hiddenInput: () => "full_phone_edit",
    utilsScript: base_url +"assets/build/js/utils.js"
});
input_edit.addEventListener('keyup', function() {
    $('input[name="full_phone"]').val(iti_edit.getNumber());
    $('input[name="full_phone_country"]').val(iti_edit.getSelectedCountryData()['iso2']);

});
input_edit.addEventListener('change', function() {
    if (!iti_edit.isValidNumber()) {
        $("#feedback-telp-edit").html('Invalid nomor');
        $("#feedback-telp-edit").addClass("text-danger");
        $("#telepon_edit").addClass("is-invalid text-danger");

        $("#dispu").html('');
        $(".takada").hide();
        $(".update_data").prop("disabled", true);
        resetForm();
        $("#jenis_member_edit,#panggilan_edit,#nama_edit,#alamat_edit,#perusahaan_edit,#jenis_lembaga_edit,#alamat_perusahaan_edit,#no_telp_edit,#tampil_data,#via_edit,#save-cari,#status_edit,#max_u_edit")
            .prop("disabled", true);

    } else {
        $("#jenis_member_edit,#panggilan_edit,#nama_edit,#alamat_edit,#perusahaan_edit,#jenis_lembaga_edit,#alamat_perusahaan_edit,#no_telp_edit,#tampil_data,#via_edit,#save-cari,#status_edit,#max_u_edit")
            .prop("disabled", false);
        $(".update_data").prop("disabled", false);

        $("#feedback-telp-edit").html('');
        $("#feedback-telp-edit").removeClass("text-danger").addClass('text-success');
        $("#telepon_edit").removeClass('is-invalid text-danger').addClass("is-valid text-success");
    }
});
// listen to the telephone input for changes
input_edit.addEventListener('countrychange', () => {
    $("#telepon_edit").change();
});
// listen to the address dropdown for changes
no_telp_edit.addEventListener('keyup', () => {
    $('input[name="full_phone_edit"]').val(iti2_edit.getNumber());
    $('input[name="full_phone_edit_country"]').val(iti2_edit.getSelectedCountryData()['iso2']);
    // console.log(iti.getSelectedCountryData())
});
</script>
