{/* Header */}

{t('Create Ticket Type')}

{event.name}

{/* Form */}

{/* Basic Information */}

{t('Basic Information')}

Name * setData('name', e.target.value)} className={errors.name ? 'border-red-500' : ''} placeholder={t('e.g., Early Bird Special')} /> {errors.name &&

{errors.name}

}

{t('Description')}

setData('description', e.target.value)}
                  className={errors.description ? 'border-red-500' : ''}
                  rows={3}
                  placeholder={t('Optional description of this ticket type')}
                />
                {errors.description && <p className="text-sm text-red-600 mt-1">{errors.description}</p>}
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="category">Category *</Label>
                  <Select value={data.category} onValueChange={(value) => setData('category', value)}>
                    <SelectTrigger className={errors.category ? 'border-red-500' : ''}>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="general">{t('General')}</SelectItem>
                      <SelectItem value="early_bird">{t('Early Bird')}</SelectItem>
                      <SelectItem value="adult">{t('Adult')}</SelectItem>
                      <SelectItem value="child">{t('Child')}</SelectItem>
                      <SelectItem value="member">{t('Member')}</SelectItem>
                      <SelectItem value="nonmember">{t('Non-Member')}</SelectItem>
                      <SelectItem value="vip">{t('VIP')}</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.category && <p className="text-sm text-red-600 mt-1">{errors.category}</p>}
                </div>

<div>
                  <Label htmlFor="price">Price (USD) *</Label>
                  <Input
                    id="price"
                    type="number"
                    step="0.01"
                    min="0"
                    value={data.price}
                    onChange={(e) => setData('price', e.target.value)}
                    className={errors.price ? 'border-red-500' : ''}
                  />
                  {errors.price && <p className="text-sm text-red-600 mt-1">{errors.price}</p>}
                </div>
              </div>
            </div>

{/* Availability */}
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('Availability')}</h2>
              
              <div>
                <Label htmlFor="quantity_available">
                  {t('Quantity Available')}
                  <span className="text-sm text-gray-500 ms-2">(Leave empty for unlimited)</span>
                </Label>
                <Input
                  id="quantity_available"
                  type="number"
                  min="0"
                  value={data.quantity_available}
                  onChange={(e) => setData('quantity_available', e.target.value)}
                  className={errors.quantity_available ? 'border-red-500' : ''}
                  placeholder={t('Unlimited')}
                />
                {errors.quantity_available && <p className="text-sm text-red-600 mt-1">{errors.quantity_available}</p>}
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="sale_starts">{t('Sale Starts')}</Label>
                  <Input
                    id="sale_starts"
                    type="datetime-local"
                    value={data.sale_starts}
                    onChange={(e) => setData('sale_starts', e.target.value)}
                    className={errors.sale_starts ? 'border-red-500' : ''}
                  />
                  {errors.sale_starts && <p className="text-sm text-red-600 mt-1">{errors.sale_starts}</p>}
                </div>

<div>
                  <Label htmlFor="sale_ends">{t('Sale Ends')}</Label>
                  <Input
                    id="sale_ends"
                    type="datetime-local"
                    value={data.sale_ends}
                    onChange={(e) => setData('sale_ends', e.target.value)}
                    className={errors.sale_ends ? 'border-red-500' : ''}
                  />
                  {errors.sale_ends && <p className="text-sm text-red-600 mt-1">{errors.sale_ends}</p>}
                </div>
              </div>
            </div>

{/* Settings */}
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('Settings')}</h2>
              
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="active"
                  checked={data.active}
                  onCheckedChange={(checked) => setData('active', checked as boolean)}
                />
                <Label htmlFor="active">{t('Active (Tickets can be purchased)')}</Label>
              </div>

<div>
                <Label htmlFor="sort_order">
                  {t('Sort Order')}
                  <span className="text-sm text-gray-500 ms-2">(Lower numbers appear first)</span>
                </Label>
                <Input
                  id="sort_order"
                  type="number"
                  value={data.sort_order}
                  onChange={(e) => setData('sort_order', e.target.value)}
                  className={errors.sort_order ? 'border-red-500' : ''}
                />
                {errors.sort_order && <p className="text-sm text-red-600 mt-1">{errors.sort_order}</p>}
              </div>
            </div>

{/* Actions */}
            <div className="flex justify-end gap-2 pt-4 border-t">
              <Link href={`/admin/events/${event.id}/ticket-types`}>
                <Button type="button" variant="outline" disabled={processing}>
                  {t('Cancel')}
                </Button>
              </Link>
              <Button type="submit" disabled={processing}>
                <Save className="h-4 w-4 me-2" />
                {processing ? 'Creating...' : 'Create Ticket Type'}
              </Button>
            </div>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}