@extends('layouts.frontend.app')

@section('content')
<!-- start banner Area -->
<section
  class="banner-area relative"
  id="home"
  data-parallax="scroll"
  data-image-src="{{asset('frontend/img/promed new 1.gif')}}"
>
  <div class="container">
    <div class="row fullscreen">
      <div class="banner-content d-flex align-items-center col-lg-12 col-md-12">
          @for ($i = 1; $i <= 5; $i++) &nbsp; @endfor
          <a type="button" class="mb-0" data-toggle="modal" data-target="#mediumModal">
                            <span class="lnr lnr-arrow-right"></span>
          </a>
          @for ($i = 1; $i <= 16; $i++) &nbsp; @endfor
          <a type="button" class="mb-0" id="transportador-botao" data-toggle="modal" data-target="#mediumModalTransportador">
                            <span class="lnr lnr-arrow-right"></span>
          </a>
          @for ($i = 1; $i <= 19; $i++) &nbsp; @endfor
          <a type="button" class="mb-0" id="medico-botao" data-toggle="modal" data-target="#mediumModalMedico">
                            <span class="lnr lnr-arrow-right"></span>
          </a> 
      </div>
      <h5 class="text-white">
       <marquee>«</marquee></h5>
        <div class="head-bottom-meta d-flex justify-content-between align-items-end col-lg-12">      
        <button type="button" class="btn btn-outline-light my-2 my-sm-0" id="medico-botao" title="É Médico? Efectue o seu registro clicando aqui!" data-toggle="modal" data-target="#mediumModalMedico">Médico</button>
          <div class="btn btn-outline-light my-2 my-sm-0" data-toggle="tooltip" data-placement="top" title="É transportador? Efectue o seu registro clicando aqui!"  >Transportador</div>
          <div class="btn btn-outline-light my-2 my-sm-0" data-toggle="tooltip" data-placement="top" title="Possui um laboratório?, efectue o seu registro clicando aqui!"  >Laboratório</div>
          <div class="btn btn-outline-light my-2 my-sm-0" data-toggle="tooltip" data-placement="top" title="Possui um consultório Médico? Efectue o seu registro clicando aqui!"  >Consultório Médico</div>
          <div class="btn btn-outline-light my-2 my-sm-0" data-toggle="tooltip" data-placement="top" title="Possui uma clínica? Efectue o seu registro clicando aqui!"  >Clínica</div>
          <div class="btn btn-outline-light my-2 my-sm-0" data-toggle="tooltip" data-placement="top" title="Possui uma farmácia? Efectue o seu registro clicando aqui!"  >Farmácia</div>
          <div class="btn btn-outline-light my-2 my-sm-0" data-toggle="tooltip" data-placement="top" title="Possui um centro Médico? Efectue o seu registro clicando aqui!"  >Centro Médico</div>
          <div class="btn btn-outline-light my-2 my-sm-0" data-toggle="tooltip" data-placement="top" title="Possui um Hospital? Efectue o seu registro clicando aqui!"  >Hospital</div>
          
          <div class="user-meta">
            <h4 class="text-red">Tsofts</h4>
            <p id="time"><script language=javascript type="text/javascript">
            $(function () {
              $('[data-toggle="tooltip"]').tooltip()
            });
                            var timeDisplay = document.getElementById("time");
                            function refreshTime() {
                              var dateString = new Date().toLocaleString("pt-PT", {timeZone: "Africa/Luanda"});
                              var formattedString = dateString.replace(", ", " - ");
                              timeDisplay.innerHTML = formattedString;
                            }
                            setInterval(refreshTime, 1000);      
            </script>
            </p>
          </div>
    </div>
  </div>
  <h5 class="text-white">
       <marquee>É profissional de <code>Saúde?</code> Ou possui um estabelecimento de <code>Saúde?</code> Não perca tempo, registre-se no <b>PROMed!</b> nos links abaixo! <span class="lnr lnr-enter-down"></span></marquee></h5>
       
</section>
<!-- End banner Area -->
<div class="modal fade" id="mediumModal" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
</br></br></br></br></br></br></br></br></br></br>
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>
                                Com a promed voçê terá acesso aos serviços e profissionais de saúde o mais rápido possível e a tempo record!!! bem como seus medicamentos e formas de tratamento. <b>Adira já!</b>
                                </p>
                            </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                        </div>
                    </div>
                </div>
<!-- Start category Area -->
<section class="category-area section-gap" id="news">
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="menu-content pb-70 col-lg-8">
        <div class="title text-center">
          <h1 class="mb-10">Últimos productos de todas as categorias</h1>
          <p>Encontre o último producto de todas as categorias.</p>
        </div>
      </div>
    </div>
    <div class="active-cat-carusel">
        @foreach ($posts as $post)
        <div class="item single-cat"> 
          {{ $post->image }}             
        <img class="img-fluid" src="{{asset('storage/post/$post->image')}}" alt="{{$post->image}}">
        <p class="date">{{$post->created_at->diffForHumans()}}</p>
        <h4><a href="{{route('post', $post->slug)}}">{{$post->title}}</a></h4>
      </div>
      @endforeach
    </div>
  </div>
