@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">
                    Posts
                </p>
                <!-- <div>
                    <span>Type</span>
                    <select name="type" id="type" class="type mb-2">
                        <option value="" selected>All post</option>
                        <option value="2">Video</option>
                        <option value="1">Image</option>
                        <option value="3">Text</option>
                    </select>
                </div> -->
            </div>

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

                    <thead>
                        <tr>
                            <th>
                                ID
                            </th>
                            <th>
                                Username
                            </th>
                            <th>
                                Web Link
                            </th>
                            <!-- <th>
                                Discover type
                            </th> -->

                            <th>
                                Title
                            </th>
                            <th>
                                Comment Count
                            </th>
                            <th>
                                Like Count
                            </th>
                            <th>
                                Report Count
                            </th>
                            <th>
                                Image/Video
                            </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('discover.index') }}",
            },
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'user_daital.user_name',
                    name: 'user_daital.user_name',
                    searchable: true,
                    render: function(data, type, full, meta) {
                        return '<div style="width:130px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
                    }
                },
                {
                    data: 'add_your_source',
                    name: 'add_your_source'
                },
                {
                    data: 'description',
                    name: 'description',
                    render: function(data, type, full, meta) {
                        return '<div style="width:500px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
                    }
                },
                {
                    data: 'like_count',
                    name: 'like_count',
                    searchable: false
                },
                {
                    data: 'comment_count',
                    name: 'comment_count',
                    searchable: false
                },
                {
                    data: 'report_count',
                    name: 'report_count',
                    searchable: false
                },
                {
                    data: 'image_video',
                    name: 'image_video',
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            "language": {
                "info": "Showing _START_ to _END_ of _TOTAL_ users",
                "lengthMenu": "Show _MENU_ posts"
            }
        });

    };

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

    function PostDetele(id, message) {
        if (message == 2) {
            $message = "you delete the video post";
        } else if (message == 1) {
            $message = "you delete the image post";
        } else if (message == 3) {
            $message = "you delete the text 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('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: "Your file has been deleted.",
                            icon: "success",
                            showConfirmButton: false,
                        });
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    }
</script>
@endsection