@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" />

<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-responsive">
        <table class="table table-striped data-table">

          <thead>
            <tr>
              <th>
                Id
              </th>
              <th>
                User name
              </th>
              <th>
                Post type
              </th>
              <th>
                Post title
              </th>
              <th>
                Cover image
              </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>
<script type="text/javascript">
  fetch_data();

  function fetch_data(type = '') {

    var table = $('.data-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: "{{ route('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: 'posttype',
          name: 'posttype'
        },
        {
          data: 'title',
          name: 'title',
          render: function(data, type, full, meta) {
            return '<div style="width:500px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
          }
        },
        {
          data: 'coverimage',
          name: 'coverimage'
        },
        {
          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