</section>
<!-- End category Area -->

<section class="travel-area section-gap" id="travel">
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="menu-content pb-70 col-lg-8">
                <div class="title text-center">
                    <h1 class="mb-10">Produtos mais pesquisados na semana</h1>
                    <p>Os produtos com mais visualizações nesta semana.</p>
                </div>
            </div>
        </div>
            <div class="container">
            <div class="row justify-content-center">
                @foreach ($posts as $post)
                <div class="single-posts col-lg-4 col-sm-4 mb-3">                
                    <img class="img-fluid" src="{{asset('storage/post/'.$post->image)}}" alt="{{$post->image}}">
                    <div class="date mt-20 mb-20">{{$post->created_at->diffForHumans()}}</div>
                    <div class="detail">
                        <a href="{{route('post', $post->slug)}}"><h4 class="pb-20">{{$post->title}}</h4></a>
                        <p>
                           {!! Str::limit($post->body, 400) !!}
                        </p>
                        <p class=" footer"="">
                            <br>
                            </p><ul class="d-flex space-around">
                                <li><a href="javascript:void(0);" onclick=" toastr.info('Para adicionar à sua lista favorita, tem de fazer primeiro o login.', 'Info', { closeButton: true, progressBar: true, })"><i class="fa fa-heart-o" aria-hidden="true"></i><span> {{$post->likedUsers->count()}}</span></a></li>


                            <li><i class="fa fa-comment-o" aria-hidden="true"></i><span> {{$post->comments->count()}}</span></li>
                                <li><i class="fa fa-eye" aria-hidden="true"></i> <span>{{$post->view_count}}</span></li>
                            </ul>

                    <p></p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- Start team Area -->
<section class="team-area section-gap" id="about">
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="menu-content pb-70 col-lg-8">
                <div class="title text-center">
                    <h1 class="mb-10">Sobre o ProMed</h1>
                    Esta é                     
                    <p>Uma plataforma para ajudar melhorar a sua qualidade de vida</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center d-flex align-items-center">
            <div class="col-lg-6 team-left">
                <p>
                    mais sobre o promed
                </p>
                <p>
                    Mais sobre o promed.
      </p>
      <p>Mais detalhes sobre o promed <span class="c1">ProMed</span>.</p>
                <h4>Sobre o criador</h4>
                <br>
                <p>TSOFTS Engineering and Trading, limitada é uma empresa angolana que opera na área das Tecnologias de Informação (TI) que presta serviços informáticos, formação técnica profissional e consultoria desde 2010 às pequenas e médias empresas.</p>
                <br>
                <h4>Email: <span style="font-size: medium; font-weight: lighter;">tsofts@tsofts.net</span></h4>
                <br>
                <div class="col-md-12 d-flex justify-content-center py-3 mt-2">
                    <a href="https://tsofts.net" class="genric-btn info circle arrow mr-md-auto" target="_blank">Saber Mais<span class="lnr lnr-arrow-right"></span></a>
                </div>
            </div>
            <div class="col-lg-6 team-right d-flex justify-content-center">
                <div class="row">
                    <div class="single-team">
                        <div class="thumb">
                            <img class="img-fluid w-75 mx-auto" src="{{asset('frontend/img/admin.jpg')}}" alt="admin">
                            <div class="align-items-center justify-content-center d-flex">
                                <a href="#"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
                                <a href="#"><i class="fab fa-youtube" aria-hidden="true"></i></a>
                            </div>
                        </div>
                        <div class="meta-text mt-30 text-center">
                            <h4>Tsofts</h4>
                            <p>Criador</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End team Area -->

