@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')
    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Reviews</h5>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <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-auto ms-auto">
                <div class="d-flex align-items-center gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:180px;">
                    <button class="btn btn-label-secondary">Export</button>
                </div>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="reviewTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Date</th>
                        <th>Name</th>
                        <th>Contact</th>
                        <th>Rating</th>
                        <th>Review</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- View Review Modal --}}
    <div class="modal fade" id="reviewModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:16px;">
                <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 p-4">
                    <div class="mb-3">
                        <label class="fw-semibold text-muted small">Patient Name</label>
                        <p class="fw-semibold mb-0" id="modalReviewName">-</p>
                    </div>

                    <div class="mb-3">
                        <label class="fw-semibold text-muted small">Contact</label>
                        <p class="fw-semibold mb-0" id="modalReviewContact">-</p>
                    </div>

                    <div class="mb-3">
                        <label class="fw-semibold text-muted small">Rating</label>
                        <p id="modalReviewRating" class="mb-0"></p>
                    </div>

                    <div class="mb-3">
                        <label class="fw-semibold text-muted small">Review</label>
                        <p id="modalReviewMessage" class="mb-0">-</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Update Status Modal --}}
    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-header">
                    <h5 class="modal-title">Update Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <input type="hidden" id="statusReviewId">
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" id="statusSelect">
                            <option value="Show">Show</option>
                            <option value="Hide">Hide</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateStatusBtn">Update</button>
                </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() {

        const table = $('#reviewTable').DataTable({
            ajax: {
                url: '{{ route("reviews_data") }}',
                dataSrc: 'data'
            },
            pageLength: 10,
            lengthChange: false,
            columnDefs: [
        {
            targets: '_all',
            className: 'text-nowrap'
        }
    ],
            columns: [
            
                {
                    data: null,
                    render: function(data, type, row, meta) { return meta.row + 1; }
                },
                {
    data: 'date'
},
                { data: 'name' },
                { data: 'contact' }, 
                {
                    data: 'rating',
                    render: function(data) {
                        let stars = '';
                        for (let i = 1; i <= data; i++) {
                            stars += '<i class="ti tabler-star-filled text-warning"></i> ';
                        }
                        return stars;
                    }
                },
                {
                    data: 'message',
                    render: function(data) {
                        return '<span title="' + data + '">' +
                            (data.length > 50 ? data.substring(0, 50) + '...' : data) +
                            '</span>';
                    }
                },
                {
                    data: 'status',
                    render: function(data, type, row) {
                        const cls = data === 'Show' ? 'bg-label-success' : 'bg-label-danger';
                        return '<span class="badge ' + cls + ' review-status-badge" style="cursor:pointer;" ' +
                               'data-id="' + row.id + '" data-status="' + data + '">' + data + '</span>';
                    }
                },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return `
                            <button type="button"
                                class="btn btn-sm btn-label-primary view-review-btn"
                                data-id="${row.id}"
                                data-name="${row.name}"
                                data-contact="${row.contact}"
                                data-rating="${row.rating}"
                                data-message="${row.message}">
                                <i class="ti tabler-eye me-1"></i> View
                            </button>
                        `;
                    }
                }
            ]
        });

        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });

        $('#pageLength').on('change', function() {
            let length = $(this).val();
            table.page.len(length === 'All' ? -1 : parseInt(length)).draw();
        });

        // View review
// View Review
$(document).on('click', '.view-review-btn', function () {

    let name = $(this).data('name');
    let contact = $(this).data('contact');
    let rating = $(this).data('rating');
    let message = $(this).data('message');

    let stars = '';

    for (let i = 1; i <= rating; i++) {
        stars += '<i class="ti tabler-star-filled text-warning"></i> ';
    }

    $('#modalReviewName').text(name);
    $('#modalReviewContact').text(contact);
    $('#modalReviewRating').html(stars);
    $('#modalReviewMessage').text(message);

    // Bootstrap 5 Modal
    let reviewModal = new bootstrap.Modal(document.getElementById('reviewModal'));
    reviewModal.show();
});
        // Click status badge — open modal
        $(document).on('click', '.review-status-badge', function() {
            const id     = $(this).data('id');
            const status = $(this).data('status');
            $('#statusReviewId').val(id);
            $('#statusSelect').val(status);
            $('#statusModal').modal('show');
        });
$('#updateStatusBtn').on('click', function() {

    const btn = $(this);
    const id = $('#statusReviewId').val();
    const status = $('#statusSelect').val();

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

    $.ajax({
        url: '{{ url("admin/review") }}/' + id + '/status',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            status: status
        },
        success: function(response) {

            if (response.success) {
                $('#statusModal').modal('hide');
                table.ajax.reload(null, false);
            } else {
                alert('Failed to update status.');
            }

        },
        error: function(xhr) {
            console.log(xhr.status);
            console.log(xhr.responseText);
            alert('Failed to update status.');
        },
        complete: function() {

            btn.prop('disabled', false)
               .html('Update');

        }
    });

});
});
    </script>
@endsection