@extends('layouts.app')
@section('title', __('Historial'))

@section('content')

<div class="preview_modal">
  <x-modal idModal="1" name="preview_modal">
    <div id="previewContainer" style="width: 100%; height: 600px; margin-top: 20px;">
      <iframe id="previewFrame" src="{{ $preview }}" style="width: 100%; height: 100%; border: none;"></iframe>
    </div>
  </x-modal>
</div>


<x-content>
  <div class="container-fluid history_section">

    <div class="contact_top pb_20">
      <h2>Historial</h2>
    </div>

    <div class="table_wrap table-container text-center">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Tipo</th>
            <th>Fecha</th>
            <th>Fichero</th>
            <th>Plantilla</th>
            <th>Preview</th>
            <th>Descargar</th>
            @if($isAdmin)
            <th>Log</th>
            @endif
          </tr>
        </thead>
        <tbody>
          @foreach($histories as $history)

          <div class="descargar_modal">
            <x-modal idModal="{{ $history->id }}" name="descargar_modal">
              @include('includes.descargarModal', ['history' => $history])
            </x-modal>
          </div>

          <div class="custom_modal">
            <x-modal idModal="{{ $history->id }}" name="custom_modal" class="modal-dialog-popup">
              <div class="text-start">{!! $history->log_content !!}</div>
            </x-modal>
          </div>

          <tr>

            <td class="text-center">{{$history->id}}</td>

            @if($history->type == 2)
            <td class="text-center">Preguntas</td>
            @else
						<td class="text-center">
							Virtualización 
							@if ($history->tipodevirtualizacion == 1)
								HTML
							@elseif ($history->tipodevirtualizacion == 2)
								SCORM
							@endif
						</td>

            @endif

            <td class="text-center">{{$history->created_at}}</td>

            <td class="text-center" title="{{ str_replace('_', ' ', $history->name) }}">
              {{ Str::limit(str_replace('_', ' ', $history->name), 30) }}
            </td>

            <td class="text-center">{{$history->templateName}}</td>

            <td>
              @if($history->pathZip != "" && $history->type != 2)
              @if(file_exists($history->pathZip) && $history->tipodevirtualizacion == '1')
              <a class="button" href="javascript:void(0)" onclick="getPreviewUrl('{{ route('history.preview', ['id' => $history->id]) }}')">
                PREVIEW
              </a>
              @endif
              @endif

            </td>

            @if($history->pathZip != "" && strpos($history->status, 'ERROR') === false)
            <td>
              @if(file_exists($history->pathZip))
              <a onclick="showModal('descargar_modal', {{$history->id}})" class="button">Descargar</a>
              @else
              <span class="button" style="background: #6c757d">Caducado</span>
              @endif
            </td>
            @else
            @if(strpos($history->status, 'ERROR') === false)
            <td><a onclick="showModal('descargar_modal', {{$history->id}})" class="button">{{$history->status}}</a></td>
            @else
            <td><a onclick="showModal('descargar_modal', {{$history->id}})" class="button" style="background: #dc3545"> Reintentar </a></td>
            @endif
            @endif

            @if($isAdmin)
            <td class="text-center"><a class="button" onclick="showModal('custom_modal', {{$history->id}})">LOG</a></td>
            @endif

          </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    <div class="pagination_wrap d-flex justify-content-center w-100">
      <div class="pagination d-flex align-items-center">
        {{-- Flecha izquierda --}}
        @if ($histories->onFirstPage())
        <span class="pagination_arrow disabled">
          <img src="./img/arrow_left.svg" alt="">
        </span>
        @else
        <a href="{{ $histories->previousPageUrl() }}" class="pagination_arrow">
          <img src="./img/arrow_left.svg" alt="">
        </a>
        @endif

        <div class="numbers">
          @if ($histories->onFirstPage())
          <span>Anterior</span>
          @else
          <a href="{{ $histories->previousPageUrl() }}">Anterior</a>
          @endif

          @foreach ($histories->links()->elements as $element)
          @if (is_string($element))
          <span>{{ $element }}</span>
          @endif

          @if (is_array($element))
          @foreach ($element as $page => $url)
          @if ($page == $histories->currentPage())
          <a href="#" class="active">{{ $page }}</a>
          @else
          <a href="{{ $url }}">{{ $page }}</a>
          @endif
          @endforeach
          @endif
          @endforeach

          @if ($histories->hasMorePages())
          <a href="{{ $histories->nextPageUrl() }}">Siguiente</a>
          @else
          <span>Siguiente</span>
          @endif
        </div>

        {{-- Flecha derecha --}}
        @if ($histories->hasMorePages())
        <a href="{{ $histories->nextPageUrl() }}" class="pagination_arrow">
          <img src="./img/arrow_right.svg" alt="">
        </a>
        @else
        <span class="pagination_arrow disabled">
          <img src="./img/arrow_right.svg" alt="">
        </span>
        @endif
      </div>
    </div>



  </div>
</x-content>


<!-- all js here -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<script>
  function getPreviewUrl(previewUrl) {
      $.ajax({
          url: previewUrl,
          method: "GET",
          success: function(response) {
              $('#previewFrame').attr('src', response.previewUrl);
              $('#previewContainer').show();
              showModal('preview_modal', 1)
            },
          error: function(xhr) {
              alert('Error al obtener la previsualización.');
            }
        });
    }
</script>

<style>

  .list-item {
    margin-bottom: 1rem;
  }

  .list-title {
    font-weight: bold;
  }
  .list-content {
    margin-left: 1rem;
  }

  td .button {
    width: auto;
  }

</style>

@endsection