@extends('layout.AtoZPortal.main')

@section('content')

    <style>
        .position_fixed {
            position: fixed;
        }
    </style>
    <style>
        .small_fld{width:80.6667%;}
    </style>
    <br />


    <ol class="breadcrumb bc-3">
        <li>
            <a href="{{route("profile_show_p")}}"><i class="entypo-home"></i>@lang('routes.CUST_PANEL_PAGE_PROFILE_TITLE')</a>
        </li>
    </ol>

    <h3 class="text-left">@lang('routes.CUST_PANEL_PAGE_PROFILE_HEADING_ACCOUNT_DETAILS')</h3>

    <ul class="nav nav-tabs">

        <li><a href="{{route("profile_show_p")}}">@lang("routes.CUST_PANEL_PROFILES_TAB")</a></li>

        <li class="active"><a href="{{route("ip_manager") }}">@lang("routes.CUST_PANEL_PAGE_IP_MANAGER")</a></li>

    </ul>


    @include('includes.errors')
    @include('includes.success')

    <p style="text-align: right;">

    </p>

    <div class="tab-content">
        <div class="tab-pane active" id="customer" >
            <div class="row">
                <div class="col-md-12 form-horizontal">
                    <div data-collapsed="0" class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title">
                                IP Manager
                            </div>
                            <div class="panel-options">
                                <a data-rel="collapse" href="#"><i class="entypo-down-open"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                                <div class="col-md-12">
                                    <div class="row dropdown">
                                        <div  class="col-md-12">
                                                <div class="input-group-btn pull-right" style="width:70px;">
                                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
                                                    <ul class="dropdown-menu dropdown-menu-left" role="menu" style="background-color: #000; border-color: #000; margin-top:0px;">
                                                            <li class="li_active">
                                                                <a class="customer-add-ip" type_ad="active" href="javascript:void(0);" >
                                                                    <i class="entypo-plus"></i>
                                                                    <span>Add</span>
                                                                </a>
                                                            </li>
                                                    </ul>
                                                </div><!-- /btn-group -->
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                                <div class="row" style="height:10px !important;"></div>
                                <div id="customeriptableprocessing" class="dataTables_processing hidden">Processing...</div>

                                <table id="customeriptable" class="table table-bordered datatable dataTable customeriptable ">
                                    <thead>
                                    <tr>
                                        <th>IP</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <label for="field-1" class="col-sm-1 customer_accountip control-label hidden">Account IP</label>
                                    @if(count($allcustomerip))
                                        @foreach($allcustomerip as $key=>$cip)
                                            <tr>
                                                <td>
                                                    {{$cip['CustomerIP']}}
                                                </td>
                                                <td>
                                                    <button type="button" title="delete IP" class="btn btn-danger icon-left btn-sm customer-delete-ip">
                                                    <i class="entypo-trash"></i></button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    </tbody>
                                </table>

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

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            var acountipclitable;
            var ipclis = '';
            var isCustomerOrVendor=0;
            var accountID = '{{$account->AccountID}}';
            var ServiceID = 0;
            attachchangeevent('customeriptable');

            // When Lead is converted to account.
                    @if(Session::get('is_converted'))

            var toastr_opts = {
                    "closeButton": true,
                    "debug": false,
                    "positionClass": "toast-top-right",
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                };
            toastr.success('{{Session::get('is_converted')}}', "Success", toastr_opts);

            @endif


            $('body').on('click', '.customer-add-ip', function(e) {
                $('#form-addipcli-modal').find("[name='AccountIPCLI']").val('');
                $('.autogrow').trigger('autosize.resize');
                if ($(this).hasClass('customer-add-ip')) {
                    acountipclitable = 'customeriptable';
                    type = 0; //0 for ip
                    isCustomerOrVendor = 1; //1 for customer
                    $("#addipcli-modal").find('.modal-title').text('Add IP');
                    $("#addipcli-modal").find('.control-label').text('Add IP');
                }

                $("#addipcli-modal").modal('show');
            });
            $("#form-addipcli-modal").submit(function(e){
                e.preventDefault();
                ipclis=$(this).find("[name='AccountIPCLI']").val().trim();
                if(type==0) {
                    var url = baseurl + '/accounts/' + accountID + '/addportalips';
                }
                $.ajax({
                    url: url,
                    type:'POST',
                    data:{ipclis:ipclis,isCustomerOrVendor:isCustomerOrVendor,type:type,ServiceID:ServiceID},
                    datatype:'json',
                    success: function(response) {
                        if (response.status == 'success') {
                            createTable(response);

                            $("#addipcli-modal").modal('hide');

                            toastr.success(response.message,'Success', toastr_opts);
                        }else{
                            toastr.error(response.message, "Error", toastr_opts);
                        }
                        $('.btn').button('reset');
                    }
                });
            });

            $(document).on('click','.customer-delete-ip', function(e){
                e.preventDefault();
                console.log('delete ip 1');

                var acountipclitable = 'customeriptable';
                var isCustomerOrVendor = 1;
                var type = 0;
                var processing = 'customeriptableprocessing';
                var selection = 'IP Address';

                var ipclis = $(this).parent().prev().text().trim();

                var ServiceID = 0;
                    if(confirm('Are you sure you want to delete selected '+selection+'?')){
                        $('#customeriptableprocessing').removeClass('hidden');
                        if(type == 0){
                            var url = baseurl + "/accounts/"+accountID+"/deleteportalips";
                        }
                    }
                    $.ajax({
                        url: url,
                        type:'POST',
                        data:{ipclis:ipclis,isCustomerOrVendor:isCustomerOrVendor,ServiceID:ServiceID},
                        datatype:'json',
                        success: function(response) {
                            if (response.status == 'success') {
                                createTable(response);
                                toastr.success(response.message,'Success', toastr_opts);
                            }else if (response.status == 'check') {
                                $('#confirm-ip-modal').modal('show');
                            }
                            else{
                                toastr.error(response.message, "Error", toastr_opts);
                            }
                            $('#customeriptableprocessing').addClass('hidden');
                        }

                    });

            });

            function createTable(response){
                var class_deletipcli = '';
                var acountipclitable =  'customeriptable';
                if(acountipclitable == 'customeriptable'){
                    class_deletipcli = 'customer-delete-ip';
                }
                $('.customeriptable').dataTable().fnDestroy();
                var accoutipclihtml = '';
                var authValue = [];
                if(response.object) {
                    if(acountipclitable == 'customeriptable' ){
                        authValue = response.ipobject;
                        $.each(authValue , function( index, obj ) {
                            accoutipclihtml +='<tr>';
                            $.each(obj, function( key, value ) {
                                if(value!=null){
                                    accoutipclihtml += '<td>' + value + '</td>';
                                }
                            });
                            accoutipclihtml += '<td><button type="button" title="'+class_deletipcli+'" class="btn btn-danger btn-sm icon-left delete-cli '+class_deletipcli +'"> <i class="entypo-trash"></i> </button></td></tr>';
                        });

                        /*
                         $.each(authValue, function (index, item) {
                         if(item){
                         accoutipclihtml += '<tr><td><div class="checkbox "><input type="checkbox" name="checkbox[]" value="' + index + '" class="rowcheckbox" ></div></td><td>' + item[index].IP + '</td><td>' + item[index].ServiceName + '</td><td><button type="button" title="'+class_deletipcli+'" class="btn btn-danger btn-xs icon-left delete-cli '+class_deletipcli +'"> <i class="entypo-trash"></i> </button></td></tr>';
                         }
                         }); */
                    }else{
                        console.log("here");
                        $.each(authValue, function (index, item) {
                            if(item){
                                accoutipclihtml += '<tr><td>' + item + '</td><td><button type="button" title="'+class_deletipcli+'" class="btn btn-danger btn-sm icon-left delete-cli '+class_deletipcli +'"> <i class="entypo-trash"></i> </button></td></tr>';
                            }
                        });
                    }

                    $('.' + acountipclitable).children('tbody').html(accoutipclihtml);

                }
            }
            function getselectedIDs(table){
                var SelectedIDs = [];
                $('#'+table+' tr .rowcheckbox:checked').each(function (i, el) {
                    var ipAddress = $(this).parents('td').next().text().trim();
                    SelectedIDs[i++] = ipAddress;
                });
                return SelectedIDs;
            }

            function attachchangeevent(table){
                $("."+table+" tbody input[type=checkbox]").each(function (i, el) {
                    var $this = $(el),
                        $p = $this.closest('tr');

                    $(el).on('change', function () {
                        var is_checked = $this.is(':checked');

                        $p[is_checked ? 'addClass' : 'removeClass']('selected');
                    });
                });
            }

            $('#form-ip-confirm-modal').submit(function(e){
                e.preventDefault();
                console.log('delete ip 2'+ipclis);
                var url = baseurl + "/accounts/"+accountID+"/deleteportalips";
                var dates = $('#form-ip-confirm-modal [name="Closingdate"]').val();
                $.ajax({
                    url: url,
                    type:'POST',
                    data:{ipclis:ipclis,isCustomerOrVendor:isCustomerOrVendor,dates:dates},
                    datatype:'json',
                    success: function(response) {
                        if (response.status == 'success') {
                            createTable(response);
                            $('.selectall').prop("checked", false);
                            toastr.success(response.message,'Success', toastr_opts);
                        } else{
                            toastr.error(response.message, "Error", toastr_opts);
                        }
                        $('.btn').button('reset');
                        $('#confirm-ip-modal').modal('hide');
                    }

                });
            });
            $('.selectall').click(function(){
                if($(this).is(':checked')){
                    checked = 'checked=checked';
                    $(this).prop("checked", true);
                    $(this).parents('table').find('tbody tr').each(function (i, el) {
                        $(this).find('.rowcheckbox').prop("checked", true);
                        $(this).addClass('selected');
                    });
                }else{
                    checked = '';
                    $(this).prop("checked", false);
                    $(this).parents('table').find('tbody tr').each(function (i, el) {
                        $(this).find('.rowcheckbox').prop("checked", false);
                        $(this).removeClass('selected');
                    });
                }
            });
        });
    </script>
