<div class="user-details-container">
  <div class="row">
    <div class="col-md-6">
      <app-card [title]="'USER_DETAILS.TITLE' | translate">
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
          
          <!-- Name & Surname -->
          <div class="row">
            <div class="col-md-6">
              <app-input 
                formControlName="name"
                label="USER_DETAILS.NAME" 
                placeholder="USER_DETAILS.NAME_PLACEHOLDER"
                [required]="true"
                [error]="form.get('name')?.invalid && form.get('name')?.touched ? ('COMMON.REQUIRED' | translate) : null">
              </app-input>
            </div>
            <div class="col-md-6">
              <app-input 
                formControlName="surname"
                label="USER_DETAILS.SURNAME" 
                placeholder="USER_DETAILS.SURNAME_PLACEHOLDER"
                [required]="true"
                [error]="form.get('surname')?.invalid && form.get('surname')?.touched ? ('COMMON.REQUIRED' | translate) : null">
              </app-input>
            </div>
          </div>

          <!-- Email & Phone -->
          <div class="row">
            <div class="col-md-6">
              <app-input 
                formControlName="email"
                label="USER_DETAILS.EMAIL" 
                type="email"
                placeholder="USER_DETAILS.EMAIL_PLACEHOLDER"
                [required]="true"
                [error]="form.get('email')?.invalid && form.get('email')?.touched ? ('COMMON.INVALID_EMAIL' | translate) : null">
              </app-input>
            </div>
            <div class="col-md-6">
              <app-input 
                formControlName="phone"
                label="USER_DETAILS.PHONE" 
                type="tel"
                placeholder="USER_DETAILS.PHONE_PLACEHOLDER"
                [required]="true"
                [error]="form.get('phone')?.invalid && form.get('phone')?.touched ? ('COMMON.REQUIRED' | translate) : null">
              </app-input>
            </div>
          </div>

          <!-- Address -->
          <app-input 
            formControlName="address"
            label="USER_DETAILS.ADDRESS" 
            placeholder="USER_DETAILS.ADDRESS_PLACEHOLDER"
            [required]="true"
            [error]="form.get('address')?.invalid && form.get('address')?.touched ? ('COMMON.REQUIRED' | translate) : null">
          </app-input>

          <!-- Zip & City -->
          <div class="row">
            <div class="col-md-4">
              <app-input 
                formControlName="zip"
                label="USER_DETAILS.ZIP" 
                placeholder="USER_DETAILS.ZIP_PLACEHOLDER"
                [required]="true"
                [error]="form.get('zip')?.invalid && form.get('zip')?.touched ? ('COMMON.REQUIRED' | translate) : null">
              </app-input>
            </div>
            <div class="col-md-8">
              <app-input 
                formControlName="city"
                label="USER_DETAILS.CITY" 
                placeholder="USER_DETAILS.CITY_PLACEHOLDER"
                [required]="true"
                [error]="form.get('city')?.invalid && form.get('city')?.touched ? ('COMMON.REQUIRED' | translate) : null">
              </app-input>
            </div>
          </div>

          <div class="actions">
            <app-button 
              type="button" 
              variant="outline" 
              (click)="onCancel()">
              {{ 'COMMON.BACK' | translate }}
            </app-button>
            <app-button 
              type="submit" 
              [disabled]="form.invalid || submitting()">
              {{ 'USER_DETAILS.SUBMIT' | translate }}
            </app-button>
          </div>

        </form>
      </app-card>
    </div>

    <!-- Order Summary Column -->
    <div class="col-md-6">
      <app-card [title]="'USER_DETAILS.SUMMARY_TITLE' | translate">
        
        <div class="summary-content" *ngIf="quote()">
          <div class="summary-item" *ngFor="let item of quote()!.items">
            <div class="item-info">
              <span class="item-name">{{ item.fileName }}</span>
              <span class="item-meta">{{ item.material }} - {{ item.color || 'Default' }}</span>
            </div>
            <div class="item-qty">x{{ item.quantity }}</div>
            <div class="item-price">{{ (item.unitPrice * item.quantity) | currency:'CHF' }}</div>
          </div>

          <hr>

          <div class="total-row">
            <span>{{ 'QUOTE.TOTAL' | translate }}</span>
            <span class="total-price">{{ quote()!.totalPrice | currency:'CHF' }}</span>
          </div>
        </div>

      </app-card>
    </div>
  </div>
</div>
