@extends('layouts.frontend.app')

@section('content')
<!-- Start top-section Area -->
<section class="top-section-area section-gap">
  <div class="container">
    <div class="row justify-content-between align-items-center d-flex">
      <div class="col-lg-8 top-left">
        <h1 class="text-white mb-20">Sobre o Médico</h1>
        <!-- End top-section Area 
        <ul>
          <li>
            <a href="index.html">Home</a
            ><span class="lnr lnr-arrow-right"></span>
          </li>
          <li>
            <a href="category.html">Category</a
            ><span class="lnr lnr-arrow-right"></span>
          </li>
          <li><a href="single.html">Fashion</a></li>
        </ul> -->
      </div>
    </div>
  </div>
</section>
s
<!-- Start post Area -->
<div class="post-wrapper pt-100">
  <!-- Start post Area -->
  <section class="post-area">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8">
          <div class="single-page-post">
            <img class="img-fluid" src="{{asset('storage/medico/'.$consulta->image)}}" alt="{{$consulta->image}}" />
            <div class="top-wrapper">
              <div class="row d-flex justify-content-between">
                <h2 class="col-lg-8 col-md-12 text-uppercase">
               {{$consulta->title}}
                </h2>
                <div
                  class="col-lg-4 col-md-12 right-side d-flex justify-content-end"
                >
                  <div class="desc">
                    <h2>{{$consulta->title}}</h2>
                    <h3>{{$consulta->created_at->diffForHumans()}}</h3>
                  </div>
                  <div class="user-img">
                    <img src="{{asset('storage/medico/'.$consulta->image)}}" alt="{{$consulta->name}}"  width="50px"/>
                  </div>
                </div>
              </div>
              <h4 class="text-muted">{{$consulta->title}}</h4>
            </div>
            <div class="tags">
              
            </div>
            <div class="single-post-content">
             {!! $consulta->body !!}
            </div>
            <div class="bottom-wrapper">
              <div class="row">
                <div class="col-lg-4 single-b-wrap col-md-12">
                 @guest
                      <i class="fa fa-heart-o" aria-hidden="true"></i>{{$consulta->likedUsers->count()}} pessoas gostam disso
                  @else
                  <a href="#" onclick="document.getElementById('like-form-{{$consulta->id}}').submit();"> <i class="fa fa-heart" aria-hidden="true" style="color: red"></i></a>
                      {{$consulta->likedUsers->count()}} pessoas gostam disso
                  
                      <form action="" method="POST" style="display: none" id="like-form-{{$consulta->id}}">
                      @csrf
                      </form>
                  @endguest
                </div>
                <div class="col-lg-4 single-b-wrap col-md-12">
                  <i class="fa fa-eye" aria-hidden="true"></i> {{$consulta->view_count}}
                  Visualizações
                </div>
                <div class="col-lg-4 single-b-wrap col-md-12">
                  <i class="fa fa-comment-o" aria-hidden="true"></i> 1
                  Comentários
                </div>
                <div class="row mx-1">
                  <div class="col-lg-6 single-b-wrap col-md-12 pt-4">
                    <h5>Partilhe-o na sua conta dos meios de comunicação social.<i class="fa-twitter-square"></i></h5>
                   </div>
                  <div class="col-lg-6 single-b-wrap col-md-12 mt-3" id="social-links">
                    <ul class="social-icons">
                      <li> 
                        <a href="#" id="gmail-btn"
                          ><i class="fa fa-envelope-o" aria-hidden="true" style="color: #cf3e39; font-size: 2rem"></i></a>
                      </li>
                      <li> 
                        <a href="#" id="facebook-btn"
                          ><i class="fa fa-facebook-square" aria-hidden="true" style="color: #3b5998; font-size: 2rem"></i></a>
                      </li>
                      <li>
                        <a href="#" id="gplus-btn"
                          ><i class="fa fa-google-plus-square" aria-hidden="true" style="color: #dd4b39; font-size: 2rem"></i>
                      </a>
                      </li>
                      <li>
                        <a href="#" id="twitter-btn"
                          ><i class="fa fa-twitter-square" aria-hidden="true" style="color: #1da1f2; font-size: 2rem"></i>
                        </a>
                      </li>
                      <li>
                        <a href="#" id="linkedin-btn"
                          ><i class="fa fa-linkedin-square" aria-hidden="true" style="color: #0077b5; font-size: 2rem"></i>
                        </a>
                      </li>
                      <li>
                        <a href="#" id="whatsapp-btn"
                          ><i class="fa fa-whatsapp" aria-hidden="true" style="color: #25d366; font-size: 2rem"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="col-lg-6 single-b-wrap col-md-12 mt-3">
                    <button class="btn btn-primary" id="shareBtn" style="display: none"><i class="fa fa-share text-white" aria-hidden="true"></i> Partilhar</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- End comment-sec Area -->

            <!-- Start commentform Area -->
            <section class="commentform-area pb-120 pt-80 mb-100">
            @if(Auth::check())
                <div class="container">
                <button type="submit" class="primary-btn mt-20" id="consulta-botao" data-toggle="modal" data-target="#mediumModalConsulta">Marcar consulta</button>
                    </div>
                @else
                <div class="container">                    
                    <h4>Registre-se em nossa plataforma, caso queira marcar consultas com o especialista desejado! - <a href="{{route('login')}}">Entrar</a> ou <a href="{{route('register')}}">Registar-se</a></h4>
                </div>
              @endif
            </section>
            <!-- End commentform Area -->
          </div>
        </div>
        @include('layouts.frontend.partials.sidebar')
      </div>
    </div>
  </section>
  <!-- End post Area -->
