@extends('layout.master')
@section('content')
    <section>
        {{-- <div class="w-full h-[25vh] lg:h-[50vh] relative">
            <div class="absolute z-[1] top-0 w-full left-0 h-full flex items-center justify-center">
              <div class="text-white   text-center w-1/2">
                <h2 class="lg:text-6xl md:text-4xl text-2xl font-extrabold wow animate__animated animate__lightSpeedInLeft">Action committee</h2>
              </div>
            </div>
            <div class="w-full h-full">
              <img class="w-full h-full object-cover object-top brightness-50" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
            </div>
          </div>
        </div> --}}
        <div class=" lg:px-20 px-5 py-20 bg-blue-50">

            @if ($chairman)
              
              {{-- <h2 class="text-4xl font-bold underline wow animate__animated animate__fadeInLeft">{{$about->title}}</h2>
              
              <div class="wow animate__animated animate__zoomIn">
                <p class="mt-5 text-justify text-lg text-gray-700 ">
                  {!!$about->description!!}
                </p>
              </div> --}}
              <div class="">
                <div class="md:px-10">
                    {{-- <div class=" relative wow animate__animated animate__fadeInLeft">
                        <div class="flex justify-center relative z-10">
                            <h2 class="bg-blue-50 px-2 text-primary text-lg font-bold ">About Us</h2>
                        </div>
                        <div class="h-0.5 bg-gray-500 absolute left-0 w-full top-1/2">
                        </div>
                    </div> --}}
                    <div class="mt-5">
                        <h2 class="lg:text-4xl md:text-2xl text-lg font-bold wow animate__animated animate__fadeInUp animate__delay-1s">Saraswati Kendra Nepal</h2>
                        {{-- <p class="my-5 lg:text-lg md:text-base text-sm text-gray-700 wow animate__animated animate__fadeInUp animate__delay-2s">We strive to provide personalized support and guidance throughout the entire process.</p> --}}
                        <p class="my-5 lg:text-lg md:text-base text-sm text-gray-700 wow animate__animated animate__fadeInUp animate__delay-2s">
                          {!!$chairman->description!!}
                        </p>
                       
                        {{-- <div class="relative my-5 py-5 bg-gray-50 wow animate__animated animate__fadeInUp animate__delay-3s">
                            <div class="absolute top-0 -left-1 w-1 h-full bg-red-500 rounded-xl"></div>
                            <ul class="ml-1 flex flex-col gap-2 lg:text-base md:text-sm text-xs">
                              <li class="relative pl-5 before:content-[''] before:absolute before:h-2 before:w-2 before:bg-red-500 before:left-0 before:top-2 before:rounded-full">
                                <span class="font-bold">We commitment </span>to delivering high-quality services and support. 
                              </li>
                              <li class="relative pl-5 before:content-[''] before:absolute before:h-2 before:w-2 before:bg-red-500 before:left-0 before:top-2 before:rounded-full">
                                <span class="font-bold">We work closely </span>We work closely with students to understand their needs and goals.                          </li>
                            </ul>
                          </div> --}}
                    </div>
                </div>
                <div class="relative md:h-[50vh]">
    
                  {{-- <div class="grid md:grid-cols-2 md:h-1/2"> --}}
                  
                </div>
            </div>
            @endif
            

            {{-- @if ($chairperson)
              <div class="mt-32">
                <div class="flex flex-col md:flex-row gap-5 items-center">
                  <div class="max-w-[300px] rounded-xl overflow-hidden wow animate__animated animate__zoomIn">
                    <img src="{{ $chairperson->getFirstMediaUrl('chairperson')}}" alt="">
                  </div>
                  <div class="flex flex-col gap-1">
                      <h2 class="text-4xl font-extrabold wow animate__animated animate__rotateInUpLeft">{{$chairperson->name}}</h2>
                      <h2 class="text-xl font-semibold wow animate__animated animate__slideInUp">{{$chairperson->position}}</h2>
                      <h2 class="wow animate__animated animate__fadeInUp">{{$chairperson->consultancy}}</h2>
                  </div>
                </div>
              </div>
            @endif --}}
             
            {{-- @if (count($faqs))
              <div class="mt-20">
                <h2
                  class="font-heading mb-4 text-center font-bold tracking-tight text-gray-900 text-3xl sm:text-5xl wow animate__animated animate__fadeInUp">
                  FAQS
                </h2>
                <div class="flex justify-center">
                  <div class=" relative lg:w-1/2 w-full wow animate__animated animate__zoomIn">
                      <div class="flex justify-center relative z-10">
                          <h2 class="bg-blue-50 px-2 text-primary text-lg font-bold">Frequently Asked Questions</h2>
                      </div>
                      <div class="h-0.5 bg-gray-500 absolute left-0 w-full top-1/2">
                      </div>
                  </div>
                </div>


                <div class="mt-5 wow animate__animated animate__zoomIn animate__delay-1s">
                    <div>
                      <ul class="flex flex-col">
                          @php
                            $i=1;
                          @endphp
                          @foreach ($faqs as $faq)
                            <li class="bg-white my-2 shadow-lg" x-data="accordion({{$i}})">
                              <h2
                                @click="handleClick()"
                                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
                              >
                                <span>{{$faq->question}}</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 text-gray-900">
                                  {!!$faq->answer!!}
                                </div>
                              </div>
                            </li>
                          @php
                            $i++;
                          @endphp
                          @endforeach
                      </ul>
                  </div>
                </div>
              </div>
            @endif --}}
          </div>
        <div class="bg-blue-50">

            <div class="mx-auto py-8 max-w-screen-sm lg:py-16 text-center ">
                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary">Ours Donors</h2>
                {{-- <p class="font-light text-black sm:text-xl">Explore the Journey, Capture the Moments with
                    {{ config('app.name') }} Gallery. </p> --}}
            </div>
        </div>


        <div class="px-20 py-10 bg-blue-50">
            @if (count($teams)>0)
                
            <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-4">
                
                @foreach ($teams as $team)
                    <div class=" cursor-pointer profile-card my-16 mx-auto wow animate__animated animate__zoomIn">
                        <div class="h-72 w-60 relative  overflow-hidden rounded-tl-[25%] rounded-br-[25%]">
                            <img class="w-full h-full object-cover object-top " src="{{$team->getFirstMediaUrl('chairperson')}}" alt="">
                            <div class="overlay ">
                            </div>
                            <div class="social-links absolute flex left-0 bottom-0 right-0">
                                <div class="m-auto">
                                    <a class="mx-2 " target="_blank" href="{{$team->facebook}}"><i class="hover:scale-[1.25] duration-200 transition-all ease-linear text-2xl hover:text-[#416ac3]  fab fa-facebook"></i></a>
                                    <a class="mx-2 " target="_blank" href="{{$team->instagram}}"><i class="hover:scale-[1.25] duration-200 transition-all ease-linear text-2xl hover:text-[#ee2a7b] fab fa-instagram"></i></a>
                                    <a class="mx-2 " target="_blank" href="{{$team->linkedin}}"><i class="hover:scale-[1.25] duration-200 transition-all ease-linear text-2xl hover:text-[#0A66C2] fab fa-linkedin"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="w-60 mt-2 relative z-10">
                            <h2 class="text-center font-semibold uppercase text-xl">{{$team->name}}</h2>
                            <h2 class="text-center text-sm capitalize">{{$team->position}}</h2>
                        </div>
                    </div>
                @endforeach
            </div>
            @else
                <div>
                    <h2 class="text-center text-xl text-red-500">No Data found !</h2>
                </div>
            @endif
        </div>
    </section>
    <section class="bg-blue-50 lg:px-20 px-5">
        <div class='p-5'>
            <div class="mx-auto my-8 max-w-screen-sm text-center ">
                <h2 class="mb-4 text-2xl tracking-tight font-extrabold text-primary ">Special Thanks To :-</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-5">
                
                  {{-- <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> --}}
                @if(count($advisors)>0)
                <div class="flex justify-center">
                    <ul class="list-disc">
                        @foreach ($advisors as $item)
                        <li>{{$item->name}}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
            </div>
        </div>
        
        
    </section>
