---
phase: 24-shipment-presets-ui
plan: 01
type: execute
wave: 1
depends_on: ["23-01"]
files_modified:
  - resources/views/shipments/prepare.php
  - resources/scss/modules/_shipment-presets.scss
  - resources/scss/main.scss
autonomous: false
---

<objective>
## Goal
Dodać sekcję presetów przesyłek nad formularzem przygotowania przesyłki: kolorowe przyciski, popup tworzenia presetu (nazwa + kolor), JS autofill formularza po kliknięciu.

## Purpose
Użytkownik chce jednym kliknięciem wypełnić formularz przesyłki zapisanymi parametrami — bez ręcznego wybierania przewoźnika, usługi, wymiarów za każdym razem.

## Output
- Sekcja presetów z kolorowymi przyciskami nad formularzem
- Popup do tworzenia presetu (nazwa + kolor) z bieżących wartości formularza
- JS: autofill formularza po kliknięciu przycisku presetu
- SCSS style dla presetów
</objective>

<context>
## Project Context
@.paul/PROJECT.md
@.paul/ROADMAP.md
@.paul/STATE.md

## Prior Work
@.paul/phases/23-shipment-presets-backend/23-01-SUMMARY.md

## Source Files
@resources/views/shipments/prepare.php
@src/Modules/Shipments/ShipmentPresetController.php
@routes/web.php
</context>

<skills>
No specialized flows required for this plan (sonar-scanner required post-APPLY).
</skills>

<acceptance_criteria>

## AC-1: Przyciski presetów widoczne nad formularzem
```gherkin
Given użytkownik otwiera stronę przygotowania przesyłki
When w bazie istnieją presety
Then nad formularzem wyświetlają się kolorowe przyciski z nazwami presetów
And wyświetla się przycisk "Dodaj przycisk dostawy"
```

## AC-2: Kliknięcie presetu wypełnia formularz
```gherkin
Given preset ma zapisane: carrier=inpost, package_type=PACKAGE, weight=2kg, wymiary 30x25x10
When użytkownik klika przycisk tego presetu
Then formularz automatycznie wypełnia się tymi wartościami
And odpowiedni panel przewoźnika staje się widoczny
And usługa dostawy zostaje wybrana
```

