@extends('layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <style>
        .managing_main_div {
            display: flex;
            gap: 20px;
            flex-direction: column;
            padding: 0px 20px;
        }

        /* Base styles from React component */
        .review_heading h2 {
            color: #2ca5d6;
            font-size: 24px;
            font-weight: bold;
        }

        /* .content_div {
                                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
                                    overflow: auto;
                                    scrollbar-width: none;
                                    -ms-overflow-style: none;
                                    height: 420px;
                                    width: 100%;
                                    padding: 20px;
                                    
                                } */

        /* Table and Pagination styles */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin: 20px 0px;
        }

        .pagination button {
            border-radius: 50px;
            background-color: #fff;
            border: 2px solid lightgray;
            padding: 5px;
        }

        .pagination button:not(:disabled) {
            cursor: pointer;
            border: 2px solid #2ca5d6;
        }

        .pagination button svg {
            width: 20px;
            height: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        table tr {
            border-bottom: 1px solid #e6eff5;
        }

        table th {
            font-size: 14px;
            font-weight: 500;
            color: #2ca5d6;
            text-align: center;
        }

        table td {
            font-size: 14px;
            font-weight: 400;
            text-align: center;
        }

        th,
        td {
            padding: 8px;
        }

        /* Additional styles for DataTables pagination to match the old style */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 5px 10px;
            margin: 0 2px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #2ca5d6;
            color: white !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #ccc !important;
        }
    </style>

    <div class="managing_main_div">
        <div class="review_heading">
            <h2 class="text-3xl">Reviewing Feedback</h2>
        </div>
        <div class="content_div">
            {{-- <table id="reviewsTable">
                <thead>
                    <tr>
                        <th>Sr.no</th>
                        <th>RT-ID</th>
                        <th>User Name</th>
                        <th>Service Name</th>
                        <th>Rating</th>
                        <th>Comment</th>
                        <th>Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($feedbacks as $index => $fb)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $fb->rating_id }}</td>
                            <td>{{ $fb->user->name ?? 'N/A' }}</td>
                            <td>{{ $fb->service->title ?? 'N/A' }}</td>
                            <td>{{ rtrim(rtrim(number_format($fb->rating, 1), '0'), '.') }}</td>
                            <td>{{ $fb->comment ?: '-' }}</td>
                            <td>{{ $fb->created_at?->format('d M Y, h:i A') }}</td>
                            <td>
                                <form >
                                    <button type="submit"
                                        class="RedirectButton bg-red-500 text-white px-3 py-1 rounded text-xs">
                                        active 
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>

            </table> --}}
            <table id="reviewsTable">
                <thead>
                    <tr>
                        <th>Sr.no</th>
                        <th>RT-ID</th>
                        <th>User Name</th>
                        <th>Service Name</th>
                        <th>Rating</th>
                        <th>Comment</th>
                        <th>Date</th>
                        <th>status</th>
                        <th>Change Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($feedbacks as $index => $fb)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $fb->rating_id }}</td>
                            <td>{{ $fb->user->name ?? 'N/A' }}</td>
                            <td>{{ $fb->service->title ?? 'N/A' }}</td>
                            <td>{{ rtrim(rtrim(number_format($fb->rating, 1), '0'), '.') }}</td>
                            <td>{{ $fb->comment ?: '-' }}</td>
                            <td>{{ $fb->created_at?->format('d M Y, h:i A') }}</td>
                            <td>{{ $fb->status }}</td>
                            <td>
                                <form action="{{ route('feedback.toggle', $fb->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                        class="RedirectButton px-3 py-1 rounded text-xs
                                {{ $fb->status == 'active' ? 'bg-red-500 text-white' : 'bg-green-500 text-white' }}">
                                        {{ $fb->status == 'active' ? 'Inactive' : 'Active' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

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

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize DataTables on the table
            $('#reviewsTable').DataTable({

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