@extends('layouts.master')
  @section('page_title')
      @if(isset($page_title))
          {{ $page_title }}
      @endif
  @endsection
@section('css')
@endsection
@section('content')
@include('vpn.partials.phases_show')
<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 Config List</li>
        </ol>
      </div>
      <div class="title_rightP">
          <div class="row">
            <form method="GET" action="">
              <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search" style="margin-top: -2px;">
                <div class="input-group">
                  <input type="text" name="keyword" class="form-control" id="search" placeholder="Keyword here...">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-primary" style="color: #fff;" type="button">Go!</button>
                  </span>
                </div>
              </div>
            </form>
          </div>
          <div class="row">
              <div class="col-sm-12">
                <div class="pull-right"></div>
              </div>
          </div>
        </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 Configs | <span class="green"><em> <b> Click Peer IP : 216.55.137.19 </b></em> </span> </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>Encrypted Domain(ACL)</th>
                          <th style="width: 20%">Actions</th>
                        </tr>
                      </thead>
                      <tbody>

                        
                      </tbody>
                    </table>
              </div>
            </div>
        </div>
        
    </div>  
</div>

@endsection

@section('javascript')
  <script type="text/javascript">
  $(document).ready(function(){
    
    console.log('heere at the wall');
    $('#search').on('keyup', function(){
      console.log('clicked');
      search();
    });
    // var pop = keyword = $('#search').val();
    // console.log(pop == '');
    search();

    function search(){
      var keyword = $('#search').val();
      console.log(keyword);
      // if (keyword == '') {

      // }
      $.post('{{ url("infrastructure/vpn/raw") }}',{
        _token: $('meta[name="csrf-token"]').attr('content'),
        keyword:keyword
      },
      function(data){
        table_post_row(data);
        console.log(data);
      });
    }

    // table row with ajax
    function table_post_row(result){
      let htmlView = '';
      if(result.data.length <= 0){
        htmlView += `
         <tr>
            <td colspan="6">No data.</td>
        </tr>`;
      }
      for(let i = 0; i < result.data.length; i++){
        let theVpnDevice = result.data[i].vpn_device == null ? 'N/A' : result.data[i].vpn_device;
      htmlView += `
            <tr>
                <td>`+ (i+1) +`</td>
                <td><a>` + result.data[i].mnoName + `</a><br />                
                <small class="text-success"><u>Peer : ` + result.data[i].remote_peer_ip + `</u></small> <br>
                <small>`+ theVpnDevice + `</small>
                </td>
                <td>
                <ul class="list">
                  <li> <b>Local ACL </b> : ` + result.data[i].local_access_control_list + `</li>
                  <li><b>Remote ACL </b> : ` + result.data[i].partner_access_control_list + `</li>
                </ul>
                </td>      
                <td>
                  <button class="btn btn-warning btn-xs viewConfigsBtn""><i class="fa fa-eye"></i> View</button>
                  <input type="hidden" name="vpn_list_id" class="vpnListId" value="`+ result.data[i].id + `">
                  <a href="" class="btn btn-info btn-xs"` + base_url + `/infrastructure/vpn/edit/`+result.data[i].id+`/edit"><i class="fa fa-edit"></i> Edit</a>
                </td>
            </tr>`;
      }
      $('tbody').html(htmlView);
    }
    $(document).on('click', '.viewConfigsBtn', function(ckevt){
    // $('.viewConfigsBtn').click(function(ckevt){
      ckevt.preventDefault();
      var vpnListIDD = $(this).siblings('.vpnListId').val();

      console.log('hipnotized at : ' + vpnListIDD);




      $.ajax({
        type: "GET",
        url: base_url + '/infrastructure/vpn/get_phases/' + vpnListIDD,
        processData: false,
        contentType: false,
        async: false,
        success: function (data){
          console.log(data);
          if (data.code === 1) {
            // console.log(theIDD);
            // $('#paymentIdEdit').val(theIDD);
            // $('#financeServicesEdit').val(data.services_arr).change();
            // $('#invoiceNumberEdit').val(data.result.invoice_number);
            // $('#invoiceAmountEdit').val(data.result.invoice_amount);
            // $('#invoiceDateEdit').val(data.result.invoice_date);
            // $('#financeShortCodeEdit').val(data.result.short_code);
            // $('#invoiceStatusEdit').val(data.result.invoice_status).change();
            // $('#remarksEdit').val(data.result.remarks);
            $('#phasesShowModal').modal('show');
          }
          else if (data.code > 1) {
            $.alert({
                title: 'Alert!',
                content: data.msg,
            });
          }
          else {
            $.alert({
                title: 'Alert!',
                content: 'Your request could not be handled. Try again !',
            });

          }
        }
      });
    });

  });
  </script>
@endsection