@extends('admin.layouts.app')

@section('title', 'Add Review')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center space-x-4">
        <a href="{{ route('admin.reviews.index') }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl transition-colors">
            <i data-lucide="arrow-left" class="w-5 h-5 text-slate-500"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Add Review</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Manually add a product review</p>
        </div>
    </div>

    <form action="{{ route('admin.reviews.store') }}" method="POST">
        @csrf
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Review Details</h2>
                    
                    <div class="space-y-4">
                        <!-- Product Selection -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Product *</label>
                            <select name="product_id" required class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                                <option value="">Select a product...</option>
                                @foreach($products as $product)
                                <option value="{{ $product->id }}" {{ old('product_id') == $product->id ? 'selected' : '' }}>
                                    {{ $product->name }} (SKU: {{ $product->sku ?? 'N/A' }})
                                </option>
                                @endforeach
                            </select>
                            @error('product_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Customer Selection -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Customer</label>
                            <select name="customer_id" id="customerSelect" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                                <option value="">Guest / Manual Entry</option>
                                @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                    {{ $customer->name }} ({{ $customer->phone }})
                                </option>
                                @endforeach
                            </select>
                            <p class="text-xs text-slate-500 mt-1">Leave empty for guest review</p>
                        </div>

                        <!-- Guest Name (shown when no customer selected) -->
                        <div id="guestNameField">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Reviewer Name *</label>
                            <input type="text" name="customer_name" value="{{ old('customer_name') }}" 
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500"
                                placeholder="Enter reviewer name">
                            @error('customer_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Rating -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Rating *</label>
                            <div class="flex items-center space-x-2" x-data="{ rating: {{ old('rating', 5) }} }">
                                @for($i = 1; $i <= 5; $i++)
                                <button type="button" @click="rating = {{ $i }}" 
                                    :class="rating >= {{ $i }} ? 'text-amber-400' : 'text-slate-300 dark:text-slate-600'"
                                    class="focus:outline-none transition-colors">
                                    <i data-lucide="star" class="w-8 h-8 fill-current"></i>
                                </button>
                                @endfor
                                <input type="hidden" name="rating" x-model="rating">
                                <span class="ml-2 text-sm text-slate-500" x-text="rating + ' star' + (rating > 1 ? 's' : '')"></span>
                            </div>
                            @error('rating')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Comment -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Review Comment *</label>
                            <textarea name="comment" rows="4" required
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500"
                                placeholder="Write the review comment...">{{ old('comment') }}</textarea>
                            @error('comment')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Status</h2>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Review Status</label>
                        <select name="status" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            <option value="approved" {{ old('status', 'approved') == 'approved' ? 'selected' : '' }}>Approved</option>
                            <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="rejected" {{ old('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                        </select>
                    </div>
                </div>

                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <button type="submit" class="w-full px-4 py-3 bg-indigo-600 text-white rounded-xl font-medium hover:bg-indigo-700 transition-colors flex items-center justify-center">
                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                        Add Review
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const customerSelect = document.getElementById('customerSelect');
    const guestNameField = document.getElementById('guestNameField');
    
    function toggleGuestName() {
        if (customerSelect.value) {
            guestNameField.style.display = 'none';
        } else {
            guestNameField.style.display = 'block';
        }
    }
    
    customerSelect.addEventListener('change', toggleGuestName);
    toggleGuestName();
});
</script>
@endpush
@endsection