@extends('web.layout.master')
@section('title', 'Welcome! | House Runs For Me')
@section('faq-active','active')
@section('content')
    <style>
         .accordion_one .panel-group {
            border: 1px solid #f1f1f1;
            /* margin-top: 100px */
        }

        a:link {
            text-decoration: none
        }

        .accordion_one .panel {
            background-color: transparent;
            box-shadow: none;
            border-bottom: 0px solid transparent;
            border-radius: 0;
            margin: 0
        }

        .accordion_one .panel-default {
            border: 0
        }

        .accordion-wrap .panel-heading {
            padding: 0px;
            border-radius: 0px
        }

        h4 {
            font-size: 18px;
            line-height: 24px
        }

        .accordion_one .panel .panel-heading a.collapsed {
            color: #999999;
            display: block;
            padding: 12px 30px;
            border-top: 0px
        }

        .accordion_one .panel .panel-heading a {
            display: block;
            padding: 12px 30px;
            background: #fff;
            color: #6d0000 !important;
            border-bottom: 1px solid #f1f1f1
        }

        .accordion-wrap .panel .panel-heading a {
            font-size: 14px
        }

        .accordion_one .panel-group .panel-heading+.panel-collapse>.panel-body {
            border-top: 0;
            padding-top: 0;
            padding: 25px 30px 30px 35px;
            background: #fff;
            color: #999999
        }

        .img-accordion {
            width: 81px;
            float: left;
            margin-right: 15px;
            display: block
        }

        .accordion_one .panel .panel-heading a.collapsed:after {
            content: "\2b";
            color: #6d0000;
            background: #f1f1f1
        }

        .accordion_one .panel .panel-heading a:after,
        .accordion_one .panel .panel-heading a.collapsed:after {
            font-family: 'FontAwesome';
            font-size: 15px;
            width: 36px;
            line-height: 48px;
            text-align: center;
            background: #F1F1F1;
            float: left;
            margin-left: -31px;
            margin-top: -12px;
            margin-right: 15px
        }

        .accordion_one .panel .panel-heading a:after {
            content: "\2212"
        }

        .accordion_one .panel .panel-heading a:after,
        .accordion_one .panel .panel-heading a.collapsed:after {
            font-family: 'FontAwesome';
            font-size: 15px;
            width: 36px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            background: #F1F1F1;
            float: left;
            margin-left: -31px;
            margin-top: -12px;
            margin-right: 15px
        }
        .collapse {
  display: none;
}

.collapse.show {
  display: block;
} 
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: lightgrey !important;
  color: #86302C;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-weight: bold;
  margin-top:10px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #fff;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}
    </style>
    @include('web.pages.navbar')
    {{-- <div class="box-shadow-for-ui">
        <div class="uou-block-2b">
            <div class="container"> <a href="{{ url('home') }}" class="logo"><img
                        src="{{ asset('assets/web/img/logo.png') }}" alt=""></a> <a href="#"
                    class="mobile-sidebar-button mobile-sidebar-toggle"><span></span></a>
                <nav class="nav">
                    <ul class="sf-menu">
                        <li class="navLinkA"> <a href="{{ url('home') }}"><img
                                    src="{{ asset('assets/web/images/home.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Home</a> </li>
                        <li class="navLinkA"> <a href="{{ url('about') }}"><img
                                    src="{{ asset('assets/web/images/2.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />About</a></li>
                        <li class="navLinkA"> <a href="{{ url('recommended') }}"><img
                                    src="{{ asset('assets/web/images/3.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Recommended</a></li>
                        <li class="navLinkA"> <a href="{{ url('services-provider') }}"><img
                                    src="{{ asset('assets/web/images/4.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Services</a>
                            <ul class="demo-menu" style="display: none;">
                                <li id="nav-menu-item-865"
                                    class="sub-menu-item  menu-item-odd menu-item-depth-1 menu-item menu-item-type-custom menu-item-object-custom">
                                    <a href="{{ url('services-provider/generalservices') }}"
                                        class="menu-link sub-menu-link">General Services</a>
                                </li>
                                <li id="nav-menu-item-866"
                                    class="sub-menu-item  menu-item-odd menu-item-depth-1 menu-item menu-item-type-custom menu-item-object-custom">
                                    <a href="{{ url('services-provider/professionalservices') }}"
                                        class="menu-link sub-menu-link">Professional Services</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navLinkA"> <a href="{{ url('regionsserved') }}"><img
                                    src="{{ asset('assets/web/images/8.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Service Regions</a></li>
                        <li class="navLinkA active"> <a href="{{ url('faq') }}"><img
                                    src="{{ asset('assets/web/images/8.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />FAQ'S</a></li>
                        <li class="navLinkA"> <a href="{{ url('contact') }}"><img
                                    src="{{ asset('assets/web/images/9.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Contact</a></li>
                        <li class="navLinkA active"> <a href="{{ url('comingsoon') }}"><img
                                    src="{{ asset('assets/web/img/shoppingtrolley.png') }}"
                                    class="img-responsive mr-2 mt-2" height="20" width="20" /></a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- end .uou-block-2b -->
    </div> --}}
    <div class="container mt-5">
        <div class="row my-5 mt-5">
            <div class="col-md-12">
                <div class="bg-white py-5">
                    <div class="container">
                       
                        <div class="row">
                              <div class="col-md-8">
                                <h3 class="text-primary font-weight-light">Frequently Asked Questions</h3>

                            </div>
                       
                            <div class="col-md-12">
                            @foreach ($faq as $row )
                            <div class='col-md-8'>
                                <button class="accordion">{{ $row->que }}</button>
                            
                                <div class="panel">
                                {{ $row->ans }}
                                </div>

                                </div>   
                                @endforeach
                            </div>
                       
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>


@endsection
@section('scripts')
    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script> -->
<script>
    var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>
    @endsection