@extends(session('staff_logged_in') ? 'Staff.layout' : 'admin.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

    <style>
        .dt-search {
            display: none
        }

        #reviewsTable th,
        #reviewsTable td {
            vertical-align: middle
        }

        .status-toggle-btn {
            min-width: 80px
        }

        .rating-stars {
            color: #ffb400
        }
    </style>

    @include('admin.layout.toast')

    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5 class="mb-0">Reviews</h5>
        </div>
    </div>

    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>

            <div class="col-lg-auto ms-auto col-12">
                <div class="d-flex flex-column flex-lg-row gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..."
                        style="width:263px;">

                    <button type="button" id="exportBtn" class="btn btn-label-secondary">
                        <i class="ti tabler-download me-1"></i> Export
                    </button>
                </div>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table table-bordered" id="reviewsTable">
                <thead>
                    <tr>
                        <th>S.NO</th>
                        <th>NAME</th>
                        <th>DATE</th>
                        <th>RATING</th>
                        <th>REVIEW</th>
                        <th>STATUS</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="statusConfirmModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">Are you sure?</h5>

                <p class="text-muted" id="modalStatusText">
                    Do you want to change status?
                </p>

                <input type="hidden" id="targetReviewId">
                <input type="hidden" id="targetStatus">

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>

                    <button type="button" id="confirmStatusBtn" class="btn btn-danger">Yes, Sure</button>
                </div>

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

    {{-- Read more --}}

    <div class="modal fade" id="messageModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-lg">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title fw-bold">
                        Review
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="form-control bg-light" id="fullMessage"
                        style="
                         min-height:120px;
                         white-space:pre-wrap;
                         overflow-wrap:anywhere;
                         word-break:break-word;
                     ">
                    </div>

                </div>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {

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

            // Prevent DataTable from initializing twice
            if ($.fn.DataTable.isDataTable('#reviewsTable')) {
                $('#reviewsTable').DataTable().clear().destroy();
            }

            let table = $('#reviewsTable').DataTable({
                processing: true,
                serverSide: true,
                lengthChange: false,
                responsive: false,

                ajax: {
                    url: "{{ route('review_list_data') }}",
                    type: "GET",
                    error: function(xhr) {
                        console.error('DataTable Error:', xhr.responseText);
                    }
                },

                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'rating',
                        name: 'rating',
                        orderable: false,
                        className: 'text-nowrap'
                    },
                    {
                        data: 'review',
                        name: 'review',
                        defaultContent: '-',

                        render: function(data, type, row) {

                            if (!data) {
                                return '-';
                            }

                            if (type !== 'display') {
                                return data;
                            }

                            let review = String(data);

                            if (review.length > 30) {

                                let shortReview = review.substring(0, 30);

                                let encodedReview = btoa(
                                    unescape(
                                        encodeURIComponent(review)
                                    )
                                );

                                return `
                <span class="review-preview">
                    ${$('<div>').text(shortReview).html()}...
                </span>

                <a href="javascript:void(0);"
                   class="read-more-review ms-1"
                   data-review="${encodedReview}">
                    Read More
                </a>
            `;
                            }

                            return $('<div>').text(review).html();
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    }
                ],

                pageLength: 10,
                order: [
                    [2, 'desc']
                ]
            });

            // read more

            $(document).on('click', '.read-more-review', function() {

                let encodedReview = $(this).data('review');

                let review = decodeURIComponent(
                    escape(
                        atob(encodedReview)
                    )
                );

                $('#fullMessage').text(review);

                $('#messageModal').modal('show');
            });
            // Custom Search
            $('#customSearch').off('keyup').on('keyup', function() {
                table.search($(this).val()).draw();
            });


            // Page Length
            $('#pageLength').off('change').on('change', function() {

                let value = $(this).val();

                table
                    .page
                    .len(value === 'All' ? -1 : parseInt(value))
                    .draw();
            });


            // Status Toggle
            $(document)
                .off('click', '.status-toggle-btn')
                .on('click', '.status-toggle-btn', function() {

                    let id = $(this).data('id');
                    let currentStatus = $(this).data('status');
                    let nextStatus = currentStatus === 'Show' ? 'Hide' : 'Show';

                    $('#targetReviewId').val(id);
                    $('#targetStatus').val(nextStatus);

                    $('#modalStatusText').text(
                        `Do you want to change the status to "${nextStatus}"?`
                    );

                    bootstrap.Modal.getOrCreateInstance(
                        document.getElementById('statusConfirmModal')
                    ).show();
                });


            // Confirm Status
            $('#confirmStatusBtn')
                .off('click')
                .on('click', function() {

                    let button = $(this);
                    let id = $('#targetReviewId').val();
                    let status = $('#targetStatus').val();

                    if (!id) {
                        showAjaxToast('Review ID not found.', 'error');
                        return;
                    }

                    button
                        .prop('disabled', true)
                        .html(
                            '<span class="spinner-border spinner-border-sm me-1"></span> Processing...'
                        );

                    $.ajax({

                        url: "{{ route('updatestatus') }}",
                        type: "POST",

                        data: {
                            id: id,
                            status: status
                        },

                        success: function(response) {

                            if (response.success || response.status) {

                                let modal =
                                    bootstrap.Modal.getInstance(
                                        document.getElementById('statusConfirmModal')
                                    );

                                if (modal) {
                                    modal.hide();
                                }

                                table.ajax.reload(null, false);

                                showAjaxToast(
                                    response.message ||
                                    'Status updated successfully.',
                                    'success'
                                );

                            } else {

                                showAjaxToast(
                                    response.message ||
                                    'Unable to update status.',
                                    'error'
                                );
                            }
                        },

                        error: function(xhr) {

                            let message =
                                'Unable to update review status.';

                            if (
                                xhr.responseJSON &&
                                xhr.responseJSON.message
                            ) {
                                message =
                                    xhr.responseJSON.message;
                            }

                            showAjaxToast(message, 'error');
                        },

                        complete: function() {

                            button
                                .prop('disabled', false)
                                .html('Yes, Sure');
                        }
                    });
                });


            // CSV Export
            $('#exportBtn')
                .off('click')
                .on('click', function() {

                    let button = $(this);

                    button
                        .prop('disabled', true)
                        .html(
                            '<span class="spinner-border spinner-border-sm me-1"></span> Exporting...'
                        );

                    setTimeout(function() {

                        let csv = [];
                        let rows =
                            document.querySelectorAll('#reviewsTable tr');

                        rows.forEach(function(row) {

                            let cols =
                                row.querySelectorAll('th,td');

                            let rowData = [];

                            cols.forEach(function(col) {

                                let text =
                                    col.innerText
                                    .replace(/\n/g, ' ')
                                    .replace(/"/g, '""')
                                    .trim();

                                rowData.push('"' + text + '"');
                            });

                            csv.push(rowData.join(','));
                        });

                        let blob = new Blob(
                            [csv.join('\n')], {
                                type: 'text/csv;charset=utf-8;'
                            }
                        );

                        let url =
                            URL.createObjectURL(blob);

                        let link =
                            document.createElement('a');

                        link.href = url;
                        link.download = 'reviews_list.csv';

                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);

                        URL.revokeObjectURL(url);

                        button
                            .prop('disabled', false)
                            .html(
                                '<i class="ti tabler-download me-1"></i> Export'
                            );

                    }, 500);
                });


        });
    </script>
    <!-- <script>
        $(document).on('click', '.view-review', function() {

            let date = $(this).data('date') || '-';
            let rating = parseInt($(this).data('rating')) || 0;
            let review = $(this).data('review') || '-';

            // Date
            $('#modalReviewDate').text(date);

            // Rating
            let stars = '';

            for (let i = 1; i <= 5; i++) {
                if (i <= rating) {
                    stars += '<i class="fas fa-star text-warning"></i> ';
                } else {
                    stars += '<i class="far fa-star text-warning"></i> ';
                }
            }

            $('#modalReviewRating').html(
                stars + '<span class="ms-2">(' + rating + '/5)</span>'
            );

            // Review
            $('#modalReviewText').text(review);

            // Open Modal - Bootstrap 5
            let modalElement = document.getElementById('viewReviewModal');

            let modal = bootstrap.Modal.getOrCreateInstance(modalElement);

            modal.show();
        });
    </script> -->
@endsection