## AC-3: Przycisk "Dodaj przycisk dostawy" tworzy preset z bieżących wartości
```gherkin
Given użytkownik wypełnił formularz (wybrał przewoźnika, usługę, wymiary itp.)
When klika "Dodaj przycisk dostawy"
Then pojawia się popup z polem nazwy i wyborem koloru
When wpisuje nazwę i klika Zapisz
Then preset zostaje zapisany przez API i przycisk pojawia się w sekcji
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: SCSS style dla presetów</name>
  <files>resources/scss/modules/_shipment-presets.scss, resources/scss/main.scss</files>
  <action>
    1. Utworzyć `resources/scss/modules/_shipment-presets.scss`:
       - `.shipment-presets` — kontener sekcji (flex, wrap, gap: 8px, margin-bottom: 16px)
       - `.shipment-presets__btn` — przycisk presetu:
         - Inline-flex, border-radius: 6px, padding: 6px 14px
         - Biały tekst, tło z custom property `--preset-color`
         - Hover: opacity 0.85, cursor pointer
         - Font-size: 13px, font-weight: 500
       - `.shipment-presets__add` — przycisk dodawania:
         - Border: 1px dashed #ccc, background transparent
         - Color: #666, hover: border-color #999
       - `.preset-modal` — overlay popup:
         - Position fixed, inset 0, background rgba(0,0,0,0.4), z-index 1000
         - Display flex, align-items center, justify-content center
       - `.preset-modal__content` — zawartość popup:
         - Background white, border-radius 8px, padding 24px, min-width 360px, max-width 420px
       - `.preset-modal__colors` — grid kolorów:
         - Display flex, gap 8px, flex-wrap wrap
       - `.preset-modal__color-swatch` — próbka koloru:
         - Width 28px, height 28px, border-radius 50%, cursor pointer
         - Border: 2px solid transparent
         - `&.is-selected` — border-color: #333

    2. Dodać `@import 'modules/shipment-presets';` w `resources/scss/main.scss`
  </action>
  <verify>Sprawdzić że plik SCSS istnieje i import dodany do main.scss</verify>
  <done>AC-1 partially: style gotowe</done>
</task>

<task type="auto">
  <name>Task 2: HTML sekcja presetów + popup + JavaScript</name>
  <files>resources/views/shipments/prepare.php</files>
  <action>
    1. **Sekcja presetów** — wstawić PRZED `<form>` (po zamknięciu sekcji flash messages, linia ~63):

       ```html
       <section class="shipment-presets" id="shipment-presets">
         <!-- Buttons rendered by JS -->
         <button type="button" class="shipment-presets__add" id="preset-add-btn">+ Dodaj przycisk dostawy</button>
       </section>
       ```

    2. **Popup modal** — wstawić na końcu pliku (przed zamykającym `</script>` lub po ostatnim `</section>`):

       ```html
       <div class="preset-modal" id="preset-modal" style="display:none">
         <div class="preset-modal__content">
           <h3>Nowy przycisk dostawy</h3>
           <label class="form-field mt-12">
             <span class="field-label">Nazwa</span>
             <input class="form-control" type="text" id="preset-name-input" maxlength="100" placeholder="np. InPost Paczkomat Standard">
           </label>
           <div class="form-field mt-12">
             <span class="field-label">Kolor</span>
             <div class="preset-modal__colors" id="preset-color-picker">
               <!-- 8 kolorów do wyboru -->
             </div>
           </div>
           <div class="form-actions mt-16">
             <button type="button" class="btn btn--primary" id="preset-save-btn">Zapisz</button>
             <button type="button" class="btn btn--secondary" id="preset-cancel-btn">Anuluj</button>
           </div>
         </div>
       </div>
       ```

    3. **JavaScript** — dodać w istniejącym bloku `<script>` na końcu prepare.php:

       Logika JS (dodać jako IIFE):

       a) **Konfiguracja kolorów:**
          ```javascript
          const PRESET_COLORS = [
            '#3b82f6', '#ef4444', '#10b981', '#f59e0b',
            '#8b5cf6', '#ec4899', '#06b6d4', '#6b7280'
          ];
          ```

       b) **Ładowanie presetów:** fetch GET /api/shipment-presets → renderowanie przycisków
          - Dla każdego presetu: `<button class="shipment-presets__btn" style="--preset-color: {color}; background: {color}" data-preset-id="{id}">{name}</button>`
          - Wstawić PRZED przyciskiem "Dodaj"

       c) **Kliknięcie presetu → autofill:**
          - Ustawić select `#shipment-carrier-select` na preset.carrier i wystrzelić event 'change'
          - Po 100ms (żeby panel się pokazał):
            - Ustawić ukryte pola: delivery_method_id, credentials_id, carrier_id, provider_code
            - Ustawić package_type, length_cm, width_cm, height_cm, weight_kg
            - Ustawić sender_point_id, label_format
            - Dla odpowiedniego panelu przewoźnika:
              - Allegro: znaleźć opcję w searchable dropdown po data-value === delivery_method_id, kliknąć ją
              - InPost: ustawić select[name="inpost_service"] na delivery_method_id
              - Apaczka: ustawić select[name="apaczka_service"] na delivery_method_id

       d) **Przycisk "Dodaj" → popup:**
          - Pokazać modal
          - Wygenerować swatche kolorów (PRESET_COLORS)
          - Zaznaczenie koloru → is-selected
          - Input nazwy focus

       e) **Zapisanie presetu:**
          - Zebrać bieżące wartości formularza:
            carrier (z #shipment-carrier-select), provider_code, delivery_method_id, credentials_id, carrier_id,
            package_type, length_cm, width_cm, height_cm, weight_kg, sender_point_id, label_format
          - POST /api/shipment-presets z name, color i zebranymi danymi (JSON, Content-Type: application/json)
          - Po sukcesie: zamknąć modal, przeładować listę presetów

       f) **Anuluj:** zamknąć modal, wyczyścić input

    Ważne:
    - Nie modyfikować istniejącego JS (carrier selection, status polling itp.)
    - fetch() z credentials: 'same-origin' (sesja PHP)
    - Autofill musi obsłużyć 3 różne panele przewoźników (allegro searchable dropdown, inpost select, apaczka select)
  </action>
  <verify>php -l resources/views/shipments/prepare.php — brak błędów składni PHP</verify>
  <done>AC-1, AC-2, AC-3 satisfied</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Sekcja presetów przesyłek nad formularzem: kolorowe przyciski, popup tworzenia, autofill formularza</what-built>
  <how-to-verify>
    1. Uruchomić migrację: wykonaj SQL z database/migrations/20260322_000059_create_shipment_presets_table.sql na bazie
    2. Zbudować SCSS: npm run build (lub odpowiedni skrypt)
    3. Odwiedź: /orders/{dowolne-id}/shipment/prepare
    4. Powinien być widoczny przycisk "+ Dodaj przycisk dostawy"
    5. Wypełnij formularz: wybierz przewoźnika, usługę, wymiary
    6. Kliknij "Dodaj przycisk dostawy" — popup z nazwą i kolorem
    7. Wpisz nazwę, wybierz kolor, kliknij Zapisz
    8. Przycisk powinien się pojawić w sekcji
    9. Odśwież stronę — przycisk nadal widoczny
    10. Kliknij przycisk — formularz powinien się wypełnić zapisanymi wartościami
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- src/Modules/Shipments/ShipmentController.php (nie modyfikować kontrolera)
- src/Modules/Shipments/ShipmentPresetController.php (gotowy z fazy 23)
- src/Modules/Shipments/ShipmentPresetRepository.php (gotowy z fazy 23)
- routes/web.php (routing gotowy z fazy 23)
- Istniejący JS w prepare.php (carrier selection, status polling, print)

## SCOPE LIMITS
- Tylko tworzenie presetów i autofill — edycja/usuwanie w fazie 25
- Brak auto-submit formularza po kliknięciu presetu (na razie)
- Brak drag & drop sortowania (faza 25)

</boundaries>

<verification>
Before declaring plan complete:
- [ ] Sekcja presetów widoczna nad formularzem
- [ ] Przyciski ładują się z API
- [ ] Popup tworzenia działa (nazwa + kolor)
- [ ] Autofill wypełnia formularz po kliknięciu presetu
- [ ] php -l na prepare.php — OK
- [ ] SCSS zbudowany
- [ ] Human verification checkpoint passed
</verification>

<success_criteria>
- Kolorowe przyciski presetów widoczne nad formularzem
- Kliknięcie presetu wypełnia formularz
- Popup tworzenia presetu z nazwą i kolorem działa
- Brak regresji w istniejącej funkcjonalności przesyłek
</success_criteria>

<output>
After completion, create `.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md`
</output>