@extends('backend.layouts.app')
@section('main')
@section('title', 'Mikrotik NAS')


        <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>MIKROTIK NAS</span></div>                    <div class="card-body">
                        {{-- <span><i class="text-secondary">Jika Mikrotik anda memiliki IP Public, langsung saja pastekan IP Public Mikrotik anda pada isian form dibawah ini</i></span><br> --}}
                        <span><code>Jika Mikrotik anda tidak memiliki IP Public</code>, pastikan anda sudah membuat account VPN pada link berikut <a class="btn btn-sm btn-primary m-2" href="/vpn">TAMBAH VPN</a>
                            <hr>Harap pastikan account VPN yang telah anda buat, sudah dipaste dan berstatus <code>R</code> alias <code>connected</code> di Mikrotik yang akan dijadikan NAS.<br>
                        </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="fw-bold col-auto">TAMBAH NAS</div>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="form-group mb-3">
                                <label for="name" class="mb-1">Nama Mikrotik</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 nama mikrotik anda, contoh RO-JANGKURANG</small>
                            </div>

                            <div class="form-group mb-3">
                                <label for="ip_router" class="mb-1">IP Mikrotik
                                </label>
                                <input type="text" class="form-control" id="ip_router" name="ip_router"
                                    value="{{ old('ip_router') }}" placeholder="" autocomplete="off" required>
                                    <small id="helper" class="form-text text-muted">Isi IP Address dari table VPN, contoh 172.31.1.xx</small><br>
                                    <small id="helper" class="form-text text-muted">atau isikan IP Public Mikrotik jika ada, contoh 103.xx.xx.xx</small>

                            </div>

                            {{-- <div class="form-group mb-3">
                                <label for="secret" class="mb-1">Secret Radius</label>
                                <input type="secret" class="form-control" id="secret" name="secret"
                                    placeholder="123qwerty" value="{{ old('secret') }}" autocomplete="off" required>
                            </div> --}}

                            <div class="form-group mb-3">
                                <label for="ip_router" class="mb-1">Timezone</label>
                                <select class="form-select" id="timezone" name="timezone" autocomplete="off" required>
                                    <option value="0">Asia/Jakarta</option>
                                    <option value="3600">Asia/Makassar</option>
                                    <option value="7200">Asia/Jayapura</option>
                                </select>
                            </div>

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

                        </form>

                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card card-header-actions">
                    <div class="card-header">
                        <div class="fw-bold col-auto">DAFTAR NAS</div>
                    </div>
                    <div class="card-body table-responsive">
                        <!-- Notifikasi menggunakan flash session data -->
                        @if (session('message'))
                            <div class="alert alert-success small">
                                {{ session('message') }}
                            </div>
                        @endif
                        <table id="myTable" class="table table-hover display nowrap" width="100%">
                            <thead>
                                <tr>
                                    <th>NAMA</th>
                                    <th>IP MIKROTIK</th>
                                    <th>SECRET</th>
                                    <th>TIMEZONE</th>
                                    <th>STATUS</th>
                                    <th>AKSI</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                            @include('backend.radius.modal.show')
                        </table>
                        <hr>
                        <span><i style="font-size:12px">Harap aktifkan port www 80 di menu Mikrotik <code>IP > Services</code> agar sistem kami dapat melihat status Mikrotik anda</a></i>
                        </span><br>

                    </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: 'ip_router',
                name: 'ip_router'
            },
            {
                data: 'secret',
                name: 'secret'
            },
            {
                data: 'timezone',
                name: 'timezone',
                render: function(data) {
                    if (data === '0') {
                        return 'Asia/Jakarta';
                    } else if (data === '3600') {
                        return 'Asia/Makassar';
                    } else if (data === '7200') {
                        return 'Asia/Jayapura';
                    }
                },
            },
            {
                data: 'ping',
                name: 'ping',
                render: function(data) {
                    if (data === 1) {
                        return '<span class="text-success">online</span>'
                    } else {
                        return '<span class="text-danger">offline</span>'
                    }
                },
            },
            {
                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();
            }
        }

        var data = {
            'name': $('#name').val(),
            'ip_router': $('#ip_router').val(),
            'secret': $('#secret').val(),
            'timezone': $('#timezone').val(),
        }

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

        // ajax proses
        $.ajax({
            url: `/nas`,
            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() {
                        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');

        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: `/nas/${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', function() {

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

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

                //fill data to form
                $('#copyl2tp').html('/radius &#10;add address=' + radius +
                        ' secret=' + response.data.secret +
                        ' service=ppp,hotspot timeout=3000ms&#10;/radius incoming&#10;set accept=yes'
                    ),
                    $('#copysstp').html(
                        '/snmp community&#10;set [ find default=yes ] disabled=yes&#10;add addresses=149.28.146.56/32 name=starbill write-access=yes read-access=yes&#10;/snmp&#10;set enabled=yes'
                    ),

                    //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";
    }
</script>
@endpush