@extends('layouts.default')

@section('meta')
<title>{{\App\Helpers::mataTitle()}}</title>
<meta name="description" content="{{\App\Helpers::mataDescription()}}" />
<meta name="keywords" content="{{\App\Helpers::mataKeywords()}}" />
@endsection

@section('head')
@endsection

@section('content')
<section class="sec-2">
    <div class="ser-bg"> <img src="{{asset(\App\Helpers::pageData('section_1', 'section_1_header_banner'))}}">
      <div class="title">
        {!! \App\Helpers::pageData('section_1', 'section_1_header_text') !!}
      </div>
      <div class="chat-btn"> <a href="{{ route('contact_us') }}">Let’s kōrero... </a> </div>
    </div>
    <div class="container">
      <h1 class="pg-title">How can we help?</h1>
      <div class="ser-table f-row">
        <div class="ser-col">
          <h2>{!! \App\Helpers::pageData('section_2', 'section_2_title') !!}<span>{!! \App\Helpers::pageData('section_2', 'section_2_subtitle') !!}</span></h2>
          {!! \App\Helpers::pageData('section_2', 'section_2_brief_description') !!}
          <div class="btn-text"><a href="#health-centres">Click here</a> to find out more </div>
        </div>
        <div class="sp-bdr"></div>
        <div class="ser-col">
          <h2>{!! \App\Helpers::pageData('section_3', 'section_3_title') !!} <span>{!! \App\Helpers::pageData('section_3', 'section_3_subtitle') !!}</span></h2>
          {!! \App\Helpers::pageData('section_3', 'section_3_brief_description') !!}
          <div class="btn-text"><a href="#home-services">Click here</a> to find out more </div>
        </div>
        <div class="sp-bdr"></div>
        <div class="ser-col">
          <h2>{!! \App\Helpers::pageData('section_4', 'section_4_title') !!}<span>{!! \App\Helpers::pageData('section_4', 'section_4_subtitle') !!}</span></h2>
          {!! \App\Helpers::pageData('section_4', 'section_4_brief_description') !!}
          {!! \App\Helpers::pageData('section_4', 'section_4_subheading') !!}
          <div class="btn-text"><a href="#child-wellness">Click here</a> to find out more </div>
        </div>
      </div>
      <div class="gray-bdr"></div>
      <div class="ser-table s-row">
        <div class="ser-col">
          <h2>{!! \App\Helpers::pageData('section_5', 'section_5_title') !!} <span>{!! \App\Helpers::pageData('section_5', 'section_5_subtitle') !!}</span></h2>
          {!! \App\Helpers::pageData('section_5', 'section_5_subheading') !!}
          <div class="btn-text"><a href="#elderly-wellness">Click here</a> to find out more </div>
        </div>
        <div class="sp-bdr"></div>
        <div class="ser-col">
          <h2>{!! \App\Helpers::pageData('section_6', 'section_6_title') !!} <span>{!! \App\Helpers::pageData('section_6', 'section_6_subtitle') !!}</span></h2>
          {!! \App\Helpers::pageData('section_6', 'section_6_brief_description') !!}
          <div class="btn-text"><a href="#metal-health-services">Click here</a> to find out more </div>
        </div>
        <div class="sp-bdr"></div>
        <div class="ser-col">
          <h2>{!! \App\Helpers::pageData('section_7', 'section_7_title') !!} <span>{!! \App\Helpers::pageData('section_7', 'section_7_subtitle') !!}</span></h2>
          {!! \App\Helpers::pageData('section_7', 'section_7_brief_description') !!}
          <div class="btn-text"><a href="#community">Click here</a> to find out more </div>
        </div>
      </div>
      <div class="gray-bdr sp-b"></div>
      <a class="home-btn" href="#top"><img src="{{asset('images/home-icon.png')}}"></a> </div>
  </section>
  <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="#health-centres">{!! \App\Helpers::pageData('section_2', 'section_2_title') !!} <span>{!! \App\Helpers::pageData('section_2', 'section_2_subtitle') !!}</span></a></li>
            <li><a href="#home-services">{!! \App\Helpers::pageData('section_3', 'section_3_title') !!} <span>{!! \App\Helpers::pageData('section_3', 'section_3_subtitle') !!}</span></a></li>
            <li><a href="#child-wellness">{!! \App\Helpers::pageData('section_4', 'section_4_title') !!} <span>{!! \App\Helpers::pageData('section_4', 'section_4_subtitle') !!}</span></a></li>
            <li><a href="#elderly-wellness">{!! \App\Helpers::pageData('section_5', 'section_5_title') !!} <span>{!! \App\Helpers::pageData('section_5', 'section_5_subtitle') !!}</span></a></li>
            <li><a href="#metal-health-services">{!! \App\Helpers::pageData('section_6', 'section_6_title') !!} <span>{!! \App\Helpers::pageData('section_6', 'section_6_subtitle') !!}</span></a></li>
            <li><a href="#community">{!! \App\Helpers::pageData('section_7', 'section_7_title') !!} <span>{!! \App\Helpers::pageData('section_7', 'section_7_subtitle') !!}</span></a></li>
        </ul>
    </div>
  <section id="health-centres" class="sr-f" style="position:relative;">
    <div class="sr sr-1">
      <div class="sr-col"> <img src="{{asset(\App\Helpers::pageData('section_2', 'section_2_service_banner'))}}"> </div>
      <div class="sr-col">
        <div class="sr-right">
          <h1>{!! \App\Helpers::pageData('section_2', 'section_2_title') !!}<span>{!! \App\Helpers::pageData('section_2', 'section_2_subtitle') !!}</span></h1>
          {!! \App\Helpers::pageData('section_2', 'section_2_brief_description') !!}
          {!! \App\Helpers::pageData('section_2', 'section_2_subheading') !!}
        </div>
      </div>
    </div>
    <div class="sr-co-txt">
    <div class="container">
        {!! \App\Helpers::pageData('section_2', 'section_2_content') !!}
        <div class="btn-sec">
          <div class="b-col"><a href="{{ route('news_and_events') }}"><img src="{{asset('images/updates_button_orange.svg')}}" class="org"><img src="{{asset('images/latest_updates_button_green.svg')}}" class="hover"></a></div>
          <div class="sp"></div>
          <div class="b-col"><a href="{{ route('contact_us') }}"><img src="{{asset('images/contact_button_blue.svg')}}" class="org"><img src="{{asset('images/contact_us_button_green.svg')}}" class="hover"></a></div>
          <div class="sp"></div>
          <div class="b-col"><a href="{{ config('app.book_appointment_url')}}" target="_blank"><img src="{{asset('images/book_button_green.svg')}}" class="org"><img src="{{asset('images/book_ro_button_blue.svg')}}" class="hover"></a></div>
        </div>
        <div class="gray-bdr sp-b"></div>
      </div>
      <a class="home-btn" href="#top"><img src="{{asset('images/home-icon.png')}}"></a> </div>
  </section>
  <section id="home-services" class="sr-s">
    <div class="sr sr-2">
      <div class="sr-col">
        <div class="sr-left">
          <h1>{!! \App\Helpers::pageData('section_3', 'section_3_title') !!} <span>{!! \App\Helpers::pageData('section_3', 'section_3_subtitle') !!}</span></h1>
          {!! \App\Helpers::pageData('section_3', 'section_3_brief_description') !!}
          {!! \App\Helpers::pageData('section_3', 'section_3_subheading') !!}
        </div>
      </div>
      <div class="sr-col text-right"> <img src="{{asset(\App\Helpers::pageData('section_3', 'section_3_service_banner'))}}"> </div>
    </div>
    <div class="sr-co-txt">
    <div class="container">
        {!! \App\Helpers::pageData('section_3', 'section_3_content') !!}
      </div>
      <a class="home-btn" href="#top"><img src="{{asset('images/home-icon.png')}}"></a> </div>
  </section>
  <section id="child-wellness" class="sr-t">
    <div class="sr sr-3">
      <div class="sr-col">
        <div class="sr-left">
          <h1>{!! \App\Helpers::pageData('section_4', 'section_4_title') !!} <span>{!! \App\Helpers::pageData('section_4', 'section_4_subtitle') !!}</span></h1>
          {!! \App\Helpers::pageData('section_4', 'section_4_brief_description') !!}
          {!! \App\Helpers::pageData('section_4', 'section_4_subheading') !!}
        </div>
      </div>
      <div class="sr-col text-right"> <img src="{{asset(\App\Helpers::pageData('section_4', 'section_4_service_banner'))}}"> </div>
    </div>
    <div class="container">
      <div class="sr-co-txt">
        {!! \App\Helpers::pageData('section_4', 'section_4_content') !!}
      </div>
      <a class="home-btn" href="#top"><img src="{{asset('images/home-icon.png')}}"></a> </div>
  </section>
  <section id="elderly-wellness" class="sr-fo">
    <div class="sr sr-4">
      <div class="sr-col"> <img src="{{asset(\App\Helpers::pageData('section_5', 'section_5_service_banner'))}}"> </div>
      <div class="sr-col">
        <div class="sr-right">
          <h1>{!! \App\Helpers::pageData('section_5', 'section_5_title') !!}<span>{!! \App\Helpers::pageData('section_5', 'section_5_subtitle') !!}</span></h1>
          {!! \App\Helpers::pageData('section_5', 'section_5_brief_description') !!}
          {!! \App\Helpers::pageData('section_5', 'section_5_subheading') !!}
        </div>
      </div>
    </div>
    <div class="container">
      {!! \App\Helpers::pageData('section_5', 'section_5_content') !!}
      <a class="home-btn" href="#top"><img src="{{asset('images/home-icon.png')}}"></a>
    </div>
  </section>
  <section id="metal-health-services" class="sr-fi">
    <div class="sr sr-5">
      <div class="sr-col">
        <div class="sr-left">
          <h1>{!! \App\Helpers::pageData('section_6', 'section_6_title') !!}<span>{!! \App\Helpers::pageData('section_6', 'section_6_subtitle') !!}</span></h1>
          {!! \App\Helpers::pageData('section_6', 'section_6_brief_description') !!}
          {!! \App\Helpers::pageData('section_6', 'section_6_subheading') !!}
        </div>
      </div>
      <div class="sr-col text-right"> <img src="{{asset(\App\Helpers::pageData('section_6', 'section_6_service_banner'))}}"> </div>
    </div>
    <div class="container">
      <div class="sr-co-txt s-1">
        {!! \App\Helpers::pageData('section_6', 'section_6_content') !!}
        <div class="gray-bdr sp-b"></div>
      </div>
      <a class="home-btn" href="#top"><img src="{{asset('images/home-icon.png')}}"></a> </div>
  </section>
  <section id="community" class="sr-six">
    <div class="sr sr-6">
      <div class="sr-col"> <img src="{{asset(\App\Helpers::pageData('section_7', 'section_7_service_banner'))}}"> </div>
      <div class="sr-col">
        <div class="sr-right">
          <h1>{!! \App\Helpers::pageData('section_7', 'section_7_title') !!} <span>{!! \App\Helpers::pageData('section_7', 'section_7_subtitle') !!}</span></h1>
          {!! \App\Helpers::pageData('section_7', 'section_7_brief_description') !!}
        </div>
      </div>
    </div>
    <div class="container">
      <div class="sr-co-txt">
        {!! \App\Helpers::pageData('section_7', 'section_7_content') !!}
      </div>
      <a class="home-btn" href="#top"><img src="{{asset('images/home-icon.png')}}"></a> 
      </div>
  </section>
  <section class="sec-4">
    <div class="book-appointment" style="background: url({{asset(\App\Helpers::pageDataByPage('section_1', 'section_1_header_banner', 'book_appointment'))}}) no-repeat center;background-size: cover;">
      <div class="container">
        {!! \App\Helpers::pageDataByPage('section_1', 'section_1_header_text', 'book_appointment') !!}
        <div class="content-p">
          <div class="con-col f1">
            {!! \App\Helpers::pageDataByPage('section_1', 'section_1_header_content', 'book_appointment') !!}
          </div>
          <div class="con-col f2"> <a href="{{ config('app.book_appointment_url')}}" target="_blank"><img src="{{asset('images/book_button_green.svg')}}" class="org"><img src="{{asset('images/book_ro_button_blue.svg')}}" class="hover"></a> <a href="{{ route('register')}}"><img src="{{asset('images/register_button_green.svg')}}" class="org"><img src="{{asset('images/register_button_blue.svg')}}" class="hover"></a> </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('script')
<script type="text/javascript">
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        var objectSelect = $("#health-centres");
        var objectPosition = objectSelect.offset().top;
        if (scroll > objectPosition) {
            $(".navbar-collapse").addClass("change");
        } else {
            $(".navbar-collapse").removeClass("change");
        }
    });
</script>
@endsection