@extends('layouts.base')

@section('title')
<title>Snyder Hemband</title>
@endsection

@section('context-switch-link')
  <a class="ms-3 text-dark" href="{{ route('physicians.index') }}">For Physicians</a>
@endsection

@section('navigation')
<div class="container">
        <nav class="navbar navbar-expand-lg py-3">
            <div class="container-fluid p-0 d-flex position-relative">
                <a class="navbar-brand" href="{{route('index')}}">
                    <img src="{{asset('/img/logo.svg')}}" alt="Logo">
                </a>
                <div>
                    <div class="d-flex align-items-center">
                      <a class="d-lg-none d-inline btn rounded-0 btn-pry px-3 py-2" href="{{ route('index') }}">Find a Clinic</a>
                      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                      </button>
                    </div>
                    <div class="collapse navbar-collapse" id="navBar">
                        <ul class="navbar-nav ms-auto align-items-lg-center">
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('snyderhemband') }}">How it Works</a>
                            </li>
                            <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Hemorrhoids
                              </a>
                              <ul class="dropdown-menu dropdown-menu-end p-0">
                                <li>
                                  <a class="dropdown-item" href="{{route('aboutHem')}}">
                                    <h6 class="mb-1">About hemorrhoids</h6>
                                    <small>What are hemorrhoids? All you need to know</small>
                                  </a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="{{route('treatment')}}">
                                    <h6 class="mb-1">Treatment guide</h6>
                                    <small>Let’s learn a bit more about Snyder Hemband.</small>
                                  </a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="{{route('postCare')}}">
                                    <h6 class="mb-1">Post-treatment care</h6>
                                    <small>All questions answered.</small>
                                  </a>
                                </li>
                              </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('compare') }}">Compare Treatment Options</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('faqs') }}">FAQ</a>
                            </li>
                            <!-- <li class="nav-item">
                                <a class="nav-link" href="{{ route('contact') }}">Contact us</a>
                            </li> -->
                            <li class="nav-item d-lg-block d-none">
                                <a class="btn px-4 py-2 rounded-0 btn-pry" href="{{ route('find-a-clinic') }}">Find a Clinic</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </nav>
    </div>
    @endsection

@section('main')
  @yield('content')
@endsection

@section('footer')
<footer>
      <div class="py-lg-5 py-3" style="background-color: #F7F7F7;">
        <div class="container">
          <div class="row justify-content-center">
            <div class="d-flex justify-content-center align-items-center w-100">
              <div>
                <h4 class="header m-0">Have any questions? <br class="d-md-none d-block"></h4>
              </div>
              <div class="ps-sm-4">
                <a href="{{route('contact')}}" class="btn btn-outline-pry px-5 mt-sm-0 mt-3">Contact us</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-pry pt-5">
        <div class="container">
            <div class="row mb-4">
              <div class="col-lg-3 mb-4">
                <img src="{{asset('img/logo_white.svg')}}" width="220" alt="">
              </div>
              <div class="col-lg-3 col-md-4">
                <p class="mb-4"><a href="#" class="text-white">Snyder Hemband</a></p>
                <div class="dropdown">
                  <a class="text-white mb-4 d-block dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Get rid of Hemorrhoids
                  </a>

                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{route('aboutHem')}}">About hemorrhoids</a></li>
                    <li><a class="dropdown-item" href="{{route('treatment')}}">Treatment guide</a></li>
                    <li><a class="dropdown-item" href="{{route('postCare')}}">Your treatment with Snyder Hemband</a></li>
                  </ul>
                </div>
                <p class="mb-4"><a href="{{route('compare')}}" class="text-white">Comparing Treatment Options</a></p>
              </div>
              <div class="col-lg-3 col-md-3 offset-lg-0 offset-md-1">
                <p class="mb-4"><a href="#" class="text-white">For patients</a></p>
                <p class="mb-4"><a href="#" class="text-white">For physicians</a></p>
                <p class="mb-4"><a href="#" class="text-white">Login</a></p>
                <p class="mb-4"><a href="#" class="text-white">Register</a></p>
              </div>
              <div class="col-lg-3 col-md-4">
                <p class="mb-4"><a href="{{route('contact')}}" class="text-white">Contact us</a></p>
                <p class="mb-4"><a href="#" class="text-white">info@snyderhemband.org</a></p>
                <p class="mb-4"><a href="#" class="text-white">+XXX XXX XXX</a></p>
              </div>
            </div>
            <hr class="bg-white">
            <div class="d-flex flex-lg-row flex-column-reverse text-lg-start text-center align-items-center justify-content-between pb-2">
              <div class="text-white mt-lg-0 mt-2">
                <span class="opacity-75">&copy; 2022 SNYDER HEMBAND - All rights reserved.</span>
              </div>
              <div class="d-sm-flex">
                <div class="mt-sm-0 mt-2">
                  <a href="#" class="ms-sm-4 text-white opacity-75">Privacy Policy</a>
                  <a href="#" class="ms-4 text-white opacity-75">Terms and conditions</a>
                </div>
              </div>
            </div>
        </div>
      </div>
    </footer>
@endsection
