@extends('layouts.app')

@section('conteudo')

<br><br>

<div style="color: black;">

  <div class="caso  text-center">
    <h1>Chamada</h1>


    <!-- Form Inline - Alternative Style -->
    <form action="#" method="POST" enctype="multipart/form-data">
      <div class="row  g-4 align-items-center">
        @csrf

        <!-- trazer todas as organizações -->
        <div class="col-3">
          <label class="form-label" for="example-select">Organização</label>
          <select class="form-select" id="organizacao" name="organizacao">
            <option value="0">Selecione</option>
          </select>
        </div>
        <div class="col-4">
          <label class="form-label" for="example-select">Projeto</label>
          <select class="form-select" id="projeto_id" name="projeto_id">
            <option value="0">Selecione</option>
          </select>
        </div>
        <!-- trazer todas as organizações -->
        <div class="col-4">
          <label class="form-label" for="example-select">Turmas</label>
          <select class="form-select" id="turma" name="turma">
            <option value="0">Selecione</option>
          </select>
        </div>
        <div class="col-1">
          <span class="input-group-text border-0 bg-body">
            <a type="submit"> <i class="fa fa-fw fa-search"></i> </a>
          </span>
        </div>
        <hr>

        <!-- deixar esses campos ocultos só trazer depois que clicar em pesquisar -->
        <!-- card com as informações para o professor ver se estar certo ao clicar aparecer em baixo para fazer a chamada -->
        <div class="block block-rounded">
          <div class="block-content block-content-full">
            <div class=" row d-sm-flex">
              <p class="text-muted col-7">
                Professor
              </p>
              <p class="text-muted col-3">
                Turma
              </p>
              <p class="text-muted col-3">
                Projeto
              </p>
              <p class="text-muted col-3">
                Período
              </p>
              <p class="text-muted col-3">
                Ano
              </p>
              <p class="col-3">
                  <a type="submit"> <i class="fa fa-fw fa-search"></i> </a>
              </p>
            </div>
          </div>
        </div>

        <!-- trazer preenchido o nome do professor, turma, projeto, data e a lista com os alunos matriculados -->
        <div class="col-6">
          <label class="form-label" for="example-select">Professor</label>
          <input type="text" class="form-control" id="professor" name="professor" value="">
        </div>
        <div class="col-2">
          <label class="form-label" for="example-select">Turma</label>
          <input type="text" class="form-control" id="turma" name="turma" value="">
        </div>
        <div class="col-2">
          <label class="form-label" for="example-select">Projeto</label>
          <input type="text" class="form-control" id="projeto" name="projeto" value="">
        </div>
        <div class="col-2">
          <label class="form-label" for="example-select">Data</label>
          <input type="date" class="form-control" id="date" name="date" value="">
        </div>
        <div class="col-12">
          <label class="form-label" for="example-select" style="text-align: right;">Descrição do que foi feito em aula</label>
          <input type="text" class="form-control" id="descricao" name="descricao">
        </div>
        <div class="col-6">
          <label class="form-label" for="example-select">Imagens da aula</label>
          <input type="file" class="form-control" id="aula" name="aula">
        </div>
        <hr>
        <div class="col-12">
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">RM</th>
                <th scope="col">Nome</th>
                <th scope="col">Presença</th>
                <th scope="col">Observação</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td scope="row">trazer os rm </td> <!-- trazer os rm -->
                <td scope="row">trazer os nomes</td> <!-- trazer os nomes -->
                <td scope="row"><input type="checkbox" class="form-check-input" id="chamadaCheck" name="observacoes"></td> <!-- deixar todos checados para desmarcar quem não veio -->
                <td scope="row"><input type="text" class="form-control" id="chamadaObs" name="chamadaObs"></td> <!-- deixar campo para escrever -->
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-12">
          <label class="form-label" for="example-select">Observações</label>
          <input type="text" class="form-control" id="observacoes" name="observacoes">
        </div>
      </div>
      <hr>
      <!-- Regra caso o aluno já tenha cursado ou não ter mais a idade trazer alerta do motivo de não salvar -->
      <center> <a type="submit"> <button type="submit" class="btn btn-primary m-1">
            <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Registrar Chamada
          </button> </a> </center>


    </form>

  </div>
</div>


@endsection