@extends('layouts.app')

@section('name_gesto','SFTP Connections')
  
@section('buttons_texts','SFTP')
@section('buttons_head')
  <button class="btn btn-secondary"  autocomplete="off" data-toggle="modal" data-target="#listConections"  >   Listado @yield('buttons_texts')</button>
                         
  <button class="btn btn-dark"  autocomplete="off" data-toggle="modal" data-target="#uploadConection" >  Upload files</button>


  <button class="btn btn-info"  autocomplete="off" data-toggle="modal" data-target="#createConections"> Crear nueva conexion</button>

  <button class="btn btn-warning" id="close_session_ftp"> Cerrar conexion</button>

  <button class="btn btn-info" autocomplete="off" data-toggle="modal" data-target="#editConnection">Editar </button>
@endsection
@section('content')
  <style>
    #term_demo{
      border-radius: 5px;
      border-top: 19px solid #9d9bb5;
    }
  </style>
<div class="container-fluid">
    <div class="row justify-content-center">

        <div class="col-md-6">
          @include('server_html')
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><div class="row">
                    <div class="col-6">
                      Conexion actual
                    </div>
                    <div class="col-6 text-right">
                        <button class="btn btn-primary btn-sm btn_server_reload" >  Reload</button>
                        <button class="btn btn-success btn-sm"  autocomplete="off" data-toggle="modal" data-target="#createFolder" >  Crear Carpeta</button>

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

                <div class="card-body card-tad" id="droppable">
                  <div class="response_md_content"  style="display: none;">
                    <div class="texto instructivo">
                      <h2>Cargando espere por favor....</h2>

                    </div>
                  </div>
                   <div class="dir_actual"> </div>
                   <input class="form-control " id="myInput" onkeyup="search();" type="text" placeholder="Search..">
                   <input type="hidden"  id="dir_actual_input" value="">
                   <input type="hidden" name="dir_actual" id="dir_change_input" value="">
                   <input type="hidden"  id="connection_session_input" value="">
                   <table class="table table-conection table-hover order-table table-sm" id="table_ftp_search">
                    <thead>
                      <tr>
                        <!--th scope="col"></th-->
                        <th scope="col">Folder</th>
                        <th scope="col">Size</th>
                        <th scope="col">Date</th>
                        <th scope="col"></th>
                      </tr>
                    </thead>
                    <tbody class="conection-list">

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

<!--created Sftp conections-->
<div class="modal fade" id="createConections" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crear nueva conexion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="response-data">
          
        </div>
        <form action="{{url('save_sftp')}}" onsubmit="saveconection(this); return false">
          <input type="hidden" name="users_id" value="{{Auth::id()}}">
           <div class="row mb-4">
                <div class="col-12">
                    <input type="text" class="form-control" name="description" placeholder="SFTP name of description ">
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-12">
                    <input type="text" class="form-control" name="sftp_host" placeholder="SFTP HOST ">
                </div>
            </div>
             <div class="row mb-4">
                <div class="col-12">
                    <input type="text" class="form-control" name="sftp_user" placeholder="SFTP USERNAME ">
                </div>
            </div>
             <div class="row mb-4">
                <div class="col-12">
                    <input type="text" class="form-control" name="sftp_pass" placeholder="SFTP PASS ">
                </div>
            </div>
             <div class="row mb-4">
                <div class="col-12">
                    <input type="text" class="form-control" name="sftp_port" placeholder="SFTP PORT">
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-12 text-center">
                    <button class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!--List ftp conections-->
<div class="modal fade" id="listConections" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Elegir conexion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       <table class="table table-bordered datatable" style="width: 100%;">
        <thead>
          <tr>
            <th scope="col">id</th>
            <th scope="col">Description</th>
            <th scope="col">SFTP host</th>
            <th scope="col">SFTP USER</th>
            <th scope="col">Acciones</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!--List ftp conections-->
