@extends('layouts.app')

@section('conteudo')

<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px;">
  <div class="bg-black-50">
    <div class="content content-full">
      <div class="d-flex justify-content-between align-items-center">
        <h1 class="flex-grow-1 fs-2 text-white my-2">
          <i class="fa fa-boxes text-white-50 me-1"></i> Apresentações
        </h1>
        @can('pode_visualizar_apresentacao')
        <a class="btn btn-primary my-2" href="/apresentacoes">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Listar Apresentações</span>
        </a>
        @endcan
        @can('pode_visualizar_apresentacao')
  <button id="generatePdfButton" class="btn btn-primary my-2">
    <i class="fa fa-fw fa-file-pdf"></i> Download PDF
  </button>
@endcan

      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_apresentacao')
<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Editar Apresentação</h3>
    </div>
    <div class="block-content">
      <div class="row">
        <div class="col-lg-12 space-y-6">
          <!-- Form Inline - Alternative Style -->
          <div class="row g-4 align-items-center">
            <!-- Form fields -->
            <div class="col-3">
              <label class="form-label" for="organizacao_id">Organização*</label>
              <select class="form-select" id="organizacao_id" name="organizacao_id" disabled>
                @foreach($organizacoes as $item)
                <option selected value="{{$item->id}}">{{$item->nome}}</option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <label class="form-label" for="nome">Evento*</label>
              <input type="text" class="form-control" id="nome" name="nome" placeholder="Nome" value="{{$apresentacao->nome}}" required readonly>
              <input type="hidden" class="form-control" id="apresentacao_id" name="id" value="{{$apresentacao->id}}">
            </div>
            <div class="col-3">
              <label class="form-label" for="projeto_id">Projeto*</label>
              <select class="form-select" id="projeto_id" name="projeto_id" required disabled>
                @foreach($projetos as $item)
                <option selected value="{{$item->id}}">{{$item->descricao}}</option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <label class="form-label" for="identificacao_projeto">Nº de Identificação do Projeto*</label>
              <input type="text" class="form-control" id="identificacao_projeto" name="identificacao_projeto" value="{{$apresentacao->identificacao_projeto}}" required readonly>
            </div>
            <div class="col-3">
              <label class="form-label" for="ano">Ano</label>
              <input type="text" class="form-control" id="ano" name="ano" disabled value="{{ date('Y') }}">
            </div>
            <div class="col-3">
              <label class="form-label" for="data">Data do Evento</label>
              <input type="date" class="form-control" id="data" name="data" value="{{$apresentacao->data}}" readonly>
            </div>
            <div class="col-3">
              <label class="form-label" for="horario_entrada">Horário (início)</label>
              <input type="time" class="form-control" id="horario_entrada" name="horario_entrada" value="{{$apresentacao->horario_entrada}}" readonly>
            </div>
            <div class="col-3">
              <label class="form-label" for="horario_saida">Horário (fim)</label>
              <input type="time" class="form-control" id="horario_saida" name="horario_saida" value="{{$apresentacao->horario_saida}}" readonly>
            </div>
            <div class="col-3">
              <label class="form-label" for="publico">Público Atingido</label>
              <input type="number" class="form-control" id="publico" name="publico" value="{{$apresentacao->publico_atingido}}" readonly>
            </div>
            <div class="col-3">
              <label class="form-label" for="beneficiarios_atingidos">Beneficiários Atingidos</label>
              <input type="number" class="form-control" id="beneficiarios_atingidos" name="beneficiarios_atingidos" value="{{$apresentacao->beneficiarios_atingidos}}" readonly>
            </div>
            <div class="col-5">
              <label class="form-label" for="local">Local</label>
              <input type="text" class="form-control" id="local" name="local" value="{{$apresentacao->local}}" readonly>
            </div>
            <div class="col-7">
              <label class="form-label" for="endereco">Endereço</label>
              <input type="text" class="form-control" id="endereco" name="endereco" value="{{$apresentacao->endereco}}" readonly>
            </div>
            <div class="col-12">
              <label class="form-label" for="link">Link</label>
              <textarea name="link" id="link" cols="30" rows="2" readonly>{{$apresentacao->link}}</textarea>
            </div>
            <div class="col-12">
              <label class="form-label" for="observacao">Descrição do Evento</label>
              <textarea name="observacao" id="observacao" cols="30" rows="5" readonly>{{$apresentacao->descricao}}</textarea>
            </div>
            <h4>Pessoal envolvido</h4>
            <div class="col-6">
              <label class="form-label" for="beneficiarios_id">Beneficiários*</label>
              <select class="form-select" id="beneficiarios_id" name="beneficiarios_id" disabled required>
                @foreach($estudantes as $item)
                <option selected value="{{$item->id}}">{{$item->nome}}</option>
                @endforeach
              </select>
            </div>
            <!-- trazer os professores já cadastrados -->
            <div class="col-6">
              <label class="form-label" for="funcionario_id">Instrutores*</label>
              <select class="form-select" id="funcionario_id" name="funcionario_id" required disabled>
                @foreach($funcionarios as $item)
                <option selected value="{{$item->id}}">{{$item->nome_completo}}</option>
                @endforeach
              </select>
            </div>
            <h4>Fotos do Evento</h4>
            <div class="row">
              @if($apresentacao->fotos1)
              <div class="col-6">
                <label class="form-label" for="fotos1">Fotos 1</label>
                <img src="{{$apresentacao->fotos1}}" alt="Foto 1" class="img-fluid">
              </div>
              @endif
              @if($apresentacao->fotos2)
              <div class="col-6">
                <label class="form-label" for="fotos2">Fotos 2</label>
                <img src="{{ $apresentacao->fotos2}}" alt="Foto 2" class="img-fluid">
              </div>
              @endif
              @if($apresentacao->fotos3)
              <div class="col-6">
                <label class="form-label" for="fotos3">Fotos 3</label>
                <img src="{{$apresentacao->fotos3}}" alt="Foto 3" class="img-fluid">
              </div>
              @endif
              @if($apresentacao->fotos4)
              <div class="col-6">
                <label class="form-label" for="fotos4">Fotos 4</label>
                <img src="{{$apresentacao->fotos4}}" alt="Foto 4" class="img-fluid">
              </div>
              @endif
            </div>

            <hr>

            <div class="errMsgContainer mb-3"></div>
          </div>
          <!-- END Form Inline - Alternative Style -->
        </div>
        <!-- END Inline Layout -->
      </div>
    </div>
    <!-- END Elements -->
  </div>
</div>

<script>
  /*
  Pegue os dados do formulário
  */
  const beneficiarios_id = document.getElementById('beneficiarios_id');
  const funcionario_id = document.getElementById('funcionario_id');
  const generatePdfButton = document.getElementById('generatePdfButton');
  const apresentacao_id = document.getElementById('apresentacao_id');

  // Enviar os dados para o servidor
  generatePdfButton.addEventListener('click', () => {
    const data = {
      'beneficiarios_id': beneficiarios_id.value,
      'funcionario_id': funcionario_id.value,
      'apresentacao_id': apresentacao_id.value
    };

    fetch('{{ route('apresentacoes.generatePdf') }}', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Adicione o token CSRF para segurança
      }
    })
    .then(response => response.blob()) // Recebe o PDF como Blob
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'apresentacao.pdf';
      document.body.appendChild(a);
      a.click();
      a.remove();
    })
    .catch(error => {
      console.error(error);
    });
  });
</script>



{{-- Pra quem não tem permissão de visualizar essa página aparecerá a seguinte mensagem --}}
@else
<center>
  <h1 style="margin-top: 200px;">Você não tem permissão para visualizar essa página!</h1>
</center>
@endcan

@endsection