@extends('layouts.start')
@section('title','FAQs')
@section('css')
  <style>
    .accordion .card-header:after {
      font-family: 'FontAwesome';
      content: "\f068";
      float: right;
    }
    .accordion .card-header.collapsed:after {
      /* symbol for "collapsed" panels */
      content: "\f067";
    }
  </style>
@endsection
@section('content')
  <!-- Hero Area Start-->
  <div class="slider-area ">
    <div class="single-slider slider-height2 d-flex align-items-center" data-background="assets/img/hero/job-banner.jpg">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="hero-cap text-center">
              <h2>@yield('title')</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Hero Area End -->
  <!-- FAQs Start-->
  <div class="pt-100 pb-150">
    <div class="container">
      <div id="accordion" class="accordion">
        <div class="card mb-0">
          @foreach($faqs as $faq)
            <div class="card-header collapsed" data-toggle="collapse" href="#collapse{{ $faq->id }}">
              <a class="card-title">
                {{ $faq->title }}
              </a>
            </div>
            <div id="collapse{{ $faq->id }}" class="card-body collapse" data-parent="#accordion" >
              {!! $faq->content !!}
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
  <!-- FAQs End-->
@endsection
@section('js')
  <script src="{{ asset('plugins/intl-tel-input/build/js/utils.js') }}"></script>
  <script src="{{ asset('plugins/intl-tel-input/build/js/intlTelInput.js') }}"></script>
  <script>
    var input = document.querySelector("#phone");
    window.intlTelInput(input, {
      // allowDropdown: false,
      // autoHideDialCode: false,
      // autoPlaceholder: "off",
      // dropdownContainer: document.body,
      // formatOnDisplay: false,
      // geoIpLookup: function(callback) {
      //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      //     var countryCode = (resp && resp.country) ? resp.country : "";
      //     callback(countryCode);
      //   });
      // },
      // hiddenInput: "full_number",
      // initialCountry: "auto",
      // localizedCountries: { 'de': 'Deutschland' },
      // nationalMode: false,
      // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
      // placeholderNumberType: "MOBILE",
      preferredCountries: ['us', 'gb'],
      // separateDialCode: true,
      {{--utilsScript: {{ asset('plugins/intl-tel-input/build/js/utils.js') }},--}}
    });
  </script>
@endsection