@extends('Layouts.index')
@section('content')
<!-- artikel -->


<section class="wrapper bg-light">
    <div class="row">
        <div class="col-md-12 bg-pattern3 py-11">
            <div class="d-flex align-items-center justify-content-center">
                <h2 class="fs-45 fw-semibold pt-5 p-0 mb-0 text-dark"> Bantuan</h2>
            </div>
            <p class="fs-16 text-center">Pusat Bantuan JAGOTI LMS</p>
        </div>
    </div>
    <div class="mx-2">
      
        <div class="row px-sm-10 px-lg-0 ">
            <div class="col-lg-6 pt-6 d-none d-lg-block">
                <figure>
                    <img src="{{ asset('needed/img/illustrations/Shrug-rafiki.png')}}" alt="" class="w-100">
                </figure>
            </div>

            
            <div class="col-lg-6">
                <div class="row pt-6">
                @if (!empty($helpdesk))
                @foreach ($helpdesk as $item)
                    <div class="col-lg-12 mb-0">
                        <div id="faq{{$item['content_id']}}" class="accordion-wrapper">
                            <div class="card accordion-item shadow-none border-0">
                            <div class="d-flex">
                                <span class="text-primary"><i class="fa-regular fa-circle-question"></i></span>
                                    <p class="mx-2"> {{$item['title']}}</p>
                            </div>
                                <div class="card-header pt-0 mt-0" id="accordion-heading-1-1">
                                    <button class="collapsed text-primary fw-normal fw-12 fs-15" data-bs-toggle="collapse" data-bs-target="#fq{{$item['content_id']}}" aria-expanded="false" aria-controls="fq{{$item['content_id']}}">Jawaban</button>
                                </div>
                                <!-- /.card-header -->
                                <div id="fq{{$item['content_id']}}" class="collapse fs-15" aria-labelledby="accordion-heading-1-1" data-bs-target="#faq{{$item['content_id']}}">
                                    <div class="card-body px-2 mt-2">
                                    <p>{!!$item['content']!!}</p>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                <!-- /.collapse -->
                            </div>
                            <!-- /.card -->
                        </div>
                        <!-- /.accordion-wrapper -->
                    </div>
                    <!--/column -->
                @endforeach
                @endif
                </div>
            </div>
        </div>
        <!--/.row -->
    </div>
    <!-- /.container -->
  </section>
  <!-- /section -->



@endsection