@extends('backend.layouts.app')
@section('main')
@section('title', 'Ticket PSB')



    <!-- Main page content-->
    <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">TICKET PSB</div>
                </div>
                <div class="row ms-3 me-3">
                    <div class="col-lg-6 mt-4">
                            <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-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> --}}
                    </div>
                </div>
                @include('backend.ticket.psb.modal.create')
                @include('backend.ticket.psb.modal.create_secret')
                @include('backend.ticket.psb.modal.show_data')
                <div class="card-body table-responsive">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif


                    <div class="row mb-3">
                        <div class="col-lg-3">
                            <div class="form-group mb-3">
                                <label for="mindate" class="mb-1">DARI TANGGAL</label>
                                <input type="date" data-column="2" class="form-control daterange" id="mindate"
                                    name="mindate">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb-3">
                                <label for="maxdate" class="mb-1">SAMPAI TANGGAL</label>
                                <input type="date" data-column="2" class="form-control daterange" id="maxdate"
                                    name="maxdate">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb-3">
                                <label for="filter_status" class="mb-1">STATUS TICKET</label>
                                <select data-column="4" class="form-select" id="filter_status" name="filter_status">
                                    <option value="">FILTER STATUS</option>
                                    <option value="0">PENDING</option>
                                    <option value="1">OPEN</option>
                                    <option value="2">CLOSED</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <table id="myTable" class="table table-hover display nowrap" width="100%">
                        <thead>
                            <tr>
                                <th style="text-align:left!important">No</th>
                                <th>ID PSB</th>
                                <th>TGL REGISTRASI</th>
                                <th>NAMA LENGKAP</th>
                                <th>STATUS</th>
                                <th>TGL AKTIF</th>
                                <th>CLOSED BY</th>
                                <th>AKSI</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: [
            [2, 'desc']
        ],
        ajax: '{{ url()->current() }}',
        columns: [{
                data: null,
                'sortable': false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'id_psb',
                name: 'id_psb',
                render: function(data) {
                    return '<span class="badge bg-primary">' + data + '</span>'
                },
            },

            {
                data: 'created_at',
                name: 'created_at',
                render: function(data, type, row, meta) {
                    return moment(data).local().format('DD/MM/YYYY');
                },
            },
            {
                data: 'nama_lengkap',
                name: 'nama_lengkap',
                render: function(data, type, row) {
                    return '<a href="javascript:void(0)" class="text-primary" style="text-decoration:none" id="show_data" data-ppp=' +
                        row.rpppoe.id +
                        ' data-username=' +
                        row.rpppoe.username +
                        ' data-id=' +
                        row.rmember.id +
                        '>' + data + '</a>'
                },

            },
            {
                data: 'status',
                name: 'status',
                render: function(data) {
                    if (data === 2) {
                        return '<span class="badge bg-success">CLOSED</span>'
                    } else if (data === 0) {
                        return '<span class="badge bg-warning">PENDING</span>'
                    } else if (data === 1) {
                        return '<span class="badge bg-danger">OPEN</span>'
                    }

                },
            },
            {
                data: 'tgl_aktif',
                name: 'tgl_aktif',
                render: function(data, type, row, meta) {
                    if (data !== null) {
                        return moment(data).local().format('DD/MM/YYYY');
                    } else {
                        return ''
                    }
                },
            },
            {
                data: 'closed_by',
                name: 'closed_by',
            },
            {
                data: 'action',
                name: 'action',
                width: '120px',
            },
        ]
    });

    table.on('preXhr.dt', function(e, settings, data) {
        data.start_date = $('#mindate').val();
        data.end_date = $('#maxdate').val();
    });

    $('#maxdate').change(function() {
        table.ajax.reload();
        return false;
    });

    $('#filter_status').change(function() {
        table.column($(this).data('column'))
            .search($(this).val())
            .draw();
    });

    $('#myTable').on('click', '#delete', function() {

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

        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: `/ticket/psb/${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: 1000
                        });
                        setTimeout(
                            function() {
                                table.ajax.reload()
                            });
                    },

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

                });
            }
        });
    });

    $('#myTable').on('click', '#show_data', function() {
        let member_id = $(this).data('id');
        let ppp_id = $(this).data('ppp');
        let ppp_username = $(this).data('username');
        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);
                    $("#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);

                }
            });

            $.ajax({
                url: `/billing/member/getPpp/${ppp_id}`,
                type: "GET",
                data: {
                    pppoe_id: ppp_id,
                    pppoe_username: ppp_username,
                },
                success: function(data) {
                    if (data.ppp.length === 0) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Maaf!',
                            text: 'Ticket PSB masih berstatus PENDING. Silakan hubungi Admin / Helpdesk',
                            showConfirmButton: true,
                            // timer: 1500
                        });
                    } else {
                        $("#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="text-success">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="text-warning">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="text-danger">offline</span>');
                            $('#fill_ip').html('-');
                        } else {
                            $('#status').html(
                                '<span class="text-danger">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);
                        $('#show_data').modal('show');
                    }
                }
            });

        } else {

        }
    });

    $('#myTable').on('click', '#create_secret', function() {
        let psb = $(this).data('id');
        if (psb) {
            $.ajax({
                url: `/ticket/psb/${psb}`,
                type: "GET",
                success: function(data) {
                    $("#id").val(data.data.id);
                    $("#id_psb").html(data.data.id_psb);
                    $("#nama_psb").html(data.data.nama_lengkap);
                    $("#profile_add option:selected").val(data.data.paket_id).text(data.data.paket);
                    $("#full_name_add").val(data.data.nama_lengkap);
                    $("#wa_add").val(data.data.no_wa);
                    $("#address_add").val(data.data.alamat);
                    var profile_id = data.data.paket_id;
                    $.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);
                                }
                            });

                        }
                    });
                }
            });
        } else {

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

    $('#store').click(function(e) {
        e.preventDefault();
        $('#store').attr("disabled", true);
        $("#store").html('Submit &nbsp<i class="fa fa-refresh fa-spin" id="spinner"></i>');
        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();
            }
        }

        // collect data by id
        var data = {
            'nama_lengkap': $('#nama_lengkap').val(),
            'no_wa': $('#no_wa').val(),
            'alamat': $('#alamat').val(),
            'paket': $('#paket option:selected').val(),
        }

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

        // ajax proses
        $.ajax({
            url: `/ticket/psb`,
            type: "POST",
            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() {
                        $('input, textarea').val('');
                        $('#paket').val('').trigger('change');
                        $('#create').modal('hide')
                        table.ajax.reload()
                    });
                } 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!")
            }

        });
    });

    $('#store_secret').click(function(e) {
        e.preventDefault();
        $('#store_secret').attr("disabled", true);
        $("#store_secret").html('Submit &nbsp<i class="fa fa-refresh fa-spin" id="spinner"></i>');
        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();
            }
        }

        // collect data by id
        var data = {
            'id': $('#id').val(),
            'username': $('#username_add').val(),
            'password': $('#password_add').val(),
            'profile': $('#profile_add option:selected').text(),
            'nas': $('#nas_add').val(),
            'kode_area': $('#kode_area_add option:selected').text(),
            'kode_odp': $('#kode_odp_add').val(),
            'lock_mac': $('#lock_mac').val(),
            'mac': $('#mac').val(),
            'profile_id': $('#profile_add option:selected').val(),
            'full_name': $('#full_name_add').val(),
            'wa': $('#wa_add').val(),
            'address': $('#address_add').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: `/ticket/psb/secret`,
            type: "POST",
            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() {
                        location.reload()
                    }, 1500);
                } 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!")
            }

        });
    });

    $("#create_secret").on("hidden.bs.modal", function() {
        $('#store_secret').attr("disabled", false);
        $("#spinner").remove();
    });

    $('#myTable').on('click', '#confirm', function() {
        let psb = $(this).data('id');
        if (psb) {
            $.ajax({
                url: `/ticket/psb/${psb}`,
                type: "GET",
                success: function(data) {
                    var psb_id = data.data.id;
                    var id_psb = data.data.id_psb;
                    var full_name = data.data.nama_lengkap;
                    var alamat = data.data.alamat;
                    var pppoe_id = data.data.pppoe_id;
                    var member_id = data.data.member_id;

                    Swal.fire({
                        title: "Konfirmasi Pemasangan",
                        icon: 'warning',
                        text: "" + id_psb + " a.n " +
                            full_name + "",
                        showCancelButton: !0,
                        confirmButtonText: "Ya, Terpasang",
                        cancelButtonText: "Close",
                        reverseButtons: !0,
                    }).then(function(result) {
                        if (result.isConfirmed) {
                            let id = psb_id;
                            var data = {
                                'full_name': full_name,
                                'alamat': alamat,
                                'pppoe_id':pppoe_id,
                                'member_id':member_id
                            };

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

                            // ajax proses
                            $.ajax({
                                url: `/ticket/psb/confirm/${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()
                                            });
                                    } else {
                                        $.each(data.error,
                                            function(
                                                key,
                                                value) {
                                                var el =
                                                    $(
                                                        document)
                                                    .find(
                                                        '[name="' +
                                                        key +
                                                        '"]'
                                                    );
                                                el.after(
                                                    $('<span class= "alert text-sm text-danger">' +
                                                        value[
                                                            0
                                                        ] +
                                                        '</span>'
                                                    )
                                                );
                                            });
                                    }
                                },

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

                            });
                        }
                    });
                }
            });
        } else {

        }
    });

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

            }
        });
    });

    // multi select on modal create
    $('#kode_area_add').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_add').empty();
                        $('#kode_odp_add').attr('disabled', false);
                        $('#kode_odp_add').html(
                            '<option value="">Pilih Kode ODP</option>');
                        $.each(data.odp, function(key, value) {
                            $("#kode_odp_add").append('<option value="' + value
                                .kode_odp + '">' + value.kode_odp +
                                '</option>');
                        });

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


    $('#lock_mac').change(function() {
        let lock_mac = $(this).val(); //Get selected option value
        if (lock_mac == '1') {
            $('#show_mac').show()
        } else {
            $('#show_mac').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');
        }
    });

    $('#kode_area_add').select2({
        allowClear: true,
        dropdownParent: $("#create_secret"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });

    $('#kode_odp_add').select2({
        allowClear: true,
        dropdownParent: $("#create_secret"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });


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

    function kapital() {
        let x = document.getElementById("full_name_add");
        let y = document.getElementById("address_add");
        let z = document.getElementById("nama_lengkap");
        let xy = document.getElementById("alamat");
        x.value = x.value.toUpperCase();
        y.value = y.value.toUpperCase();
        z.value = z.value.toUpperCase();
        xy.value = xy.value.toUpperCase();
    }

    function nonkapital() {
        let x = document.getElementById("username_add");
        let y = document.getElementById("password_add");
        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 : '');
    }
</script>
@endpush