@extends('masterpage.masterpage')
<!-- Content Header (Page header) -->

@section ('content')
<section class="content-header">
    
</section>
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          @if(Session::has('message'))
            <div class="alert alert-success alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
              <h5><i class="icon fas fa-check"></i> Alerta!</h5>
              {{ Session::get('message')}}
            </div>
          @endif
          @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
              <h5><i class="icon fas fa-ban"></i> Alert!</h5>
              {{ Session::get('error')}}
            </div>
          @endif
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Atendimento</h3>
            </div>
            <!-- /.card-header -->
            <form id="consultaForm"  action="{{ URL('atendimento/store') }}" method="post" role="form">
            <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
            <div class="card-body">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>Paciente</label>
                            <select id="cbCliente" name="paciente_id" class="form-control select2" style="height: 90px;">
                              <option value="#" selected="selected"></option>
                              @foreach ($clients as $client)
                                  <option value = "{{$client->id}}">{{$client->name}} - {{ Carbon\Carbon::parse($client->nascimento)->format('d-m-Y') }}</option>
                              @endforeach
                            </select>                       
                          </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group" style="margin-top: 8.5%;height: 40px;">   
                                <a style="margin-top: 10px" onclick=""  data-toggle="modal" data-target="#modal-client" class="btn btn-primary"><i class="ion-plus-circled"></i></a>
                            </div>
                        </div>
                    </div>
                    <label>Consulta</label>
                    <textarea class="form-control" name="consulta" id="exampleFormControlTextarea1" rows="3"></textarea>
                  </div>
              <button style="margin-top: 10px" class="btn btn-primary">Finalizar Consulta</button>
            </div>
            </form>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
    
  </section>
  <!-- /.content -->
 <!-- /.modal -->

 <div class="modal fade" id="modal-client">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Cadastrar Paciente</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="clienteForm"  action="{{ URL('clientes/store') }}" method="post" role="form">
            <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
            <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id }}" />
            <div class="card-body">
              <div class="row">
                <div class="col-12">
                  <div class="form-group">                       
                    <label for="name">Nome</label>
                    <input required type="text" class="form-control" name="name" id="name" placeholder="Nome">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-6">    
                  <div class="form-group">
                    <label for="name">Data de Nascimento</label>
                    <input  type="text" class="form-control" name="nascimento" id="nascimento" data-inputmask='"mask": "##/##/####"' data-mask placeholder="Nascimento">
                  </div>                
                  <div class="form-group">                     
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Entre com email">
                  </div>               
                  <div class="form-group">
                    <label for="name">Titulo</label>
                    <input  type="text" class="form-control" name="titulo" id="titulo"  placeholder="Titulo">
                  </div>
                  <div class="form-group">
                    <label for="name">Zona</label>
                    <input  type="text" class="form-control" name="zona" id="zona"  placeholder="Zona">
                  </div>
                  <div class="form-group">
                    <label for="name">Seção</label>
                    <input  type="text" class="form-control" name="secao" id="secao"  placeholder="Seção">
                  </div>    
                  <div class="form-group">
                    <label for="exampleInputPassword1">Telefone</label>
                    <input  type="text" class="form-control" id="phone" name="phone" data-inputmask='"mask": "(99) 99999-9999"' data-mask placeholder="Telefone">
                  </div>              
                </div>                   
                <div class="col-6"> 
                  <div class="form-group">
                    <label for="name">Cidade</label>
                    <input  type="text" class="form-control" name="city" id="city" placeholder="Cidade">
                  </div>
                  <div class="form-group">
                    <label for="name">Rua</label>
                    <input  type="text" class="form-control" name="rua" id="rua" placeholder="Rua">
                  </div>
                  <div class="form-group">
                    <label  for="name">Bairro</label>
                    <input  type="text" class="form-control" name="bairro" id="bairro" placeholder="Bairro">
                  </div>
                  <div class="form-group">
                    <label  for="name">Numero</label>
                    <input  type="text" class="form-control" name="numero" id="numero" placeholder="N° 100">
                  </div>                
                  <div class="form-group">
                    <label>Região</label>
                    <select name="zona_regiao" id="zona_regiao" class="form-control">
                      <option value=""></option>
                     @foreach ($zonas as $zona )
                          <option value="{{$zona->zona}}">{{$zona->zona}}</option>
                     @endforeach
                    </select>
                  </div>
                  <div class="form-group">
                    <label>Acompanhante</label>
                    <select name="cabo_id" class="form-control">
                      <option value=""></option>
                     @foreach ($users as $user )
                          <option value="{{$user->id}}">{{$user->name}}</option>
                     @endforeach
                    </select>
                  </div>
                </div>
              </div>                
            </div>
           
            <!-- /.card-body -->
          </form>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            <button  onclick="submitClient()" type="button" class="btn btn-primary">Salvar</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
 </div>



  @stop

 @section('scripts')
    <script>
         $('.select2').select2();
        
         $(document).ready(function() {
            $('[data-mask]').inputmask()      
        });
        $(function () {
          $("#example1").DataTable({   
              "buttons": [{extend: "copy", text:'Copiar'}, "excel", "pdf", {extend: "print", text:"Imprimir"}],
              "responsive": true,
              "autoWidth": false,
              "oLanguage":{
                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ Resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar ",
                "oPaginate": {
                      "sNext": "Próximo",
                      "sPrevious": "Anterior",
                      "sFirst": "Primeiro",
                      "sLast": "Último"
                }
              }
          }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
          $('#example2').DataTable({
              "paging": true,
              "lengthChange": false,
              "searching": false,
              "ordering": true,
              "info": true,
              "autoWidth": false,
              "responsive": true,
              "oLanguage":{
                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ Resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar ",
                "oPaginate": {
                      "sNext": "Próximo",
                      "sPrevious": "Anterior",
                      "sFirst": "Primeiro",
                      "sLast": "Último"
                }
              }
          });
        });
        function changeStatus(id){
          $('#submitClientStatus').attr('onclick', `submitStatus(${id})`)
          $('#modal-client').modal();
        }

       async function submitClient(id){
            var csrfToken = $('#csrf-token').val();
            var state = $('#stateSelect').val();
            var formElement = document.getElementById('clienteForm')
            let data = new FormData(formElement);
            let checkForm  = await validateForm();
            if(!checkForm){
              alert('Preencha os campos Obrigatórios!')
              return;
            }
            fetch('{{URL('clientes/store')}}', {
              method: 'post',
              body: data,
              headers: {
                  "X-CSRF-Token": csrfToken,
                  'X-Requested-With': 'XMLHttpRequest'
              },       
            }).then(function(response){
                   //location.reload();
                   if(response.status == 200){
                     return response.json();
                   }
                   else{
                     alert('Cliente Já Existe');
                   }
                  
            }).then(function(json){
              $("#modal-client").modal('hide');
                var newOption = new Option(json.name+'-'+json.nascimento, json.id, true, true);
                $('#cbCliente').append(newOption).trigger('change');
                // change course

            }).catch(function(error){


            });
           
        }


        function validateForm (){
          return new Promise((resolve, reject) => {
              $('#name').val() == "" ? resolve(false) : true;
              resolve(true);
            
          });
        }
    </script>
 @stop