@extends('admin.layout.index')
@section('title', 'Admin | Feedback and Ratings')
@section('custom-style')
    <style>
        .feedback-card {
            background-color: #f9f9f9;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .feedback-card h5 {
            margin-bottom: 0;
        }

        .badge-status {
            padding: 5px 10px;
            font-size: 14px;
        }
    </style>
@endsection

@section('content')

    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Start::page-header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Feedback and Ratings</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Feedback and Ratings</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- End::page-header -->

            <!-- User Feedback Section -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">User Feedback on Drivers and Rides</div>
                            <div class="d-flex flex-wrap gap-2">
                                <div>
                                    <input class="form-control form-control-sm" type="text" placeholder="Search Feedback"
                                           aria-label=".form-control-sm example">
                                </div>
                            </div>
                        </div>
                        <div class="card-body table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User</th>
                                    <th>Driver</th>
                                    <th>Rating</th>
                                    <th>Feedback</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>John Doe</td>
                                    <td>Driver A</td>
                                    <td>4/5</td>
                                    <td>Good service, but ride was delayed.</td>
                                    <td>2024-10-05</td>
                                    <td><span class="badge bg-warning badge-status">Pending</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">Resolve</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jane Smith</td>
                                    <td>Driver B</td>
                                    <td>5/5</td>
                                    <td>Excellent ride, friendly driver.</td>
                                    <td>2024-10-06</td>
                                    <td><span class="badge bg-success badge-status">Resolved</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-secondary" disabled>Resolved</button>
                                    </td>
                                </tr>
                                <!-- Additional rows can be added here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Driver Feedback Section -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">Driver Feedback on Riders</div>
                        </div>
                        <div class="card-body table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Driver</th>
                                    <th>Rider</th>
                                    <th>Rating</th>
                                    <th>Feedback</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Driver A</td>
                                    <td>John Doe</td>
                                    <td>3/5</td>
                                    <td>Rider was late to the pickup location.</td>
                                    <td>2024-10-05</td>
                                    <td><span class="badge bg-warning badge-status">Pending</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">Resolve</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Driver B</td>
                                    <td>Jane Smith</td>
                                    <td>5/5</td>
                                    <td>Great rider, no issues.</td>
                                    <td>2024-10-06</td>
                                    <td><span class="badge bg-success badge-status">Resolved</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-secondary" disabled>Resolved</button>
                                    </td>
                                </tr>
                                <!-- Additional rows can be added here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Issue Resolution Section -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">Issue Resolution</div>
                        </div>
                        <div class="card-body">
                            <p>All complaints and negative feedback will appear here for resolution. Admin can address and manage these issues to ensure smooth operations.</p>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Issue ID</th>
                                    <th>Details</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>ISS123456</td>
                                    <td>Complaint about delayed ride.</td>
                                    <td><span class="badge bg-warning badge-status">Pending</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">Resolve</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>ISS654321</td>
                                    <td>Complaint about rude driver behavior.</td>
                                    <td><span class="badge bg-success badge-status">Resolved</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-secondary" disabled>Resolved</button>
                                    </td>
                                </tr>
                                <!-- Additional rows can be added here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('custom-script')
    <script>
        // Custom scripts to handle feedback and issue resolution
    </script>
@endsection