<!-- Start team Area -->
<section class="team-area section-gap" id="junte-se-a-nos">
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="menu-content pb-70 col-lg-8">
                <div class="title text-center">
                    <h1 class="mb-10">Faça parte da PROMed!</h1>
                    Nesta área                     
                    <p>Você terá o previlégio de ser colaborador PROMed como Médico, Transportador, Farmacéltico ou Laboratorista</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center d-flex align-items-center">
        <div class="card team-left">
                                <div class="card-header">
                                    <strong>Promed | Junte-se a nós</strong>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted m-b-15">É profisional de <code>Saúde?</code> </br>Ou possui um estabelecimento de <code>Saúde?</code> </br>Não perca tempo, registre-se no <b>PROMed!</b></p>
                                    <button type="button" class="btn btn-info mb-1" id="medico-botao" data-toggle="modal" data-target="#mediumModalMedico">
                            Médico <span class="lnr lnr-arrow-right"></span>
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-info mb-1" id="transportador-botao" data-toggle="modal" data-target="#mediumModalTransportador">
                            Transportador <span class="lnr lnr-arrow-right"></span>
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-info mb-1" id="laboratorio-botao" data-toggle="modal" data-target="#mediumModalLaboratorio">
                            Laboratório <span class="lnr lnr-arrow-right"></span>
                        </button> </br></br>
                        <button type="button" class="btn btn-info mb-1" id="hospital-botao" data-toggle="modal" data-target="#mediumModalHospital">
                            Hospital <span class="lnr lnr-arrow-right"></span>
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-info mb-1" data-toggle="modal" data-target="#mediumModalClinica">
                            Clínica <span class="lnr lnr-arrow-right"></span>
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-info mb-1" data-toggle="modal" data-target="#mediumModalCentroMedico">
                            Centro Médico <span class="lnr lnr-arrow-right"></span>
                        </button>
                                  </br></br>
                        <button type="button" class="btn btn-info mb-1" data-toggle="modal" data-target="#mediumModalConsultorio">
                            Consultório <span class="lnr lnr-arrow-right"></span>
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-info mb-1" data-toggle="modal" data-target="#mediumModalFarmacia">
                            Farmácia <span class="lnr lnr-arrow-right"></span>
                        </button>
                                   </div>
                            </div>
            <div class="col-lg-6 team-right d-flex justify-content-center">
                <div class="row">
                    <div class="single-team">
                        <div class="thumb">
                            <img class="img-fluid w-75 mx-auto" src="frontend/img/promedImagemPublicidadeFrntend.jpeg" alt="admin">
                            <div class="align-items-center justify-content-center d-flex">
                                <a href="#"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
                                <a href="#"><i class="fab fa-youtube" aria-hidden="true"></i></a>
                            </div>
                        </div>
                        <div class="meta-text mt-30 text-center">
                            <h4>Tsofts</h4>
                            <p>Criador</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End team Area -->

@if($medicos->count() > 0)         
      <!-- Start category Area -->
<section class="category-area section-gap" id="marcar-exame-medico">
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="menu-content pb-70 col-lg-8">
        <div class="title text-center">
          <h1 class="mb-10">« Marcar Consulta »</h1>                                
                  <p>Nesta área. Você terá possiblilidade de marcar uma consulta e realizar o seu exame com os diferentes médicos da plataforma (PROMed)</p>
                </div>
      </div>
    </div>
    <div class="active-cat-carusel">
      @foreach ($medicos as $medico)
        <div class="item single-cat">
        <div class="card" style="width: 18rem;">
        <img class="card-img-top" height="200" width="200" src="{{asset('storage/medico/'.$medico->image)}}" title="Clique aqui para marcar consulta com o Médico" alt="{{$medico->image}}">
          <div class="card-body">
          @if(Auth::check())
            <h5 class="card-title"><a href="{{route('consulta', $medico->slug)}}"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> {{$medico->title}}</a></h5>
          @else
          <h5 class="card-title"><a href="#"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> É necessário cadastro! Para realizar consulta.</a></h5>
          @endif
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">{{$medico->genero}}</li>
            <li class="list-group-item">{{$medico->especialidade}}</li>
            <li class="list-group-item">{{$medico->created_at->format('d-m-Y')}}</li>
          </ul>
          <div class="card-body">
                        <p class=" footer"="">
                            <br>
                            </p><ul class="d-flex space-around">
                                <li><a href="javascript:void(0);" onclick=" toastr.info('Para adicionar à sua lista favorita, tem de fazer primeiro o login.', 'Info', { closeButton: true, progressBar: true, })"><i class="fa fa-heart-o" aria-hidden="true"></i><span> {{$medico->likedUsers->count()}}</span></a></li>
                            <li><i class="fa fa-comment-o" aria-hidden="true"></i><span> </span></li>
                                <li><i class="fa fa-eye" aria-hidden="true"></i> <span>{{$medico->view_count}}</span></li>
                            </ul>
                            <p>
                        </p>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>
<!-- End category Area -->
@else
<!-- Start team Area -->
<section class="team-area section-gap">
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="menu-content pb-70 col-lg-8">
                <div class="title text-center">
                    <h1 class="mb-10">« Marcar Consulta »</h1>
                    Nesta área                      
                    <p>Você terá possiblilidade de marcar uma consulta e realizar o seu exame com os diferentes médicos da plataforma (PROMed)</p>
                </div>
            </div>
        </div>        
        <div class="row justify-content-center d-flex align-items-center">
                              <div class="card team-left">
                                <div class="card-header">
                                    <strong>Promed | Marcar consulta</strong>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted m-b-15">A sua <code>Saúde</code> </br>Em 1º lugar<code>Saúde?</code> </br>Não perca tempo, Marque/Agende sua consula no <b>PROMed!</b></p>
                                     <p class="text-muted m-b-15"><span class="lnr lnr-warning text-danger"></span>&nbsp;&nbsp;<code>Não há Médicos disponíveis</code></p>                                                             
                                   </div>
                              </div>
            
        </div>
    </div>
    </div>
