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


    <div class="row">
        <div class="col-lg-6">
            <div class="card card-header-actions">

                <div class="card-header">
                    <div class="h5 col-auto">MODE ISOLIR</div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-auto">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="0" id="isolir">
                                <label class="form-check-label" for="isolir">
                                    Aktifkan Mode Isolir
                                </label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-sm btn-primary text-light" type="submit" id="update">
                                <i class="fas fa-circle-check"></i>&nbspSimpan
                            </button>
                        </div>
                        <br>
                    </div>
                    <div class="sbp-preview-code">
                        <input type="hidden" id="isolir_id">
                        <small class="h6">Aktifkan Web Proxy</small>
                        <div class="position-absolute text-center w-100"></div>
                        <div style="right:30px" class="position-absolute">
                            <button type="button" class="btn btn-sm btn-transparent-dark" onclick="copyl2tp()"
                                onmouseout="outl2tp()">
                                <span id="l2tp">Copy</span>
                            </button>
                        </div>
                        <textarea class="form-control pt-3" rows="5" readonly="" id="copyl2tp"></textarea>
                        <hr />
                        <small class="h6">Redirect User Suspend ke Halaman Isolir</small>
                        <div class="position-absolute text-center w-100"></div>
                        <div style="right:30px" class="position-absolute">
                            <button type="button" class="btn btn-sm btn-transparent-dark" onclick="copypptp()"
                                onmouseout="outpptp()">
                                <span id="pptp">Copy</span>
                            </button>
                        </div>
                        <textarea class="form-control pt-3" rows="5" readonly="" id="copypptp"></textarea>
                        <hr />
                        <small class="h6">Blokir Akses Internet User Suspend</small>
                        <div class="position-absolute text-center w-100"></div>
                        <div style="right:30px" class="position-absolute">
                            <button type="button" class="btn btn-sm btn-transparent-dark" onclick="copysstp()"
                                onmouseout="outsstp()">
                                <span id="sstp">Copy</span>
                            </button>
                        </div>
                        <textarea class="form-control pt-3" rows="5" readonly="" id="copysstp"></textarea>
                        <hr />
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card card-header-actions">
                <div class="card-header align-items-center justify-content-between">
                    <div class="h5 col-auto">INFORMASI</div>
                </div>
                <div class="card-body">
                    
                        <ol>
                            <li>IP Address Isolir akan di generate secara random oleh sistem dengan Network <small
                                    class="text-red">172.30.0.0/16</small></li>
                            <li>Tidak perlu menambahkan IP Pool</li>
                            <li>Jika merubah halaman isolir, anda dapat edit pada menu Access di Web Proxy lalu rubah
                                dst-address <small class="text-red">!149.28.146.56</small> dengan IP web isolir anda
                            </li>
                            <li>Setelah mengaktifkan mode isolir, user PPPoE akan konek dengan IP isolir kemudian di redirect ke halaman isolir kami</li>
                            <li>Jika ada pertanyaan mengenai setting mode isolir, jangan ragu silahkan hubungi kami
                                melalui nomor whatsapp yang telah disediakan</li>
                            </ol>

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

@endsection
@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        //fetch detail post with ajax
        $.ajax({
            url: '{{ url()->current() }}',
            type: "GET",
            cache: false,
            success: function(response) {
                $('#isolir_id').val(response.data[0].id),
                    $('#copyl2tp').html(
                        '/ip proxy&#10;set enabled=yes parent-proxy=0.0.0.0 port="8080"&#10;/ip proxy access&#10;add action=deny redirect-to="isolir.starbill.net" src-address="172.30.0.0/16"'
                        );
                $('#copypptp').html(
                    '/ip firewall nat&#10;add action=redirect chain=dstnat comment="redirect isolir - by starbill" disabled=no &#92&#10;dst-address="!149.28.146.56" dst-port="80,443" protocol=tcp &#92&#10;src-address="172.30.0.0/16" to-ports="8080"'
                    );
                $('#copysstp').html(
                    '/ip firewall filter&#10;add action=drop chain=forward comment="drop isolir - by starbill" &#92&#10;dst-address="!149.28.146.56" protocol=tcp src-address="172.30.0.0/16"&#10;add action=drop chain=forward comment="drop isolir - by starbill" &#92&#10;dst-address="!149.28.146.56" dst-port=!53,5353 protocol=udp src-address="172.30.0.0/16"'
                    );
                if (response.data[0].isolir === 1) {
                    $('#isolir').attr('checked', true);
                    $('#isolir').val('1');
                } else {
                    $('#isolir').attr('checked', false);
                    $('#isolir').val('0');
                };
            }
        });
    });

    $("#isolir").click(function() {
        if ($("#isolir").prop("checked")) {
            $("#isolir").val(1);
        } else {
            $("#isolir").val(0);
        }
    });

    $('#update').click(function() {
        let setting = $('#isolir_id').val();

        // collect data by id
        var data = {
            'isolir': $('#isolir').val(),
        }

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

        $.ajax({
            url: `/pppoe/setting/${setting}`,
            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()
                    });
                } 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!")
            }

        });

    });

    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("ppttp");
        tooltip.innerHTML = "Copy";
    }
</script>
@endpush