@extends('admin.layouts.app')

@section('title', 'Create Testimonial')
@section('page-title', 'Create Testimonial')

@section('content')
<form method="POST" action="{{ route('admin.testimonials.store') }}" class="bg-white p-4 md:p-6 lg:p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
    @csrf
    
    <div class="space-y-4 md:space-y-6">
        <div>
            <label for="name" class="block text-sm font-semibold mb-2 text-[#524438]">Customer Name *</label>
            <input type="text" id="name" name="name" required value="{{ old('name') }}" 
                   class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
            @error('name')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>
        
        <div>
            <label for="testimonial" class="block text-sm font-semibold mb-2 text-[#524438]">Testimonial *</label>
            <textarea id="testimonial" name="testimonial" rows="5" required 
                      class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] resize-none text-sm md:text-base">{{ old('testimonial') }}</textarea>
            <p class="text-xs text-[#9d8566] mt-2">Maximum 1000 characters</p>
            @error('testimonial')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
            <div>
                <label for="rating" class="block text-sm font-semibold mb-2 text-[#524438]">Rating *</label>
                <select id="rating" name="rating" required class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] bg-white text-sm md:text-base">
                    <option value="5" {{ old('rating', 5) == 5 ? 'selected' : '' }}>5 Stars ⭐⭐⭐⭐⭐</option>
                    <option value="4" {{ old('rating') == 4 ? 'selected' : '' }}>4 Stars ⭐⭐⭐⭐</option>
                    <option value="3" {{ old('rating') == 3 ? 'selected' : '' }}>3 Stars ⭐⭐⭐</option>
                    <option value="2" {{ old('rating') == 2 ? 'selected' : '' }}>2 Stars ⭐⭐</option>
                    <option value="1" {{ old('rating') == 1 ? 'selected' : '' }}>1 Star ⭐</option>
                </select>
                @error('rating')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
            
            <div>
                <label for="order" class="block text-sm font-semibold mb-2 text-[#524438]">Display Order</label>
                <input type="number" id="order" name="order" min="0" value="{{ old('order', 0) }}" 
                       class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
                <p class="text-xs text-[#9d8566] mt-2">Lower numbers appear first</p>
                @error('order')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
            
            <div class="flex items-center sm:col-span-2 lg:col-span-1">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" name="featured" value="1" {{ old('featured') ? 'checked' : '' }} 
                           class="w-4 h-4 md:w-5 md:h-5 text-[#7d6a52] border-[#e8ddd0] rounded focus:ring-[#9d8566]">
                    <span class="text-sm md:text-base font-semibold text-[#524438] ml-2 md:ml-3">Featured Testimonial</span>
                </label>
            </div>
        </div>
    </div>
    
    <div class="mt-6 md:mt-8 flex flex-col sm:flex-row gap-3 md:gap-4">
        <button type="submit" class="w-full sm:w-auto bg-[#7d6a52] text-white px-6 md:px-8 py-2 md:py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 text-sm md:text-base">
            Create Testimonial
        </button>
        <a href="{{ route('admin.testimonials.index') }}" class="w-full sm:w-auto bg-[#e8ddd0] text-[#524438] px-6 md:px-8 py-2 md:py-3 rounded-full hover:bg-[#d4c4b0] transition-all font-semibold text-center text-sm md:text-base">
            Cancel
        </a>
    </div>
</form>
@endsection