@extends('admin.layouts.masterlayout')

@section('title', 'Rating & feedback Management')
@section('head_title', 'Rating & feedback Management')

@section('content')
<div class="dashboard-body-content">
    <div class="manage-offers-flex">
        <div class="admin-tab-container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link ads_link active" data-bs-toggle="pill" href="#app_rating" data-tab="rating">Rating</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link ads_link" data-bs-toggle="pill" href="#app_review" data-tab="review">Review</a>
                </li>
            </ul>
        </div>
        <div class="d-flex gap-3 align-items-center manage-search-container">
            <div class="position-relative w-100">
                <input type="search" class="form-control shop-search" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                </div>
            </div>
            <!-- @can('advertisement_management.create')
            <a href="{{ route('admin.addAdvertisement') }}" class="ct-btn text-center add-ct-btn">Add Advertisement</a>
            @endcan -->
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane ads_tab active" id="app_rating">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="rating_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User Name</th>
                                    <th>User Type</th>
                                    <th>Rating</th>
                                    <th>Date</th>
                                    <!-- <th>Action</th> -->
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane ads_tab fade" id="app_review">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="review_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User Name</th>
                                    <th>User Type</th>
                                    <th>Review</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    var rating_table = $('#rating_table').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.getAppRatingData") }}',
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'user_name',
                name: 'user_name'
            },
            {
                data: 'role',
                name: 'role'
            },
            {
                data: 'rating',
                name: 'rating'
            },
            {
                data: 'requested_date',
                name: 'requested_date'
            },
            // {
            //     data: 'action',
            //     name: 'action',
            //     orderable: false,
            //     searchable: false
            // },
        ]
    });

    // review Shops DATATABLE
    const review_table = $('#review_table').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.getAppReviewData') }}", // Make sure the route is correctly defined
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'user_name',
                name: 'user_name'
            },
            {
                data: 'role',
                name: 'role'
            },
            {
                data: 'review',
                name: 'review'
            },
            
            {
                data: 'requested_date',
                name: 'requested_date'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ]
    });

    $(document).ready(function() {

        var tab = getUrlParameter('tab') || 'rating';

        // Activate correct tab
        $('.ads_link').removeClass('active');
        $('.ads_tab').removeClass('active show');
        if (tab === 'review') {
            $('.ads_link[data-tab="review"]').addClass('active');
            $('#app_review').addClass('active show');
        } else {
            $('.ads_link[data-tab="rating"]').addClass('active');
            $('#app_rating').addClass('active show');
        }

        // Handle click + update URL
        $('.ads_link').on('click', function(e) {
            var selectedTab = $(this).data('tab');
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + selectedTab;
            window.history.pushState({
                path: newUrl
            }, '', newUrl);

            $('.ads_link').removeClass('active');
            $(this).addClass('active');

            $('.ads_tab').removeClass('active show');
            if (selectedTab === 'review') {
                $('#app_review').addClass('active show');
            } else {
                $('#app_rating').addClass('active show');
            }
        });

        // SHARED SEARCH LOGIC
        $('.manage-search-container input[type="search"]').on('input', function() {
            const activeTab = $('.ads_tab.active').attr('id');
            const searchText = $(this).val();

            if (activeTab === 'app_rating') {
                rating_table.search(searchText).draw();
            } else if (activeTab === 'app_review') {
                review_table.search(searchText).draw();
            }
        });

        $(window).on('pageshow', function(event) {
            if (event.persisted || performance.getEntriesByType("navigation")[0].type === "back_forward") {
                $('.shop-search').val('');
                rating_table.search('').draw(false);
            }
        });
    });


    // DELETE Shop LOGIC
    $(document).on('click', '.delete_ads, .delete_unverifyshop', function() {
        var id = $(this).attr("data-id");
        var type = $(this).attr("data-type");

        $(".tattoo-delete-btn").attr('data-deleted-id', id);
        $(".tattoo-delete-btn").attr('data-delete-type', type);
        $('.tattoo-delete-modal').modal('show');
    });

    // Delete from Database
    $(document).on('click', '.tattoo-delete-btn', function() {
        var id = $(this).attr("data-deleted-id");
        var type = $(this).attr("data-delete-type");

        if (id !== "" && id != 0) {
            $('.tattoo-delete-btn').attr('disabled', true).addClass('loader-active');

            $.ajax({
                type: "POST",
                url: "{{ route('admin.deleteAdvertisement') }}",
                data: {
                    advertisement_id: id
                },
                success: function(response) {

                    $('.tattoo-delete-modal').modal('hide');
                    $('.tattoo-delete-btn').removeAttr('disabled').removeClass('loader-active');

                    if (response.status === true) {
                        // Clear search input and reset filters
                        if (type === "rating") {
                            if (rating_table.rows({
                                    page: 'current'
                                }).count() === 1) {
                                rating_table.page('previous').draw('page');
                            } else {
                                rating_table.ajax.reload(null, false);
                            }
                        } else if (type === "review") {
                            if (rating_table.rows({
                                    page: 'current'
                                }).count() === 1) {
                                review_table.page('previous').draw('page');
                            } else {
                                review_table.ajax.reload(null, false);
                            }
                        }

                        custom_message('success', response.message);
                    } else {
                        custom_message('error', response.message);
                    }
                }
            });
        } else {
            custom_message('error', "ID isn't valid");
        }
    });
</script>
@endsection