@endsection

@section('css')
    <style>
          @media screen and (min-width:1140px)
    {

        .profile-card .overlay{
            position: absolute;
            top: 80%;
            left: 0;
            width: 100%;
            height: 30%;
            background: transparent;
            opacity: 0.8;
            visibility: hidden;
            border-top-left-radius: 40%;
            transition: all 0.5s ease;
            transform: translateY(20px);
            overflow: hidden;
        }
    
        .profile-card:hover .overlay{
            background-color: white;
            transform: translateY(0px);
            opacity: 0.8;
            visibility: visible;
    
        }
        .profile-card .social-links{
            transition: all 0.5s ease;
            transform: translateY(5px);
            opacity: 0;
            overflow: hidden;
        }
        .profile-card:hover .social-links{
            opacity: 1;
            transform: translateY(-10px);
        }
    }
    @media screen and (max-width:1140px)
    {
    .profile-card .overlay{
            position: absolute;
            top: 80%;
            left: 0;
            width: 100%;
            height: 30%;
            border-top-left-radius: 40%;
            transition: all 0.5s ease;
            overflow: hidden;
            background-color: white;
            transform: translateY(0px);
            opacity: 0.8;
            visibility: visible;
        }
        .profile-card .social-links{
            transform: translateY(-10px);
            opacity: 1;
        }
    }

    </style>
@endsection