@extends('layouts.master')
@section('page_title')
    @if(isset($page_title))
        {{ $page_title }}
    @endif
@endsection
@section('css')
@endsection('css')
@section('content')
<div class="">
    <div class="page-title">
      <div class="title_left" style="width:800px !important;">
        <ol class="breadcrumb">
          <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
          <!-- <li><a href="{!! url('infrastructure/vpn') !!}">VPN List</a></li> -->
          <li class="active">VPN List</li>
        </ol>
      </div>
    </div>
    <div class="x_content">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
              <div class="x_title">
                <h2><i class="fa fa-shield"></i> VPN Configurations</h2>
                <div class="pull-right">
                <a class="btn btn-primary btn-sm" href="{!! url('infrastructure/vpn-create') !!}"><i class="fa fa-plus-circle"></i> New Config
                </a>
            </div>
               
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <div id="vpnListTableP"></div>
                <table class="table table-striped projects">
                      <thead>
                        <tr>
                          <th style="width: 1%">#</th>
                          <th style="width: 20%">Partner Name</th>
                          <th>Partner ACL</th>
                          <th style="width: 20%">Edit</th>
                        </tr>
                      </thead>
                      <tbody>
                        @if ($vpn_list->isEmpty())
                        <tr>
                          <td class="" colspan="6">No Records found</td>
                        </tr>
                        @else
                        <?php $counter = 1; ?>
                            @foreach ($vpn_list as $row)
                                <tr>
                                  <td>{{ $counter }}</td>
                                  <td>
                                    <a>{{ $row->mno_info->name }} ({{ $row->mno_info->country }})</a>
                                    <br />
                                    <small class="text-success"><u>Peer : {{ $row->remote_peer_ip }}</u></small> 
                                    <br>
                                    <small>{{ $row->vpn_device }}</small>
                                  </td>
                                  <td>
                                    <ul class="list">
                                      <li>
                                        <b>Local ACL </b> : {{ $row->local_access_control_list }}
                                      </li>
                                      <li>
                                        <b>Remote ACL </b> : {{ $row->partner_access_control_list }}
                                      </li>
                                    </ul>
                                  </td>
                                  <td>
                                    <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                                    <!-- <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a> -->
                                  </td>
                                </tr>
                                <?php $counter++; ?>
                            @endforeach
                        @endif
                      </tbody>
                    </table>
                    {{ $vpn_list->links() }} <br>
                    Page : {{ $vpn_list->currentPage() }} of {{ $vpn_list->lastPage() }} |
                    Total Records : <span id="totalRecords">{{ $vpn_list->total() }}</span>
              </div>
            </div>
        </div>
        
    </div>  
</div>
 
@endsection
@section('javascript')
<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    // function link(cell, formatterParams){
    //   var url = cell.getValue();
    //   var rowID = cell.getData().id
    //   return "<a href='"+ base_url + "/vpnlist/"+rowID+"/edit' class='btn btn-link'>"+url+"</a>";
    // }
    // function cellDesign (cell, formatterParams){
    //   var value = cell.getValue();
    //   return "<span style='color:#54B4D3; font-weight:bold;'>" + value + "</span>";
    // }
    // function statusDesign (cell, formatterParams){
    //   var value = cell.getValue();
    //   if(value === 'Approved'){
    //         return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
    //   }
    //   else{
    //         return "<span style='color:#E4A11B;'>" + value + "</span>";
    //   }
    // }
    // var table = new Tabulator("#vpnListTable", {
    //     ajaxURL: "senderids/all",
    //     paginationSize: 15,
    //     layout: "fitColumns",
    //     pagination: "remote",
    //     selectable: false,
    //     printAsHtml: true,
    //     ajaxLoaderLoading: $('#logo_spinner').html(),
    //     columns: [
    //         {
    //             title: "Partner",
    //             field: "remote_partner_name",
    //             sorter: "string",
    //             formatter:link,
    //         },
    //         {
    //             title: "VPN Device",
    //             field: "vpn_device",
    //             sorter: "string",
    //         },
    //         {
    //             title: "Remote Peer IP",
    //             field: "remote_peer_ip",
    //             sorter: "string",
    //             formatter: cellDesign,
    //         },
    //         {
    //             title: "Remote IPs",
    //             field: "remote_ips",
    //             sorter: "string",
    //             formatter: statusDesign,
    //         },
    //         {
    //             title: "Local IPs",
    //             field: "local_ips",
    //             sorter: "string",
    //         },
            
    //         {
    //             title: "Go-Live Date",
    //             field: "go_live_date",
    //             sorter: "string",
    //         },
    //         {
    //             title: "Created By",
    //             field: "createdBy",
    //             sorter: "string",
    //         },
    //         {
    //             title: "Last Modified By",
    //             field: "modifiedBy",
    //             sorter: "string",
    //         }
    //     ],

    //     rowClick:function(e, row){
    //     var userID = row.getData().id;
    //     //$('#userEditModal').modal('show');
    //     },
    // });

    // $('#keywordField').on('keyup', function(){
    //   console.log('up');
    //   var keyword = $(this).val();
    //   table.setData("senderids/all?keyword=" + keyword);

    // });


    // 172.17.1.40, 172.17.1.13, 172.17.1.15, 172.17.1.39, 172.17.1.41, 172.17.1.42, 10.3.104.135, 172.17.1.42:2775, 172.17.12.26

});

</script>
@endsection