@extends('layouts.master')
@section('contain')
    {{--  --}}
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Posts</h3>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                </ol>
                {{-- <a href="{{ Route('address.swform') }}"><button type="button"
                    class="btn btn-info d-none d-lg-block m-l-15 text-white"><i class="fa fa-plus-circle"></i> Create
                    New</button></a> --}}
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="post-tab" data-bs-toggle="tab" href="#post" role="tab"
                        aria-controls="post" aria-selected="false">Post</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " id="announcement-tab" data-bs-toggle="tab" href="#announcement" role="tab"
                        aria-controls="announcement" aria-selected="true">Announcement</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="competition-tab" data-bs-toggle="tab" href="#competition" role="tab"
                        aria-controls="competition" aria-selected="false">Competition</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade " id="announcement" role="tabpanel" aria-labelledby="announcement-tab">
                    <div class="table-responsive">
                        <table id="annoucment-table" class="table table-striped border dataTable no-footer"
                            style="width:100%">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>User</th>
                                    <th>Title</th>
                                    <th>Comments Count</th>
                                    <th>Reactions Count</th>
                                    <th>Description</th>
                                    <th>Media</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                </div>
                <div class="tab-pane fade show active" id="post" role="tabpanel" aria-labelledby="post-tab">
                    <div class="table-responsive">
                        <table id="posts-table" class="table table-striped border dataTable no-footer" style="width:100%">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>User</th>
                                    <th>Title</th>
                                    <th>Comments Count</th>
                                    <th>Reactions Count</th>
                                    <th>Description</th>
                                    <th>Media</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                </div>
                <div class="tab-pane fade" id="competition" role="tabpanel" aria-labelledby="competition-tab">
                    <div class="table-responsive">
                        <table id="competition-table" class="table table-striped border dataTable no-footer" style="width:100%">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>User</th>
                                    <th>Title</th>
                                    <th>Comments Count</th>
                                    <th>Reactions Count</th>
                                    <th>Description</th>
                                    <th>Media</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

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


            {{-- <h6 class="card-subtitle">Data table example</h6> --}}

        </div>
    </div>
    <!-- sample modal content -->
    <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
        <div class="modal-dialog " role="document">
            <div class="modal-content" style="background-color: darkgray;border-radius: 5%;">
                <div class="modal-header">
                    <h4 class="font-bold" id="exampleModalLabel1">Ad Media
                    </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"></span></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="" class="table table-striped">
                            <thead>
                                <tr class="text-white" style="background-color: gray">
                                    <th>S.No</th>
                                    <th>Thumbnail</th>
                                    {{-- <th>Media</th> --}}
                                    {{-- <th>Created</th> --}}
                                </tr>
                            </thead>
                            <tbody class="mydata">

                                <tr>
                                    <td>0</td>
                                    <td
                                        value="https://images.unsplash.com/photo-1604964432806-254d07c11f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8ZGV2ZWxvcGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=700&q=60">
                                        image</td>
                                    <td>null</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td
                                        value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4">
                                        video</td>
                                    <td>null</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {{-- <div class="modal-footer"> --}}
                <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal">Close</button>
                {{-- </div> --}}
            </div>
        </div>
    </div>
    <!-- /.modal -->
    <script>
        // popup method
        function setMsg(e) {
            let dataList = '';
            var s_no = 1;
            let mydata = $(e).attr("data-msg");
            // alert(JSON.stringify(mydata));
            if (mydata.length > 0) {
                mydata = eval(mydata);
                $.each(mydata, function(key, value) {
                    let mediaUrl = "{{ URL::asset(env('MEDIA_URL')) }}";
                    let thumbnail = value.thumbnail ?
                        '<a href="' + mediaUrl + value.thumbnail +
                        '" target="_blank"><img width="50px" style="height: 50px" class="img-circle" src="' +
                        mediaUrl + value.thumbnail + '" /></a>' :
                        (value.media ? '<a href="' + mediaUrl + value.media +
                            '" target="_blank"><img width="50px" style="height: 50px" class="img-circle" src="' +
                            mediaUrl + value.media + '" /></a>' : 'No Media');
                    dataList += '<tr><td>' + s_no++ + '</td><td>' + thumbnail + '</td></tr><br>';
                });
            } else {
                dataList = '<tr><td colspan="2"> No Data </td></tr>';
            }
            console.log(dataList);
            $('.mydata').empty();
            $('.mydata').html(dataList);
        }




        // popup method end

        function swalll(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "delete-form-" + id;
                        document.getElementById(formId).submit();
                    }
                });
        }

        function swal2(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure delete post & block user?",
                    // text: " want to delete post & block user?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "delete-form-" + id;
                        document.getElementById(formId).submit();
                    }
                });
        }
        $(document).ready(function() {
            $('#posts-table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('get.Posts') }}",
                    "type": "get"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: false,
                        orderable: false
                    },
                    {
                        "data": "user.full_name"
                    },
                    {
                        "data": "title"
                    },
                    {
                        "data": "comments_count"
                    },
                    {
                        "data": "reactions_count"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "media"
                    },
                    {
                        "data": "created_at"
                    }
                ],
                "paging": true, // Enable pagination
                "pageLength": 10, // Number of rows per page
                "lengthMenu": [10, 25, 50, 100]
            });
            $('#annoucment-table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('get.Posts') }}",
                    "data": {
                        "tab": "announcement" // Set the tab to 'announcement'
                    },
                    "type": "get"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: false,
                        orderable: false
                    },
                    {
                        "data": "user.full_name"
                    },
                    {
                        "data": "title"
                    },
                    {
                        "data": "comments_count"
                    },
                    {
                        "data": "reactions_count"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "media"
                    },
                    {
                        "data": "created_at"
                    }
                ],
                "paging": true, // Enable pagination
                "pageLength": 10, // Number of rows per page
                "lengthMenu": [10, 25, 50, 100]
            });
            $('#competition-table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('get.Posts') }}",
                    "data": {
                        "tab": "competition" // Set the tab to 'announcement'
                    },
                    "type": "get"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: false,
                        orderable: false
                    },
                    {
                        "data": "user.full_name"
                    },
                    {
                        "data": "title"
                    },
                    {
                        "data": "comments_count"
                    },
                    {
                        "data": "reactions_count"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "media"
                    },
                    {
                        "data": "created_at"
                    }
                ],
                "paging": true, // Enable pagination
                "pageLength": 10, // Number of rows per page
                "lengthMenu": [10, 25, 50, 100]
            });


        });
    </script>
@endsection