@extends('Admin.Layouts.app')
@section('title')
Post
@endsection
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
  .comment-text {
    white-space: normal;
    /* Allow text to wrap */
    word-wrap: break-word;
    /* Ensure long words break to fit in the container */
    overflow-wrap: break-word;
    /* Prevent overflow */
    width: 250px;
    /* Adjust the width as per your requirement */
    word-break: break-word;
  }

  /* .dataTables_wrapper {
    position: relative;
  }

  .dataTables_paginate {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px;
    text-align: center;
    width: 100%;
  } */
</style>

<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="col-lg-12 grid-margin stretch-card">
  <div class="card">
    <div class="card-body">
      <div class="drop-container">

        <p class="card-description">
          Post list
        </p>
        <div>
          <span>Type</span>
          <select name="type" id="type" class="type mb-2">
            <option value="" selected>All post</option>
            <option value="1">Video</option>
            <option value="2">Image</option>
            <option value="3">Text</option>
            <option value="4">audio</option>
          </select>
        </div>
      </div>

      <div class="">
        <table class="table table-striped data-table">

          <thead>
            <tr>
              <th>
                Id
              </th>
              <th>
                Expert user name
              </th>
              <th>
                name
              </th>
              <th>
                Post type
              </th>
              <th>
                Post title
              </th>
              <th>
                Cover image
              </th>
              <th>
                Post Rating
              </th>
              <th>
                Comment
              </th>
              <th>
                Report Status
              </th>
              <th>
                Report comment
              </th>
              <th style="width: 150px; text-align:center;">
                Action
              </th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- model -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body position-relative">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper  postdata">

          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</div>


