@extends('backend.layouts.app')
@section('main')
@section('title', 'PPPoE Users')



<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="fw-bold h5 col-auto">USER PPPOE</div>
            </div>
            <div class="row ms-3 me-3">
                <div class="col-lg-6 mt-4">
                    @if (auth()->user()->role === 'Admin')
                        <button class="btn btn-primary text-light me-2  mb-2" type="button" data-bs-toggle="modal"
                            data-bs-target="#create">
                            <i class="fas fa-plus me-2"></i>CREATE&nbsp
                        </button>
                        <button class="btn btn-success text-light me-2  mb-2" type="button" data-bs-toggle="modal"
                            data-bs-target="#">
                            <i class="fas fa-file-import me-2"></i>IMPORT&nbsp
                        </button>
                        <button class="btn btn-warning text-light me-2  mb-2" type="button" data-bs-toggle="modal"
                            data-bs-target="#">
                            <i class="fas fa-file-export me-2"></i>EXPORT&nbsp
                        </button>
                    @endif
                </div>

                <div class="col-lg-6">
                    <div class="row mt-4">
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="px-3 py-2">
                                    <div class="d-flex flex-row">
                                        <div class="text-white d-flex align-items-center justify-content-center">
                                            <i class="fas fa-users fa-2x text-primary"></i>
                                        </div>
                                        <div class="ms-3 align-self-center">
                                            <h4 class="mb-0 fs-5" id="totaluser">{{ $totaluser }}</h4>
                                            <span>Users</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="px-3 py-2">
                                    <div class="d-flex flex-row">
                                        <div class="text-white d-flex align-items-center justify-content-center">
                                            <i class="fas fa-user-check fa-2x text-success"></i>
                                        </div>
                                        <div class="ms-3 align-self-center">
                                            <h4 class="mb-0 fs-5" id="totalactive">{{ $totalactive }}</h4>
                                            <span>Active</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="px-3 py-2">
                                    <div class="d-flex flex-row">
                                        <div class="text-white d-flex align-items-center justify-content-center">
                                            <i class="fas fa-user-xmark fa-2x text-warning"></i>
                                        </div>
                                        <div class="ms-3 align-self-center">
                                            <h4 class="mb-0 fs-5" id="totalsuspend">{{ $totalsuspend }}</h4>
                                            <span>Suspend</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <hr class="m-0">
            <!-- <div class="row mt-5 ms-3 me-3">
            <div class="col-lg-3">
                            <div class="form-group mb-3">
                                <select data-column="4" class="form-select" id="filter_status" name="filter_status">
                                    <option value="">FILTER NAS</option>
                                    <option value="0">PENDING</option>
                                    <option value="1">OPEN</option>
                                    <option value="2">CLOSED</option>
                                </select>
                            </div>
                        </div>
            <div class="col-lg-3">
                            <div class="form-group mb-3">
                                <select data-column="4" class="form-select" id="filter_status" name="filter_status">
                                    <option value="">FILTER KODE AREA</option>
                                    <option value="0">PENDING</option>
                                    <option value="1">OPEN</option>
                                    <option value="2">CLOSED</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb-3">
                                <select data-column="4" class="form-select" id="filter_status" name="filter_status">
                                    <option value="">FILTER KODE ODP</option>
                                    <option value="0">PENDING</option>
                                    <option value="1">OPEN</option>
                                    <option value="2">CLOSED</option>
                                </select>
                            </div>
                        </div>
            </div> -->
            @include('backend.pppoe.user.modal.create')
            @include('backend.pppoe.user.modal.edit')
            @include('backend.pppoe.user.modal.show_session')
            @include('backend.pppoe.user.modal.member')
            <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>BILL</th>
                            <th>INET</th>
                            <th>NAMA LENGKAP</th>
                            <th>USERNAME</th>
                            <th>PROFILE</th>
                            <th>NAS</th>
                            <th>AREA</th>
                            <th>ODP</th>
                            <!-- <th>INTERNET</th> -->
                            <th>CREATED</th>
                            <th>STATUS</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,
        autoWidth: true,
        scrollX: true,
        order: [
            [9, '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: 'billing',
                name: 'billing',
                className: 'text-center',
                searchable: false,
                sortable:false,
                render: function(data) {
                    if (data === 1) {
                        return '<i class="fas fa-circle-check text-success"></i>'
                    } else {
                        return '<i class="fas fa-circle-xmark text-danger"></i>'
                    }
                }
            },
            {
                data: 'session_internet',
                name: 'session_internet',
                className: 'text-center',
                sortable: false,
                searchable: false,
                render: function(data, type, row) {
                    if (row.session.session_id !== null && row.session.status === 1 && row.session
                        .ip !== null && row.status === 1) {
                        return '<i class="fas fa-circle text-success"></i>'
                    } else if (row.session.session_id !== null && row.session.status === 2 && row
                        .session
                        .ip !== null) {
                        return '<i class="fas fa-circle text-danger"></i>'
                    } else if (row.session.session_id !== null && row.session.status === 1 && row
                        .session
                        .ip !== null && row.status === 2) {
                        return '<i class="fas fa-circle text-warning"></i>'
                    } else {
                        return '<i class="fas fa-circle text-danger"></i>'
                    }
                },
            },
            {
                data: 'member_name',
                name: 'member_name',
            },
            {
                data: 'username',
                name: 'username'
            },
            {
                data: 'profile_name',
                name: 'profile',
                render: function(data) {
                    if (data === null) {
                        return '<i class="text-danger">Unknown</i>'
                    } else {
                        return data
                    }
                },
            },
            {
                data: 'nas_name',
                name: 'nas',
                render: function(data, type, row) {
                    if (row.nas === null) {
                        return 'all'
                    } else if (row.nas_name === null) {
                        return '<i class="text-danger">Unknown</i>'
                    } else {
                        return data
                    }
                },
            },
            {
                data: 'area_name',
                name: 'kode_area',
                render: function(data) {
                    if (data === null) {
                        return '-'
                    } else {
                        return data
                    }
                },
            },
            {
                data: 'odp_name',
                name: 'kode_odp',
                render: function(data) {
                    if (data === null) {
                        return '-'
                    } else {
                        return data
                    }
                },
            },
            // {
            //     data: 'session_internet',
            //     name: 'session_internet',
            //     sortable: false,
            //     searchable: false,
            //     render: function(data, type, row) {
            //         if (row.session.session_id !== null && row.session.status === 1 && row.session
            //             .ip !== null && row.status === 1) {
            //             return '<span class="badge bg-success text-light">online</span>'
            //         } else if (row.session.session_id !== null && row.session.status === 2 && row
            //             .session
            //             .ip !== null) {
            //             return '<span class="badge bg-danger text-light">offline</span>'
            //         } else if (row.session.session_id !== null && row.session.status === 1 && row
            //             .session
            //             .ip !== null && row.status === 2) {
            //             return '<span class="badge bg-warning text-light">isolir</span>'
            //         } else {
            //             return '<span class="badge bg-danger text-light">offline</span>'
            //         }
            //     },
            // },
            {
                data: 'created_at',
                name: 'created_at',
                render: function(data, type, row, meta) {
                    return moment(data).local().format('DD/MM/YYYY HH:mm:ss');
                },
            },
            {
                data: 'status',
                name: 'status',
                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;
                    }

                },
            },
        ]
    });

    $('#myTable tbody').on('click', 'tr td:not(:nth-child(1))', function() {

        let row_user_id = table.row(this).data().id;
        let row_username = table.row(this).data().username;
        let row_kode_area_id = table.row(this).data().rarea.id;
        let row_kode_odp = table.row(this).data().kode_odp;

        $.ajax({
            url: `/pppoe/user/${row_user_id}`,
            type: "GET",
            success: function(data) {
                $('#user_id').val(data.data.id),
                    $('#kode_area_id').val(row_kode_area_id),
                    $('#kode_odp_id').val(row_kode_odp),
                    $('#username_edit').val(data.data.username),
                    $('#password_edit').val(data.data.value),
                    $('#profile_edit').val(data.data.rprofile.id);
                $('#nas_edit').val(data.data.nas);
                $('#kode_area_edit').val(data.data.rarea.id).trigger('change');

                $('#nas_secret').val(data.data.radius.secret);
                if (data.data.status === 0) {
                    $('#disabled').addClass('disabled');
                    $('#enabled').attr('data-id', data.data.id);
                    $('#suspend').attr('data-id', data.data.id);
                } else if (data.data.status === 1) {
                    $('#enabled').addClass('disabled');
                    $('#disabled').attr('data-id', data.data.id);
                    $('#suspend').attr('data-id', data.data.id);
                } else if (data.data.status === 2) {
                    $('#suspend').addClass('disabled');
                    $('#enabled').attr('data-id', data.data.id);
                    $('#disabled').attr('data-id', data.data.id);
                };
                if (data.data.lock_mac === 1) {
                    $('#show_mac_edit').show();
                } else {
                    $('#show_mac_edit').hide();
                };
                $('#lock_mac_edit').change(function() {
                    let lock_mac_edit = $(this).val(); //Get selected option value
                    if (lock_mac_edit == '1') {
                        $('#show_mac_edit').show()
                    } else {
                        $('#show_mac_edit').hide()
                    }
                });
                $('#lock_mac_edit').val(data.data.lock_mac),
                    $('#mac_edit').val(data.data.mac);

            }
        });

        $('#edit').modal('show');

    });

    $('#myTable').on('click', '#btn-member', function() {

        let id = $(this).data('id');

        // //fetch detail post with ajax
        $.ajax({
            url: `/pppoe/user/getMember/${id}`,
            type: "GET",
            data: {
                id: id,
            },
            cache: false,
            success: function(response) {
                console.log(response);
                $('#member').modal('show');
            }

        });
    });

    $('#kode_area').on('change', function() {
        var kode_area = $(this).val();
        if (kode_area) {
            $.ajax({
                url: `/pppoe/user/getKodeOdp/${kode_area}`,
                type: 'GET',
                data: {
                    kode_area_id: kode_area,
                    '_token': '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function(data) {
                    if (data) {
                        $('kode_odp').empty();
                        $('#kode_odp').attr('disabled', false);
                        $('#kode_odp').html(
                            '<option value="">Pilih Kode ODP</option>');
                        $.each(data.odp, function(key, value) {
                            $("#kode_odp").append('<option value="' + value
                                .kode_odp + '">' + value.kode_odp +
                                '</option>');
                        });

                    } else {
                        $('kode_odp').empty();
                    }
                }
            });
        } else {
            $('kode_odp').empty();
        }
    });

    $('#kode_area_edit').on('change', function() {
        var kode_area = $(this).val();
        if (kode_area) {
            $.ajax({
                url: `/pppoe/user/getKodeOdp/${kode_area}`,
                type: 'GET',
                data: {
                    kode_area_id: kode_area,
                    '_token': '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function(data) {
                    if (data) {
                        $('#kode_odp_edit').attr(
                            'disabled',
                            false);
                        $('#kode_odp_edit').html(
                            '<option value="">Pilih Kode ODP</option>'
                        );
                        $.each(data.odp, function(key,
                            value) {
                            $("#kode_odp_edit")
                                .append(
                                    '<option value="' +
                                    value
                                    .kode_odp +
                                    '">' + value
                                    .kode_odp +
                                    '</option>'
                                );
                        });

                    } else {
                        $('kode_odp_edit').empty();
                    }
                }
            });
        } else {
            $('kode_odp_edit').empty();
        }
    });

    $("#profile").on("change", function() {
        var profile_id = $(this).val();
        $.ajax({
            url: `/pppoe/user/getPrice/${profile_id}`,
            type: "GET",
            cache: false,
            data: {
                id: profile_id,
                '_token': '{{ csrf_token() }}'
            },
            success: function(data) {
                var amount = data[0].price;
                rp_amount = formatRupiah(amount, 2, ',', '.');
                $('#amount').val(rp_amount);
                rp_total_amount = formatRupiah(amount, 2, ',', '.');
                $('#payment_total').val(rp_total_amount);

                $("#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);
                    }
                });

            }
        });
    });

    $('#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();
        }
    });
    $('#payment_type').change(function() {
        let payment_type = $(this).val(); //Get selected option value
        if (payment_type == 'Prabayar') {
            $('#show_payment_status').show()
            $('#billing_period').html(
                "<option value='Fixed Date'>Fixed Date</option><option value='Billing Cycle' disabled>Billing Cycle</option>"
            );
        } else {
            $('#show_payment_status').hide()
            $('#billing_period option:disabled').removeAttr('disabled');
        }
    });

    $('#show_session').click(function() {
        let username = $('#username_edit').val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: `/pppoe/user/getSession/${username}`,
            type: 'GET',
            data: {
                username: username
            },
            success: function(response) {
                console.log(response);
                $('#sessionTable').DataTable({
                    data: response,
                    // scrollX: true,
                    pageLength: 2,
                    lengthMenu: [
                        [2, 5, 10, 20],
                        [2, 5, 10, 20]
                    ],
                    destroy: true,
                    order: [
                        [0, 'desc']
                    ],
                    columns: [{
                            data: 'start',
                        },
                        {
                            data: 'stop',
                            render: function(data) {
                                if (data === null) {
                                    return ''
                                } else {
                                    return data;
                                }

                            },
                        },
                        {
                            data: 'ip'
                        },
                        {
                            data: 'mac'
                        },
                        {
                            data: 'input',
                            render: function bytesToSize(data) {
                                var sizes = ['Bytes', 'KB', 'MB', 'GB',
                                    'TB'
                                ];
                                if (data == 0) return 'n/a';
                                var i = parseInt(Math.floor(Math.log(
                                    data) / Math.log(1024)));
                                if (i == 0) return data + ' ' + sizes[i];
                                return (data / Math.pow(1024, i)).toFixed(
                                    1) + ' ' + sizes[i];
                            }
                        },
                        {
                            data: 'output',
                            render: function bytesToSize(data) {
                                var sizes = ['Bytes', 'KB', 'MB', 'GB',
                                    'TB'
                                ];
                                if (data == 0) return 'n/a';
                                var i = parseInt(Math.floor(Math.log(
                                    data) / Math.log(1024)));
                                if (i == 0) return data + ' ' + sizes[i];
                                return (data / Math.pow(1024, i)).toFixed(
                                    1) + ' ' + sizes[i];
                            }
                        },
                        {
                            data: 'uptime',
                            render: function convertSecondsToReadableString(
                                seconds) {
                                seconds = seconds || 0;
                                seconds = Number(seconds);
                                seconds = Math.abs(seconds);

                                const d = Math.floor(seconds / (3600 * 24));
                                const h = Math.floor(seconds % (3600 * 24) /
                                    3600);
                                const m = Math.floor(seconds % 3600 / 60);
                                const s = Math.floor(seconds % 60);
                                const parts = [];

                                if (d > 0) {
                                    parts.push(d + 'd');
                                }

                                if (h > 0) {
                                    parts.push(h + 'h');
                                }

                                if (m > 0) {
                                    parts.push(m + 'm');
                                }

                                // if (s > 0) {
                                //     parts.push(s + ' second' + (s > 1 ? 's' :
                                //         ''));
                                // }

                                return parts.join(' ');
                            }

                        }
                    ]
                });

            }
        });
        $(this).toggleClass("active");
        if ($(this).hasClass("active")) {
            $(this).text("Hide Session");
        } else {
            $(this).text("Show Session");
        }
    });

    $('#edit').on('shown.bs.modal', function() {
        let kode_area_id = $('#kode_area_id').val();
        let kode_odp = $('#kode_odp_id').val();
        if (kode_area_id) {
            $.ajax({
                url: `/pppoe/user/getKodeOdp/${kode_area_id}`,
                type: 'GET',
                data: {
                    kode_area_id: kode_area_id,
                    '_token': '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function(data) {
                    if (data) {
                        $('#kode_odp_edit').attr(
                            'disabled',
                            false);
                        $('#kode_odp_edit').val(kode_odp).trigger('change');
                    } else {
                        $('kode_odp_edit').empty();
                    }
                }
            });
        } else {
            $('kode_odp_edit').empty();
        };
    });

    $('#edit').on('hidden.bs.modal', function() {
        $('#enabled').removeClass('disabled');
        $('#disabled').removeClass('disabled');
        $('#suspend').removeClass('disabled');
    });

    $("#enabled").click(function() {
        let id = $('#user_id').val();
        var data = {
            'username': $('#username_edit').val(),
            'nas': $('#nas_edit option:selected').val(),
            'secret': $('#nas_secret').val(),
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: `/pppoe/user/enable/${id}`,
            type: "PUT",
            cache: false,
            data: data,
            dataType: "json",

            success: function(data) {

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

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

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

        });

    });

    $("#disabled").click(function() {
        let id = $('#user_id').val();
        var data = {
            'username': $('#username_edit').val(),
            'nas': $('#nas_edit option:selected').val(),
            'secret': $('#nas_secret').val(),
        }
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: `/pppoe/user/disable/${id}`,
            type: "PUT",
            cache: false,
            data: data,
            dataType: "json",

            success: function(data) {

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

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

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

        });

    });

    $("#suspend").click(function() {
        let id = $('#user_id').val();
        var data = {
            'username': $('#username_edit').val(),
            'nas': $('#nas_edit option:selected').val(),
            'secret': $('#nas_secret').val(),
        }
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: `/pppoe/user/suspend/${id}`,
            type: "PUT",
            cache: false,
            data: data,
            dataType: "json",

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

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

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

        });

    });

    $('#delete').on('click', function() {
        let id = $('#user_id').val();
        Swal.fire({
            title: "Apakah anda yakin?",
            icon: 'warning',
            text: "Data yang sudah dihapus tidak dapat dikembalikan",
            showCancelButton: !0,
            reverseButtons: !0,
            confirmButtonText: "Yes, delete!",
            cancelButtonText: "Cancel",
            confirmButtonColor: "#d33",
            // cancelButtonColor: "#d33",
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $(
                                'meta[name="csrf-token"]'
                            )
                            .attr('content')
                    }
                });

                $.ajax({
                    url: `/pppoe/user/${id}`,
                    type: "POST",
                    cache: false,
                    data: {
                        _method: "DELETE"
                    },
                    dataType: "json",

                    // tampilkan pesan Success
                    success: function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: `${data.message}`,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(
                            function() {
                                table.ajax.reload()
                                $('#totaluser').html(data.totaluser)
                                $('#totalactive').html(data.totalactive)
                                $('#totalsuspend').html(data.totalsuspend)
                                $('#totaldisabled').html(data.totaldisabled)
                                $('#edit').modal('hide')
                            });
                    },

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

                });
            }
        });
    });

    $('#store').click(function(e) {
        e.preventDefault();
        var error_ele = document.getElementsByClassName('form-text text-danger');
        if (error_ele.length > 0) {
            for (var i = error_ele.length - 1; i >= 0; i--) {
                error_ele[i].remove();
            }
        }

        // collect data by id
        var data = {
            'username': $('#username').val(),
            'password': $('#password').val(),
            'profile': $('#profile option:selected').text(),
            'nas': $('#nas').val(),
            'kode_area': $('#kode_area option:selected').text(),
            'kode_odp': $('#kode_odp').val(),
            'lock_mac': $('#lock_mac').val(),
            'mac': $('#mac').val(),
            'option_member': $('#option_member').val(),
            'profile_id': $('#profile option:selected').val(),
            'full_name': $('#full_name').val(),
            'wa': $('#wa').val(),
            'address': $('#address').val(),
            'payment_type': $('#payment_type').val(),
            'payment_status': $('#payment_status').val(),
            'billing_period': $('#billing_period').val(),
            'reg_date': $('#reg_date').val(),
            'ppn': $('#ppn').val(),
            'discount': $('#discount').val(),
            'amount': $('#amount').val(),
            'payment_total': $('#payment_total').val(),
        }


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

        // ajax proses
        $.ajax({
            url: `/pppoe/user`,
            type: "POST",
            cache: false,
            data: data,
            dataType: "json",

            // tampilkan pesan Success

            success: function(data) {
                if (data.error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Failed',
                        text: `${data.error}`,
                        showConfirmButton: false,
                        timer: 5000
                    });
                }
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: `${data.message}`,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    setTimeout(function() {
                        table.ajax.reload()
                        $('#username').val('');
                        $('#password').val('');
                        $('#full_name').val('');
                        $('#wa').val('');
                        $('#ppn').val('');
                        $('#discount').val('');
                        $('#amount').val('');
                        $('#payment_total').val('');
                        $('textarea', ).val('');
                        $('#profile').val('').trigger('change');
                        $('#nas').val('').trigger('change');
                        $('#kode_area').val('').trigger('change');
                        $('#kode_odp').val('').trigger('change');
                        // $('#lock_mac').val('').trigger('change');
                        $('#totaluser').html(data.totaluser)
                        $('#totalactive').html(data.totalactive)
                        $('#totalsuspend').html(data.totalsuspend)
                        $('#totaldisabled').html(data.totaldisabled)
                        $('#create').modal('hide');
                    });
                } else {
                    $.each(data.error, function(key, value) {
                        var el = $(document).find('[name="' + key + '"]');
                        el.after($('<div class="form-text text-danger">' + value[0] +
                            '</div>'));
                    });
                    Swal.fire({
                        icon: 'error',
                        title: 'Failed',
                        text: 'Failed to create user, please check your field',
                        showConfirmButton: false,
                        timer: 1500
                    });

                }
            },

            error: function(err) {
                $("#message").html("Some Error Occurred!")
                Swal.fire({
                    icon: 'error',
                    title: 'Failed',
                    text: 'Failed to create user, please change active date!',
                    showConfirmButton: false,
                    timer: 1500
                });

            }

        });
    });

    $('#update').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 user_id = $('#user_id').val();

        // collect data by id
        var data = {
            'username': $('#username_edit').val(),
            'password': $('#password_edit').val(),
            'profile': $('#profile_edit option:selected').text(),
            'profile_id': $('#profile_edit option:selected').val(),
            'nas': $('#nas_edit').val(),
            'kode_area': $('#kode_area_edit option:selected').text(),
            'kode_odp': $('#kode_odp_edit').val(),
            'lock_mac': $('#lock_mac_edit').val(),
            'mac': $('#mac_edit').val(),
        }


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

        // ajax proses
        $.ajax({
            url: `/pppoe/user/${user_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()
                        $('#totaluser').html(data.totaluser)
                        $('#totalactive').html(data.totalactive)
                        $('#totalsuspend').html(data.totalsuspend)
                        $('#totaldisabled').html(data.totaldisabled)
                        // $('input, textarea', ).val('');
                        // $('#profile').val('').trigger('change');
                        // $('#nas').val('').trigger('change');
                        // $('#kode_area').val('').trigger('change');
                        // $('#kode_odp').val('').trigger('change');
                        // $('#lock_mac').val('').trigger('change');
                        // $('#payment_type').val('').trigger('change');
                        // $('#payment_status').val('').trigger('change');
                        // $('#billing_period').val('').trigger('change');
                        $('#edit').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>'));
                    });
                    Swal.fire({
                        icon: 'error',
                        title: 'Failed',
                        text: 'Failed to create user, please check your field',
                        showConfirmButton: false,
                        timer: 1500
                    });

                }
            },

            error: function(err) {
                $("#message").html("Some Error Occurred!")
                Swal.fire({
                    icon: 'error',
                    title: 'Failed',
                    text: 'Data Gagal Disimpan!',
                    showConfirmButton: false,
                    timer: 1500
                });

            }

        });
    });

    $('#kode_area').select2({
        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({
        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({
        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({
        allowClear: true,
        dropdownParent: $("#edit .modal-content"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });

    $('#create').on('shown.bs.modal', function() {
        document.getElementById('reg_date').valueAsDate = new Date();
    });

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

    function nonkapital() {
        let x = document.getElementById("username");
        let y = document.getElementById("password");
        // x.value = x.value.toLowerCase();
        // y.value = y.value.toLowerCase();
    }

    /* 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 : '');
    }


    ///


    // function isNotChrome(){
    //     var userAgent = navigator.userAgent;
    //     return !/Chrome/.test(userAgent);
    // }
    // if (isNotChrome) {
    //     // Jika perangkat adalah iOS atau macOS, tambahkan kelas pada body atau elemen utama
    //     $('.select2-safari').addClass('row');
    // }
</script>
@endpush