@extends('web.teacher.index')
@section('title', 'Ajuda')

@section('content')

@include('web.teacher.partials.sideBarAvailability')

<section class="myProfileMobile">
  <div class="menuTopMobile">
    <div class="menuMobileConteiner">

      <a href="{{ route('web.home') }}" class="voltar">
        <img src="{{ asset('images/web/icons/voltar.svg') }}" alt="voltar">
      </a>

      <div>
        <h2>
          Ajuda
        </h2>
      </div>

      <a href="" class="edit linkOrange" data-openmodal="contact">
        Contato
      </a>

    </div>
  </div>
  <div class="marginMenuMobile1"> </div>
</section>


<section class="myProfile editMobile spanProf">
  <div class="barMyProfile closeMobile">
    <div class="title">
        <h2><a href="{{ route('myProfile') }}" style="text-decoration: none; color: inherit;">Meu perfil</a></h2>
      <span>></span>
      <h2>Ajuda</h2>

    </div>

    <div class="saveEdit">
      <a href="" class="linkOrange" data-openmodal="contact">Contato</a>
      <a href="{{ route('web.home') }}">Voltar</a>
    </div>
  </div>

  <div class="helpProfile helpProfileProf">
    <img class="doll8" src="{{ asset('images/web/doll/p8.png') }}" alt="">
    <div class="helpMenu">
      <div id="helpMenu" class="helpMenuSlide">
          @foreach($categories as $cat)
              <a href="" class="active" data-profile="{{ \Illuminate\Support\Str::camel($cat->name) }}">{{ $cat->name }}</a>
          @endforeach
      </div>
    </div>
    <div class="helpContent">
        @foreach($categories as $cat)

            <span data-profillabel="{{ \Illuminate\Support\Str::camel($cat->name) }}" class="activeLabel">
                @foreach($cat->questions as $question)
                    <details>
                      <summary>
                        <div>
                          <h2>{{ $question->question }}</h2>
                          <img src="{{ asset('images/web/icons/setaBlack.svg') }}" alt="abrir">
                        </div>
                      </summary>
                      <div class="answer">
                        <p>
                         {{ $question->answer }}
                        </p>
                      </div>
                    </details>
                @endforeach
            </span>
        @endforeach
    </div>
  </div>
</section>

<!-- Modal Contato -->
<section class="modalClassChecked" data-modal="contact">

  <img class="fechar" src="{{ asset('images/web/icons/x.svg') }}" alt="Fechar">

  <div class="contentChecked">
    <h1>
      Contato
    </h1>
    <h3>Entre em contato com nosso suporte.</h3>


    <div class="contact">

      <a href="tel:+5551999999999" target="_blank" rel="noopener noreferrer">
        <img src="{{ asset('images/web/icons/phone-solid.svg') }}" alt="whatsapp">
      </a>

      <a href="https://api.whatsapp.com/send/?phone=5551982940966&text=Suporte iWill&app_absent=0" target="_blank" rel="noopener noreferrer">
        <img src="{{ asset('images/web/icons/whatsapp-brands.svg') }}" alt="whatsapp">
      </a>

      <a href="mailto:" target="_blank" rel="noopener noreferrer">
        <img src="{{ asset('images/web/icons/envelope-solid.svg') }}" alt="email">
      </a>

    </div>

    <p class="voltar">
      Cancelar
    </p>
  </div>

</section>
@stop