@extends('admin.layout.main')
@section('content')
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Posts</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Posts</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                {{-- <div class="btn-group">
                    <button data-bs-toggle="modal" data-bs-target="#add_court_modal" type="button"
                        class="d-flex align-items-center btn btn-primary font-18"><span>
                            Create Subscription </span><i class="bx bx-plus ms-1"></i></button>

                </div> --}}
            </div>
        </div>
        <!--end breadcrumb-->
        <hr />
        <div class="card user-table">
            <div class="card-body">

                <div class="tab-content py-3">
                    <div class="tab-pane fade show active" id="primaryhome" role="tabpanel">
                        <div class="table-responsive">
                            <table id="posts_table" class="table table-bordered table-striped" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>User Name</th>
                                        <th>Parent Post</th>
                                        <th>View Comments</th>
                                        <th>Media</th>
                                        <th width="100px">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="post_view_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Post Info</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="profile_modal_wrap">
                        <div class="main-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <small class="text-muted text-uppercase">Post Media</small>
                                            <ul class="timeline mt-3">
                                            </ul>
                                        </div>
                                    </div>
                                    <hr />
                                    <div class="card">
                                        <div class="card-body">
                                            <small class="text-muted text-uppercase">About</small>
                                            <ul class="list-unstyled mb-4 mt-3">
                                                <li class="d-flex align-items-center mb-3"><i class="bx bx-user"></i><span
                                                        class="mx-2 post-text"></span>
                                                </li>
                                                <li class="d-flex align-items-center mb-3"><i class="bx bx-star"></i><span
                                                        class="mx-2 post-shared-post"></span>
                                                    <span></span>
                                                </li>
                                            </ul>
                                            <small class="text-muted text-uppercase">Creator Contacts</small>
                                            <ul class="list-unstyled mb-4 mt-3">
                                                <li class="d-flex align-items-center mb-3"><i class="bx bx-phone"></i><span
                                                        class="mx-2 post-user-name"></span>
                                                    <span></span>
                                                </li>
                                                <li class="d-flex align-items-center mb-3"><i
                                                        class="bx bx-envelope"></i><span
                                                        class="mx-2 post-user-email"></span>
                                                    <span></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <hr />
                                    <div class="card">
                                        <div class="card-body">
                                            <small class="text-muted text-uppercase">Comments</small>
                                            <ul class="list-unstyled mt-3 mb-0 comments_container">
                                            </ul>
                                        </div>
                                    </div>
                                </div>

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

            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .timeline {
            border-left: 1px solid hsl(0, 0%, 90%);
            position: relative;
            list-style: none;
        }

        .timeline .timeline-item {
            position: relative;
        }

        .timeline .timeline-item:after {
            position: absolute;
            display: block;
            top: 0;
        }

        .timeline .timeline-item:after {
            background-color: #1664B0;
            left: -38px;
            border-radius: 50%;
            height: 11px;
            width: 11px;
            content: "";
        }
    </style>
    <script>
        $(document).ready(function() {
            var table = $('#posts_table').DataTable({
                lengthChange: false,
                dom: '<"top"lf>rt<"bottom"B><"d-flex justify-content-between align-items-center"ip>',
                buttons: [{
                        extend: 'print',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    }
                ],
                processing: true,
                serverSide: true,
                scrollX: true,
                responsive: false,
                order: [],
                ajax: '{{ route('posts.index') }}',
                columns: [{
                        data: 'user_name',
                        name: 'user.name'
                    },
                    {
                        data: 'parent_post',
                        name: 'parent_post'
                    },
                    {
                        data: 'view_comments',
                        name: 'view_comments'
                    },
                    {
                        data: 'media',
                        name: 'media'
                    },
                    {
                        data: "action",
                        name: "action",
                        orderable: false,
                    }
                ],
            });

            table.buttons().container()
                .appendTo('#posts_table_wrapper .col-md-6:eq(0)');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // view player button fetch user details
            $(document).on('click', '.view-post-btn', function() {
                var postId = $(this).closest('a').data('post-id');
                fetchPostDetails(postId);
            });

            // ajax to fetch post details
            function fetchPostDetails(postId) {
                $.ajax({
                    url: "{{ route('posts.show', ['post' => ':post']) }}".replace(':post', postId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            populatePostModal(response.post);
                        } else {
                            alert('Error fetching post details');
                        }
                    },
                    error: function() {
                        alert('Error fetching post details');
                    }
                });
            }

            function populatePostModal(post) {
                // Update form fields using specific classes
                $('#post_view_modal .post-text').text(`Text: ${post.text}`);
                $('#post_view_modal .post-shared-post').text(
                    `Parent Post: ${post.sharedPost ? post.sharedPost.text : 'No Parent' }`);
                $('#post_view_modal .post-user-name').text(`Contact: ${post.user ? post.user.name : '' }`);
                $('#post_view_modal .post-user-email').text(`Creator Email: ${post.user ? post.user.email : '' }`);

                var comments = post.comments;
                const commentsContainer = $('.comments_container')
                commentsContainer.empty(); // Clear existing comments

                if (comments && comments.length > 0) {
                    comments.forEach(function(commentsItem) {
                        // Assuming commentsItem has 'url' property
                        if (commentsItem) {
                            console.log(commentsItem.user);
                            commentsContainer.append(`
                                <li class="d-flex align-items-center mb-3">
                                    <i class="bx bx-check"></i>
                                    <span class="fw-semibold mx-2">${commentsItem.user ? commentsItem.user.name : ''}:</span>
                                    <span>${commentsItem.comment}</span>
                                </li>
                            `);
                        }
                    });
                } else {
                    // Show placeholder if no images
                    commentsContainer.append(`
                        <p>No Comment Listed</p>
                    `);
                }

                var media = post.media;
                const sliderContainer = $('.timeline');

                if (media && media.length > 0) {
                    media.forEach(function(mediaItem) {
                        const mediaUrl = mediaItem.media || '';

                        if (mediaUrl) {
                            // Get file extension
                            const extension = mediaUrl.split('.').pop().toLowerCase();

                            // Define supported extensions
                            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
                            const videoExtensions = ['mp4', 'webm', 'ogg'];

                            // Create media element based on type
                            let mediaElement = '';

                            if (imageExtensions.includes(extension)) {
                                mediaElement = `
                                    <li class="timeline-item">
                                            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center mb-3">
                                                <a href="javascript:void(0)" class="d-flex align-items-center me-3">
                                                    <img src="${mediaUrl}" class="img-fluid me-2" width="50%" height="50%" alt="Media">
                                                </a>
                                            </div>
                                    </li>
                                `;
                            } else if (videoExtensions.includes(extension)) {
                                mediaElement = `
                                    <li class="timeline-item timeline-item-transparent">
                                        <span class="timeline-point timeline-point-primary"></span>
                                        <div class="timeline-event">
                                            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center mb-3">
                                                <a href="javascript:void(0)" class="d-flex align-items-center me-3">
                                                            <video src="${mediaUrl}" class="consistent-video" width="50%" height="50%" controls></video>
                                                        </a>
                                            </div>
                                        </div>
                                    </li>
                                `;
                            } else {
                                mediaElement = `
                                    <div>
                                        <p>Unsupported media type</p>
                                    </div>
                                `;
                            }

                            sliderContainer.append(mediaElement);
                        } else {
                            // If no media URL
                            sliderContainer.append(`
                                <div>
                                    <p>Not Available</p>
                                </div>
                            `);
                        }
                    });
                } else {
                    // Show placeholder if no media
                    sliderContainer.append(`
                        <div>
                            <img src="assets/images/placeholder.jpg" alt="No Image Available">
                        </div>
                    `);
                }
            }

            // Destroy slider when modal is closed
            $(document).on('hidden.bs.modal', '#post_view_modal', function() {
                // Clear form fields
                $('#post_view_modal .post-text').text('');
                $('#post_view_modal .post-shared-post').text('');
                $('#post_view_modal .post-user-name').text('');
                $('#post_view_modal .post-user-email').text('');
                const commentsContainer = $('.comments_container')
                commentsContainer.empty(); // Clear existing comments
                const sliderContainer = $('.timeline');
                sliderContainer.empty(); // Clear existing comments
            });


            $('body').on('click', '.delete-post', function(e) {
                e.preventDefault()
                var id = $(this).data("post-id");
                new swal({
                    title: "Confirmation Alert!",
                    text: "Do you want to delete this post?",
                    type: "warning",
                    showCancelButton: true,
                    buttonsStyling: false, // Important: Disable default SweetAlert2 button styling
                    customClass: {
                        confirmButton: 'btn btn-danger me-2', // Apply your danger class
                        cancelButton: 'btn btn-secondary' // Apply a secondary class for the cancel button
                    },
                    confirmButtonText: "Yes",
                    cancelButtonText: "No",
                    closeOnConfirm: true,
                    closeOnCancel: false
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'DELETE',
                            url: `{{ url('posts/${id}') }}`,
                            data: {
                                id: id
                            },
                            dataType: 'json',
                            success: function(data) {
                                if (data.success === true) {
                                    new swal(data.msg, "", "success");
                                    setTimeout(function() {
                                        location.reload();
                                    }, 2000);
                                } else {
                                    new swal("Error!", data.msg, "error");
                                }
                            }
                        });

                    } else {
                        swal.fire("Cancelled", "Delete Cancelled", "error");
                    }
                });
            });

        });
    </script>
@endpush