<?php
/*$file .= "echo 'Hello World!';\n";
$file .= "echo 'Hello World!';\n";
$file .= "echo 'Hello World!';\n";
$file .= "echo 'Hello World!';\n";
$file .= "echo 'Hello World!';\n";
$file .= "echo 'Hello World!';\n";
$textarea = htmlspecialchars(file_get_contents("code-editable.php")); 

$textarea.= htmlspecialchars($file);
//echo htmlspecialchars(file_get_contents("code-editable.php")); */
?>

<!DOCTYPE html>
<html>
<head>
        <title>Editor</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/monokai.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/keymap/sublime.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/clike/clike.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/php/php.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/selection/active-line.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js'></script>
    <style type="text/css">
        .CodeMirror{
           height: 80vh;    font-size: 0.8rem;
        }
      li , a{
      list-style-type: none;
      text-decoration: none;
      color: grey;
      font-size: 14px;
      }
      li.file:before {
      content: "\f15b";
      font-family: "Font Awesome 5 Free";
      display: inline-block;
      width: 20px;
      margin-left: -20px;
      }
      li.folder:before {
      content: "\f07b";
      font-family: "Font Awesome 5 Free";
      display: inline-block;
      width: 20px;
      margin-left: -20px;
      }
      .delete{
          border: 1px solid;
          padding: 0px 6px 2px;
          border-radius: 10px;
          background: darkgrey;
          position: relative;
          top: -4px;
          font-size: 10px;
      }
    </style>
</head>

<body>
<button class="btn btn-dark btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Files</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Files</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
<?php

// Obtener la ruta actual del directorio
$currentDir = isset($_GET['dir']) ? $_GET['dir'] : dirname(__DIR__);//$_SERVER['DOCUMENT_ROOT'];

// Carpeta donde se encuentran los archivos
$directory = realpath($currentDir) . '/';

// Verificar si se ha seleccionado un archivo
if (isset($_GET['archivo'])) {
  // Obtener el nombre del archivo
  $filename = $_GET['archivo'];

  // Verificar que el archivo existe
  if (file_exists($directory . $filename)) {
    // Leer el contenido del archivo
    $textarea = htmlspecialchars(file_get_contents($directory . $filename));
  }

} 

  // Obtener el directorio padre
  $parentDir = realpath($directory . '..') . '/';
  
  // Mostrar enlace para regresar al directorio padre
  echo '<p><a href="?dir=' . $parentDir . '">Regresar</a></p>';

    // Formulario para crear una nueva carpeta
  echo '<form method="post" action="">
          <input type="text" name="new_folder_name" placeholder="Nombre de la nueva carpeta">
          <input type="submit" name="create_folder" value="Crear carpeta">
        </form>';
  echo '<hr>';

  // Listar los archivos y carpetas del directorio actual
  $files = array_diff(scandir($directory), array('..', '.'));
    // Definimos una función de comparación que ordena primero los directorios y luego los archivos
  function compare($a, $b) {
      if (is_dir($a) && !is_dir($b)) {
          return -1;
      } elseif (!is_dir($a) && is_dir($b)) {
          return 1;
      } else {
          return strnatcasecmp($a, $b); // orden alfabético insensible a mayúsculas
      }
  }

  // Ordenamos la lista de archivos y directorios
  usort($files, 'compare');
  echo '<ul>';
  foreach ($files as $file) {
    // Si es una carpeta, agregar un enlace para navegar a su contenido
    if (is_dir($directory . $file)) {
      echo '<li class="folder"><a href="?dir=' . realpath($directory . $file) . '"><strong>' . $file . '</strong></a></li>';
    }else {// Si es un archivo, agregar un enlace para abrirlo y un botón para eliminarlo
      if($file !='eliminar-archivo.php' && $file !='file-write.php') {
        echo '<li class="file"><a href="?dir=' . $currentDir . '&archivo=' . $file . '">' . $file . '</a> <span onclick="eliminarArchivo(\'' . $file . '\')" class="btn btn-sm delete">x</span></li>';
      }
    }
  }
  echo '</ul>';



  // Si se envió el formulario para crear la carpeta, crearla
  if (isset($_POST['create_folder']) && !empty($_POST['new_folder_name'])) {
    $newFolderName = $_POST['new_folder_name'];
    $newFolderPath = $directory . $newFolderName;

    if (!file_exists($newFolderPath)) {
      mkdir($newFolderPath, 0777, true);
      echo '<p>Carpeta creada exitosamente.</p>';
    } else {
      echo '<p>La carpeta ya existe.</p>';
    }
  }



