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

    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i class="fas fa-user-gear"></i></div>
                                Hotspot Setting
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content-->
        <div class="container-xl">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card card-header-actions h-100">
                        <div class="card-header">
                            <div class="col-auto">Mode Isolir</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>&nbspApply
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="bd-example">
                                <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>
                                <br>
                            </div>
                            <div class="sbp-preview-code">
                                <input type="hidden" id="isolir_id">
                                <small>Aktifkan Web Proxy</small>
                                <div class="position-absolute text-center w-100"></div>
                                <div style="right:24px" 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>Redirect IP Isolir ke Web Proxy</small>
                                <div class="position-absolute text-center w-100"></div>
                                <div style="right:24px" 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>Block IP Isolir ke Internet</small>
                                <div class="position-absolute text-center w-100"></div>
                                <div style="right:24px" 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 h-100">
                        <div class="card-header">
                            <div class="col-auto">Informasi</div>
                        </div>
                        <div class="card-body">                                    
                            <div class="sbp-preview-code">
                                <ul>
                                <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 access menu di web proxy dan Rubah dst-address <small class="text-red">!149.28.146.56</small> dengan IP web isolir anda</li>
                                <li>Setelah mengaktifkan mode isolir, sistem akan otomatis mengirimkan disconnect request jika pelanggan sedang online, dan akan mendapatkan IP isolir ketika online kembali</li>
                                <li>Jika ada pertanyaan mengenai setting mode isolir, jangan ragu silahkan hubungi kami melalui nomor whatsapp yang telah disediakan</li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@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