<div class="modal fade" id="uploadConection" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Subir archivo sftp</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info">
           Subir en  <span class="dir_files"></span>
        </div>
        <form action="uploadftp" onsubmit="save_file_ftp(this); return false">
            <input type="file" name="ftp_file" id="ftp_forminput" class="form-control" >
            <input type="hidden" name="id_ftpform"  id="id_ftpform">
            <br>
            <div class="row">
              <div class="col-12 text-center">
                <button class="btn btn-primary">Guardar</button>
              </div>
              
            </div>
            <br>
            <div class="row">
              <div class="col-12 text-center">
                  <b>Extraer zip y subir :</b> <input type="checkbox" name="check_zip" id="check_zip">
              </div>
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!--List ftp conections-->
<div class="modal fade" id="editConnection" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Editar archivo Sftp <span class="file_editing"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="height: 400px;">
        <div class="row">
          <input type="hidden" id="input_file_editing">
          <input type="hidden" id="input_folder_editing">
          <button class="btn btn-primary editing_button_files"  style="border-radius: 0px;" data-type="save" data-save="save_local">Guardar</button> 
          <button class="btn btn-success editing_button_files editing_save_submit"  style="border-radius: 0px;" data-type="save_submit" data-save="save_server">Guardar y Subir</button> 
          <button class="btn btn-warning close_editing_files"  style="border-radius: 0px;">Cerrar</button> 
        </div>
        <div class="reload"></div>
        <div id="editor" style="margin-top: 54px; "></div>

      </div>
    </div>
  </div>
</div>
<!--create folder sfto conection-->
<div class="modal fade" id="createFolder" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crear carpeta </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info">
           Crear carpeta en la ruta:  <span class="dir_files"></span>
        </div>
        <form action="{{ url('createfolder_sftp') }}" onsubmit="createfolder(this); return false">
            <input type="text" name="folder" class="form-control" >
            <input type="hidden" name="id"  class="id_connection">
            <input type="hidden" name="ruta"  class="ruta_connection" value="">
            <br>
            <div class="row">
              <div class="col-12 text-center">
                <button class="btn btn-primary">Guardar</button>
              </div>
              
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!--terminal conection-->
<div class="modal fade" id="conectionTerminal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog  modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Open terminal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="term_demo"></div>
      </div>
    </div>
  </div>
</div>

<div class="response"></div>
@endsection
@section('scripts')
  <script src="{{ asset('js/functions_views/homesftp.js') }}"></script>

  <script>
    var myWorker = new Worker("{{ asset('js/workers/sftp_template.js') }}"); // Ruta del archivo JavaScript
    let url_upload = '{{ url("uploadsftp")}}', 
    url_drag_submit = '{{url("uploadsftp_drag")}}',
    url_connect='{{ url("connectsftp")}}', 
    url_download='{{url("downloadsftp")}}',
    url_changeftp='{{url("changesftp")}}',
    url_delete = '{{url("deletesftp")}}',
    url_editing_file = '{{url("editing_file_sftp")}}',
    url_ssh2 = '{{ url("ssh2_exec") }}';
    let columns = [
      {data: 'id'},
      {data: 'description'},
      {data: 'sftp_host'},
      {data: 'sftp_user'},
      {data: 'action'},
    ];
    window.addEventListener('load', function() {
      //$('#connection_session_input').val('{{ session("connect_ftpid") }}');

      var table = $('.datatable').DataTable({
        "processing": true,
        "serverSide": true,
        "serverMethod": 'post',
        "ajax":{'url':'{{url("get_datatable_sftp")}}', 
                "data":function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                    d.action = 'showtable';
                },
                "dataSrc": function ( json ) {
                    return json.data;
                }  
                
        } ,
        "columns": columns,
        'createdRow': function( row, data, dataIndex ) {
            $(row).attr( 'id','codenv'+data.id );
          },
           "language": {
            "info": "Pagina _PAGE_ de _PAGES_",
        },
      });
      directory_list();

      //alert(localStorage.getItem('id_sftp'));
      if (localStorage.getItem('id_connection_sftp') !== null) {
        connect();
      }else{
        $('.editing_save_submit').hide(100);
      }
      $( ".btn_server_reload" ).click(function() {
        connect();
      });
    })  
</script>

@endsection