@extends('app_client')

@section('title', 'FAQ | '.$property->name)

@section('content')
  <div class="container-fluid" ng-controller="FaqCtlr as vm">

    <!-- Header -->
    <div class="page-header">
      <!-- Seaction Title -->
      <div class="header left">
        <span class="icon icon-message_chat_bubble_comment_talk_conversation"></span>
        <h1 class="header-title">
          {{ 'Frequently Asked Questions' }}
        </h1>
      </div>
      <!-- Controls -->
      <div class="sort ml-m--m">
        <a class="btn-oval uppercase" href="{{ url('faq.pdf') }}" target="_blank">Print</a>
        <!-- Search -->
        <div class="search-field">
          <form method="GET" action="{{ url('faq') }}" role="search">
            <input type="search"
              name="search"
              value="{{ isset($_GET['search']) ? $_GET['search'] : NULL }}"
              placeholder="{{ 'Search here ...' }}"/>
          </form>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <!-- Content -->
    @if(empty($_GET['search']))
      <div id="accordion"
        class="row"
        ng-init="vm.get_items()">
        <div class="col-sm-12">
          <v-accordion class="vAccordion--default">
            <v-pane class="panel" ng-repeat="faq in vm.faqs">
              <v-pane-header class="title">@{{ ::faq.title }}</v-pane-header>
              <v-pane-content>
                <v-accordion ng-if="faq.questions.length">
                  <v-pane ng-repeat="question in faq.questions | orderBy: 'title'">
                    <v-pane-header>@{{ ::question.title }}</v-pane-header>
                    <v-pane-content>
                      <div class="answers"
                        ng-bind-html="question.answers"></div>
                    </v-pane-content>
                  </v-pane>
                </v-accordion>
              </v-pane-content>
            </v-pane>
          </v-accordion>
        </div><!-- .col-sm-12 -->
      </div><!-- .row -->
    @else
      <div id="accordion" class="panel">
        @if($faqs->count())
          @foreach($faqs as $key => $faq)
            <br>            <h5 class="query-title">{!! $faq->title !!}</h5>
            <div class="answers">
              <ul class="query-answers">{!! $faq->answers !!}</ul>
            </div>
          @endforeach
        @else
          <h4>{!! "No results found for \"<i>".$_GET['search']."</i>\"" !!}</h4>
        @endif
      </div>
    @endif
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'vAccordion',
      'ngAnimate',
      'faq',
      'modal',
      'user',
      'socket',
      'liveChat'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/angular-moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/dateTimeInput.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.templates.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload-shim.min.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload.min.js"></script>
  <script type="text/javascript" src="/assets/js/v-accordion.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/faq.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/socket.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/liveChat.js') }}"></script>
@endsection