@extends('layouts.app')

@section('conteudo')

{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_estudante')

<div class="content" style="margin-top: 50px;">
  <!-- Quick Actions -->
  <div class="row items-push">
    <div class="col-2">
      @can('pode_editar_estudante')
      <a class="btn block block-rounded block-link-shadow text-center h-75" href="/editar_estudante/{{$estudante->id}}">
        <div class="block-content ">
          <p class="fw-semibold fs-sm text-secondary text-uppercase">
            <i class="fa fa-pencil-alt"></i> Editar
          </p>
        </div>
      </a>
      @endcan
    </div>
    {{-- <div class="col-2">
      <a class=" block block-rounded block-link-shadow text-center h-75 " href="#">
        <div class="block-content ">
          <p class="fw-semibold fs-sm text-secondary text-uppercase ">
            <i class="fa fa-pencil-alt"></i> Documentos Entregues
          </p>
        </div>
      </a>
    </div> --}}
    <div class="col-2">
        @can('pode_editar_estudante')
        <a class=" block block-rounded block-link-shadow text-center h-75 " href="/editar_ficha_saude/{{$estudante->id}}">
          <div class="block-content ">
            <p class="fw-semibold fs-sm text-secondary text-uppercase ">
              <i class="fa fa-pencil-alt"></i> Editar Ficha de Saúde
            </p>
          </div>
        </a>
        @endcan
      </div>
    <div class="col-2">
      @can('pode_editar_estudante')
      <a class=" block block-rounded block-link-shadow text-center h-75" href="/editar_autorizacao_imagem/{{$estudante->id}}">
        <div class="block-content ">
          <p class="fw-semibold fs-sm text-secondary text-uppercase">
            <i class="fa fa-pencil-alt"></i> Editar Autorização de Imagem
          </p>
        </div>
      </a>
      @endcan
    </div>
    <div class="col-2">
      @can('pode_editar_estudante')
      <a class=" block block-rounded block-link-shadow text-center h-75 " href="/editar_autorizacao_saida/{{$estudante->id}}">
        <div class="block-content ">
          <p class="fw-semibold fs-sm text-secondary text-uppercase ">
            <i class="fa fa-pencil-alt"></i> Editar Autorização de Saída
          </p>
        </div>
      </a>
      @endcan
    </div>
    <div class="col-2">
      @can('pode_eliminar_estudante')
      <a class="btn block block-rounded block-link-shadow text-center h-75" data-toggle="modal" data-target="#modalEliminar" >
        <div class="block-content ">
          <p class="fw-semibold fs-sm text-danger text-uppercase">
            <i class="fa fa-times"></i> Excluir
          </p>
        </div>
      </a>
      <!-- @foreach($estudantes as $item)
      <a class="btn block block-rounded block-link-shadow text-center h-75" href="/eliminar_turma/{{$item->id}}">
        <div class="block-content ">
          <p class="fw-semibold fs-sm text-danger text-uppercase">
            <i class="fa fa-times"></i> Excluir
          </p>
        </div>
      </a>
      @endforeach-->
      @endcan
    </div>
        <div class="col-2">
        @can('pode_visualizar_estudante')
        <a class="btn block block-rounded block-link-shadow text-center h-75" href="/estudantes/">
            <div class="block-content">
            <p class="fw-semibold fs-sm text-warning text-uppercase">
                <i class="fa fa-reply" aria-hidden="true"></i> Voltar
            </p>
            </div>
        </a>
        @endcan
        </div>
  </div>
  <!-- END Quick Actions -->

  <!-- Meta -->
  <div class="row items-push">

    @if(strlen($docs_pendentes) > 0)
    <div class="col-md-12">
      <div class="block block-rounded block-bordered block-link-shadow h-100 mb-0">
        <div class="block-content">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td>
                  <span class="text-warning">
                    <i class="fa fa-fw fa-star"></i>
                  </span>
                  <span class="fw-medium text-muted">Documentos Pendentes: {{$docs_pendentes}}</span>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
    @endif

  </div>
  <!-- END Meta -->

  <!-- User Info -->
  <div class="block block-rounded" style="margin-top: -30px;">
    <!-- <a class="btn btn-primary my-2" href="/estudantes" style="margin-left: 94%;">
      <i class="fa fa-reply" aria-hidden="true"></i>
    </a> -->
    <div class="block-content text-center">
      <div class="row mb-3 d-flex justify-content-end">
        <div class="col-5">
            <div class="form-group">
                <label class="form-label" for="updated_at">Data Última Atualização</label>
                <input type="text" class="form-control" id="updated_at" name="updated_at" value="{{ \Carbon\Carbon::parse($estudante->updated_at)->format('d/m/Y') }}" disabled>
            </div>
        </div>
    </div>

      <div class="mb-3">
            <label>
                @if($estudante->foto == null)
                  <p style="font-size: 12px;"> Sem Foto </p>
                @else
                  <img class="img-avatar img-avatar96" src="{{$estudante->foto}}" data-toggle="modal" data-target="#exampleModal" id="preview-img">
                @endif
            </label>
            <!-- </a> -->
      </div>


      {{-- <div class="col-5" style="display: none;">
        <label class="form-label" for="foto">Upload Foto*</label>
        <input type="file" class="form-control" id="foto" name="foto" value="{{$estudante->foto}}" placeholder="foto" style="display: none;" onchange="previewImage(event);">
      </div> --}}
      <h1 class="fs-lg mb-0">
        {{$estudante->nome}}
      </h1>
      <p class="text-muted">
        <i class="fa fa-award text-warning me-1"></i>
        Beneficiário
      </p>
    </div>
    <div class="block-content bg-body-light text-center">
      <div class="row items-push text-uppercase">
        <div class="col-6 col-md-3">
          <div class="fw-semibold text-dark mb-1">RM</div>
          <a class="link-fx fs-3" href="javascript:void(0)">{{$estudante->rm}}</a>
        </div>
        <div class="col-6 col-md-3">
          <div class="fw-semibold text-dark mb-1">Data Nascimento</div>
          <a class="link-fx fs-3" href="javascript:void(0)"> {{date ('d-m-Y', strtotime($estudante->data_nascimento))}}</a>
        </div>
        <div class="col-6 col-md-3">
          <div class="fw-semibold text-dark mb-1">Sexo</div>
          <a class="link-fx fs-3" href="javascript:void(0)">{{$estudante->sexo == 1 ? 'Masculino' : 'Feminino'}}</a>
        </div>
        <div class="col-6 col-md-3">
          <div class="fw-semibold text-dark mb-1">Escola</div>
          <a class="link-fx fs-3" href="javascript:void(0)">{{$estudante->escola ?? '---'}}</a>
        </div>
      </div>
    </div>
  </div>
  <!-- END User Info -->

  <!-- Addresses -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Contatos</h3>
    </div>
    <div class="block-content">
      <div class="row">
        <div class="col-lg-7">
          <!-- Billing Address -->
          <div class="block block-rounded block-bordered">
            <div class="block-header border-bottom">
              <h3 class="block-title">Responsável</h3>
            </div>
            <div class="block-content">

              <address class="fs-sm">
                Pai: {{$estudante->pai}} / {{$estudante->telefone_pai}}<br>
                Mãe: {{$estudante->mae}} / {{$estudante->telefone_mae}}<br>
                Responsável Legal: {{$estudante->nome_responsavel_para_legal}} / {{$estudante->telefone_responsavel_para_legal}}<br><br>
                <i class="fa fa-phone"></i> Whatsapp: {{$estudante->telefone_celular}}<br>

              </address>
            </div>
          </div>
          <!-- END Billing Address -->
        </div>
        <div class="col-lg-5">
          <!-- Shipping Address -->
          <div class="block block-rounded block-bordered">
            <div class="block-header border-bottom">
              <h3 class="block-title">Endereço</h3>
            </div>
            <div class="block-content">
              <address class="fs-sm">
                Cep: {{$estudante->endereco_cep}}<br>
                Endereço: {{$estudante->endereco}}, {{$estudante->numero_endereco}}<br>
                Complemento: {{$estudante->complemento_endereco}}<br>
                Bairro: {{$estudante->bairro_endereco}}<br>
                Bairro: {{$estudante->cidade_endereco}} - {{$estudante->estado_endereco}}<br>
              </address>
            </div>
          </div>
          <!-- END Shipping Address -->
        </div>
      </div>
    </div>
  </div>
  <!-- END Addresses -->

  <!-- matriculas -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Histórico</h3>
    </div>
    <div class="block-content">
      <div class="row">
        <div class="col-lg-12">
          <div class="block block-rounded block-bordered">

            <!-- All Products Table -->
            <div class="table-responsive">
              <table class="table table-borderless table-striped table-vcenter">
                <thead>
                  <tr>
                    <th class="d-none d-sm-table-cell text-center">ID Turma</th>
                    <th class="d-none d-sm-table-cell text-center">ID Matrícula</th>
                    <th class="d-none d-sm-table-cell text-center">ID Projeto</th>
                    <th class="d-none d-sm-table-cell text-center">Turma</th>
                    <th class="d-none d-sm-table-cell text-center">Ano</th>
                    <th class="d-none d-sm-table-cell text-center">Status</th>
                    <th class="text-center">Ação</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($historicos as $item)
                  <tr>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->turma_id}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->matricula_id}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->projeto_id}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->descricao}} | {{$item->ano}} </td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->ano}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->status_matricula}}</td>
                    <td class="text-center fs-sm">
                      <a class="btn btn-sm btn-alt-secondary" href="/visualizar_turma/{{$item->turma_id}}">
                        <i class="fa fa-fw fa-eye"></i>
                      </a>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            <!-- END All Turmas Table -->

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

  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Histórico de Transfêrencias</h3>
    </div>
    <div class="block-content">
      <div class="row">
        <div class="col-lg-12">
          <div class="block block-rounded block-bordered">

            <!-- All Products Table -->
            <div class="table-responsive">
              <table class="table table-borderless table-striped table-vcenter">
                <thead>
                  <tr>
                    <th class="d-none d-sm-table-cell text-center">ID</th>
                    <th class="d-none d-sm-table-cell text-center">Data</th>
                    <th class="d-none d-sm-table-cell text-center">Turma</th>
                    <th class="d-none d-sm-table-cell text-center">Ano</th>
                    <th class="text-center">Ação</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($historicos as $item)
                  <tr>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->turma_id}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->created_at}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->descricao}} | {{$item->descricao}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->ano}}</td>
                    <td class="text-center fs-sm">
                      <a class="btn btn-sm btn-alt-secondary" href="/visualizar_turma/{{$item->turma_id}}">
                        <i class="fa fa-fw fa-eye"></i>
                      </a>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            <!-- END All Turmas Table -->

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



  <!-- matriculas -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Irmãos</h3>
    </div>
    <div class="block-content">
      <div class="row">
        <div class="col-lg-12">
          <div class="block block-rounded block-bordered">

            <!-- All Products Table -->
            <div class="table-responsive">
              <table class="table table-borderless table-striped table-vcenter">
                <thead>
                  <tr>
                    <th class="d-none d-sm-table-cell text-center">RM</th>
                    <th class="d-none d-sm-table-cell text-center">Nome</th>
                    <th class="d-none d-sm-table-cell text-center">Pai</th>
                    <th class="d-none d-sm-table-cell text-center">Mãe</th>
                    <th class="text-center">Ação</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($irmaos as $item)
                  @if($item->pai != 0 && $item->mae != 0)
                  <tr>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->rm}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->nome}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->pai}}</td>
                    <td class="d-none d-sm-table-cell text-center fs-sm">{{$item->mae}}</td>
                    <td class="text-center fs-sm">
                      <a class="btn btn-sm btn-alt-secondary" href="/visualizar_estudante/{{$item->id}}">
                        <i class="fa fa-fw fa-eye"></i>
                      </a>
                    </td>
                  </tr>
                  @endif
                  @endforeach
                </tbody>
              </table>
            </div>
            <!-- END All Turmas Table -->

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



  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form method="post" enctype="multipart/form-data" action="/salvar_imagem_estudante/{{$estudante->id}}">

            @csrf


        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Alterar foto do beneficiário</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="col-12">
            <label class="form-label" for="foto">Clique Aqui para alterar a foto</label>
            <input type="file" class="form-control" id="foto" name="foto" value="{{$estudante->foto}}" placeholder="foto" onchange="previewImage(event);">
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
          <button type="submit" class="btn btn-primary">Salvar Alterações</button>
        </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="modalEliminar" 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">Confirmar Operação</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Tem a certeza que pretende eliminar esse beneficiário?
                    </div>
                    <div class="modal-footer">
                        <a href="/eliminar_estudante/{{$estudante->id}}"><button type="button" class="btn btn-danger">Eliminar</button> </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>

</div>
<!-- END Page Content -->
{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
@else

<center>
  <br>
  <div class="alert alert-danger" role="alert">
    Você não tem permissão pra visualizar essa página!
  </div>
</center>

@endcan

<script>
    function previewImage(event) {
        var input = event.target;
        var reader = new FileReader();

        reader.onload = function() {
            var img = document.getElementById("preview-img");
            img.src = reader.result;
            console.log(reader.result);

            // Adiciona chamada AJAX para enviar a imagem ao controller
            var formData = new FormData();
            formData.append('image', input.files[0]);
            $.ajax({
                url: '/salvar_imagem_estudante',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    console.log(response);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        reader.readAsDataURL(input.files[0]);
    }
</script>


@endsection