@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 class="active">Servers</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-align-left"></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="">
                    <?php $counter = 1; ?>
                    @foreach($vpn_list as $row)
                    @if($row->partner_vpn_form == null)
                        <?php continue; ?>
                    @endif
                        <p class="vpnListFile<?php echo $counter;  ?> ">
                            {{ url('public/vpn_form_files/' .  $row->partner_vpn_form) }}
                        </p>
                        <input type="file" name="vpn_list_file" value="<?php url('public/vpn_form_files/' .  $row->partner_vpn_form); ?>">
                        <?php $counter++; ?>
                    @endforeach
                </div>
              </div>
            </div>
        </div>
        
    </div>  
</div>
 
@endsection
@section('javascript')
<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
<script src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    
    var reader = new FileReader();
    var targetFile = $('#vpnListFile1')
    reader.readAsArrayBuffer(targetFile);

    reader.onload = function(event){

        var data = new Uint8Array(reader.result);

        var work_book = XLSX.read(data, {type:'array'});

        var sheet_name = work_book.SheetNames;

        var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

        if(sheet_data.length > 0)
        {
            var table_output = '<table class="table table-striped table-bordered">';

            for(var row = 0; row < sheet_data.length; row++)
            {

                table_output += '<tr>';

                for(var cell = 0; cell < sheet_data[row].length; cell++)
                {

                    if(row == 0)
                    {

                        table_output += '<th>'+sheet_data[row][cell]+'</th>';

                    }
                    else
                    {

                        table_output += '<td>'+sheet_data[row][cell]+'</td>';

                    }

                }

                table_output += '</tr>';

            }

            table_output += '</table>';

            document.getElementById('excel_data').innerHTML = table_output;
        }

        excel_file.value = '';

    }

});

</script>
@endsection