@extends('public.layout')
@section('title', 'Leave a Review')
@section('body')
<div class="card shadow-sm mx-auto" style="max-width: 560px;">
    <div class="card-body p-4">
        <h4 class="card-title mb-2">How was your experience?</h4>
        <p class="text-muted small mb-4">Order {{ $order->order_number }}</p>

        @if(session('info'))
            <div class="alert alert-info">{{ session('info') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('public.review.store', $order->review_token) }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="mb-4">
                <label class="form-label">Rating <span class="text-danger">*</span></label>
                <div class="d-flex gap-2 align-items-center">
                    @for($i = 1; $i <= 5; $i++)
                        <label class="mb-0">
                            <input type="radio" name="rating" value="{{ $i }}" class="form-check-input" {{ old('rating') == $i ? 'checked' : '' }} required>
                            <span class="ms-1">{{ $i }} <i class="fas fa-star text-warning"></i></span>
                        </label>
                    @endfor
                </div>
            </div>
            <div class="mb-3">
                <label for="feedback" class="form-label">Your feedback</label>
                <textarea name="feedback" id="feedback" class="form-control" rows="4" placeholder="How can we assist you?">{{ old('feedback') }}</textarea>
            </div>
            <div class="mb-3">
                <label for="media" class="form-label">Attach photo/video(s)</label>
                <input type="file" name="media[]" id="media" class="form-control" accept="image/*,video/*" multiple>
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" name="is_anonymous" value="1" class="form-check-input" id="anonymous" {{ old('is_anonymous') ? 'checked' : '' }}>
                <label class="form-check-label" for="anonymous">Submit anonymously</label>
            </div>
            <div class="mb-4">
                <label class="form-label">I would like a reply via</label>
                <div class="d-flex flex-wrap gap-3">
                    <label class="d-flex align-items-center gap-1"><input type="radio" name="reply_preference" value="text" {{ old('reply_preference') === 'text' ? 'checked' : '' }}> <i class="fas fa-comment"></i> Text</label>
                    <label class="d-flex align-items-center gap-1"><input type="radio" name="reply_preference" value="call" {{ old('reply_preference') === 'call' ? 'checked' : '' }}> <i class="fas fa-phone"></i> Call</label>
                    <label class="d-flex align-items-center gap-1"><input type="radio" name="reply_preference" value="email" {{ old('reply_preference') === 'email' ? 'checked' : '' }}> <i class="fas fa-envelope"></i> Email</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary w-100">Send Feedback</button>
        </form>
    </div>
</div>
@endsection