<section class="create-section">
  <h2 class="section-title">Create New Appointment</h2>
  <div class="create-form-container">
    <!-- Info Message -->
    <div class="info-message" *ngIf="patients.length === 0">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
        <path d="M12 16H12.01M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div>
        <strong>Note:</strong> Patient list is extracted from your appointments. To create appointments for new patients, you may need to enter the patient ID manually or contact an administrator.
      </div>
    </div>
    <form class="create-form" (ngSubmit)="createAppointment()">
      <div class="form-group">
        <label for="patientId" class="form-label">Patient</label>
        
        <!-- Patient Search -->
        <div style="margin-bottom: 1rem;">
          <label for="patientSearch" class="form-label" style="font-size: 0.875rem; color: #666; margin-bottom: 0.5rem; display: block;">
            Search Patient
            <span *ngIf="loadingPatients" style="color: #999; font-weight: normal;">(Loading all patients...)</span>
          </label>
          <div style="position: relative;">
            <input 
              id="patientSearch"
              type="text" 
              [(ngModel)]="patientSearchQuery" 
              (input)="onPatientSearchChange()"
              name="patientSearch"
              class="form-input" 
              placeholder="Search by name or email..."
              style="padding-right: 2.5rem;"
              [disabled]="loadingPatients"
            />
            <button 
              *ngIf="patientSearchQuery" 
              type="button"
              (click)="clearPatientSearch()"
              style="position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0.25rem; color: #666;"
              title="Clear search">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1rem; height: 1rem;">
                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
            <svg 
              *ngIf="!patientSearchQuery"
              viewBox="0 0 24 24" 
              fill="none" 
              xmlns="http://www.w3.org/2000/svg" 
              style="position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: #999; pointer-events: none;">
              <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </div>
        
        <!-- Patient Dropdown -->
        <select id="patientId" [(ngModel)]="newAppointment.patientId" name="patientId" class="form-input" [disabled]="loadingPatients" (change)="onPatientSelect(newAppointment.patientId)">
          <option value="">{{ loadingPatients ? 'Loading patients...' : 'Select a patient (or enter ID manually)' }}</option>
          <option *ngFor="let patient of filteredPatients" [value]="patient.id">
            {{ patient.displayName || (patient.firstName + ' ' + patient.lastName) }}{{ patient.email ? ' (' + patient.email + ')' : '' }}
          </option>
        </select>
        <!-- Patient Found Indicator -->
        <div *ngIf="newAppointment.patientId && selectedPatientName" style="margin-top: 0.5rem; padding: 0.75rem; background-color: #e8f5e9; border-left: 3px solid #4caf50; border-radius: 4px;">
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.25rem; height: 1.25rem; color: #4caf50; flex-shrink: 0;">
              <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <div style="flex: 1;">
              <span style="color: #2e7d32; font-size: 0.875rem; font-weight: 600; display: block;">
                Patient Found & Selected
              </span>
              <span style="color: #2e7d32; font-size: 0.875rem; display: block; margin-top: 0.25rem;">
                {{ selectedPatientName }}
              </span>
            </div>
          </div>
        </div>
        <p *ngIf="loadingPatients" style="margin-top: 0.5rem; color: #666; font-size: 0.875rem;">
          Loading all registered patients from the system...
        </p>
        <p *ngIf="!loadingPatients && patientSearchQuery && filteredPatients.length === 0" style="margin-top: 0.5rem; color: #666; font-size: 0.875rem;">
          No patients found matching "{{ patientSearchQuery }}"
        </p>
        <p *ngIf="!loadingPatients && !patientSearchQuery && filteredPatients.length === 0" style="margin-top: 0.5rem; color: #666; font-size: 0.875rem;">
          No patients available
        </p>
        
        <!-- Manual Patient ID Input -->
        <input 
          *ngIf="shouldShowManualPatientIdInput()"
          type="text" 
          [(ngModel)]="newAppointment.patientId" 
          name="patientIdManual" 
          class="form-input form-input-margin"
          placeholder="Or enter Patient ID manually"
        />
      </div>

      <div class="form-row">
        <div class="form-group">
          <label for="scheduledDate" class="form-label">Date</label>
          <input 
            id="scheduledDate" 
            type="date" 
            [(ngModel)]="newAppointment.scheduledDate" 
            name="scheduledDate" 
            class="form-input"
            required
            [min]="getTodayDate()"
          />
        </div>
        <div class="form-group">
          <label for="scheduledTime" class="form-label">Time</label>
          <input 
            id="scheduledTime" 
            type="time" 
            [(ngModel)]="newAppointment.scheduledTime" 
            name="scheduledTime" 
            class="form-input"
            required
          />
        </div>
        <div class="form-group">
          <label for="durationInMinutes" class="form-label">Duration (minutes)</label>
          <input 
            id="durationInMinutes" 
            type="number" 
            [(ngModel)]="newAppointment.durationInMinutes" 
            name="durationInMinutes" 
            class="form-input"
            min="15"
            max="120"
            step="15"
            required
          />
        </div>
      </div>

      <!-- Success Message (Inline) - Always visible when successMessage exists -->
      <div *ngIf="successMessage" class="form-success-message" style="margin-bottom: 1rem; padding: 1rem; background-color: #e8f5e9; border-left: 4px solid #4caf50; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: block !important; visibility: visible !important;">
        <div style="display: flex; align-items: center; gap: 0.75rem;">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.5rem; height: 1.5rem; color: #4caf50; flex-shrink: 0;">
            <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
          </svg>
          <div style="flex: 1;">
            <strong style="color: #2e7d32; font-size: 1rem; font-weight: 600; display: block; margin-bottom: 0.25rem;">✓ Appointment Created Successfully!</strong>
            <span style="color: #2e7d32; font-size: 0.9rem; display: block;">{{ successMessage }}</span>
          </div>
          <button type="button" (click)="successMessage = null" style="background: none; border: none; cursor: pointer; color: #2e7d32; padding: 0.25rem; opacity: 0.7; transition: opacity 0.2s;" title="Dismiss">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.25rem; height: 1.25rem;">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- Error Message (Inline) - Always visible when error exists -->
      <div class="form-error-message" *ngIf="error" style="margin-bottom: 1rem; padding: 1rem; background-color: #ffebee; border-left: 4px solid #f44336; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <div style="display: flex; align-items: center; gap: 0.75rem;">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.5rem; height: 1.5rem; color: #f44336; flex-shrink: 0;">
            <path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <div style="flex: 1;">
            <strong style="color: #d32f2f; font-size: 1rem; font-weight: 600; display: block; margin-bottom: 0.25rem;">✗ Failed to Create Appointment</strong>
            <span style="color: #d32f2f; font-size: 0.9rem; display: block;">{{ error }}</span>
          </div>
          <button type="button" (click)="error = null" style="background: none; border: none; cursor: pointer; color: #d32f2f; padding: 0.25rem; opacity: 0.7; transition: opacity 0.2s;" title="Dismiss">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.25rem; height: 1.25rem;">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
      </div>

      <button type="submit" class="submit-button" [disabled]="creatingAppointment">
        <span *ngIf="!creatingAppointment">Create Appointment</span>
        <span *ngIf="creatingAppointment" style="display: flex; align-items: center; gap: 0.5rem; justify-content: center;">
          <svg class="spinner" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1rem; height: 1rem; animation: spin 1s linear infinite;">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="32" stroke-dashoffset="32">
              <animate attributeName="stroke-dasharray" dur="2s" values="0 32;16 16;0 32;0 32" repeatCount="indefinite"/>
              <animate attributeName="stroke-dashoffset" dur="2s" values="0;-16;-32;-32" repeatCount="indefinite"/>
            </circle>
          </svg>
          Creating Appointment...
        </span>
      </button>
    </form>
  </div>

  <!-- Success/Error Popup - Fixed position, always on top -->
  <div class="notification-popup" *ngIf="showPopup" [ngClass]="{'popup-success': popupType === 'success', 'popup-error': popupType === 'error'}" style="position: fixed !important; top: 20px !important; right: 20px !important; z-index: 99999 !important; min-width: 350px; max-width: 500px; background: white !important; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important; border: 2px solid; animation: slideInRight 0.3s ease-out; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;">
    <div class="popup-content" style="display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; position: relative;">
      <div class="popup-icon" style="flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(76, 175, 80, 0.1);" *ngIf="popupType === 'success'">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; color: #4caf50;">
          <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>
      <div class="popup-icon" style="flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(244, 67, 54, 0.1);" *ngIf="popupType === 'error'">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; color: #f44336;">
          <path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="popup-message" style="flex: 1;">
        <h3 class="popup-title" style="margin: 0 0 0.5rem 0; font-size: 1.25rem; font-weight: 600; color: #333;">{{ popupType === 'success' ? '✓ Success!' : '✗ Error!' }}</h3>
        <p class="popup-text" style="margin: 0; font-size: 0.95rem; color: #666; line-height: 1.5;">{{ popupType === 'success' ? successMessage : error }}</p>
        <button 
          *ngIf="popupType === 'error' && (error?.includes('session') || error?.includes('expired') || error?.includes('log in'))"
          type="button" 
          class="popup-refresh-btn" 
          (click)="refreshPage()"
          style="margin-top: 0.75rem; padding: 0.5rem 1rem; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem;"
        >
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px;">
            <path d="M3 12C3 7.03 7.03 3 12 3C16.97 3 21 7.03 21 12C21 16.97 16.97 21 12 21C7.03 21 3 16.97 3 12Z" stroke="currentColor" stroke-width="2"/>
            <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          Refresh Page
        </button>
      </div>
      <button type="button" class="popup-close" (click)="closePopup()" aria-label="Close" style="position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; cursor: pointer; padding: 0.25rem; color: #999; opacity: 0.7; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 20px; height: 20px;">
          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
    <div class="popup-progress" *ngIf="popupType === 'success'" style="height: 4px; background: linear-gradient(90deg, #4caf50, #66bb6a); animation: progressBar 5s linear;"></div>
  </div>
  
  <style>
    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    @keyframes progressBar {
      from {
        width: 100%;
      }
      to {
        width: 0%;
      }
    }
    .popup-success {
      border-color: #4caf50;
    }
    .popup-error {
      border-color: #f44336;
    }
  </style>
</section>