@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<script type="text/javascript">
  fetch_data();

  function fetch_data(type = '') {
    var table = $('.data-table').DataTable({
      processing: true,
      serverSide: true,

      scrollY: "500px", // Table ke liye fixed height
      // scrollCollapse: true, // Scroll height ke andar collapse ho
      // paging: true, // Pagination enable rahe
      // fixedHeader: true,
      ajax: {
        url: "{{ route('expert.post') }}",
        data: {
          type: type,
        }
      },
      columns: [{
          data: 'id',
          name: 'id'
        },
        {
          data: 'user.user_name',
          name: 'user.user_name',
          searchable: true,
          render: function(data, type, full, meta) {
            return '<div style="width:100px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
          }
        },
        {
          data: 'normaleuser.user_name',
          name: 'normaleuser.user_name'
        },
        {
          data: 'posttype',
          name: 'posttype'
        },
        {
          data: 'title',
          name: 'title',
          render: function(data, type, full, meta) {
            return '<div class="comment-text">' + (data ?? '') + '</div>';
          }
        },
        {
          data: 'coverimage',
          name: 'coverimage'
        },
        {
          data: 'epert_comment.rating',
          name: 'epert_comment.rating',
          render: function(data, type, full, meta) {
            if (!data) return ''; // If there's no rating, return an empty string

            let stars = '';
            let fullStars = Math.floor(data); // Get the integer part of the rating
            let halfStars = (data % 1) >= 0.5 ? 1 : 0; // Check if it's >= 0.5 to add a half star

            // Add full stars
            for (let i = 1; i <= fullStars; i++) {
              stars += '<span class="fa fa-star"></span>'; // Full star
            }

            // Add half star if necessary
            if (halfStars) {
              stars += '<span class="fa fa-star-half-alt"></span>'; // Half star
            }

            // Add empty stars to make total 5 stars
            let remainingStars = 5 - fullStars - halfStars;
            for (let i = 1; i <= remainingStars; i++) {
              stars += '<span class="fa fa-star-o"></span>'; // Empty star
            }

            return stars;
          }
        },
        {
          data: 'epert_comment.comment',
          name: 'epert_comment.comment',
          render: function(data, type, full, meta) {
            return '<div class="comment-text">' + (data ?? '') + '</div>';
          }
        },
        {
          data: 'expertreportedpost.id',
          name: 'expertreportedpost.id',
          render: function(data, type, full, meta) {
            if (data) {
              return '<span style="color: red; font-weight: bold;">Reported</span>';
            } else {
              return '<span style="color: green; font-weight: bold;">Not Reported</span>';
            }
          }
        },
        {
          data: 'expertreportedpost.report',
          name: 'expertreportedpost.report',
          render: function(data, type, full, meta) {
            return '<div class="comment-text">' + (data ?? '') + '</div>';
          }
        },
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        },
      ]
    });

  };

  $(document).on('change', '.type', function() {
    var type = $('#type').val();
    $('.data-table').DataTable().destroy();
    fetch_data(type);
  })

  function PostDetele(id, message) {
    if (message == 1) {
      $message = "you delete the video post";
    } else if (message == 2) {
      $message = "you delete the image post";
    } else if (message == 3) {
      $message = "you delete the text post";
    } else if (message == 4) {
      $message = "you delete the audio post";
    }
    Swal.fire({
      title: "Are you sure?",
      text: $message,
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, delete it!"
    }).then((result) => {
      if (result.isConfirmed) {
        // Make an Ajax request to delete the data
        $.ajax({
          url: `{{ route('post.delete', ':id') }}`.replace(':id', id),
          type: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(data) {

            Swal.fire({
              title: "Deleted!",
              text: "Your file has been deleted.",
              icon: "success",
              showConfirmButton: false,
            });
            location.reload();
          },
          error: function(xhr, status, error) {
            console.error(xhr.responseText);
          }
        });
      }
    });
  }

  function postDetail(id) {
    $.ajax({
      url: `{{ route('post.detail', ':id') }}`.replace(':id', id),
      type: 'get',
      success: function(response) {

        var swiper = new Swiper(".mySwiper", {
          spaceBetween: 30,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });

        $(".postdata").html('');
        var data = response.data;

        if (data && data.item) {
          var total = $(data.item).length;

          $(data.item).each(function(index, value) {
            console.log(value);
            var imgva = value.image_audio_video ? value.image_audio_video : null;
            var posttype = '';

            if (data.type == 1) {
              posttype = `<video controls>
                          <source src="${imgva}" type="video/mp4">
                          Your browser does not support the video tag.
                        </video>
                        `;
            } else if (data.type == 2) {
              posttype = `<img class="slider-image" src="${imgva}" alt="image">`;
            } else if (data.type == 3) {
              // Handle type 3
            } else if (data.type == 4) {
              posttype = `<audio controls>
                          <source src="${imgva}" type="audio/mp3">
                          Your browser does not support the audio element.
                        </audio>`;
            }

            if (index !== 0 && index !== total - 1) {
              $(".postdata").append(`
              <div class="swiper-slide d-flex justify-content-center align-items-start flex-column pb-4">
                ${posttype}
                <div class="d-flex align-items-center flex-wrap gap-3 mb-2">
                <div class="d-flex align-items-center gap-2">
                  <img src="{{asset('admin/images/heart.png')}}" class="icon" alt="image">
                  <span>${data.like_count?data.like_count:0}</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <img src="{{asset('admin/images/message-text.png')}}" class="icon" alt="image">
                  <span>${data.comment_count?data.comment_count:0}</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <img src="{{asset('admin/images/share.png')}}" class="icon" alt="image">  
                  <span>${data.share_count?data.share_count:0}</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <img src="{{asset('admin/images/frame.png')}}" class="icon" alt="image">
                  <span>${data.save_count?data.save_count:0}</span>
                </div>
              </div>
                <h5>${value.instruction}</h5>
              </div>
            `);
            }
          });
        }

        $('#exampleModal').modal('show');
      },
      error: function(xhr, status, error) {
        console.error(xhr.responseText);
      }
    });
  }
</script>
@endsection