@extends('backend.layouts.app')
@section('main')
@section('title', 'Billing Member')

<div class="row">
    <div class="col-lg-12">
        <div class="card card-header-actions h-100">
            <div class="card-header">
                <div class="h5 col-auto">BILLING MEMBER</div>
            </div>
            @include('backend.billing.member.modal.show_ppp')
            @include('backend.billing.member.modal.show_payment')
            @include('backend.billing.member.modal.show_invoice')
            @include('backend.billing.member.modal.show_contact')
            <div class="card-body table-responsive">
                <table id="myTable" class="table table-hover display nowrap" width="100%">
                    <thead>
                        <tr>
                            <th style="text-align:left!important">NO</th>
                            <th style="text-align:left!important">ID PELANGGAN</th>
                            <th>NAMA LENGKAP</th>
                            <th>AREA</th>
                            <th>TGL AKTIF</th>
                            <th>JTH TEMPO</th>
                            <th>TIPE</th>
                            <th>SIKLUS</th>
                            <th>NEXT INV</th>
                            <th>INVOICE</th>
                            <th>KONTAK</th>
                            <th>STATUS</th>
                            <th>CREATED</th>

                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div> 

@endsection
@push('scripts')
<script type="text/javascript">
    let table = $('#myTable').DataTable({
        processing: true,
        serverSide: true,
        // scrollX: true,
        order: [[12, 'desc']],
        lengthMenu: [10, 25, 50, 100, 200, 500, 1000, 2000],
        ajax: '{{ url()->current() }}',
        columns: [{
                data: null,
                'sortable': false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'id_member',
                name: 'id_member',
                render: function(data, type, row) {
                    return '<a href="javascript:void(0)" style="text-decoration:none" class="text-primary" id="show_ppp" data-username=' +
                        row.ppp.username + ' data-id=' +
                        row.ppp.id +
                        ' data-name="' +
                        row.full_name +
                        '">' + data + '</a>'
                },
            },
            {
                data: 'full_name',
                name: 'full_name'
            },
            {
                data: 'kode_area',
                name: 'kode_area',
            },
            {
                data: 'reg_date',
                name: 'reg_date',
                render: function(data, type, row, meta) {
                    return moment(data).local().format('DD/MM/YYYY');
                },
            },
            {
                data: 'next_due',
                name: 'next_due',
                render: function(data, type, row, meta) {
                    return moment(data).local().format('DD/MM/YYYY');
                },
            },
            
            {
                data: 'payment_type',
                name: 'payment_type',
                className: "text-uppercase",
                render: function(data, type, row) {
                    return '<a href="javascript:void(0)" class="text-primary" style="text-decoration:none" id="show_payment" data-id=' +
                        row.id +
                        '>' + data + '</a>'
                },
            },
            {
                data: 'billing_period',
                name: 'billing_period',
                className: "text-uppercase",
            },
            {
                data: 'next_invoice',
                name: 'next_invoice',
                render: function(data, type, row, meta) {
                    return moment(data).local().format('DD/MM/YYYY');
                },
            },
            {
                data: 'invoice',
                name: 'invoice',
                sortable: false,
                searchable: false,
                render: function(data, type, row) {
                    return '<a href="javascript:void(0)" class="text-primary" style="text-decoration:none" id="show_invoice" data-id=' +
                        row.id +
                        '>LIHAT DATA</a>'
                },
            },
            {
                data: 'contact',
                name: 'contact',
                sortable: false,
                searchable: false,
                render: function(data, type, row) {
                    return '<a href="javascript:void(0)" class="text-primary" style="text-decoration:none" id="show_contact" data-id=' +
                        row.id +
                        '>LIHAT DATA</a>'
                },
            },
            {
                data: 'ppp_status',
                name: 'ppp_status',
                sortable: false,
                searchable: false,
                render: function(data) {
                    if (data === 1) {
                        return '<span class="badge bg-success text-light">active</span>'
                    } else if (data === 0) {
                        return '<span class="badge bg-danger text-light">off</span>'
                    } else if (data === 2) {
                        return '<span class="badge bg-warning text-light">suspend</span>'
                    } else {
                        return data;
                    }

                },
            },
            {
                data: 'created_at',
                name: 'created_at',
                visible: false,
            },
        ]
    });

    $('#myTable').on('click', '#show_payment', function() {
        let member_id = $(this).data('id');
        if (member_id) {
            $.ajax({
                url: `/billing/member/getPayment/${member_id}`,
                type: "GET",
                data: {
                    member_id: member_id,
                },
                success: function(data) {
                    $("#member_id").val(data[0].id);
                    $("#payment_full_name").html(data[0].full_name);
                    $("#payment_full_name_edit").val(data[0].full_name);
                    $("#payment_type option:selected").text(data[0].payment_type).val(data[0]
                        .payment_type);
                    $("#billing_period option:selected").text(data[0].billing_period).val(data[0]
                        .billing_period);
                    $("#reg_date").val(data[0].reg_date);
                    $("#next_due").val(data[0].next_due);
                    $("#profile option:selected").text(data[0].profile.name).val(data[0].profile
                        .name);

                    var amount = data[0].profile.price;
                    rp_amount = formatRupiah(amount, 2, ',', '.');
                    $('#amount').val(rp_amount);
                    rp_total_amount = formatRupiah(amount, 2, ',', '.');
                    $('#ppn').val(data[0].ppn);
                    $('#discount').val(data[0].discount);
                    // $('#payment_total').val(rp_total_amount);

                    $('#show_payment').on('shown.bs.modal', function() {
                        var ppn = $('#ppn').val();
                        var discount = $('#discount').val();
                        var amount_ppn = amount * ppn / 100;
                        var amount_discount = amount * discount / 100;
                        if (discount === null) {
                            var total_with_ppn = parseInt(amount) + parseInt(amount_ppn);
                            var total_plus_ppn = total_with_ppn.toString();
                            rp_total_plus_ppn = formatRupiah(total_plus_ppn, 2, ',', '.');
                            $('#payment_total').val(rp_total_plus_ppn);
                        } else if (ppn === null) {
                            var total_with_discount = parseInt(amount) - parseInt(
                                amount_discount);
                            var total_plus_discount = total_with_discount.toString();
                            rp_total_plus_discount = formatRupiah(total_plus_discount, 2,
                                ',', '.');
                            $('#payment_total').val(rp_total_plus_discount);
                        } else {
                            var total_with_ppn_discount = parseInt(amount) + parseInt(
                                amount_ppn) - parseInt(amount_discount);
                            var total_plus_ppn_discount = total_with_ppn_discount
                                .toString();
                            rp_total_plus_ppn_discount = formatRupiah(
                                total_plus_ppn_discount,
                                2, ',', '.');
                            $('#payment_total').val(rp_total_plus_ppn_discount);
                        }
                    })


                    $("#ppn,#discount").on("keyup change", function() {
                        var ppn = $('#ppn').val();
                        var discount = $('#discount').val();
                        var amount_ppn = amount * ppn / 100;
                        var amount_discount = amount * discount / 100;
                        if (discount === null) {
                            var total_with_ppn = parseInt(amount) + parseInt(amount_ppn);
                            var total_plus_ppn = total_with_ppn.toString();
                            rp_total_plus_ppn = formatRupiah(total_plus_ppn, 2, ',', '.');
                            $('#payment_total').val(rp_total_plus_ppn);
                        } else {
                            var total_with_ppn_discount = parseInt(amount) + parseInt(
                                amount_ppn) - parseInt(amount_discount);
                            var total_plus_ppn_discount = total_with_ppn_discount
                                .toString();
                            rp_total_plus_ppn_discount = formatRupiah(
                                total_plus_ppn_discount,
                                2, ',', '.');
                            $('#payment_total').val(rp_total_plus_ppn_discount);
                        }
                    });



                }
            });
        } else {

        }
        $('#show_payment').modal('show');
    });

    // action create
    $('#editPayment').click(function(e) {
        e.preventDefault();
        var error_ele = document.getElementsByClassName('alert text-sm');
        if (error_ele.length > 0) {
            for (var i = error_ele.length - 1; i >= 0; i--) {
                error_ele[i].remove();
            }
        }
        let member_id = $('#member_id').val();

        // collect data by id
        var data = {
            'next_due': $('#next_due').val(),
            'ppn': $('#ppn').val(),
            'discount': $('#discount').val(),
            'billing_period': $('#billing_period').val(),
            'full_name': $('#payment_full_name_edit').val(),
        }
        

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // ajax proses
        $.ajax({
            url: `/billing/member/updatePayment/${member_id}`,
            type: "PUT",
            cache: false,
            data: data,
            dataType: "json",

            // tampilkan pesan Success

            success: function(data) {
                if (data.success) {
                    Swal.fire({

                        icon: 'success',
                        title: 'Success',
                        text: `${data.message}`,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    setTimeout(function() {
                        table.ajax.reload()
                        $('#show_payment').modal('hide')
                    });
                } else {
                    $.each(data.error, function(key, value) {
                        var el = $(document).find('[name="' + key + '"]');
                        el.after($('<span class= "alert text-sm text-danger">' + value[0] +
                            '</div>'));
                    });
                }
            },

            error: function(err) {
                $("#message").html("Some Error Occurred!")
            }

        });
    });

    $('#editContact').click(function(e) {
        e.preventDefault();
        var error_ele = document.getElementsByClassName('alert text-sm');
        if (error_ele.length > 0) {
            for (var i = error_ele.length - 1; i >= 0; i--) {
                error_ele[i].remove();
            }
        }
        let member_id = $('#member_idc').val();

        // collect data by id
        var data = {
            'pppoe_id':$('#pppoe_idc').val(),
            'full_name': $('#full_name').val(),
            'wa': $('#wa').val(),
            'address': $('#address').val(),
        }
        

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // ajax proses
        $.ajax({
            url: `/billing/member/updateContact/${member_id}`,
            type: "PUT",
            cache: false,
            data: data,
            dataType: "json",

            // tampilkan pesan Success

            success: function(data) {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: `${data.message}`,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    setTimeout(function() {
                        table.ajax.reload()
                        $('#show_contact').modal('hide')
                    });
                } else {
                    $.each(data.error, function(key, value) {
                        var el = $(document).find('[name="' + key + '"]');
                        el.after($('<span class= "alert text-sm text-danger">' + value[0] +
                            '</div>'));
                    });
                }
            },

            error: function(err) {
                $("#message").html("Some Error Occurred!")
            }

        });
    });

    $('#myTable').on('click', '#show_ppp', function() {
        let ppp_id = $(this).data('id');
        let ppp_username = $(this).data('username');
        var full_name = $(this).data('name');
        $("#ppp_full_name").html(full_name);
        if (ppp_id) {
            $.ajax({
                url: `/billing/member/getPpp/${ppp_id}`,
                type: "GET",
                data: {
                    pppoe_id: ppp_id,
                    pppoe_username: ppp_username,
                },
                success: function(data) {
                    $("#username").html(data.ppp[0].username);
                    $("#password").html(data.ppp[0].value);
                    $("#profile_inet").html(data.ppp[0].profile);
                    if (data.session !== null && data.session.status === 1 &&
                        data.session.ip !== null && data.ppp[0].status === 1) {
                        $('#status').html(
                            '<span class="badge bg-success text-light">online</span>');
                        $('#fill_ip').html('<span>' + data.session.ip + '</span>');
                    } else if (data.session !== null && data.session.status ===
                        1 &&
                        data.session.ip !== null && data.ppp[0].status === 2) {
                        $('#status').html(
                            '<span class="badge bg-warning text-light">isolir</span>');
                        $('#fill_ip').html('<span>' + data.session.ip + '</span>');
                    } else if (data.session !== null && data.session.status ===
                        2 && data.session.ip !== null) {
                        $('#status').html(
                            '<span class="badge bg-danger text-light">offline</span>');
                        $('#fill_ip').html('-');
                    } else {
                        $('#status').html(
                            '<span class="badge bg-danger text-light">offline</span>');
                        $('#fill_ip').html('-');
                    }
                    var created = data.ppp[0].created_at;
                    var created_at = moment(created).local().format('DD/MM/YYYY HH:mm:ss');
                    $("#created").html(created_at);
                }
            });
        } else {

        }
        $('#show_ppp').modal('show');
    });

    $('#myTable').on('click', '#show_invoice', function() {
        let member_id = $(this).data('id');
        if (member_id) {
            $.ajax({
                url: `/billing/member/getListInvoice/${member_id}`,
                type: 'GET',
                data: {
                    member_id: member_id
                },
                success: function(response) {
                    $("#inv_full_name").html(response[0].member.full_name);
                    $('#invoiceTable').DataTable({
                        data: response,
                        // scrollX: true,
                        pageLength: 6,
                        lengthMenu: [
                            [6, 12, 24],
                            [6, 12, 24],
                        ],
                        destroy: true,
                        columns: [{
                                data: null,
                                'sortable': false,
                                render: function(data, type, row, meta) {
                                    return meta.row + meta.settings._iDisplayStart +
                                        1;
                                }
                            }, {
                                data: 'invoice_date',
                                render: function(data, type, row, meta) {
                                    return moment(data).local().format(
                                        'DD/MM/YYYY');
                                },
                            },
                            {
                                data: 'no_invoice',
                            },
                            {
                                data: 'payment_type',
                                className: 'text-uppercase'
                            },
                            {
                                data: 'period',
                                render: function(data, type, row, meta) {
                                    return moment(data).local().format(
                                        'DD/MM/YYYY');
                                },
                            },
                            {
                                data: 'price',
                                render: $.fn.dataTable.render.number('.', ',', 0, ''),
                            },
                            {
                                data: 'status',
                                render: function(data) {
                                    if (data === 0) {
                                        return '<span class="badge badge-sm bg-danger">UNPAID</span>'
                                    } else {
                                        return '<span class="badge bg-success">PAID</span>'
                                    }
                                },
                            },
                            {
                                data: 'paid_date',
                                render: function(data, type, row, meta) {
                                    if (data === null) {
                                        return ''
                                    } else {
                                        return moment(data).local().format(
                                            'DD/MM/YYYY');
                                    }
                                },
                            },
                        ]
                    });

                    $('#show_invoice').modal('show');
                },
            });
        } else {
        };
    });

    $('#myTable').on('click', '#show_contact', function() {
        let member_id = $(this).data('id');
        if (member_id) {
            $.ajax({
                url: `/billing/member/getContact/${member_id}`,
                type: "GET",
                data: {
                    member_id: member_id,
                },
                success: function(data) {
                    
                    $("#member_idc").val(data[0].id);
                    $("#full_name").val(data[0].full_name);
                    $("#wa").val(data[0].wa);
                    $("#address").val(data[0].address);
                    $("#pppoe_idc").val(data[0].ppp.id).text(data[0].ppp
                        .id);
                    // $("#kode_area option:selected").val(data[0].ppp.kode_area).text(data[0].ppp
                    //     .kode_area);
                    // $("#kode_odp option:selected").val(data[0].ppp.kode_odp).text(data[0].ppp
                    //     .kode_odp);

                }
            });
        } else {

        }
        $('#show_contact').modal('show');
    });

    $('#lock_mac').change(function() {
        let lock_mac = $(this).val(); //Get selected option value
        if (lock_mac == '1') {
            $('#show_mac').show()
        } else {
            $('#show_mac').hide()
        }
    });

    $("#option_member").click(function() {
        if ($("#option_member").prop("checked")) {
            $("#option_member").val(1);
            $("#show_member").show();
        } else {
            $("#option_member").val(0);
            $("#show_member").hide();
        }
    });




    $('#kode_area').select2({
        theme: "bootstrap-5",
        allowClear: true,
        dropdownParent: $("#create .modal-content"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });
    $('#kode_area_edit').select2({
        theme: "bootstrap-5",
        allowClear: true,
        dropdownParent: $("#edit .modal-content"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });
    $('#kode_odp').select2({
        theme: "bootstrap-5",
        allowClear: true,
        dropdownParent: $("#create .modal-content"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });
    $('#kode_odp_edit').select2({
        theme: "bootstrap-5",
        allowClear: true,
        dropdownParent: $("#edit .modal-content"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });

    function kapital() {
        let x = document.getElementById("full_name");
        let y = document.getElementById("address");
        x.value = x.value.toUpperCase();
        y.value = y.value.toUpperCase();
    }

    /* Fungsi */
    function formatRupiah(angka, prefix) {
        var number_string = angka.replace(/[^,\d]/g, '').toString(),
            split = number_string.split(','),
            sisa = split[0].length % 3,
            rupiah = split[0].substr(0, sisa),
            ribuan = split[0].substr(sisa).match(/\d{3}/gi);

        if (ribuan) {
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }

        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return prefix == undefined ? rupiah : (rupiah ? '' + rupiah : '');
    }
</script>
@endpush