@extends('layouts.master')
@section('contain')
    {{--  --}}
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Bright Ideas Management</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>
                    <li><a class="breadcrumb-item active" href="javascript:history.go(-1);">back</a></li>
                    <a href="{{ Route('sugesstion.barchart') }}"><button type="button"
                        class="btn btn-info d-none d-lg-block m-l-15 text-white"><i class="fa  fas fa-bars"></i> Analytics by Month</button></a>
                </ol>
            </div>
        </div>
    </div>
    <div class="card">
        <style>
            .filter-container {
                display: flex;
                justify-content: center;
                margin-bottom: 20px;
            }
            .filter-container select {
                margin: 0 10px;
                padding: 5px;
                font-size: 16px;
            }
        </style>
        <div class="card-body">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pending-tab" data-bs-toggle="tab" href="#pending" role="tab"
                        aria-controls="pending" aria-selected="false">Pending</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " id="approved-tab" data-bs-toggle="tab" href="#approved" role="tab"
                        aria-controls="approved" aria-selected="true">Approved</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="reject-tab" data-bs-toggle="tab" href="#reject" role="tab"
                        aria-controls="reject" aria-selected="false">Rejected</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade " id="approved" role="tabpanel" aria-labelledby="approved-tab">
                    <div class="table-responsive">
                        <div class="dataTables_filter">
                            <label for="departmentSearch-approve">Search:
                                <input type="search" id="departmentSearch-approve" placeholder="Search by Department"
                                    aria-controls="approve-table">

                            </label>
                        </div>
                        <table style="font-size: smaller;width: 100%" id="approve-table"
                            class="table table-striped border dataTable no-footer" style="width:100%">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>User</th>
                                    <th>Description</th>
                                    <th>Like Count</th>
                                    <th>Dislike Count</th>
                                    <th>Department</th>
                                    <th>Media</th>
                                    <th>Created At</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                </div>
                <div class="tab-pane fade show active" id="pending" role="tabpanel" aria-labelledby="pending-tab">
                    <div class="table-responsive">
                        <table style="font-size: smaller;width: 100%" id="pending-table"
                            class="table table-striped border dataTable no-footer" style="width:100%">
                            <div class="dataTables_filter">
                                <label for="departmentSearch-pending">Search:
                                    <input type="search" id="departmentSearch-pending" placeholder="Search by Department"
                                        aria-controls="approve-table">

                                </label>
                            </div>
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>User</th>
                                    <th>Description</th>
                                    <th>Like Count</th>
                                    <th>Dislike Count</th>
                                    <th>Department</th>
                                    <th>Media</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                </div>
                <div class="tab-pane fade" id="reject" role="tabpanel" aria-labelledby="reject-tab">
                    <div class="table-responsive">
                        <div class="dataTables_filter">
                            <label for="departmentSearch-reject">Search:
                                <input type="search" id="departmentSearch-reject" placeholder=""
                                    aria-controls="approve-table">

                            </label>
                        </div>
                        <table style="font-size: smaller;width: 100%" id="reject-table"
                            class="table table-striped border dataTable no-footer" style="width:100%">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>User</th>
                                    <th>Description</th>
                                    <th>Like Count</th>
                                    <th>Dislike Count</th>
                                    <th>Department</th>
                                    <th>reason</th>
                                    <th>Media</th>
                                    <th>Created At</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

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


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

        </div>
    </div>
    <div id="responsive-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <!-- Modal content -->
        <div class="modal-dialog">
            <div class="modal-content topbar">
                <div class="modal-header" style="padding: 2%;">
                    <h4 class="font-bold">Enter Reason</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ Route('suggestion.status') }}" method="get">
                    @csrf
                    <div class="modal-body" style="padding: 14px;">
                        <div class="form-group">
                            <label for="message-text" class="form-label">Reason:</label>
                            <textarea required class="form-control" id="message-text" maxlength="255" name="reason"></textarea>
                            <input type="hidden" name="suggestionId" id="suggestionId">
                            <input type="hidden" name="status" value="reject">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>

                        <button type="submit" class="btn btn-danger waves-effect waves-light text-white">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        function approveSuggestion(suggestionId) {
            var baseUrl = '{{ route('suggestion.status', [':suggestionId', 'approve']) }}';
            baseUrl = baseUrl.replace(':suggestionId', suggestionId);

            swal({
                title: 'Are you sure?',
                text: 'You are about to approve this Bright Ideas.',
                icon: 'warning',
                buttons: {
                    cancel: 'No, cancel!',
                    confirm: 'Yes, approve it!'
                },
                dangerMode: true
            }).then((isConfirmed) => {
                if (isConfirmed) {
                    // Perform the approve action here, e.g., submit a form or make an AJAX request
                    window.location.href = baseUrl;
                }
            });
        }


        function populateModal(suggestionId) {
            var form = document.getElementById('my-form');
            var reasonInput = document.getElementById('message-text').value;

            var modal = new bootstrap.Modal(document.getElementById('responsive-modal'));
            $('#suggestionId').val(suggestionId);
            // modal.show();
        }
        // 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() {
            var approveTable = $('#approve-table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('suggestion.index') }}",
                    "data": {
                        "tab": "approve" // Set the tab to 'approved'
                    },
                    "type": "get"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: true,
                        orderable: false
                    },
                    {
                        "data": "user.user_name"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "likes_count"
                    },
                    {
                        "data": "dislikes_count"
                    },
                    {
                        "data": "DepartmentName"
                    },
                    {
                        "data": "media"
                    },
                    {
                        "data": "created_at"
                    },
                    {
                        "data": "status",
                        "render": function(data, type, row) {
                            return '<span class="badge badge-success">Approved</span>';
                        }
                    }
                ],
                "paging": true, // Enable pagination
                "pageLength": 10, // Number of rows per page
                "lengthMenu": [10, 25, 50, 100]
            });

            $('#departmentSearch-approve').on('keyup change', function() {
                if (approveTable.column(5).search() !== this.value) {
                    approveTable.column(5).search(this.value).draw();
                }
            });

            var pendingTable = $('#pending-table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('suggestion.index') }}",
                    "type": "get"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: false,
                        orderable: false
                    },
                    {
                        "data": "user.user_name"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "likes_count"
                    },
                    {
                        "data": "dislikes_count"
                    },
                    {
                        "data": "DepartmentName"
                    },
                    {
                        "data": "media"
                    },
                    {
                        "data": "created_at"
                    },
                    {
                        "data": "action"
                    }
                ],
                "paging": true, // Enable pagination
                "pageLength": 10, // Number of rows per page
                "lengthMenu": [10, 25, 50, 100]
            });

            $('#departmentSearch-pending').on('keyup change', function() {
                if (pendingTable.column(5).search() !== this.value) {
                    pendingTable.column(5).search(this.value).draw();
                }
            });

            var rejectTable = $('#reject-table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('suggestion.index') }}",
                    "data": {
                        "tab": "reject" // Set the tab to 'approved'
                    },
                    "type": "get"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: false,
                        orderable: false
                    },
                    {
                        "data": "user.user_name"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "likes_count"
                    },
                    {
                        "data": "dislikes_count"
                    },
                    {
                        "data": "DepartmentName"
                    },
                    {
                        "data": "reason",
                        "render": function(data) {
                            return data ? data : "-";
                        }
                    },
                    {
                        "data": "media"
                    },
                    {
                        "data": "created_at"
                    },
                    {
                        "data": "status",
                        "render": function(data, type, row) {
                            return '<span class="badge badge-danger">Rejected</span>';
                        }
                    }
                ],
                "paging": true, // Enable pagination
                "pageLength": 10, // Number of rows per page
                "lengthMenu": [10, 25, 50, 100]
            });

            $('#departmentSearch-reject').on('keyup change', function() {
                if (rejectTable.column(5).search() !== this.value) {
                    rejectTable.column(5).search(this.value).draw();
                }
            });
        });
    </script>
@endsection