@extends('admin.layouts.app')

@section('title', 'Create Ticket')
@section('page-title', 'Create Support Ticket')
@section('page-subtitle', 'Submit new support request')

@section('content')
<div class="p-4 lg:p-6">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm">
      <div class="p-6 border-b border-slate-100">
        <h3 class="text-xl font-bold text-slate-800">Ticket Details</h3>
      </div>

      <form method="POST" action="{{ route('admin.tickets.store') }}" enctype="multipart/form-data">
        @csrf
        
        <div class="p-6 space-y-4">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Subject *</label>
            <input type="text" name="subject" value="{{ old('subject') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('subject') border-red-500 @enderror" placeholder="Brief description of the issue">
            @error('subject')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Description *</label>
            <textarea name="description" rows="6" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('description') border-red-500 @enderror" placeholder="Provide detailed information about your request...">{{ old('description') }}</textarea>
            @error('description')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Category *</label>
              <select name="category" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('category') border-red-500 @enderror">
                <option value="">Select category</option>
                <option value="technical" {{ old('category') == 'technical' ? 'selected' : '' }}>Technical</option>
                <option value="billing" {{ old('category') == 'billing' ? 'selected' : '' }}>Billing</option>
                <option value="appointment" {{ old('category') == 'appointment' ? 'selected' : '' }}>Appointment</option>
                <option value="general" {{ old('category') == 'general' ? 'selected' : '' }}>General</option>
                <option value="feedback" {{ old('category') == 'feedback' ? 'selected' : '' }}>Feedback</option>
                <option value="complaint" {{ old('category') == 'complaint' ? 'selected' : '' }}>Complaint</option>
              </select>
              @error('category')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Priority *</label>
              <select name="priority" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('priority') border-red-500 @enderror">
                <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
              </select>
              @error('priority')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Your Name *</label>
              <input type="text" name="requester_name" value="{{ old('requester_name') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('requester_name') border-red-500 @enderror">
              @error('requester_name')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Your Email *</label>
              <input type="email" name="requester_email" value="{{ old('requester_email') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('requester_email') border-red-500 @enderror">
              @error('requester_email')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Your Phone</label>
            <input type="tel" name="requester_phone" value="{{ old('requester_phone') }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('requester_phone') border-red-500 @enderror">
            @error('requester_phone')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Assign To</label>
            <select name="assigned_to" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('assigned_to') border-red-500 @enderror">
              <option value="">Unassigned</option>
              @foreach($users as $user)
                <option value="{{ $user->id }}" {{ old('assigned_to') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
              @endforeach
            </select>
            @error('assigned_to')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Attachments</label>
            <input type="file" name="attachments[]" multiple class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('attachments') border-red-500 @enderror">
            <p class="mt-1 text-xs text-slate-500">You can upload multiple files (max 5MB each)</p>
            @error('attachments')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.tickets.index') }}" class="px-6 py-3 text-slate-600 font-medium rounded-xl hover:bg-slate-100">Cancel</a>
          <button type="submit" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-500/30">Create Ticket</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection