@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <h4 class="mb-4">Ulasan Saya</h4>

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

    <div class="table-responsive table-card">
        <table class="table table-nowrap table-striped-columns mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Layanan</th>
                    <th scope="col">Rating</th>
                    <th scope="col">Ulasan</th>
                    <th scope="col">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($reviews as $review)
                <tr>
                    <form action="{{ route('user.reviews.update', $review->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <td>#{{ $review->id }}</td>
                        <td>{{ $review->order->service->name ?? '-' }}</td>
                        <td>
                            <select name="rating" class="form-select form-select-sm w-auto d-inline">
                                @for ($i = 1; $i <= 5; $i++)
                                    <option value="{{ $i }}" @selected($review->rating == $i)>{{ $i }}</option>
                                @endfor
                            </select>
                        </td>
                        <td>
                            <input type="text" name="comment" value="{{ $review->comment }}" class="form-control form-control-sm">
                        </td>
                        <td>
                            <button type="submit" class="btn btn-sm btn-primary">Simpan</button>
                        </td>
                    </form>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center">Belum ada ulasan yang dikirim.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection