@extends('frontend.layouts.app')

@section('content')

<!-- Modal -->
<div class="modal fade" id="recourceModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="rec_modal"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<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_search">
                <form class="search-form">
                  <input type="text" placeholder="Search Resource..." />
                  <button type="submit"><i class="far fa-search"></i></button>
                </form>
              </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_categories">
                <h3 class="widget_title">Categories</h3>
                <ul>
                  @foreach($cats as $cat)
                  <li>
                    <a href="service-details.html">{{$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;">
                  @foreach($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>
                  @endforeach
                </div>


              </div>

            </div>

          </div>


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

@endsection

@push('js')
<script>
  var assetPath = "{{ asset('') }}";
</script>
<script>
  $(document).ready(function() {
    $(document).on('click', '#load_resource', function(e) {

      let id = $(this).data('id');
      $.ajax({
        url: `{{ route('frontend.resource.show', ':id') }}`.replace(':id', id),
        method: 'GET',
        success: function(response) {
          console.log(response);
          $('#resource').html(''); // Clear the resource div once, before the loop

          response.contents.forEach((data) => {

            console.log(data);
            let titleText = data.title ? data.title.split(' ').slice(0, 10).join(' ') + (data.title.split(' ').length > 10 ? '...' : '') : '';
            let titleDes = data.description ? data.description.split(' ').slice(0, 25).join(' ') + (data.description.split(' ').length > 15 ? '...' : '') : '';
            var newRow = $('<div style="margin-top:-35px; margin-left:-30px !important; margin-bottom:32px" class="row"></div>');

            // Assuming assetPath is available in your JavaScript code
            var imagePath = assetPath + 'frontend/assets/images/faqs/' + data.image;

            // Append the image with the correct path
            newRow.append(`
        <div style="font-size:16px" class="mt-3 mb-2 col-lg-6 col-sm-12">
        <a href="" style="cursor:pointer; border-radius:4px"><img  style="width:100%;" class="me-2" src="${imagePath}" alt="Resource"/></a>
            
        </div>
    `);

            // Add the title div
            newRow.append(`
    <div style="font-size:16px" class="mt-3 mb-2 col-lg-6 col-sm-12">
        <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">${data.category.name}</p>
          
            <p style="border:1px solid gray; padding:1px 10px; margin-right:8px; border-radius:4px">${data.course.name}</p>
            <p style="border:1px solid gray; padding:1px 10px; margin-right:8px; border-radius:4px">${data.status == 1 ? 'Active' : 'Inactive'}</p>
            

            
        </div>
       <a href="" style="margin-top:15px !important; display:inline-block; cursor:pointer;">Read More</a>

    </div>
`);


            // Append the row to the #resource div
            $('#resource').append(newRow);
          });

        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    });
    $(document).on('click', '#details_resource', function(e) {

      let id = $(this).data('id');
      $.ajax({
        url: `{{ route('frontend.resource.details', ':id') }}`.replace(':id', id),
        method: 'GET',
        success: function(response) {
          console.log(response);
          if (response.status === 'success' && response.data.length > 0) {
        var imagePath = assetPath + 'frontend/assets/images/faqs/' + response.data[0].image; // Accessing the first item
        var description = response.data[0].description;

        $('#rec_modal').html(`
    <div style="display: flex; flex-wrap: wrap; align-items: flex-start;">
        <img style="width:300px; height:280px; margin-right: 15px; flex-shrink: 0;" src="${imagePath}" alt="Description" class="img-fluid">
        <span style="flex-basis: 100%;">${description}</span>
    </div>
`);






        $('#recourceModal').modal('show');
    } else {
        // Handle cases where no data is found
        $('#rec_modal').html('<p>No data found.</p>');
    }
          

        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    });

  });
</script>


@endpush