---
phase: 61-payment-button-activation
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - resources/views/orders/show.php
  - resources/scss/app.scss
  - public/assets/css/app.css
autonomous: true
---

<objective>
## Goal
Aktywacja przycisku "Platnosc" w headerze szczegółów zamówienia — kliknięcie przełącza na zakładkę płatności i automatycznie otwiera formularz dodawania płatności. Dodatkowo poprawa odstępu między inputami a buttonami w formularzu płatności.

## Purpose
Przycisk "Płatność" jest obecnie nieaktywny (btn--disabled) mimo że zakładka płatności i formularz już istnieją (Phase 56). Aktywacja przycisku skraca ścieżkę użytkownika do dodania płatności.

## Output
- Przycisk "Platnosc" aktywny, przełącza na tab `payments` i otwiera formularz
- Formularz z wizualnym odstępem między inputami a przyciskami
</objective>

<context>
## Source Files
@resources/views/orders/show.php (linia 76: przycisk Platnosc, linia 128: tab payments, linia 559-638: panel + formularz)
@resources/scss/app.scss (linia 1648-1687: style payment-add-form)
</context>

<acceptance_criteria>

## AC-1: Przycisk Platnosc aktywny i funkcjonalny
```gherkin
Given użytkownik jest na stronie szczegółów zamówienia /orders/{id}
When klika przycisk "Platnosc" w headerze
Then widok przełącza się na zakładkę "Płatności"
And formularz dodawania płatności jest automatycznie widoczny (rozwinięty)
```

## AC-2: Odstęp między inputami a buttonami formularza
```gherkin
Given formularz dodawania płatności jest widoczny
When użytkownik widzi formularz
Then między rzędem inputów a rzędem przycisków jest wyraźny odstęp (margin-top ≥ 12px)
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Aktywacja przycisku Platnosc i podpięcie JS</name>
  <files>resources/views/orders/show.php</files>
  <action>
    1. Linia 76: zamień `<button type="button" class="btn btn--secondary btn--disabled">Platnosc</button>` na `<button type="button" class="btn btn--secondary" id="btn-header-payment">Platnosc</button>` — usunięcie btn--disabled i dodanie ID.
    2. W bloku `<script>` na dole pliku dodaj handler:
       - Nasłuchuje click na `#btn-header-payment`
       - Wywołuje `setActiveTab('payments')` aby przełączyć na zakładkę płatności
       - Ustawia `localStorage` (storageKey) na `'payments'`
       - Pokazuje formularz: `document.getElementById('payment-add-form').style.display = ''`
  </action>
  <verify>Otworzyć /orders/130, kliknąć przycisk "Platnosc" — widok przeskakuje na tab Płatności, formularz jest widoczny</verify>
  <done>AC-1 satisfied: przycisk aktywny, przełącza tab i otwiera formularz</done>
</task>

<task type="auto">
  <name>Task 2: Odstęp w formularzu płatności (SCSS)</name>
  <files>resources/scss/app.scss, public/assets/css/app.css</files>
  <action>
    1. W SCSS (app.scss) do selektora `.payment-add-form__actions` dodaj `margin-top: 12px;` (aktualnie ma tylko gap: 8px bez marginesu górnego, klasa `mt-8` w HTML daje 8px co jest za mało).
    2. W HTML (show.php linia 634) zamień `mt-8` na `mt-12` lub zostaw HTML bez zmian i użyj samego SCSS.
    3. Zbuduj CSS: `npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map`
  </action>
  <verify>Otworzyć formularz płatności — wyraźny odstęp między inputami a przyciskami Zapisz/Anuluj</verify>
  <done>AC-2 satisfied: wizualny odstęp ≥ 12px między inputami a buttonami</done>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- Logika backend płatności (PaymentController, PaymentRepository)
- Pozostałe przyciski w headerze (Strefa klienta, Drukuj, Pakuj, Edytuj — zostają disabled)
- Tab switching logic (setActiveTab) — reuse istniejącej funkcji

## SCOPE LIMITS
- Tylko aktywacja przycisku i poprawa CSS
- Brak zmian w logice formularza zapisywania płatności
- Brak zmian w API/endpointach

</boundaries>

<verification>
Before declaring plan complete:
- [ ] Przycisk "Platnosc" nie ma klasy btn--disabled
- [ ] Kliknięcie przełącza na tab payments
- [ ] Formularz dodawania płatności jest automatycznie widoczny po kliknięciu
- [ ] Odstęp między inputami a buttonami w formularzu ≥ 12px
- [ ] Build SCSS przechodzi bez błędów
- [ ] Pozostałe przyciski disabled bez zmian
</verification>

<success_criteria>
- Przycisk Platnosc aktywny i funkcjonalny
- Formularz otwarty automatycznie po kliknięciu
- Wizualny odstęp w formularzu poprawiony
- Brak regresji w pozostałych zakładkach i przyciskach
</success_criteria>

<output>
After completion, create `.paul/phases/61-payment-button-activation/61-01-SUMMARY.md`
</output>