@extends('Admin.layout')

@section('content')
    {{-- PAGE HEADER --}}
    <div class="dashboard-header d-flex justify-content-between align-items-center mb-4">

        <div>

            <h4 class="admin-section-title mb-0">
                Reviews
            </h4>

        </div>

    </div>


    {{-- REVIEW TABLE --}}
    <div class="card border-0 shadow-sm">

        <div class="card-body">

            <table id="reviewTable" class="table table-hover align-middle w-100">

                <thead>

                    <tr>

                        <th>S.NO</th>

                        <th>DATE</th>

                        <th>CUSTOMER</th>

                        {{-- <th>MOBILE</th> --}}

                        <th>RATING</th>

                        <th>REVIEW</th>

                        <th>STATUS</th>

                        <th>ACTION</th>

                    </tr>

                </thead>

                <tbody>
                </tbody>

            </table>

        </div>

    </div>


    {{-- VIEW REVIEW MODAL --}}
    <div class="modal fade" id="viewReviewModal" tabindex="-1" aria-hidden="true">

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

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Review Details
                    </h5>

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

                </div>


                <div class="modal-body">



                    {{-- MESSAGE --}}
                    <div>
                        <label class="fw-semibold">
                            Review
                        </label>

                        <div id="view_review" class="text-break p-3 rounded border border-primary">
                            -
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- STATUS MODAL --}}
    <div class="modal fade" id="statusModal" 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" id="statusModalTitle">

                    Hide Review?

                </h5>


                <p class="text-muted mb-4" id="statusModalMessage">

                    Are you sure you want to hide this review?

                </p>


                <form action="{{ route('toggle_status') }}" method="POST" id="StatusForm">

                    @csrf

                    <input type="hidden" name="review_id" id="status_review_id">


                    <div class="d-flex justify-content-center gap-3">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button type="submit" class="btn btn-warning p-3 fw-semibold" id="confirmStatusBtn">

                            Yes, Hide

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {


            $('#reviewTable').DataTable({

                processing: true,

                serverSide: true,

                responsive: false,

                pageLength: 10,

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                ajax: {

                    url: "{{ route('reviews_data') }}",

                    type: "GET",

                    error: function(xhr) {

                        console.error(
                            'Review DataTable Error:',
                            xhr.responseText
                        );

                    }

                },

                order: [
                    [1, 'desc']
                ],


                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

                    {
                        data: 'customer',
                        name: 'name'
                    },

                    // {
                    //     data: 'mobile',
                    //     name: 'mobile'
                    // },

                    {
                        data: 'rating_display',
                        name: 'rating',
                        orderable: true,
                        searchable: false
                    },

                    {
                        data: 'review_display',
                        name: 'review',
                        orderable: false,
                        searchable: true
                    },

                    {
                        data: 'status_badge',
                        name: 'status',
                        orderable: true,
                        searchable: true
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ],




                language: {

                    lengthMenu: "_MENU_",

                    search: "",

                    searchPlaceholder: "Search..."

                }

            });



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

                const btn = $(this);

                const review = btn.data('review') || '-';

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

                const modal = new bootstrap.Modal(
                    document.getElementById('viewReviewModal')
                );

                modal.show();

            });



            $(document).on('click', '.statusBtn', function() {

                const btn = $(this);

                const id =
                    btn.data('id');

                const name =
                    btn.data('name');

                const currentStatus =
                    btn.data('status');


                $('#status_review_id').val(id);


                if (currentStatus === 'Published') {

                    $('#statusModalTitle')
                        .text('Hide Review?');

                    $('#statusModalMessage')
                        .text(
                            'Are you sure you want to hide the review from ' +
                            name +
                            '?'
                        );

                    $('#confirmStatusBtn')
                        .text('Yes, Hide')
                        .removeClass('btn-success')
                        .addClass('btn-warning');

                } else {

                    $('#statusModalTitle')
                        .text('Show Review?');

                    $('#statusModalMessage')
                        .text(
                            'Are you sure you want to show the review from ' +
                            name +
                            '?'
                        );

                    $('#confirmStatusBtn')
                        .text('Yes, Show')
                        .removeClass('btn-warning')
                        .addClass('btn-success');

                }


                const modal =
                    new bootstrap.Modal(
                        document.getElementById(
                            'statusModal'
                        )
                    );

                modal.show();

            });


            $(document).on(
                'submit',
                '#StatusForm',
                function() {

                    const btn =
                        $('#confirmStatusBtn');

                    btn.prop(
                        'disabled',
                        true
                    );

                    btn.text(
                        'Processing...'
                    );

                }
            );

        });
    </script>
@endsection