@extends('backend.layouts.app')
@section('main')
@section('title', 'VPN Radius')


            <div class="row mb-3">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header"><span class="h5"><i class="fas fa-circle-info me-2"></i>VPN RADIUS</span></div>
                        <div class="card-body">
                            <span><i class="text-secondary">Jika Mikrotik anda memiliki IP Public, lewati langkah ini dan langsung saja pastekan IP Public Mikrotik anda pada link berikut </i><a class="btn m-2 btn-sm bg-primary text-white" href="/nas">TAMBAH NAS</a>
                            </span><br>
                            <span><code>VPN Radius</code> digunakan untuk menghubungkan Mikrotik anda dengan Radius Server kami melalui jaringan internet.<code> Jika Mikrotik anda tidak memiliki IP Public</code>, silakan create account VPN pada form dibawah ini GRATIS tanpa dikenakan biaya tambahan agar Radius Server kami dapat merespon request yang dikirimkan oleh Mikrotik anda.<br>
                                <hr>Setelah membuat account VPN, copy <code>IP Address</code> yang muncul pada table dibawah ini lalu pastekan di menu <code>Mikrotik > NAS</code></span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="card card-header-actions mb-3">
                        <div class="card-header">
                            <div class="col-auto fw-bold">TAMBAH VPN</div>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="form-group mb-3">
                                    <label for="name" class="mb-1">Account Name</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        value="{{ old('name') }}" placeholder="" autocomplete="off" required>
                                        <small id="helper" class="form-text text-muted">Isi bebas, contoh VPN-JANGKURANG</small>
                                </div>

                                <div class="form-group mb-3">
                                    <label for="user" class="mb-1">User</label>
                                    <input type="text" class="form-control" id="user" name="user"
                                        value="{{ old('user') }}" placeholder="" autocomplete="off" required>
                                    <small id="helper" class="form-text text-muted">Isi tanpa spasi dan huruf kecil, contoh jangkurang</small>
                                </div>

                                <div class="form-group mb-3">
                                    <label for="password" class="mb-1">Password</label>
                                    <input type="password" class="form-control" id="password" name="password"
                                        value="{{ old('password') }}" placeholder="" autocomplete="off" required>
                                        <small id="helper" class="form-text text-muted">Isi tanpa spasi dan huruf kecil, contoh jangkurang123</small>
                                </div>

                            </form>
                            <button class="btn btn-primary float-end" id="store" type="submit">
                                Create
                            </button>

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

                <div class="col-lg-8">
                    <div class="card card-header-actions">
                        <div class="card-header">
                            <div class="col-auto fw-bold">DAFTAR VPN</div>
                        </div>
                        @include('backend.vpn.modal.show')
                        <div class="card-body table-responsive">
                            <table id="myTable" class="table table-hover display nowrap" width="100%">
                                <thead>
                                    <tr>
                                        <th>NAMA VPN</th>
                                        <th>USER</th>
                                        <th>PASSWOD</th>
                                        <th>IP ADDRESS</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,
            lengthMenu: [5, 10, 20, 50],
            ajax: '{{ url()->current() }}',
            columns: [{
                    data: 'name',
                    name: 'name',
                    'sortable': false,
                },
                {
                    data: 'user',
                    name: 'user'
                },
                {
                    data: 'password',
                    name: 'password'
                },
                {
                    data: 'ip_address',
                    name: 'ip_address'
                },
                {
                    data: 'action',
                    name: 'action'
                }
            ]
        });

        // action create
        $('#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 = {
                'name': $('#name').val(),
                'user': $('#user').val(),
                'password': $('#password').val(),
            }

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

            $.ajax({
                url: `/vpn`,
                type: "POST",
                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(),
                            $('input').val('');
                        });
                    } else {
                        $.each(data.error, function(key, value) {
                            var el = $(document).find('[name="' + key + '"]');
                            el.after($('<div class="form-text text-danger">' + value[0] +
                                '</div>'));
                        });
                    }
                },

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

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

            let id = $(this).data('id');
            $.ajax({
                url: `/vpn/${id}`,
                type: "GET",
                cache: false,
                success: function(response) {
                    var vpn_user = response.data.user;
                    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: `/vpn/${id}`,
                                type: "POST",
                                cache: false,
                                data: {
                                    _method: "DELETE",
                                    'vpn_user': vpn_user,
                                },
                                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()
                                        });
                                },

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

                            });
                        }
                    });
                }
            });

        });

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

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

            //fetch detail post with ajax
            $.ajax({
                url: `/vpn/${vpn_id}`,
                type: "GET",
                cache: false,
                success: function(response) {
                    var radius = '{{env('IP_RADIUS_SERVER')}}';
                    var vpn = '{{env('IP_VPN_SERVER')}}';

                    //fill data to form
                    $('#copyl2tp').html('/interface l2tp-client&#10;add connect-to=' + vpn +
                            ' name=l2tp-starbill user=' + response.data.user +
                            ' password=' + response.data.password +
                            ' disabled=no&#10;/ip route&#10;add dst-address=' + radius +
                            ' gateway=l2tp-starbill distance=1 disabled=no comment="static route by starbill"&#10;'),
                        $('#copysstp').html('/interface sstp-client&#10;add connect-to=' + vpn +
                            ' name=sstp-starbill user=' + response.data.user +
                            ' password=' + response.data.password +
                            ' disabled=no&#10;/ip route&#10;add dst-address=' + radius +
                            ' gateway=sstp-starbill distance=1 disabled=no comment="static route by starbill"&#10;'),
                        $('#copypptp').html('/interface pptp-client&#10;add connect-to=' + vpn +
                            ' name=pptp-starbill user=' + response.data.user +
                            ' password=' + response.data.password +
                            ' disabled=no&#10;/ip route&#10;add dst-address=' + radius +
                            ' gateway=pptp-starbill distance=1 disabled=no comment="static route by starbill"&#10;'),

                        //open modal
                        $('#show').modal('show');
                }
            });
        });

        function copyl2tp() {
            var copyText = document.getElementById("copyl2tp");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);

            var tooltip = document.getElementById("l2tp");
            tooltip.innerHTML = "Copied";
        }

        function outl2tp() {
            var tooltip = document.getElementById("l2tp");
            tooltip.innerHTML = "Copy";
        }

        function copysstp() {
            var copyText = document.getElementById("copysstp");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);

            var tooltip = document.getElementById("sstp");
            tooltip.innerHTML = "Copied";
        }

        function outsstp() {
            var tooltip = document.getElementById("sstp");
            tooltip.innerHTML = "Copy";
        }

        function copypptp() {
            var copyText = document.getElementById("copypptp");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);

            var tooltip = document.getElementById("pptp");
            tooltip.innerHTML = "Copied";
        }

        function outpptp() {
            var tooltip = document.getElementById("pptp");
            tooltip.innerHTML = "Copy";
        }
    </script>
@endpush