@extends('layout.master')
@section('content')
    <section class="bg-blue-50">
        <div class='p-5'>
            <div class="mx-auto my-8 max-w-screen-sm lg:mb-16 text-center ">
                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary ">Our Activities</h2>
                <p class="font-light text-black sm:text-xl">Explore the Activities We Perform and Are Glad to Offer</p>
            </div>
            <div class="mt-10">
                
                  <div>
                    <ul class="flex flex-col md:w-1/2 mx-auto">
                        @php
                          $i=1;
                        @endphp
                        @foreach ($activities as $activity)
                          <li class=" my-2 border-b-2 border-neutral-100 py-" x-data="accordion({{$i}})">
                            <h2
                              @click="handleClick()"
                              class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
                            >
                              <span>{{$activity->title}}</span>
                              <svg
                                :class="handleRotate()"
                                class="fill-current text-primary h-6 w-6 transform transition-transform duration-500"
                                viewBox="0 0 20 20"
                              >
                                <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
                              </svg>
                            </h2>
                            <div
                              x-ref="tab"
                              :style="handleToggle()"
                              class="border-l-2 border-primary overflow-hidden max-h-0 duration-500 transition-all"
                            >
                              <div class="p-3 ">
                                {!!$activity->description!!}
                              </div>
                            </div>
                          </li>
                        @php
                          $i++;
                        @endphp
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('css')
  <style>
.overlay{
  background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(3,0,0,1) 99%);
}
  </style>
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>

@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
    Fancybox.bind("[data-fancybox]", {});
  </script>

<script defer src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('accordion', {
            tab: 0
        });

        Alpine.data('accordion', (idx) => ({
            init() {
                this.idx = idx;
            },
            idx: -1,
            handleClick() {
                this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
            },
            handleRotate() {
                return this.$store.accordion.tab === this.idx ? 'rotate-180' : '';
            },
            handleToggle() {
                return this.$store.accordion.tab === this.idx ?
                    `max-height: ${this.$refs.tab.scrollHeight}px` : '';
            }
        }));
    })
</script>
@endsection