</section>
<!-- End team Area -->      
@endif


<div class="modal fade" id="mediumModalMedico" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg-8" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Médico</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="container">
                              <div class="row">
                                  <div class="col-lg-18"> 
                                  <form action="{{route('medicosSelf')}}" method="post" id="criarMedico">
                                    @csrf  
                                    {{ method_field('PUT') }}
                                      <div id="step_1" class="step">
                                          <div class="alert alert-success" role="alert">
                                            <h4 class="alert-heading">Bem-Vindo, ao promed</h4>
                                            <p>Sr(a) Médico(a) Está prestes a se juntar a maior plataforma de saúde existente no mercado. Ao fazer o seu cadastro como médico, irá receber alguns bônos e publicidade de graça de seus serviços aos seus clientes.</p>
                                            <hr>
                                            <p class="mb-0">Utilize os botões abaixo para prencher os campos desejados.</p>
                                          </div>                                          
                                        </div>                                        
                                        <div id="step_2" class="step">
                                          <div class="alert alert-success" role="alert">
                                            <h4 class="alert-heading">Dados Pessoais</h4>
                                            <p>Médico(a) nesta etapa irá prencher os seus dados pessoais.</p>
                                            <hr>
                                            <p class="mb-0">Utilize os botões abaixo para prencher os campos desejados.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Nome completo</label>
                                <input type="text" class="form-control" id="nomeMedico" name="nomeMedico" placeholder="Seu nome completo">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">BI / Passaporte</label>
                                <input type="text" class="form-control" id="biPassaporteMedico" name="biPassaporteMedico" placeholder="BI / Passaporte">
                              </div>
                            </div>
                            <div class="form-row">
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Data de Nascimento</label>
                                <input type="date" class="form-control" id="dataNascimentoMedico" name="dataNascimentoMedico">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputEstado">Gênero</label>
                                <select id="generoMedico" name="generoMedico" class="form-control">
                                  <option selected>Gênero</option>
                                  <option>Masculino</option>
                                  <option>Femenino</option>
                                  <option>Outro</option>
                                </select>
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Nacionalidade</label>
                                <input type="text" class="form-control" id="nacionalidadeMedico" name="nacionalidadeMedico" placeholder="Nacionalidade">
                              </div>
                            </div>
                </div>                
                <div id="step_3" class="step col-lg-25">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Contactos</h4>
                                            <p>Nesta etapa, irá fornecer os seus contactos.</p>
                                            <hr>
                                            <p class="mb-0">Inclusive o seu endereço.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Email</label>
                                <input type="email" class="form-control" id="emailMedico" name="emailMedico" placeholder="Seu email">
                              </div> 
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Telefone</label>
                                <input type="number" class="form-control" id="telefoneMedico" name="telefoneMedico" placeholder="Telefone">
                              </div>
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Província</label>
                                <input type="text" class="form-control" id="provinciaMedico" name="provinciaMedico" placeholder="Sua província">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Município</label>
                                <input type="text" class="form-control" id="municipioMedico" name="municipioMedico" placeholder="Município">
                              </div>
                            </div>                            
                            <div class="form-row">
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Cidade</label>
                                <input type="text" class="form-control" id="cidadeMedico" name="cidadeMedico" placeholder="Sua cidade">
                              </div>
                            </div>
                </div>                
                <div id="step_4" class="step">
                  <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Especialidade</h4>
                                            <p>Nesta etapa, irá fornecer a sua especialidade</p>
                                            <hr>
                                            <p class="mb-0">Inclusive os anos de esperiência.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Especialidade</label>
                                <select name="especialidade" id="especialidade" class="form-control">
                                           @foreach ($medicos as $especialidade) 
                                                <option value="{{$especialidade->id}}">{{$especialidade->title}}</option>
                                                @endforeach
                                            </select>
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Anos de experiência</label>
                                <input type="number" class="form-control" id="anosExperienciaMedico" name="anosExperienciaMedico" placeholder="Anos de experiência">
                              </div>
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Nº da ordem</label>
                                <input type="number" class="form-control" id="nOrdemMedicos" name="nOrdemMedicos" placeholder="Nº da ordem dos médicos">
                              </div>
                            </div>
                </div>
                <div id="step_5" class="step">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Segurança</h4>
                                            <p>Nesta etapa, irá criar sua palavra passe de acesso ao sistema, e anexar sua foto caso tenha.</p>
                                            <hr>
                                            <p class="mb-0">Lembre-se sa sua palavra passe!</p>
                                          </div>
                                            <div class="form-row">
                                            <div class="form-group col-lg-8">
                                <label for="inputEmail4">Foto</label>
                                <input type="file" class="form-control" id="image" name="image">
                                </div>
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Crie uma palavra palavra passe</label>
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                              </div>
                              <div class="form-group col-lg-8">
                                <label for="inputPassword4">Repita a palavra passe</label>
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>
                        <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-md" onclick="document.getElementById('criarMedico').submit();">
                                        <i class="fa fa-dot-circle-o"></i> Submeter
                                    </button>
                        </div>
                </div>
            </form>             
        </div>
    </div>  
    
