@extends('layouts.admin')

@section('content')
   <div class="card">
    <div class="card-header">
        <h4>Rider's Page</h4>
    </div>
    <div class="card-body table-responsive">
        <table class="table table-striped table-fixed table-hover align-middle text-center">
            <thead class="table-dark">
                <tr>
                    <th>Complainant</th>
                    <th>Email</th>
                    <th>Complain</th>
                    <th>Rider</th>
                    <th>Action</th>
                    <th>Proof of Complain</th>


                </tr>
            </thead>
            <tbody>
                @foreach ($rider_reports as $item)    
                <tr>
                    <td>{{$item->user->name}} {{$item->user->middle_name}} {{$item->user->last_name}}</td>
                    <td>{{$item->user->email}}</td>
                    <td>{{$item->reason}}</td>
                    <td>
                        @if ($item->rider_id)
                            {{ \App\Models\User::find($item->rider_id)->name }}
                        @else
                            N/A
                        @endif
                    </td>
                    
                    <td>
                    <a class="btn btn-primary" href="{{url('view-user/'.$item->rider_id)}}">
        <i class="fas fa-eye"></i> <!-- Font Awesome icon for "View" -->
    </a>
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#imagesModal{{$item->id}}">
                            View Images
                        </button>
                    </td>

                  
                    <!-- Image Modal -->
                    <div class="modal fade" id="imagesModal{{$item->id}}" tabindex="-1" aria-labelledby="imagesModalLabel{{$item->id}}" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="imagesModalLabel{{$item->id}}">Images</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="row mt-3">
                                            @if (!empty($item->images) && $item->images->isNotEmpty())
                                                @foreach ($item->images as $image)
                                                    <div class="col-md-4 mb-3">
                                                        <div class="image-container" style="height: 250px; overflow: hidden;">
                                                            <img src="{{ asset('upload/riderReportImage/'.$image->image_path) }}" alt="RiderReport Image" class="img-fluid" style="height: 100%; width: auto;">
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
   </div>
@endsection