---
phase: 07-hero-search-form
plan: 01
subsystem: ui
tags: [elementor, widget, vanilla-js, css]

requires:
  - phase: 01-reservation-form-plugin
    provides: plugin bootstrap, API proxy, Elementor widget infrastructure
  - phase: 02-form-ui-step1
    provides: modal form UI, segments/branches data loading
provides:
  - Carei Search Form Elementor widget (mini formularz hero)
  - Pre-fill modal z danymi z mini formularza
affects: []

tech-stack:
  added: []
  patterns: [search-form-prefill-via-setTimeout-polling]

key-files:
  created:
    - wp-content/plugins/carei-reservation/includes/class-search-widget.php
  modified:
    - wp-content/plugins/carei-reservation/carei-reservation.php
    - wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
    - wp-content/plugins/carei-reservation/assets/css/carei-reservation.css

key-decisions:
  - "Calendar picker: opacity:0 stretched over input instead of display:none — preserves native click-to-open"
  - "Search form loads API data independently — not dependent on modal being present"

patterns-established:
  - "Mini form prefill: collect values → openModal() → setTimeout prefill → poll for async-loaded options"

duration: ~30min
started: 2026-04-01T13:00:00Z
completed: 2026-04-01T13:45:00Z
---

# Phase 7 Plan 01: Hero Search Form Summary

**Kompaktowy widget Elementor "Carei Search Form" w hero z pre-fill do istniejącego modala rezerwacji**

## Performance

| Metric | Value |
|--------|-------|
| Duration | ~30min |
| Tasks | 4 completed (3 auto + 1 checkpoint) |
| Files modified | 4 (1 created, 3 modified) |

## Acceptance Criteria Results

| Criterion | Status | Notes |
|-----------|--------|-------|
| AC-1: Widget renderuje mini formularz | Pass | Segment, daty, lokalizacja, checkbox, przycisk |
| AC-2: Selecty ładują dane z API | Pass | Segmenty i lokalizacje filtrowane po segmencie |
| AC-3: Przycisk otwiera modal z pre-fill | Pass | Segment, daty, lokalizacja przenoszone do modala |
| AC-4: Design zgodny z Figmą | Pass | Tło #EDEDF3, pola białe, przycisk czerwony, tytuł fioletowy |

## Accomplishments

- Nowy widget Elementor "Carei Search Form" do osadzenia w hero
- Pola mini formularza automatycznie przenoszone do modala rezerwacji po kliknięciu przycisku
- Niezależne ładowanie danych API (nie wymaga wcześniejszego otwarcia modala)

## Files Created/Modified

| File | Change | Purpose |
|------|--------|---------|
| `includes/class-search-widget.php` | Created | Widget Elementor z HTML mini formularza |
| `carei-reservation.php` | Modified | Rejestracja nowego widgetu |
| `assets/js/carei-reservation.js` | Modified | initSearchForm() — ładowanie danych, prefill, otwarcie modala |
| `assets/css/carei-reservation.css` | Modified | Style .carei-search-form (tło, pola, przycisk, responsive) |

## Decisions Made

| Decision | Rationale | Impact |
|----------|-----------|--------|
| Osobne ładowanie API w search form | Niezależność od modala — dane dostępne od razu po załadowaniu strony | Dwa requesty API przy page load (zamiast lazy) |
| Polling na pickup options po prefill | Lokalizacje ładują się async po zmianie segmentu — nie ma eventa | setInterval z max 30 prób (3s timeout) |

## Deviations from Plan

### Summary

| Type | Count | Impact |
|------|-------|--------|
| Auto-fixed | 1 | Niezbędny fix CSS |

**Total impact:** Fix CSS kalendarza — konieczny dla UX

### Auto-fixed Issues

**1. CSS calendar picker indicator**
- **Found during:** Checkpoint (human-verify)
- **Issue:** `display:none` na ikonkach kalendarza blokowało otwarcie date picker
- **Fix:** Zmiana na `opacity:0` + stretch na cały input (wzorzec z głównego formularza)
- **Files:** carei-reservation.css
- **Verification:** Kliknięcie w pole daty otwiera picker

**2. CSS datetime placeholder selectable**
- **Found during:** Checkpoint (human-verify)
- **Issue:** Placeholder "--" w pustych polach dat był zaznaczalny
- **Fix:** Dodanie `user-select:none` + `color:transparent` na `::-webkit-datetime-edit`
- **Verification:** Placeholder niewidoczny i niezaznaczalny

## Next Phase Readiness

**Ready:**
- Mini formularz działa i jest osadzony w hero
- Modal rezerwacji przyjmuje pre-fill z zewnętrznego źródła

**Concerns:**
- Dwa niezależne requesty API (search form + modal) — mogą powodować podwójne obciążenie przy jednoczesnym ładowaniu

**Blockers:** None

---
*Phase: 07-hero-search-form, Plan: 01*
*Completed: 2026-04-01*