</div>
                            </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" id="prev">Anterior</button>                            
                                    <button class="btn btn-secondary" id="next">Próximo</button>            
                                </div>
                        </div>
                    </div>
                </div>

                <script>
 $(document).ready(function(){
    //Esconde todos os passos e exibe o primeiro ao carregar a página e desabilita o voltar
    $("#medico-botao").click(function(){
      $("#prev").prop("disabled", true);
    });
    $('.step').hide();
    $('.step').first().show();  
    //Exibe no topo em qual passo estamos pela ordem da div que esta visivel
    var passoexibido = function(){
        var index = parseInt($(".step:visible").index());
        if(index == 0){
            //Se for o primeiro passo desabilita o botão de voltar
            $("#prev").prop('disabled',true);
        }else if(index == (parseInt($(".step").length))){
            //Se for o ultimo passo desabilita o botão de avançar
            $("#next").prop('disabled',true);
        }else{
            //Em outras situações os dois serão habilitados
            $("#next").prop('disabled',false);            
            $("#prev").prop('disabled',false);
        }
        $("#passo").html(index + 1);

    };
    
    //Executa a função ao carregar a página
    passoexibido();

    //avança para o próximo passo
    $("#next").click(function(){
        $(".step:visible").hide().next().show();
        passoexibido();
    });

    //retrocede para o passo anterior
    $("#prev").click(function(){
        $(".step:visible").hide().prev().show();
        passoexibido();
    });

 });
</script> 












                <div class="modal fade" id="mediumModalClinica" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Clínica</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                            <form>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Nome completo</label>
                                  <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Nacionalidade</label>
                                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Endereço</label>
                                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Telefone</label>
                                  <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>   
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Repetir Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>                              
                              </form>
                            </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">Registrar</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                        </div>
                    </div>
                </div>



                <div class="modal fade" id="mediumModalTransportador" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg-8" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Transportador</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="container">
                              <div class="row">
                                  <div class="col-lg-18"> 
                                      <form action="processa.php" method="post">                                        
                                          <div id="step_1" class="step-transportador">
                                              <div class="alert alert-success" role="alert">
                                                <h4 class="alert-heading">Dados Pessoais</h4>
                                                <p>Médico(a) nesta etapa irá prencher os seus dados pessoais.</p>
                                                <hr>
                                                <p class="mb-0">Utilize os botões abaixo para prencher os campos desejados.</p>
                                              </div>
                                            <div class="form-row">
                                            <div class="form-group col-lg-8">
                                              <label for="inputEmail4">Nome completo</label>
                                              <input type="email" class="form-control" id="inputEmail4" placeholder="Seu nome completo">
                                            </div>
                                            <div class="form-group col-lg-4">
                                              <label for="inputPassword4">BI / Passaporte</label>
                                              <input type="text" class="form-control" id="inputPassword4" placeholder="BI / Passaporte">
                                            </div>
                                          </div>
                                          <div class="form-row">
                                            <div class="form-group col-lg-4">
                                              <label for="inputCity">Data de Nascimento</label>
                                              <input type="date" class="form-control" id="dataNascimento">
                                            </div>
                                            <div class="form-group col-lg-4">
                                              <label for="inputEstado">Gênero</label>
                                              <select id="inputEstado" class="form-control">
                                                <option selected>Gênero</option>
                                                <option>Masculino</option>
                                                <option>Femenino</option>
                                                <option>Outro</option>
                                              </select>
                                            </div>
                                            <div class="form-group col-lg-4">
                                              <label for="inputCity">Nacionalidade</label>
                                              <input type="text" class="form-control" id="nacionalidade" placeholder="Nacionalidade">
                                            </div>
                                        </div>
                                      </div>                
                <div id="step_2" class="step-transportador col-lg-25">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Contactos</h4>
                                            <p>Nesta etapa, irá fornecer os seus contactos.</p>
                                            <hr>
                                            <p class="mb-0">Inclusive o seu endereço.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="Seu email">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Telefone</label>
                                <input type="text" class="form-control" id="inputPassword4" placeholder="Telefone">
                              </div>
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Província</label>
                                <input type="email" class="form-control" id="provincia" placeholder="Sua província">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Município</label>
                                <input type="text" class="form-control" id="municipio" placeholder="Município">
                              </div>
                            </div>                            
                            <div class="form-row">
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Cidade</label>
                                <input type="text" class="form-control" id="cidade" placeholder="Sua cidade">
                              </div>
                            </div>
                </div>                
                <div id="step_3" class="step-transportador">
                  <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Pagamento/Caução</h4>
                                            <p>Nesta etapa, irá realizar o pagamento de uma caução</p>
                                            <p><b>IBAN: AO06 0000 0000 0000 0000 0000 0</b></p>
                                            <hr>
                                            <p class="mb-0">Servirá de apoio em caso de perda ou de um bem.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Comprovativo</label>
                                <input type="file" class="form-control" id="email" placeholder="Comprovativo bancário">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Referência/Transação</label>
                                <input type="text" class="form-control" id="inputPassword4" placeholder="Nº da transação">
                              </div>
                            </div>
                </div>
                <div id="step_4" class="step-transportador">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Segurança</h4>
                                            <p>Nesta etapa, irá criar sua palavra passe de acesso ao sistema</p>
                                            <hr>
                                            <p class="mb-0">Lembre-se sa sua palavra passe!</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                              <label for="inputEmail4">Crie uma palavra palavra passe</label>
                                <input type="password" class="form-control" id="email" placeholder="Palavra passe">
                              </div>
                              <div class="form-group col-lg-8">
                              <label for="inputPassword4">Repita a palavra passe</label>
                                <input type="password" class="form-control" id="inputPassword4" placeholder="Repita a palavra passe">
                              </div>
                            </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Enviar</button>
                        </div>
                </div>
            </form>             
        </div>
    </div>  
    