</div>
<div class="modal fade" id="mediumModalConsulta" 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 | Consulta Médica</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>
                                          <div id="step_1" class="step">
                                          <div class="alert alert-success" role="alert">
                                            <h4 class="alert-heading">Dados do Paciente</h4>
                                            <p><b>{{Auth::user()->name }}</b> nesta etapa irá confrontar os seus dados pessoais.</p>
                                            <hr>
                                            <p class="mb-0">Att: Prencher o seu telefone, para contacto Médico!</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-12">
                                <label for="inputEmail4">Nome completo</label>
                                <input type="text" name="nomeCompleto" class="form-control" id="inputEmail4" value="{{Auth::user()->name }}" readonly>
                              </div>
                            </div>
                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputCity">Email</label>
                                <input type="text" name="email" class="form-control" id="inputEmail4" value="{{Auth::user()->email }}" readonly>
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputCity">ID. Utilizador</label>
                                <input type="text" class="form-control" id="identificacao" value="{{Auth::user()->userid }}" readonly>
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputCity">Nº Telefone</label>
                                <input type="text" class="form-control" id="telefone" placeholder="Telefone">
                              </div>
                            </div>
                </div>                
                <div id="step_2" class="step col-lg-25">                
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Data e Hora da sua consulta</h4>
                                            <p>Nesta etapa, irá fornecer a data que deseja realizar a consulta.</p>
                                            <hr>
                                            <p class="mb-0">Att: Caso o Médico esteja disponível no horário desejado.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-8">
                                <label for="inputEmail4">Data</label>
                                <input type="date" class="form-control" id="dataDaConsulta">
                              </div>
                              <div class="form-group col-lg-4">
                                <label for="inputPassword4">Hora</label>
                                <input type="time" class="form-control" min="08:00" max="18:00" value="08:00" id="inputPassword4" placeholder="Hora">
                              </div>
                            </div>
                  </div>                
                <div id="step_3" class="step">
                <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Pagamento da consulta</h4>
                                            <p>Nesta etapa, irá realizar o pagamento da consulta</p>
                                            <p><b>IBAN: AO06 0000 0000 0000 0000 0000 0</b></p>
                                            <hr>
                                            <p class="mb-0">Att: Definida pelo médico.</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">
                        <div class="alert alert-success col-lg-25" role="alert">
                                            <h4 class="alert-heading">Muito bem!</h4>
                                            <p>Nesta etapa, irá dizer o que realmente está a sentir</p>
                                            <hr>
                                            <p class="mb-0">Lembre-se, de dizer só a verdade! Trata-se de sua saúde.</p>
                                          </div>
                                            <div class="form-row">
                              <div class="form-group col-lg-12">
                                <label for="inputEmail4">Descreva o que sente!</label>
                                <textarea class="form-control" name="comoSeSente" id="comoSeSente" cols="30" rows="10">
                                  {{Auth::user()->name }}, em pquenas palavras descreva o que está a sentir! Terá a resposta do médico em  breve.
                                </textarea>                              
                              </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">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
    $("#consulta-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)-1)){
            //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>


















<!-- End post Area -->
@endsection
@push('footer')
    <script type="text/javascript">
    function showReplyForm(commentId,user) {
      var x = document.getElementById(`reply-form-${commentId}`);
      var input = document.getElementById(`reply-form-${commentId}-text`);

      if (x.style.display === "none") {
        x.style.display = "block";
        input.innerText=`@${user} `;

      } else {
        x.style.display = "none";
      }
    }
    // Social Share links.
    const gmailBtn = document.getElementById('gmail-btn');
    const facebookBtn = document.getElementById('facebook-btn');
    const gplusBtn = document.getElementById('gplus-btn');
    const linkedinBtn = document.getElementById('linkedin-btn');
    const twitterBtn = document.getElementById('twitter-btn');
    const whatsappBtn = document.getElementById('whatsapp-btn');
    const socialLinks = document.getElementById('social-links');

    // posturl posttitle
    let postUrl = encodeURI(document.location.href);

    facebookBtn.setAttribute("href",`https://www.facebook.com/sharer.php?u=${postUrl}`);
    twitterBtn.setAttribute("href", `https://twitter.com/share?url=${postUrl}&text=${postTitle}`);
    linkedinBtn.setAttribute("href", `https://www.linkedin.com/shareArticle?url=${postUrl}&title=${postTitle}`);
    whatsappBtn.setAttribute("href",`https://wa.me/?text=${postTitle} ${postUrl}`);
    gmailBtn.setAttribute("href",`https://mail.google.com/mail/?view=cm&su=${postTitle}&body=${postUrl}`);
    gplusBtn.setAttribute("href",`https://plus.google.com/share?url=${postUrl}`);
    
    // Button
    const shareBtn = document.getElementById('shareBtn');
    if(navigator.share){
      shareBtn.style.display = 'block';
      socialLinks.style.display = 'none';
      shareBtn.addEventListener('click', ()=>{
        navigator.share({
          title: postTitle,
          url:postUrl
        }).then((result) => {
          alert('Obrigado por partilhar.')
        }).catch((err) => {
          console.log(err);
        });;
      });
    }else{

    }
    </script>
@endpush