@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
    .dt-search
    {
        display: none;
    }
</style>
@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>Name</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">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>
$(function () {

    const data = [
        {
            id: 1,
            name: "Arun Kumar",
            rating: 5,
            review: "Excellent treatment and friendly doctors. Highly recommended.",
            status: "Show"
        },
        {
            id: 2,
            name: "Priya",
            rating: 4,
            review: "Good service and clean environment.",
            status: "Hide"
        },
        {
            id: 3,
            name: "Rahul",
            rating: 5,
            review: "Very satisfied with the consultation.",
            status: "Show"
        },
        {
            id: 4,
            name: "Keerthana",
            rating: 3,
            review: "Waiting time was a little long but treatment was good.",
            status: "Hide"
        },
        {
            id: 5,
            name: "Vignesh",
            rating: 4,
            review: "Professional staff and affordable pricing.",
            status: "Show"
        }
    ];

    function stars(rating) {
        let html = "";

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

        return html;
    }

    let table = $('#reviewTable').DataTable({
        data: data,
        searching: true,
        lengthChange: false,
        pageLength: 10,
        ordering: false,

        columns: [
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },

            {
                data: 'name'
            },

            {
                data: 'rating',
                render: function (data) {
                    return stars(data);
                }
            },

            {
                data: 'review',
                render: function (data) {
                    return data.length > 40
                        ? data.substring(0, 40) +
                          '... <a href="#" class="view-review text-primary">View</a>'
                        : data;
                }
            },

            {
                data: 'status',
                render: function (data) {

                    if (data === "Show") {
                        return '<span class="badge bg-label-success">Show</span>';
                    }

                    return '<span class="badge bg-label-danger">Hide</span>';
                }
            },

            {
                data: null,
                render: function () {

                    return `
                        <div class="d-flex gap-2">

                            <button class="btn btn-sm btn-label-primary view-btn">
                                <i class="ti tabler-eye"></i>
                            </button>

                            <button class="btn btn-sm btn-label-warning status-btn">
                                <i class="ti tabler-edit"></i>
                            </button>

                        </div>
                    `;
                }
            }
        ]
    });

    // Search
    $('#customSearch').keyup(function () {
        table.search($(this).val()).draw();
    });

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

        if ($(this).val() == "All") {
            table.page.len(-1).draw();
        } else {
            table.page.len($(this).val()).draw();
        }

    });

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

        e.preventDefault();

        let row = table.row($(this).closest('tr')).data();

        $('#modalReviewName').text(row.name);
        $('#modalReviewRating').html(stars(row.rating));
        $('#modalReviewMessage').text(row.review);

        $('#reviewModal').modal('show');

    });

    // Status Modal
    $('#reviewTable').on('click', '.status-btn', function () {

        let row = table.row($(this).closest('tr')).data();

        $('#statusReviewId').val(row.id);
        $('#statusSelect').val(row.status);

        $('#statusModal').modal('show');

    });

    // Update Status (Demo)
    $('#updateStatusBtn').click(function () {

        let id = $('#statusReviewId').val();
        let status = $('#statusSelect').val();

        data.forEach(function(item){
            if(item.id == id){
                item.status = status;
            }
        });

        table.clear().rows.add(data).draw();

        $('#statusModal').modal('hide');

    });

});
</script>
@endsection