</div>
                       
                            
                              
                            </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" id="prev-transportador">Anterior</button>                            
                                    <button class="btn btn-secondary" id="next-transportador">Próximo</button>            
                                </div>
                        </div>
                    </div>
                </div>

                <script>
 $(document).ready(function(){
    //Esconde todos os passos e exibe o primeiro ao carregar a página e desabilita o voltar
    $("#transportador-botao").click(function(){
      $("#prev-transportador").prop("disabled", true);
    });
    $('.step-transportador').hide();
    $('.step-transportador').first().show();  
    //Exibe no topo em qual passo estamos pela ordem da div que esta visivel
    var passoexibidoTransportator = function(){
      var index = 0;
        var index = parseInt($(".step-transportador:visible").index());
        if(index == 0){
            //Se for o primeiro passo desabilita o botão de voltar
            $("#prev-transportador").prop('disabled',true);
        }else if(index == (parseInt($(".step-transportador").length)-1)){
            //Se for o ultimo passo desabilita o botão de avançar
            $("#next-transportador").prop('disabled',true);
        }else{
            //Em outras situações os dois serão habilitados
            $("#next-transportador").prop('disabled',false);            
            $("#prev-transportador").prop('disabled',false);
        }
        $("#passo").html(index + 1);

    };
    
    //Executa a função ao carregar a página
    passoexibidoTransportator();

    //avança para o próximo passo
    $("#next-transportador").click(function(){
        $(".step-transportador:visible").hide().next().show();
        passoexibidoTransportator();
    });

    //retrocede para o passo anterior
    $("#prev-transportador").click(function(){
        $(".step-transportador:visible").hide().prev().show();
        passoexibidoTransportator();
    });

 });
</script>
                



