@extends("website.layouts.layout")
@section('title',"Project Location")
@section("body")
<style>
/* .faq-heading {
  font-family: Lato;   
  font-weight: 400;
  font-size: 19px;
  -webkit-transition: text-indent 0.2s;
  text-indent: 20px;
  color: #333;
}

.faq-text {
  font-family: Open Sans;   
  font-weight: 400;
  color: #919191;
  width: 95%;
  padding-left: 20px;
  margin-bottom: 30px;
}

.faq {
  width: 100%;
  margin: 0 auto;
  background: white;
  border-radius: 4px;
  position: relative;
  border: 1px solid #E1E1E1;
}

.faq label {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  height: 56px;
  padding-top: 1px;
  background-color: #FAFAFA;
  border-bottom: 1px solid #E1E1E1;
}

.faq input[type="checkbox"] {
  display: none;
}

.faq .faq-arrow {
  width: 5px;
  height: 5px;
  transition: transform 0.8s;
  border-top: 2px solid rgba(0, 0, 0, 0.33);
  border-right: 2px solid rgba(0, 0, 0, 0.33);
  float: right;
  position: relative;
  top: -30px;
  right: 27px;
  transform: rotate(45deg);
}

.faq input[type="checkbox"]:checked + label > .faq-arrow {
  transform: rotate(135deg);
}

.faq input[type="checkbox"]:checked + label {
  height: auto;
  background: rgba(255, 255, 255, 1);
}

.faq input[type="checkbox"]:not(:checked) + label {
  height: 56px;
}

::-webkit-scrollbar {
  display: none;
} */
</style>
<style>
/* Detail styling */
.details {
    --padding: 10px;
    border: 1px solid #8d8d8d;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.details+.details {
    margin-top: 15px;
}

.details__title {
    --width: 20px;
    --height: 3px;
    --radius: 1px;
    --color: currentColor;
    margin: 0;
    padding: var(--padding) calc(var(--width) * 2) var(--padding) var(--padding);
    cursor: pointer;
    transition: all .2s ease-in-out;
    position: relative;
}

.details__title:before,
.details__title:after {
    content: '';
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    position: absolute;
    border-radius: var(--radius);
    top: calc(50% - (var(--height) / 2));
    right: calc(var(--width) / 2);
    transition: all .2s ease-in-out;
}

.details__title:after {
    rotate: 90deg;
}

.details__container[open] .details__title:before {
    rotate: 45deg;
    /* rotate: 135deg; */
}

.details__container[open] .details__title:after {
    rotate: 135deg;
    /* rotate: 225deg; */
}

.details__container[open] .details__title {
    background-color: #f3f3f3;
}

.details__summary::marker {
    content: '';
}

.details__desc {
    visibility: hidden;
    display: grid;
    grid-template-rows: 0fr;
    transition: all .2s ease-in-out;
    overflow: hidden;
    padding-inline: var(--padding);
    pointer-events: none;
}

.details__container[open]+.details__desc {
    visibility: visible;
    grid-template-rows: 1fr;
    padding-block: var(--padding);
}

.details__desc-inner {
    min-height: 0;
}
</style>
<section class="banner-services">
    <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt="">
</section>

<section class="services-breadcrumb-section">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Frequently Asked Questions</li>
            </ol>
        </nav>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section">
    <div class="container mb-4">
        <h3 class="heading mb-4 text-center">Frequently Asked Questions</h3>
     
        <div class="accordion" id="accordionExample">
            @foreach($faqs as $index => $faq)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ $index }}">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapse{{ $index }}" aria-expanded="false" aria-controls="collapse{{ $index }}">
                            {!! $faq->question !!}
                        </button>
                    </h2>
                    <div id="collapse{{ $index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $index }}"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            {!! $faq->answer !!}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>


<!-- Save Time Section -->
<section class="savetime">
    <div class="savetime-bg-img"
        style="background-image: url('{{asset('webAssets/assets/images/savetime-img.png')}}');">
        <div class="container">
            <div class="savetime-block">
                <div class="saveblock-items d-flex justify-content-center text-center">
                    <div class="save-block-inner-items">
                        <div class="save-block-text d-flex flex-column ">
                            <div class="saveblock-header d-flex flex-column">
                                <h6 class="text-light heading">Save Time and Do More</h6>
                                <p class="text-light">To help you with tasks and odd chores, our same-day service
                                    platform rapidly links you with skilled Taskers, allowing you to be more
                                    productive every day.</p>
                            </div>
                            <div class="save-time-services d-flex flex-wrap">
                                <div class="save-time-inner-services">
                                    <div class="couch-block">
                                        <div class="couch-img-col">
                                            <img src="{{asset('webAssets/assets/images/couch.png')}}" alt="">
                                        </div>
                                        <div class="couch-text-col">
                                            <h3 class="font-size-18 text-light">4 million</h3>
                                            <p class="font-size-16 text-light">Furniture Moved</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="save-time-inner-services">
                                    <div class="couch-block">
                                        <div class="couch-img-col">
                                            <img src="{{asset('webAssets/assets/images/broom.png')}}" alt="">
                                        </div>
                                        <div class="couch-text-col">
                                            <h3 class="font-size-18 text-light">6,500</h3>
                                            <p class="font-size-16 text-light">Cleaning Services Done</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="save-time-inner-services">
                                    <div class="couch-block">
                                        <div class="couch-img-col">
                                            <img src="{{asset('webAssets/assets/images/couch.png')}}" alt="">
                                        </div>
                                        <div class="couch-text-col">
                                            <h3 class="font-size-18 text-light">4 million</h3>
                                            <p class="font-size-16 text-light">Furniture Moved</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="save-time-inner-services">
                                    <div class="couch-block">
                                        <div class="couch-img-col">
                                            <img src="{{asset('webAssets/assets/images/clock-save.png')}}" alt="">
                                        </div>
                                        <div class="couch-text-col">
                                            <h3 class="font-size-18 text-light">10,000</h3>
                                            <p class="font-size-16 text-light">Hours Saved</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Join Our Team Section -->
<section class="join-team">
    <div class="container">
        <div class="join-team-block d-flex justify-content-center">
            <div class="join-team-item">
                <div class="d-flex join-team-inner justify-content-between">
                    <div class="join-team-text-col d-flex align-items-center">
                        <div class="join-team-header d-flex flex-column">
                            <div class="join-team-inner-header">
                                <h3 class="font-size-32 heading">Get On Our Team</h3>
                                <p class="para">Want to join a company that is changing the way people work?</p>
                            </div>
                            <div class="join-team-action-btn">
                                <button class="btn btn-primary">Join Our Team</button>
                            </div>
                        </div>
                    </div>

                    <div class="join-team-img-col">
                        <img class="img-fluid" src="{{asset('webAssets/assets/images/join-team-img.png')}}"
                            alt="join-team">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
<script>
const items = document.querySelectorAll('.accordion button');

function toggleAccordion() {
    const isExpanded = this.getAttribute('aria-expanded') === 'true';

    // Collapse all items
    items.forEach(item => {
        item.setAttribute('aria-expanded', 'false');
    });

    // If the clicked item was not expanded, expand it
    if (!isExpanded) {
        this.setAttribute('aria-expanded', 'true');
    }
}

items.forEach(item => {
    item.addEventListener('click', toggleAccordion);
});
</script>