@extends('frontend.layouts.app')

@section('content')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');

  :root {
    --principal-font: 'Kumbh Sans', sans-serif;
    --font-size: 12px;

    --bg-gradient: linear-gradient(to bottom, hsl(273, 75%, 66%), hsl(240, 73%, 65%));

    --primary-dark-color: hsl(238, 29%, 16%);
    --primary-soft-color: hsl(14, 88%, 65%);

    --neutral-dark-color: hsl(237, 12%, 33%);
    --neutral-soft-color: hsl(240, 6%, 50%);

  }


  html {
    box-sizing: border-box;
  }

  * {
    box-sizing: inherit;
  }

  .attribution {
    font-size: 11px;
    text-align: center;
    background-color: hsl(240, 5%, 91%);
    padding: 8px 0 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  .attribution a {
    color: hsl(228, 45%, 44%);
  }

  /* global */
  /*================================================*/




  .card-wrapper {

    padding-bottom: 50px;
    /* footer fixed */
    padding-top: -55px;
  }

  p {
    margin: 0 0 12px;
    line-height: 1.5;
  }

  h2 {
    margin: 12px 0;
  }


  /* generics */
  /*================================================*/

  .content-cc {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* FAQ card */
  /*================================================*/

  .faq-card {

    background-color: #fff;
    border-radius: 20px;

    max-width: 1350px;
    margin-top: 90px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  /* FAQ card: imagenes */
  /*================================================*/


  .faq-ilustrations {
    position: relative;
  }

  .faq-ilustrations .mobile.ilust {
    position: absolute;
    top: -100px;
    left: -30px;
    right: 0;
  }

  .mobile {
    display: block;
    margin: 0 auto;
  }


  /* FAQ card: main */
  /*================================================*/

  .faq-content {
    padding: 9px 25px 3rem;
  }

  .faq-content h1 {
    font-size: 32px;
    text-align: center;
    color: var(--primary-dark-color);
  }

  .faq-accordion {
    padding: 8px 0;
    border-bottom: 1px solid hsl(240, 5%, 91%);
  }


  /* FAQ card: main title */
  /*================================================*/

  /* checkbox tgg-title*/
  input.tgg-title {
    appearance: unset;
    all: unset;
  }

  .faq-accordion-title label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .faq-accordion-title h2 {
    font-size: 20px
      /*var(--font-size)*/
    ;
    font-weight: 400;
    color: var(--neutral-dark-color);
  }

  .faq-accordion-title span {
    margin-left: auto;
    transition: transform .4s ease-in-out;
  }


  /* FAQ card: main content */
  /*================================================*/

  .faq-accordion-content {
    color: var(--neutral-soft-color);
    display: none;
  }


  /* Effects */
  /*================================================*/

  /* main title, accordion title effects */

  .faq-accordion-title:hover h2 {
    color: var(--primary-soft-color)
  }

  /* onclick "" */
  .faq-accordion .tgg-title:checked+div>label>h2 {
    font-weight: 700;
  }

  .faq-accordion .tgg-title:checked+div>label>span {
    will-change: transform;
    transform: rotate(180deg);
  }

  /* main content, acordion text effect */

  .faq-accordion .tgg-title:checked~.faq-accordion-content {
    
    display: block;
  }

  .faq-back {
    background-image: url('{{ asset(' /frontend/assets/images/back.jpg') }}');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 970px;
    opacity: 90%;
    margin-bottom: 0px;
  }
</style>



<section style="background:#f1f5fd; padding-top:-250px" class="th-blog-wrapper space-top space-extra2-bottom">
  <div style="margin-top:-25px" class="container">
    <div style="margin:0 auto" class="row gx-40">
      <div class="col-xxl-12 col-lg-11 col-md-12 col-sm-12" style="margin: 0 auto;">
        <div style="margin:0 auto" class="row">
          <div class="col-xl-3 col-lg-4">
            <aside class="sidebar-area sidebar-shop">
             
              <div style="box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white; background-clip: border-box;
    border: 1px solid #d8dde6;
    border-radius: 5px;" class="widget widget_categories">
                <h3 class="widget_title">Categories</h3>
                <ul>
                  @foreach($cats as $cat)
                  <li>
                    <a href="{{route('frontend.resource',$cat->id )}}">{{$cat->name}}</a>
                  </li>
                  @endforeach

                </ul>
              </div>

              <!-- <div style="box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white; background-clip: border-box;
              border: 1px solid #d8dde6;
              border-radius: 5px;" class="widget widget_tag_cloud">
                <h3 class="widget_title">Resources Tags</h3>
                <div class="tagcloud">
                  @foreach($subs as $sub)

                  <a data-id="{{$sub->id}}" id="load_resource" href="javascript:void(0)">{{$sub->name}}</a>

                  @endforeach



                </div>
              </div> -->
            </aside>
          </div>
          <div class="col-xxl-9 col-lg-9">

            <div style="box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white; background-clip: border-box;
    border: 1px solid #d8dde6;
    border-radius: 5px;" class="th-blog blog-single has-post-thumbnail">
              <div id="resource">

                <div class="row" style="margin-top: -35px; margin-left: -30px !important; margin-bottom: 32px;">
                  
                  @forelse($resoures as $rec)
                  <!-- <div class="mt-3 mb-2 col-lg-6 col-sm-12" style="font-size: 16px;">
                    <a href="#" style="cursor: pointer; border-radius: 4px;">
                      <img style="width: 100%;" class="me-2" src="{{ asset('frontend/assets/images/faqs/' . $rec->image) }}" alt="Resource" />
                    </a>
                  </div> -->

                  @php
                  // Remove HTML tags from the title and then limit the words
                  $cleanedTitle = strip_tags($rec->title);
                  $titleText = $cleanedTitle ? implode(' ', array_slice(explode(' ', $cleanedTitle), 0, 10)) . (str_word_count($cleanedTitle) > 10 ? '...' : '') : '';

                  // For description, do the same
                  $cleanedDescription = strip_tags($rec->description);
                  $titleDes = $cleanedDescription ? implode(' ', array_slice(explode(' ', $cleanedDescription), 0, 25)) . (str_word_count($cleanedDescription) > 15 ? '...' : '') : '';
                  @endphp

                  <!-- <div class="mt-3 mb-2 col-lg-6 col-sm-12" style="font-size: 16px;">
                    <h6 style="font-size: 15px; opacity: 90%;">{{$titleText}}</h6>
                    <p style="margin-top: -10px; display: block;">{{ $titleDes }}</p>
                    <div style="display: flex;">
                      <p style="border: 1px solid gray; padding: 1px 10px; margin-right: 8px; border-radius: 4px;">{{ $rec->category->name ?? 'N/A' }}</p>
                      <p style="border: 1px solid gray; padding: 1px 10px; margin-right: 8px; border-radius: 4px;">{{ $rec->course->name ?? 'N/A' }}</p>
                      <p style="border: 1px solid gray; padding: 1px 10px; margin-right: 8px; border-radius: 4px;">{{ $rec->status == 1 ? 'Active' : 'Inactive' }}</p>
                    </div>
                    <a id="details_resource" data-id="{{$rec->id}}" href="javascript::void(0)" style="margin-top: 15px !important; display: inline-block; cursor: pointer;">Read More</a>
                  </div> -->

                  <div class="faq-articles">

                

                <article class="faq-accordion">

                  <input class="tgg-title" type="checkbox" id="tgg-title-{{$rec->id}}">

                  <div class="faq-accordion-title">
                    <label for="tgg-title-{{$rec->id}}">
                    <!-- <a href="#" style="cursor: pointer; border-radius: 4px;">
                      <img style="width: 10%;" class="me-2" src="{{ asset('frontend/assets/images/faqs/' . $rec->image) }}" alt="Resource" />
                    </a> -->
                      <h2>
                      {{$titleText}}
                      </h2>
                      <br>
                      
                      <span class="arrow-icon">
                        <img
                          src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
                      </span>
                    </label>
                  </div>

                  <div class="faq-accordion-content">
                    <!-- <a href="#" style="cursor: pointer; border-radius: 4px;">
                      <img style="width: 50%;" class="me-2" src="{{ asset('frontend/assets/images/faqs/' . $rec->image) }}" alt="Resource" />
                    </a> -->
                    <p> {{ $titleDes }}</p>
                  </div>

                </article> <!-- faq accordion -->

              </div> <!-- faq articles -->
              @empty
              <h6 style="text-align:center; margin-top:75px">No Flashcard Found</h6>
                  @endforelse
                </div>


              </div>

            </div>

          </div>


        </div>
      </div>
    </div>
  </div>
</section>

@endsection

@push('js')



@endpush