<div class="modal fade" id="mediumModalLaboratorio" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg-8" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Laborató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="container">
                              <div class="row">
                                  <div class="col-lg-18"> 
                                      <form action="processa.php" method="post">
                                          <div id="step_1" class="step-laboratorio">
                                          <div class="alert alert-success" role="alert">
                                            <h4 class="alert-heading">Dados do Laboratório</h4>
                                            <p>Nesta etapa irá prencher os dados do seu Laboratório.</p>
                                            <hr>
                                            <p class="mb-0">Inclusive o NIF.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Nome completo</label>
                                <input type="email" class="form-control" id="inputEmail4" placeholder="Nome do Laboratório">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">NIF</label>
                                <input type="text" class="form-control" id="inputPassword4" placeholder="NIF">
                              </div>
                            </div>
                            <div class="form-row">
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Data de Fundação</label>
                                <input type="date" class="form-control" id="dataNascimento">
                              </div>
                            </div>
                </div>                
                <div id="step_2" class="step-laboratorio col-lg-25">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Contactos</h4>
                                            <p>Nesta etapa, irá fornecer os contactos do Laboratório.</p>
                                            <hr>
                                            <p class="mb-0">Inclusive o seu endereço.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="Seu email">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Telefone</label>
                                <input type="text" class="form-control" id="inputPassword4" placeholder="Telefone">
                              </div>
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Província</label>
                                <input type="email" class="form-control" id="provincia" placeholder="Sua província">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Município</label>
                                <input type="text" class="form-control" id="municipio" placeholder="Município">
                              </div>
                            </div>                            
                            <div class="form-row">
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Cidade</label>
                                <input type="text" class="form-control" id="cidade" placeholder="Cidade">
                              </div>
                            </div>
                </div>                
                <div id="step_3" class="step-laboratorio">
                  <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Especialidade</h4>
                                            <p>Nesta etapa, irá fornecer a especialidade do seu laboratório</p>
                                            <hr>
                                            <p class="mb-0">Inclusive os anos de experiência.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Especialidade</label>
                                <input type="email" class="form-control" id="email" placeholder="Especialidade">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Anos de experiência</label>
                                <input type="number" class="form-control" id="inputPassword4" placeholder="Experiência">
                              </div>
                            </div>
                </div>
                <div id="step_4" class="step-laboratorio">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Segurança</h4>
                                            <p>Nesta etapa, irá criar sua palavra passe de acesso ao sistema</p>
                                            <hr>
                                            <p class="mb-0">Lembre-se sa sua palavra passe!</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                              <label for="inputEmail4">Crie uma palavra palavra passe</label>
                                <input type="password" class="form-control" id="email" placeholder="Palavra passe">
                              </div>
                              <div class="form-group col-lg-8">
                              <label for="inputPassword4">Repita a palavra passe</label>
                                <input type="password" class="form-control" id="inputPassword4" placeholder="Repita a palavra passe">
                              </div>
                            </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Enviar</button>
                        </div>
                </div>
            </form>             
        </div>
    </div>  
    
</div>
                       
                            
                              
                            </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" id="prev-laboratorio">Anterior</button>                            
                                    <button class="btn btn-secondary" id="next-laboratorio">Próximo</button>            
                                </div>
                        </div>
                    </div>
                </div>

                <script>
 $(document).ready(function(){
    //Esconde todos os passos e exibe o primeiro ao carregar a página e desabilita o voltar
    $("#laboratorio-botao").click(function(){
      $("#prev-laboratorio").prop("disabled", true);
    });
    $('.step-laboratorio').hide();
    $('.step-laboratorio').first().show();  
    //Exibe no topo em qual passo estamos pela ordem da div que esta visivel
    var passoexibidoLaboratorio = function(){
        var index = parseInt($(".step-laboratorio:visible").index());
        if(index == 0){
            //Se for o primeiro passo desabilita o botão de voltar
            $("#prev-laboratorio").prop('disabled',true);
        }else if(index == (parseInt($(".step-laboratorio").length)-1)){
            //Se for o ultimo passo desabilita o botão de avançar
            $("#next-laboratorio").prop('disabled',true);
        }else{
            //Em outras situações os dois serão habilitados
            $("#next-laboratorio").prop('disabled',false);            
            $("#prev-laboratorio").prop('disabled',false);
        }
        $("#passo").html(index + 1);

    };
    
    //Executa a função ao carregar a página
    passoexibidoLaboratorio();

    //avança para o próximo passo
    $("#next-laboratorio").click(function(){
        $(".step-laboratorio:visible").hide().next().show();
        passoexibidoLaboratorio();
    });

    //retrocede para o passo anterior
    $("#prev-laboratorio").click(function(){
        $(".step-laboratorio:visible").hide().prev().show();
        passoexibidoLaboratorio();
    });

 });
