@extends('Admin.Layouts.app')
@section('title')
Discover reported
@endsection
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="col-lg-12 grid-margin stretch-card">
  <div class="card">
    <div class="card-body">
      <h4><i class="ti-arrow-left" onclick="RedirectPostPage()"></i></h4>
      <p class="card-description">
        Report list
      </p>
      <div class="table-responsive">
        <table class="table table-striped data-table">
          <thead>
            <tr>
              <th>
                Id
              </th>
              <th>
                Reported by
              </th>
              <th>
                Reporter image
              </th>
              <th>
                Reson for report
              </th>
              <th style="width: 150px; text-align:center;">
                Reported Post
              </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 pb-0">
        <!-- <h5 class="modal-title fs-5" id="exampleModalLabel">HELLO </h5> -->
        <div class="d-flex align-items-center">
          <img class="user-img" src="{{asset('admin/images/heart.png')}}" class="icon" height="24" width="24" alt="image">
          <P class="modal-title fs-5 ml-1" id="exampleModalLabel"> </P>
        </div>
        <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>
<script type="text/javascript">
  $(function() {

    var table = $('.data-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: "{{ route('discover.reported',['id'=>$id]) }}",
      columns: [{
          data: 'id',
          name: 'id'
        },
        {
          data: 'user_name.user_name',
          name: 'UserName.user_name',
          render: function(data, type, full, meta) {
            return '<div style="width:130px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
          }
        },
        {
          data: 'userimage',
          name: 'userimage'
        },
        {
          data: 'reason',
          name: 'reason',
          render: function(data, type, full, meta) {
            return (typeof data !== 'undefined' && data !== null) ? data : '';
          }
        },
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        },


      ]
    });

  });

  function RedirectPostPage() {

    window.location.replace("{{route('discover.index')}}")
  }

  function Postreported(id) {
    Swal.fire({
      title: "Are you sure?",
      text: 'Do you want to permanently delete this record?',
      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('reportedDelete', ':id') }}`.replace(':id', id),
          type: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(data) {

            Swal.fire({
              title: "Deleted!",
              text: "The report has been deleted.",
              icon: "success",
              showConfirmButton: false,
            });
            $('.data-table').DataTable().ajax.reload();
          },
          error: function(xhr, status, error) {
            console.error(xhr.responseText);
          }
        });
      }
    });
  }

  function PostDelete(id) {
    Swal.fire({
      title: "Are you sure?",
      text: 'Do you want to permanently delete this reported post?',
      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('discover.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: "The reported post has been deleted.",
              icon: "success",
              showConfirmButton: false,
            });
            $('.data-table').DataTable().ajax.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) {
        $(".postdata").html('');
        var data = response.data;
        if (data.add_your_source) {
          // Extract the actual URL from the full path
          let actualUrl = data.add_your_source.split('/').pop();
          url = `<a href="https://${actualUrl}" target="_blank">${actualUrl}</a>`;
        } else {
          url = ``;
        }
        $('.user-img').attr('src', data.user_image);
        var imgva = data.file ? data.file : null;
        $('#exampleModalLabel').html(data.user_name);
        posttype = `<video controls>
                          <source src="${imgva}" type="video/mp4">
                          Your browser does not support the video tag.
                        </video>
                        `;
        $(".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 mb-2" style="gap: 10px;">
                <div class="d-flex align-items-center">
                  <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">
                  <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">
                  <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">
                  <img src="{{asset('admin/images/frame.png')}}" class="icon" alt="image">
                  <span>${data.save_count?data.save_count:0}</span>
                </div>
              </div>
              ${url}
              </div>
            `);
        $('#exampleModal').modal('show');
      },
      error: function(xhr, status, error) {
        console.error(xhr.responseText);
      }
    });
  }
</script>
@endsection