@stop

@section('footer_ext')
    @parent
    <div class="modal fade" id="addipcli-modal" >
        <div class="modal-dialog">
            <div class="modal-content">
                <form role="form" id="form-addipcli-modal" method="post" class="form-horizontal form-groups-bordered" enctype="multipart/form-data">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Add IP</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Account IP</label>
                                    <div class="col-sm-9">
                                        <textarea name="AccountIPCLI" class="form-control autogrow"></textarea>
                                        * please Add only 1 IP at a time.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" data-loading-text = "Loading..."  class="btn btn-primary btn-sm btn-icon icon-left">
                            <i class="entypo-floppy"></i>
                            Add
                        </button>
                        <button  type="button" class="btn btn-danger btn-sm btn-icon icon-left" data-dismiss="modal">
                            <i class="entypo-cancel"></i>
                            Close
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-ip-modal" >
        <div class="modal-dialog">
            <div class="modal-content">
                <form role="form" id="form-ip-confirm-modal" method="post" class="form-horizontal form-groups-bordered" enctype="multipart/form-data">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Delete Ips</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">Date</label>
                                    <div class="col-sm-9">
                                        <input type="text" value="{{date('Y-m-d')}}" name="Closingdate" id="Closingdate" class="form-control datepicker" data-date-format="yyyy-mm-dd" placeholder="">
                                    </div>
                                    <div class="col-sm-3"></div>
                                    <div class="col-sm-3"></div>
                                    <div class="col-sm-9">This is the date when you deleted IP against this account from the switch</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" data-loading-text = "Loading..."  class="btn btn-primary btn-sm btn-icon icon-left">
                            <i class="entypo-floppy"></i>
                            Delete
                        </button>
                        <button  type="button" class="btn btn-danger btn-sm btn-icon icon-left" data-dismiss="modal">
                            <i class="entypo-cancel"></i>
                            Close
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop