@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-6 col-sm-6 col-xs-12">
            <div class="x_panel">
              <div class="x_title">
                <h2><i class="fa fa-align-left"></i> Server Details</h2>
               
                <div class="clearfix"></div>
              </div>
              <div class="x_content">

                <!-- start accordion bQshRCMn8aAm -->
                <div class="accordion" id="accordion1" role="tablist" aria-multiselectable="true">
                  @foreach($servers as $server_row)
                  <div class="panel">
                    <a class="panel-heading" style="background-color: #e5f3e5;" role="tab" id="headingOne{{ $server_row->id }}" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne{{ $server_row->id }}" aria-expanded="@if($server_row->id == 1){{ 'true' }}@else {{ 'false' }}@endif" aria-controls="collapse{{ $server_row->id }}">
                      <h4 class="panel-title">{{ $server_row->friendly_name }} #{{ $server_row->id }} {{ $server_row->public_ip_address }} </h4>
                    </a>
                    <div id="collapseOne{{ $server_row->id }}" class="panel-collapse collapse @if($server_row->id == 1){{ 'in' }}@else {{ '' }}@endif" role="tabpanel" aria-labelledby="heading{{ $server_row->id }}">
                      <div class="panel-body">
                        <div class="we">
                            <div class="col-md-6 passwordDiv">
                              <input type="text" class="form-control serverPassword" readonly="" value="{{ $server_row->root_password or 'no password found' }}" name="">
                            </div>
                            <input type="hidden" name="" class="serverID" value="{{ $server_row->id }}">
                            @if($server_row->root_password !== null)
                            <button class="btn btn-sm btn-primary serverPasswordBtn" title="click to descript password"><i class="fa fa-eye"></i></button>
                            @endif
                        </div>
                        <div class="clearfix"></div>
                      <h4>Direct Connections</h4> 
                      <a href="{!! url('infrastructure/createdirect', $server_row->id) !!}" class="btn btn-primary btn-sm pull-right"><i class="fa fa-plus-square"></i> New</a>
                      <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Partner Name</th>
                          <th>Connection</th>
                          <th>IP/Port</th>
                          <th>Domain</th>
                          <th>Peer</th>
                          <th>VPN Form</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        @if($server_row->direct_connections_info)
                          @foreach($server_row->direct_connections_info as $row)
                          <tr>
                              <th scope="row">{{ $row->id }}</th>
                              <td>{{ $row->direct_partner }}</td>
                              <td>{{ $row->connection_type }}</td>
                              <td>{{ $row->main_ip_address }}:{{ $row->port }} </td>
                              <td>{{ $row->domain_name }}</td>
                              
                              <td>{{ $row->vpn_peer_ip }}</td>
                              <th>@if($row->connection_document) <i class="fa fa-paperclip"></i> @else {{ 'N/A' }} @endif</th>
                              <td>
                                  <a href="{!! url('infrastructure/editdirect', $row->id) !!}" class=""><i class="fa fa-edit"></i> </a> 
                                  <!-- <a href="" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> </a> -->
                              </td>
                          </tr>
                          @endforeach
                        @else
                          <tr>
                            <td colspan="8">No records</td>
                          </tr>
                        @endif
                      </tbody>
                    </table>
                        </div>
                    </div>
                  </div>
                  @endforeach
                </div>
                <!-- end of accordion -->
              </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <h2><i class="fa fa-server"></i> Architectural Overview </h2>
            
            <div class="clearfix"></div>
          </div>
          <div class="x_content">


            <div class="well">
              <p>CLICK VPN PEER IP ADDRESS</p>
              <p>216.55.137.19</p>
            </div>

            <div class="" id="" role="" >
              <img src="{!! url('public/assets/img/overview.jpg') !!}" alt="server overview">
            </div>
            



          </div>
        </div>
        </div>
    </div>  
</div>
 
@endsection
@section('javascript')
<script>
  $(document).ready(function(){
    $('.serverPasswordBtn').click(function(){
      let serverIDD = $(this).siblings('.serverID').val();
      let passwordInput = $(this).siblings().children('.serverPassword');
        $.ajax({
          type: "GET",
          data: { id: serverIDD },
          url: base_url + "/infrastructure/revealpassword/" + serverIDD,
          success: function(data){
              $(passwordInput).val(data.password);
          }
        });
    });


  });
    
</script>
@endsection