<?php
$id = $pagina[1];
$dia = 1;

$queryValidate = mysqli_query($connect, "SELECT * FROM Retos WHERE id_asistente = '" . $_SESSION['id_user'] . "' AND reto = '" . $id . "' AND tipo_juego = 1 ");
if ($queryValidate->num_rows > 0) {
  echo '<script> window.location = "' . $url . '/concursos/1"; </script>';
}


?>

<style>
  body {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* background-image: url(<?php echo $url; ?>/img/bg_juegos.jpg); */
    background-color: #939597;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

<style>
  /*Downloaded from https://www.codeseek.co/arandaschimpf/crucigrama-vRgKZP */
  .container {
    margin-top: 3vh;
  }

  .table-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  table {
    border-collapse: collapse;
    font-size: 18px;
  }

  td {
    width: 36px;
    height: 36px;
    border: 2px solid #ffffff;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    font-family: arial;
  }

  td.empty {
    background: #ff9f55;
    background: rgba(0, 0, 0, 0);
    border: 0;
  }

  td.selected {
    background: rgb(0 0 0 / 57%);
  }

  td.start {
    cursor: pointer;
  }

  td.start label {
    position: absolute;
    top: 0;
    left: 2px;
    text-align: left;
    font-size: 15px;
    color: #ffea00;
    font-weight: bold;
  }

  td.start:hover {
    background: #204d67;
  }

  td.start.selected:hover {
    background: #ddf;
  }

  .mensaje {
    position: absolute;
    color: white;
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    width: 50vw;
    z-index: 1000;
    background: #007eba;
  }

  .mensaje button {
    margin-top: 10px;
  }
</style>

<div class="col-md-12">

  <div class="container">

    <?php echo $rersp; ?>

    <div class="row">

      <div class="col-md-12" align="center">
        <h1 style="color: #ffffff;">CRUCIGRAMA</h1>

      </div>

      <div class="col-md-7" align="center" style="color: #ffffff;">


        <div id="app" class="container" @keyup.escape="selected = undefined">
          <div class="table-container" style="display:none;" v-show="true">
            <div class="timer">{{cronometro}}</div>
            <div class="mensaje" v-if="mensaje !== undefined">
              <div class="content">{{mensaje}}</div>
              <button @click="mensaje = undefined" class="btn btn-primary">OK</button>
            </div>
            <table>
              <tr v-for="(row, y) in matrix" :key="y">
                <td v-for="(cell, x) in row" :class="{empty: cell.empty, start: !!cell.start, selected: cell.words.includes(selected)}" @click="selectWord(cell.start)">
                  <label v-if="!!cell.start">{{cell.start}}</label>
                  {{cell.words.some(i => completed[i]) ? cell.letter : ' '}}
                </td>
              </tr>
            </table>
            <div v-if="selected !== undefined" style="text-align: center;">
              <p class="pista" v-if="pista">
                {{pista}}
              </p>
              <input v-model="answer" ref="input" @keyup.enter="corregir" />
              <button @click="corregir" class="btn btn-primary">Colocar</button>
              <button @click="solucion" class="btn btn-danger" style="display:none">Pista</button>
            </div>
            <hr>
            <button class="btn btn-primary" @click="finalizar" style="display: none">Finalizar</button>
          </div>
          <h3 v-show="false">Cargando....</h3>
        </div>
        <script src='https://unpkg.com/vue'></script>

        <div align="center" style="display: none" id="boton_volver">
          <a href="<?php echo $url; ?>/concursos/1">
            <button class="btn btn-primary btn-block" style="margin-top: 35px;">
              Volver
            </button>
          </a>
        </div>

      </div>


      <div class="col-md-5" align="left" style="color: #fff;">

        <p>Para completar el desafio solo debe dar click en el número y completar la palabras. Debe completar todas las palabra en el menor tiempo posible.</p>

        <h3>Horizontales</h3>
        <hr>

        <ul>
          <li>1. Nunca estaremos satisfechos y siempre buscaremos _________ para generar más valor.</li>
          <li>2. Astellas buscará mejorar el valor de la empresa de una manera ___________</li>
          <li>3. En nuestra filosofia, _________ es maximizar la creatividad a travez de la diversidad y comunicación  </li>
          <li>4. Foco y vision externa  es estar un paso adelante del mercado atentos al __________ cambiante del sector salud</li>
          <li>5. Un elemento importante de nuestra filofofía es… apoyar un estilo de vida ___________ en la gente de todo el mundo. </li>
          <li>7. Uno de nuestras principios es… ____________</li>
       </ul>




        <h3>Verticales</h3>
        <hr>
        <ul>
          <li>6.  En nuestra creencias… Nunca estaremos satisfechos y siempre buscaremos innovar para generar más valor… esta relacionada con la.. ___________ </li>
          <li>8. ¿Qué significa la abreviatura Trx utilizada en Astellas?</li>
        </ul>

      </div>

    </div>

  </div>

</div>

<script>
  /*Downloaded from https://www.codeseek.co/arandaschimpf/crucigrama-vRgKZP */
  // Arreglo de palabras indicando la posición de su inicio, su sentido (vertical u horizontal),
  // la palabra en cuestión y la pista que se presenta al usuario
  var correctas = 0;
  var total_segundos = 0;

  const palabras = [{
      pos: [6, 7],
      sentido: 0,
      palabra: 'innovar',
      pista: '1. Nunca estaremos satisfechos y siempre buscaremos _________ para generar más valor.'
    },
    {
      pos: [10, 16],
      sentido: 0,
      palabra: 'sostenible',
      pista: '2. Astellas buscará mejorar el valor de la empresa de una manera ___________'
    },
    {
      pos: [0, 1],
      sentido: 0,
      palabra: 'apertura',
      pista: '3. En nuestra filosofia, _________ es maximizar la creatividad a travez de la diversidad y comunicación '
    },
    {
      pos: [5, 3],
      sentido: 0,
      palabra: 'panorama',
      pista: '4. Foco y vision externa  es estar un paso adelante del mercado atentos al __________ cambiante del sector salud'
    },



    {
      pos: [2, 10],
      sentido: 0,
      palabra: 'saludable',
      pista: '5. Un elemento importante de nuestra filofofía es… apoyar un estilo de vida ___________ en la gente de todo el mundo.'
    },
    {
      pos: [6, 0],
      sentido: 1,
      palabra: 'creatividad',
      pista: '6.  En nuestra creencias… Nunca estaremos satisfechos y siempre buscaremos innovar para generar más valor… esta relacionada con la.. ___________ '
    },
    {
      pos: [11, 13],
      sentido: 0,
      palabra: 'integridad',
      pista: '7. Uno de nuestras principios es… ____________'
    },
    {
      pos: [12, 6],
      sentido: 1,
      palabra: 'trasplantes',
      pista: '8. ¿Qué significa la abreviatura Trx utilizada en Astellas?'
    },

  ]

  // Objeto default para celdas vacías de la grilla
  const empty = {
    start: false,
    letter: '',
    words: [],
    empty: true
  }

  new Vue({
    el: '#app',
    data() {
      return {
        // Arreglo de booleanos indicando si una palabra fue completada
        completed: Array(palabras.length).fill(false),
        // Entero indicando la palabra que fue seleccionada para completar
        selected: undefined,
        // String donde se guarda lo que ingresa el usuario
        answer: '',
        // Cantidad de veces que se solicitó una pista
        penalties: 0,
        // Temporizador en segundos desde el comienzo de la partida. Comienza en 5 minutos.
        timer: 60 * 5,
        // La tabla que será armada al inicio, conteniendo todas las celdas
        matrix: [],
        // Mensaje final a mostrar
        mensaje: undefined
      }
    },
    created() {
      // Creación de la tabla que contiene las celdas.
      const width = palabras.reduce((max, cur) =>
        Math.max(max, cur.pos[0] + (cur.sentido === 0 ? cur.palabra.length : 1)), 0)
      const height = palabras.reduce((max, cur) =>
        Math.max(max, cur.pos[1] + (cur.sentido === 1 ? cur.palabra.length : 1)), 0)
      let matrix = Array(height).fill(0).map(() => Array(width).fill(null).map(() => empty))
      palabras.forEach((palabra, index) => {
        const [x, y] = palabra.pos
        palabra.palabra.split('').forEach((l, i) => {
          let cell = matrix[y + (palabra.sentido ? i : 0)][x + (palabra.sentido ? 0 : i)]
          if (cell === empty) {
            cell = matrix[y + (palabra.sentido ? i : 0)][x + (palabra.sentido ? 0 : i)] = {
              words: []
            }
          }
          cell.empty = false
          cell.words.push(index)
          if (i === 0) {
            cell.start = index + 1
          }
          cell.letter = l
        })
      })
      this.matrix = matrix

      // Control del temporizador y disparador del evento final cuando éste se acabe
      this.$options.interval = setInterval(() => {

        this.timer--;
        total_segundos++;

        if (this.timer <= 0) {
          //clearInterval(this.$options.interval)
          this.finalizar();

          $("#modal_general").modal("show");
          $("#modal_body").html("El tiempo ha finalizado.");
        }

      }, 1000)
    },
    computed: {
      // Contiene la pista de la palabra seleccionada
      pista() {
        if (this.selected === undefined) return undefined
        return `${palabras[this.selected].sentido ? 'Vertical' : 'Horizontal'} ${this.selected + 1}: ${palabras[this.selected].pista}`
      },
      // Formato a mostrar del cronómetro
      cronometro() {
        const minutes = Math.floor(this.timer / 60).toString().padStart(2, '0')
        const seconds = Math.floor(this.timer % 60).toString().padStart(2, '0')
        return `${minutes}:${seconds}`
      }
    },
    methods: {
      selectWord(index) {
        if (index > 0) {
          this.selected = index - 1
          this.answer = ''
          setTimeout(() => this.$refs.input.focus(), 50)
        }
      },
      // Se fija si la palabra ingresada es correcta y de ser así, modifica el arreglo de palabras completas
      corregir() {
        const solucion = palabras[this.selected].palabra
        const answer = this.answer.toLowerCase()
        if (answer === solucion) {
          this.completed[this.selected] = true
          this.selected = undefined;
          correctas++;

          if (correctas >= palabras.length) {
            $("#modal_general").modal("show");
            $("#modal_body").html("¡Felicitaciones!, ha completado el juego.");
            this.finalizar();
          }

        } else {
          $("#modal_general").modal("show");
          $("#modal_body").html("¡Respuesta Incorrecta!<br>Intente de nuevo");
        }
      },
      // Agrega una letra correcta más a la respuesta actual
      solucion() {
        const solucion = palabras[this.selected].palabra
        const answer = this.answer.toLowerCase()
        if (answer === solucion) {
          return
        }
        if (answer !== solucion.slice(0, answer.length)) {
          this.penalties++
          this.answer = ''
        }
        this.answer = solucion.slice(0, this.answer.length + 1)
        this.penalties++
      },
      // Calcula el puntaje final del jugador en base a las respuestas correctas y las penalidades por pistas
      finalizar() {
        const total = this.completed.reduce((total, current, i) => total + palabras[i].palabra.length, 0)
        const completo = this.completed.reduce((total, current, i) => current ? total + palabras[i].palabra.length : total, 0)
        const tempScore = Math.ceil(100 * completo / total)
        const finalScore = Math.max(tempScore - this.penalties, 0)
        if (tempScore < 100) {
          this.penalties++
        }
        /*this.mensaje = `
          Tu puntuación es ${finalScore}%.
        `*/
        clearInterval(this.$options.interval);
        $("#boton_volver").show();
        Guardar_Puntaje(0, 0, finalScore);


        console.log(total);
      }
    }
  })
</script>

<script>
  var api = '<?php echo $url; ?>/api/';

  function Guardar_Puntaje(acierto, numIntentos, porcentaje) {
    data = {
      id_user: <?php echo $_SESSION['id_user']; ?>,
      tiempo: total_segundos,
      porcentaje: porcentaje,
      reto: <?php echo $id; ?>,
      tipo_juego: 1,
      dia: <?php echo $dia; ?>
    };

    jQuery.ajax({
        url: api + "guardar_puntaje.php",
        type: 'post',
        data: data,
      }).done(function(resp) {
        $("#xscript").html(resp);
      })
      .fail(function(resp) {
        console.log(resp);
      })
      .always(function(resp) {});

  }
</script>