?>

  </div>
</div>
    <input type="text" name="filename" value="<?= $_GET['archivo'] ?>">
    <label>Modulo</label>
    <select id="tap2module" name="tap2module" required>
      <option selected disabled value="">Seleccionar...</option>
      <?= $op2 ?>
    </select>
    <input type="button" id="create_wordflow" name="create_wordflow" value="Crear Wordflow">

    <textarea class="codemirror-textarea" id="ed_code"><?= $textarea; ?></textarea>
    <div class="app-row">
        <button class="btn btn-success btn-sm" id="run">Save</button>
        <button class="btn btn-dark btn-sm" id="refresh">Refresh</button>
    </div>

<div class="app-row">   
  <div id="result"></div>
  <div id="error"></div>
</div>  

</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</html>
<script type="text/javascript">
$(document).ready(function(){
        var codeEditorElement = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeEditorElement, {
        mode: "application/x-httpd-php",
        keyMap: "sublime",
        lineNumbers: true,
        matchBrackets: true,
        theme: "monokai",
        lineWiseCopyCut: true,
        undoDepth: 500
      });


        $(document).on('click', '#run', function(e){
                e.preventDefault();
                $("#error").html("").hide();
                var editorCode = editor.getValue();
              // Obtener el valor del parámetro dir de la URL
              const urlParams = new URLSearchParams(window.location.search);
              const dir = urlParams.get('dir');

              // Codificar el valor de dir antes de enviarlo en la petición AJAX
              const encodedDir = encodeURIComponent(dir);
                if(editorCode != ''){
                $.ajax({
                        url: 'editor/file-write.php',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            dir: encodedDir,
                            input:editorCode,
                            filename:document.querySelector('[name=filename]').value
                        },
                        success:function(response){
                          console.log(response)
                        },
                        complete:function(){
                                $.ajax({
                                        url: 'editor/code-editable.php',
                                        type: 'GET',
                                        success:function(response){
                                                console.log("response:  "+response);
                                                $("#result").html('Save...');

                                        },
                                        error:function(){
                                                console.log("error: "+response);
                                                }
                                        });     
                                }
                        });

                } else{
                        $("#error").html("Code should not be empty").show();
                }

        });


        $(document).on('click', '#refresh', function(e){
                e.preventDefault();
                $("#error").html("").hide();
                location.reload();
        });



        $(document).on('click', '#create_wordflow', function(e){
                var editorCode = editor.getValue();
            $.ajax({
              url: 'editor/create_wordflow.php',
              type: 'POST',
              data: {
                input: editorCode,
                filename: document.querySelector('[name=filename]').value,
                tap2module: document.querySelector('[name=tap2module]').value
                },
                success:function(response){
                  console.log("response:  "+response);
                  $("#result").html('Save...');
                  location.reload();

                },
                error:function(){
                    console.log("error: "+response);
                    }
              });
        });



}); 

function eliminarArchivo(nombreArchivo) {
var confirmDelete = prompt("¿Estás seguro de que deseas eliminar el archivo " + nombreArchivo + "? Escribir 'DELETE' para confirmar.");
  if (confirmDelete == "DELETE") {
    $.ajax({
      url: 'editor/eliminar-archivo.php',
      type: 'POST',
      data: {archivo: nombreArchivo},
      success: function(response) {
        console.log(response);
        alert('El archivo ha sido eliminado');
        location.reload();
      },
      error: function() {
        alert('Ocurrió un error al eliminar el archivo');
      }
    });
  }
}
</script>