@extends('admin.layouts.app')

@section('title', 'New Appointment')
@section('page-title', 'New Appointment')
@section('page-subtitle', 'Schedule a new appointment')

@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">Appointment Details</h3>
      </div>

      <form method="POST" action="{{ route('admin.appointments.store') }}">
        @csrf
        
        <div class="p-6 space-y-4">
          <!-- Patient and Email -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Patient *</label>
              <select name="patient_id" 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('patient_id') border-red-500 @enderror">
                <option value="">Select patient</option>
                @foreach($patients as $patient)
                  <option value="{{ $patient->id }}" {{ old('patient_id') == $patient->id ? 'selected' : '' }}>
                    {{ $patient->full_name }} ({{ $patient->patient_id }})
                  </option>
                @endforeach
              </select>
              @error('patient_id')
                <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">Psychologist *</label>
              <select name="psychologist_id" 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('psychologist_id') border-red-500 @enderror">
                <option value="">Select psychologist</option>
                @foreach($psychologists as $psychologist)
                  <option value="{{ $psychologist->id }}" {{ old('psychologist_id') == $psychologist->id ? 'selected' : '' }}>
                    {{ $psychologist->name }}
                  </option>
                @endforeach
              </select>
              @error('psychologist_id')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Date and Time -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Appointment Date *</label>
              <input type="date" name="appointment_date" value="{{ old('appointment_date') }}" 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('appointment_date') border-red-500 @enderror">
              @error('appointment_date')
                <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">Time Slot *</label>
              <select name="appointment_time" 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('appointment_time') border-red-500 @enderror">
                <option value="">Select time</option>
                <option value="09:00" {{ old('appointment_time') == '09:00' ? 'selected' : '' }}>9:00 AM</option>
                <option value="10:00" {{ old('appointment_time') == '10:00' ? 'selected' : '' }}>10:00 AM</option>
                <option value="11:00" {{ old('appointment_time') == '11:00' ? 'selected' : '' }}>11:00 AM</option>
                <option value="14:00" {{ old('appointment_time') == '14:00' ? 'selected' : '' }}>2:00 PM</option>
                <option value="15:00" {{ old('appointment_time') == '15:00' ? 'selected' : '' }}>3:00 PM</option>
                <option value="16:00" {{ old('appointment_time') == '16:00' ? 'selected' : '' }}>4:00 PM</option>
              </select>
              @error('appointment_time')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Consultation Type and Duration -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Consultation Type *</label>
              <select name="consultation_type" 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('consultation_type') border-red-500 @enderror">
                <option value="">Select type</option>
                <option value="Initial Assessment" {{ old('consultation_type') == 'Initial Assessment' ? 'selected' : '' }}>Initial Assessment</option>
                <option value="Anxiety Consultation" {{ old('consultation_type') == 'Anxiety Consultation' ? 'selected' : '' }}>Anxiety Consultation</option>
                <option value="Depression Follow-up" {{ old('consultation_type') == 'Depression Follow-up' ? 'selected' : '' }}>Depression Follow-up</option>
                <option value="Stress Management" {{ old('consultation_type') == 'Stress Management' ? 'selected' : '' }}>Stress Management</option>
                <option value="Trauma Therapy" {{ old('consultation_type') == 'Trauma Therapy' ? 'selected' : '' }}>Trauma Therapy</option>
                <option value="General Counseling" {{ old('consultation_type') == 'General Counseling' ? 'selected' : '' }}>General Counseling</option>
              </select>
              @error('consultation_type')
                <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">Duration (minutes)</label>
              <input type="number" name="duration_minutes" value="{{ old('duration_minutes', 60) }}" min="15" max="240" 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('duration_minutes') border-red-500 @enderror">
              @error('duration_minutes')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Reason for Visit -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Reason for Visit</label>
            <textarea name="reason_for_visit" rows="4" 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('reason_for_visit') border-red-500 @enderror" placeholder="Describe the reason for this appointment...">{{ old('reason_for_visit') }}</textarea>
            @error('reason_for_visit')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Notes -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Additional Notes</label>
            <textarea name="notes" rows="3" 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('notes') border-red-500 @enderror" placeholder="Any additional notes...">{{ old('notes') }}</textarea>
            @error('notes')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.appointments.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 Appointment
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection