@extends('backend.layouts.app')

@section('title')
    New Complaint - Hotel Management System
@endsection

@section('content')
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-600">
                <i class="fas fa-comment mr-2"></i>
                <span>/ <a href="{{ route('complaints.index') }}" class="text-blue-600 hover:text-blue-800">Complaints</a> / New Complaint</span>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        <!-- Header -->
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">New Complaint</h1>
            <p class="text-gray-600">Submit a new customer complaint or issue</p>
        </div>

        <!-- Form -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <form action="{{ route('complaints.store') }}" method="POST">
                @csrf
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Complainant Name -->
                    <div class="md:col-span-2">
                        <label for="complainant_name" class="block text-sm font-medium text-gray-700 mb-2">
                            Complainant Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               id="complainant_name" 
                               name="complainant_name" 
                               value="{{ old('complainant_name') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('complainant_name') border-red-500 @enderror"
                               placeholder="Enter complainant's full name"
                               required>
                        @error('complainant_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Complaint Type -->
                    <div class="md:col-span-2">
                        <label for="complaint_type" class="block text-sm font-medium text-gray-700 mb-2">
                            Complaint Type <span class="text-red-500">*</span>
                        </label>
                        <select id="complaint_type" 
                                name="complaint_type" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('complaint_type') border-red-500 @enderror"
                                required>
                            <option value="">Select complaint type</option>
                            <option value="Service Quality" {{ old('complaint_type') == 'Service Quality' ? 'selected' : '' }}>Service Quality</option>
                            <option value="Room Issues" {{ old('complaint_type') == 'Room Issues' ? 'selected' : '' }}>Room Issues</option>
                            <option value="Staff Behavior" {{ old('complaint_type') == 'Staff Behavior' ? 'selected' : '' }}>Staff Behavior</option>
                            <option value="Facility Problems" {{ old('complaint_type') == 'Facility Problems' ? 'selected' : '' }}>Facility Problems</option>
                            <option value="Billing Issues" {{ old('complaint_type') == 'Billing Issues' ? 'selected' : '' }}>Billing Issues</option>
                            <option value="Noise Complaints" {{ old('complaint_type') == 'Noise Complaints' ? 'selected' : '' }}>Noise Complaints</option>
                            <option value="Cleanliness" {{ old('complaint_type') == 'Cleanliness' ? 'selected' : '' }}>Cleanliness</option>
                            <option value="Food Quality" {{ old('complaint_type') == 'Food Quality' ? 'selected' : '' }}>Food Quality</option>
                            <option value="Other" {{ old('complaint_type') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('complaint_type')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Complaint Description -->
                    <div class="md:col-span-2">
                        <label for="complaint" class="block text-sm font-medium text-gray-700 mb-2">
                            Complaint Description <span class="text-red-500">*</span>
                        </label>
                        <textarea id="complaint" 
                                  name="complaint" 
                                  rows="4"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('complaint') border-red-500 @enderror"
                                  placeholder="Describe the complaint in detail..."
                                  required>{{ old('complaint') }}</textarea>
                        <p class="mt-1 text-sm text-gray-500">Maximum 200 characters</p>
                        @error('complaint')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Budget (Optional) -->
                    <div>
                        <label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
                            Estimated Budget (Optional)
                        </label>
                        <div class="relative">
                            <span class="absolute left-3 top-2 text-gray-500">$</span>
                            <input type="number" 
                                   id="budget" 
                                   name="budget" 
                                   value="{{ old('budget') }}"
                                   step="0.01"
                                   min="0"
                                   class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('budget') border-red-500 @enderror"
                                   placeholder="0.00">
                        </div>
                        @error('budget')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-end space-x-3 mt-8 pt-6 border-t border-gray-200">
                    <a href="{{ route('complaints.index') }}" 
                       class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-save mr-2"></i>
                        Submit Complaint
                    </button>
                </div>
            </form>
        </div>

        <!-- Help Information -->
        <div class="mt-6 bg-blue-50 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle text-blue-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">Complaint Guidelines</h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <ul class="list-disc list-inside space-y-1">
                            <li>Provide clear and specific details about the issue</li>
                            <li>Include relevant dates, times, and locations if applicable</li>
                            <li>Be professional and constructive in your description</li>
                            <li>Estimated budget helps in planning resolution resources</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection 