@extends('admin/layout')
@section('page_title', 'Executive Faqs')
@section('executive_faq_select','active')
@section('container')
<h1 class="mb10">Executive Faqs</h1>
    

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion FAQ</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        .main-content{
            margin: 30px;
        }
        .accordion {
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .accordion-item {
            /*background-color: #f9f9f9;*/
            padding: 15px;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .accordion-content {
            display: none;
            padding: 10px;
			padding-right: 50px;
			padding-top: 5px;
        }
        .accordion-item.active {
            background-color: #c1bbbc;
        }
        .accordion-item.active .arrow-icon {
            transform: rotate(180deg);
        }
        .arrow-icon {
            transition: transform 0.3s ease-in-out;
        }
    </style>


<div class="accordion">
   @if(count($faqs) > 0)
    @php $i = 2; @endphp
    @foreach($faqs as $faq)
    <div class="accordion-item">
        <span> {{ $i - 1 }}.   {{ $faq->question }}</span>
        <i class="material-icons arrow-icon">keyboard_arrow_down</i>
    </div>
    <div class="accordion-content">
        <p style="background-color: #24215d; font-size: 18px; color: white; margin-left: 20px; padding-right: 20px; padding-left: 15px;text-align: justify;">
                    </p>
    </div>
     @php $i++; @endphp
       @endforeach
   @endif
   
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var accordionItems = document.querySelectorAll('.accordion-item');

        accordionItems.forEach(function (item) {
            item.addEventListener('click', function () {
                // Close all accordion items
                accordionItems.forEach(function (item) {
                    item.classList.remove('active');
                    item.nextElementSibling.style.display = 'none';
                });

                // Open clicked accordion item
                this.classList.add('active');
                var content = this.nextElementSibling;
                content.style.display = 'block';
            });
        });
    });
</script>
                        
@endsection