</script>
               

                <div class="modal fade" id="mediumModalLaboratorio" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Laborató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">
                            <form>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Nome completo do Laboratório</label>
                                  <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Endereço</label>
                                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Telefone</label>
                                  <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>   
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Repetir Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>                              
                              </form>
                            </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                        </div>
                    </div>
                </div>



                <div class="modal fade" id="mediumModalHospital" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg-8" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Hospital</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="container">
                              <div class="row">
                                  <div class="col-lg-18"> 
                                      <form action="processa.php" method="post">
                                          <div id="step_1" class="step-hospital">
                                          <div class="alert alert-success" role="alert">
                                            <h4 class="alert-heading">Dados do Hospital</h4>
                                            <p>Nesta etapa irá prencher os dados do seu Hospital.</p>
                                            <hr>
                                            <p class="mb-0">Inclusive o NIF.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Nome completo</label>
                                <input type="email" class="form-control" id="inputEmail4" placeholder="Nome do Laboratório">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">NIF</label>
                                <input type="text" class="form-control" id="inputPassword4" placeholder="NIF">
                              </div>
                            </div>
                            <div class="form-row">
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Data de Fundação</label>
                                <input type="date" class="form-control" id="dataNascimento">
                              </div>
                            </div>
                </div>                
                <div id="step_2" class="step-hospital col-lg-25">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Contactos</h4>
                                            <p>Nesta etapa, irá fornecer os contactos do Laboratório.</p>
                                            <hr>
                                            <p class="mb-0">Inclusive o seu endereço.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="Seu email">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Telefone</label>
                                <input type="text" class="form-control" id="inputPassword4" placeholder="Telefone">
                              </div>
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Província</label>
                                <input type="email" class="form-control" id="provincia" placeholder="Sua província">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Município</label>
                                <input type="text" class="form-control" id="municipio" placeholder="Município">
                              </div>
                            </div>                            
                            <div class="form-row">
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Cidade</label>
                                <input type="text" class="form-control" id="cidade" placeholder="Cidade">
                              </div>
                            </div>
                </div>                
                <div id="step_3" class="step-hospital">
                  <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Especialidade</h4>
                                            <p>Nesta etapa, irá fornecer a especialidade do seu laboratório</p>
                                            <hr>
                                            <p class="mb-0">Inclusive os anos de experiência.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Especialidade</label>
                                <input type="email" class="form-control" id="email" placeholder="Especialidade">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Anos de experiência</label>
                                <input type="number" class="form-control" id="inputPassword4" placeholder="Experiência">
                              </div>
                            </div>
                </div>
                <div id="step_4" class="step-hospital">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Segurança</h4>
                                            <p>Nesta etapa, irá criar sua palavra passe de acesso ao sistema</p>
                                            <hr>
                                            <p class="mb-0">Lembre-se sa sua palavra passe!</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                              <label for="inputEmail4">Crie uma palavra palavra passe</label>
                                <input type="password" class="form-control" id="email" placeholder="Palavra passe">
                              </div>
                              <div class="form-group col-lg-8">
                              <label for="inputPassword4">Repita a palavra passe</label>
                                <input type="password" class="form-control" id="inputPassword4" placeholder="Repita a palavra passe">
                              </div>
                            </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Enviar</button>
                        </div>
                </div>
            </form>             
        </div>
    </div>  
    
</div>
                       
                            
                              
                            </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" id="prev-hospital">Anterior</button>                            
                                    <button class="btn btn-secondary" id="next-hospital">Próximo</button>            
                                </div>
                        </div>
                    </div>
                </div>

                <script>
 $(document).ready(function(){
    //Esconde todos os passos e exibe o primeiro ao carregar a página e desabilita o voltar
    $("#hospital-botao").click(function(){
      $("#prev-hospital").prop("disabled", true);
    });
    $('.step-hospital').hide();
    $('.step-hospital').first().show();  
    //Exibe no topo em qual passo estamos pela ordem da div que esta visivel
    var passoexibidoLaboratorio = function(){
        var index = parseInt($(".step-hospital:visible").index());
        if(index == 0){
            //Se for o primeiro passo desabilita o botão de voltar
            $("#prev-hospital").prop('disabled',true);
        }else if(index == (parseInt($(".step-hospital").length)-1)){
            //Se for o ultimo passo desabilita o botão de avançar
            $("#next-hospital").prop('disabled',true);
        }else{
            //Em outras situações os dois serão habilitados
            $("#next-hospital").prop('disabled',false);            
            $("#prev-hospital").prop('disabled',false);
        }
        $("#passo").html(index + 1);

    };
    
    //Executa a função ao carregar a página
    passoexibidoLaboratorio();

    //avança para o próximo passo
    $("#next-hospital").click(function(){
        $(".step-hospital:visible").hide().next().show();
        passoexibidoLaboratorio();
    });

    //retrocede para o passo anterior
    $("#prev-hospital").click(function(){
        $(".step-hospital:visible").hide().prev().show();
        passoexibidoLaboratorio();
    });

 });
</script>



                <div class="modal fade" id="mediumModalHospital" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Hospital</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                            <form>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Nome do Hospital</label>
                                  <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Endereço</label>
                                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Telefone</label>
                                  <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>   
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Repetir Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>                              
                              </form>
                            </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                        </div>
                    </div>

                    <div class="modal fade" id="mediumModalClinica" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">PROMed | Clinica</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                            <form>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Nome da Clinica</label>
                                  <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Endereço</label>
                                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Telefone</label>
                                  <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputEmail1" class="form-label">Especialidade</label>
                                  <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                </div>
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>   
                                <div class="mb-3">
                                  <label for="exampleInputPassword1" class="form-label">Repetir Palavra Passe</label>
                                  <input type="password" class="form-control" id="exampleInputPassword1">
                                </div>                              
                              </form>
                            </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                        </div>
                    </div>
                </div>
@endsection