thrillwiki_laravel/resources/views/livewire/ride-review-component.blade.php

<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
    {{-- Show message if exists --}}
    @if ($message)
        <div @class([
            'p-4 mb-4 rounded-lg',
            'bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-200' => !str_contains($message, 'error') && !str_contains($message, 'cannot'),
            'bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-200' => str_contains($message, 'error') || str_contains($message, 'cannot'),
        ])>
            {{ $message }}
        </div>
    @endif

    {{-- Review Form --}}
    <form wire:submit="save" class="space-y-6">
        {{-- Star Rating --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Rating <span class="text-red-500">*</span>
            </label>
            <div class="flex items-center space-x-2">
                @for ($i = 1; $i <= 5; $i++)
                    <button 
                        type="button"
                        wire:click="$set('rating', {{ $i }})"
                        class="text-2xl focus:outline-none"
                    >
                        <span @class([
                            'text-yellow-400' => $i <= $rating,
                            'text-gray-300 dark:text-gray-600' => $i > $rating,
                        ])>★</span>
                    </button>
                @endfor
            </div>
            @error('rating')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Title Field --}}
        <div>
            <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Title <span class="text-gray-500">(optional)</span>
            </label>
            <input
                type="text"
                id="title"
                wire:model="title"
                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-primary-500 focus:ring-primary-500"
                placeholder="Give your review a title"
            >
            @error('title')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Content Field --}}
        <div>
            <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Review <span class="text-red-500">*</span>
            </label>
            <textarea
                id="content"
                wire:model="content"
                rows="4"
                class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-primary-500 focus:ring-primary-500"
                placeholder="Share your experience with this ride"
            ></textarea>
            <p class="mt-1 text-sm text-gray-500">
                {{ strlen($content) }}/2000 characters
            </p>
            @error('content')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        {{-- Submit Button --}}
        <div class="flex justify-end space-x-3">
            @if ($isEditing)
                <button
                    type="button"
                    wire:click="resetForm"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                >
                    Reset
                </button>
            @endif
            <button
                type="submit"
                wire:loading.attr="disabled"
                class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
            >
                <span wire:loading.remove>
                    {{ $isEditing ? 'Update Review' : 'Submit Review' }}
                </span>
                <span wire:loading>
                    {{ $isEditing ? 'Updating...' : 'Submitting...' }}
                </span>
            </button>
        </div>
    </form>
</div>