@extends('layouts.app', ['pageSlug' => 'customerSetup'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Customer / Setup</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Customer Setup
        </div>
    </div>
    <br>
    @php
        $disabled = 'disabled';
        $role = \Auth::check() && \Auth::user()->role ? \Auth::user()->role->roleName->role : '';
    @endphp
    <div class="col-lg-8 panel panel-default">
        <div class="panel-body p-3">
            <form id="admin_networking_customer_add_form" class="form-horizontal" role="form" action="{{$role == 'technician' ? route('tech.do.setup') : route('customer.do.setup')}}" method="POST">
                @csrf
                <fieldset>
                @php
                    if($role == 'admin'){
                        $disabled = '';
                    }
                @endphp
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Customer
                    </label>
                    <div class="col-lg-8 col-md-9">
                        <select type="select" style="width: 100%;" original-value="0" force-send="1" class="select2 select2-hidden-accessible" name="customer[username]" id="customer-username" tabindex="-1" aria-hidden="true" required>
                            <option value="" selected="">select customer</option>
                            @foreach ($customers as $customer)
                            <option value="{{$customer->username}}">{{$customer->username}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Select Sector
                    </label>
                    <div class="col-lg-8 col-md-9">
                        <select type="select" style="width: 100%;" original-value="0" force-send="1" class="sector-change select2 select2-hidden-accessible" name="customer[device_id]" id="customer-sector" tabindex="-1" aria-hidden="true" required>
                            <option value="" selected="">select sector</option>
                            @foreach ($sectors as $key => $sector)
                            <option value="{{$key}}">{{$sector}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Ip address
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="customer[ip]" id="customer-ip" value="" {{$disabled}}>
                    </div>
                </div>           
                
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Gateway
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="customer[gatewayip]" id="customer-gatewayip" value="" {{$disabled}}>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Internet Source
                    </label>
                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="customer[internet_source]" id="customer-interface" value="" {{$disabled}}>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        DNS
                    </label>
                    <div class="col-lg-8 col-md-9">
                        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="customer[dns]" id="customer-dns" value="" {{$disabled}}>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="col-lg-12 col-md-12">
                        <input type="submit" value="Add" class="btn btn-primary btn-sm pull-right" id="admin_networking_customer_add_button">
                    </div>
                </div>

            </fieldset>

            </form>
        </div>
    </div>
    <div id="running_log"></div>
</div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script>    
        var fetchurl = "fetch-setup";
        var role = {!!json_encode($role)!!};
        if(role == 'technician'){
            fetchurl = "tech/customer/fetch-setup";
        }
        $(".select2").select2();
            $(function() {
                $("form#admin_networking_customer_add_form").validate({                   
                    submitHandler: function(form) {
                        // form.submit();
                        // console.log($('form#admin_networking_customer_add_form').serializeArray());
                        // return;
                        $.ajax({
                            type:'post',
                            data: $('form#admin_networking_customer_add_form').serializeArray(),
                            url:'{{route('customer.do.setup')}}',
                            success:function(res){
                                if (res == 'success') {
                                    toastr.success('succeed');
                                } else {
                                    toastr.error('failed');
                                }
                            },
                            error:function(res){
                                toastr.error('fail');
                            }
                        });
                    }
                });
            });
            // $("#customer-username").on("change",function(){
            //     sectorchange();
            // });
            $(".sector-change").on("change",function(){
                sectorchange();
            });
            function sectorchange(){
               var id = $(".sector-change").val();
               var user = $("#customer-username").val();
                $("#customer-gatewayip").val('');
                $("#customer-interface").val('');
                $("#customer-dns").val('');
                $("#customer-ip").val('');
                console.log(user);
               if(id){
                $.ajax({
                    type:'get',
                    url: fetchurl+'/'+ id,
                    success:function(res){
                        if (res == 'error') {
                            toastr.error('Please try again');
                        } else {
                            $("#customer-gatewayip").val(res.gateway);
                            $("#customer-interface").val(res.interface);
                            $("#customer-dns").val(res.dns);
                            $("#customer-ip").val(res.ip);
                        }
                    },
                    error:function(res){
                        toastr.error('fail');
                    }
                });
               }
            }
    let pusher1 = new Pusher(`a02a6b2f633c31f75dc7`, {
        cluster: `us2`,
        forceTLS: true,
        encrypted: false
    });

    let channel1 = pusher1.subscribe('uploading-files-channal');

    channel1.bind('uploadingFiles', (data) => {
        var html = '<label style="display:block;">' + data.msg + '</label>';
        $('#running_log').append(html);
    });
    </script>
@endpush