@extends('layouts.app')

@section('content')

<div class="container py-4"
     x-data="paymentsForm(
        @js(old('platnosci',   isset($platnosci)   ? $platnosci->map(fn($p)=> (object) [
            'platnosc_inna'   => ($p->forma ?? '') === 'INNA' ? '1' : '',
            'forma'           => '',                         // nie odtwarzamy 1..7 z tekstu
            'opis_platnosci'  => $p->opis_formy ?? '',
            'kwota'           => $p->kwota ?? '',
            'kod_waluty'      => $p->kod_waluty ?? ($korekta->kod_waluty ?? 'PLN'),
            'termin'          => $p->termin ?? '',
            'iban'            => $p->nr_rachunku ?? '',
            'zaplacono'       => '',
            'data_zaplaty'    => '',
            'is_czesciowa'    => '',
            'termin_dni'      => '',
            'zdarzenie_pocz'  => '',
            'link_do_platnosci'=> '',
            'ipksef'          => '',
            'rachunek_wlasny' => '',
            'opis_rachunku'   => '',
            'nazwa_banku'     => '',
            'faktor'          => '',
            'rachunek_faktora'=> '',
            'nazwa_faktora'   => '',
            'skonto_percent'  => '',
            'skonto_warunki'  => ''
        ])->values() : [ (object)[] ])),
        @js(old('rozliczenia', isset($rozliczenia) ? $rozliczenia->map(fn($r)=> (object) [
            // UI i backend ujednolicone: typ/opis/kwota/kod_waluty/data
            'typ'          => $r->typ ?? 'KOREKTA_PLATNOSCI',
            'opis'         => $r->opis ?? '',
            'kwota'        => $r->kwota ?? '',
            'kod_waluty'   => $r->kod_waluty ?? ($korekta->kod_waluty ?? 'PLN'),
            'data'         => $r->data ?? ''
        ])->values() : [ (object)[] ])),
        @js(old('zaliczki', isset($zaliczki) ? $zaliczki->map(fn($z)=> (object) [
            // UI i backend ujednolicone: numer_dokumentu/data/kwota/kod_waluty
            'numer_dokumentu' => $z->numer_dokumentu ?? '',
            'data'            => $z->data ?? '',
            'kwota'           => $z->kwota ?? '',
            'kod_waluty'      => $z->kod_waluty ?? ($korekta->kod_waluty ?? 'PLN')
        ])->values() : [ (object)[] ]))
     )">

```
{{-- Nagłówek --}}
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
    <div>
        <h2 class="h5 fw-semibold mb-1">Korekta — Krok 4/5: Płatności, rozliczenia, zaliczki</h2>
        <p class="text-secondary small mb-0">
            Korekta ID: {{ $korekta->id }}
        </p>
    </div>
    <a href="{{ route('korekty.create.lines', $korekta->id) }}" class="btn btn-outline-secondary">
        Wstecz do pozycji
    </a>
</div>

{{-- Pasek postępu --}}
<div class="mb-4">
    <div class="progress" style="height: 8px;">
        <div class="progress-bar bg-primary" style="width:80%;"></div>
    </div>
    <div class="d-flex justify-content-between small text-muted mt-2">
        <span>1. Nagłówek</span>
        <span>2. Podmioty</span>
        <span>3. Pozycje</span>
        <span class="fw-semibold text-primary">4. Płatności</span>
        <span>5. Podsumowanie</span>
    </div>
</div>

{{-- Komunikaty --}}
@if (session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif
@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0 ps-3">@foreach ($errors->all() as $e) <li>{{ $e }}</li> @endforeach</ul>
    </div>
@endif

<form method="POST" action="{{ route('korekty.store.payments', $korekta->id) }}">
    @csrf

    {{-- === PŁATNOŚCI === --}}
    <div class="card glass-card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom">
            <div>
                <h5 class="mb-0">Płatności</h5>
                <small class="text-muted">
                    Forma 1..7 lub „inna forma” z opisem. Link do płatności i IP KSeF podawaj łącznie.
                </small>
            </div>
            <button type="button" class="btn btn-success btn-sm" @click="addPay()">+ Dodaj płatność</button>
        </div>

        <template x-for="(pl,i) in pays" :key="i">
            <div class="card-body border-bottom">
                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label small">Inna forma?</label>
                        <select class="form-select form-select-sm" x-model="pl.platnosc_inna" :name="`platnosci[${i}][platnosc_inna]`">
                            <option value="">—</option>
                            <option value="1">Tak</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small">Forma (1..7)</label>
                        <select class="form-select form-select-sm"
                                :disabled="String(pl.platnosc_inna)==='1'"
                                :class="String(pl.platnosc_inna)==='1' ? 'disabled' : ''"
                                :name="`platnosci[${i}][forma]`" x-model="pl.forma">
                            <option value="">— wybierz —</option>
                            @foreach($formyPlatnosci as $k=>$v)
                                <option value="{{ $k }}">{{ $k }} — {{ $v }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small">Kwota</label>
                        <input type="number" step="0.01" min="0" class="form-control form-control-sm" :name="`platnosci[${i}][kwota]`" x-model="pl.kwota">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Waluta</label>
                        <input class="form-control form-control-sm text-uppercase" :name="`platnosci[${i}][kod_waluty]`" x-model="pl.kod_waluty" placeholder="np. PLN">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Termin (data)</label>
                        <input type="date" class="form-control form-control-sm" :name="`platnosci[${i}][termin]`" x-model="pl.termin">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small">Opis (gdy inna forma)</label>
                        <input class="form-control form-control-sm" :name="`platnosci[${i}][opis_platnosci]`" x-model="pl.opis_platnosci" placeholder="np. BLIK/PayU">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">Nr rachunku / IBAN</label>
                        <input class="form-control form-control-sm" :name="`platnosci[${i}][iban]`" x-model="pl.iban">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small">Link do płatności</label>
                        <input class="form-control form-control-sm" :name="`platnosci[${i}][link_do_platnosci]`" x-model="pl.link_do_platnosci" placeholder="https://...">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">IP KSeF (13 znaków)</label>
                        <input class="form-control form-control-sm" :name="`platnosci[${i}][ipksef]`" x-model="pl.ipksef" placeholder="np. 1234567890123">
                        <div class="form-text">Podawaj razem z linkiem (albo oba puste).</div>
                    </div>

                    <div class="col-12 text-end">
                        <button type="button" class="btn btn-link link-danger p-0" @click="removePay(i)">usuń</button>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- === ROZLICZENIA === --}}
    <div class="card glass-card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom">
            <div>
                <h5 class="mb-0">Rozliczenia</h5>
                <small class="text-muted">Opis, kwota, waluta i data zgodnie z tym, co przyjmie kontroler.</small>
            </div>
            <button type="button" class="btn btn-success btn-sm" @click="addSettle()">+ Dodaj rozliczenie</button>
        </div>

        <template x-for="(r,j) in settles" :key="j">
            <div class="card-body border-bottom">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label small">Opis</label>
                        <input class="form-control form-control-sm" :name="`rozliczenia[${j}][opis]`" x-model="r.opis" placeholder="np. FV/12/2025, KSeF-...">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Kwota</label>
                        <input type="number" step="0.01" min="0" class="form-control form-control-sm" :name="`rozliczenia[${j}][kwota]`" x-model="r.kwota">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Waluta</label>
                        <input class="form-control form-control-sm text-uppercase" :name="`rozliczenia[${j}][kod_waluty]`" x-model="r.kod_waluty" placeholder="np. PLN">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Data</label>
                        <input type="date" class="form-control form-control-sm" :name="`rozliczenia[${j}][data]`" x-model="r.data">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Typ</label>
                        <select class="form-select form-select-sm" :name="`rozliczenia[${j}][typ]`" x-model="r.typ">
                            <option value="KOREKTA_PLATNOSCI">KOREKTA_PLATNOSCI</option>
                            <option value="INNE">INNE</option>
                        </select>
                    </div>
                    <div class="col-12 text-end">
                        <button type="button" class="btn btn-link link-danger p-0" @click="removeSettle(j)">usuń</button>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- === ZALICZKI === --}}
    <div class="card glass-card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom">
            <div>
                <h5 class="mb-0">Zaliczki</h5>
                <small class="text-muted">Kwota, waluta i data otrzymania. (Pole numer dokumentu – opcjonalnie)</small>
            </div>
            <button type="button" class="btn btn-success btn-sm" @click="addAdv()">+ Dodaj zaliczkę</button>
        </div>

        <template x-for="(z,k) in advs" :key="k">
            <div class="card-body border-bottom">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label small">Numer dokumentu</label>
                        <input class="form-control form-control-sm" :name="`zaliczki[${k}][numer_dokumentu]`" x-model="z.numer_dokumentu" placeholder="np. ZAL/10/2025">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Kwota</label>
                        <input type="number" step="0.01" min="0" class="form-control form-control-sm" :name="`zaliczki[${k}][kwota]`" x-model="z.kwota">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Waluta</label>
                        <input class="form-control form-control-sm text-uppercase" :name="`zaliczki[${k}][kod_waluty]`" x-model="z.kod_waluty" placeholder="np. PLN">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Data otrzymania</label>
                        <input type="date" class="form-control form-control-sm" :name="`zaliczki[${k}][data]`" x-model="z.data">
                    </div>
                    <div class="col-12 text-end">
                        <button type="button" class="btn btn-link link-danger p-0" @click="removeAdv(k)">usuń</button>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- Przyciski nawigacji --}}
    <div class="d-flex justify-content-between">
        <a href="{{ route('korekty.create.lines', $korekta->id) }}" class="btn btn-outline-secondary">
            Wstecz
        </a>
        <button class="btn btn-primary">
            Zapisz i przejdź do dodatków
        </button>
    </div>
</form>
```

</div>

<script>
function paymentsForm(prefillPay, prefillSettle, prefillAdv){
    const emptyPay = {
        platnosc_inna:'', forma:'', opis_platnosci:'',
        kwota:'', kod_waluty:'', termin:'', iban:'',
        // pola dodatkowe tylko dla UI/kreatora (kontroler ich nie zapisuje do korekta_platnosci):
        is_czesciowa:'', zaplacono:'', data_zaplaty:'', termin_dni:'', zdarzenie_pocz:'',
        link_do_platnosci:'', ipksef:'',
        rachunek_wlasny:'', opis_rachunku:'', nazwa_banku:'', faktor:'', rachunek_faktora:'', nazwa_faktora:'',
        skonto_percent:'', skonto_warunki:''
    };
    const emptySettle = { typ:'KOREKTA_PLATNOSCI', opis:'', kwota:'', kod_waluty:'', data:'' };
    const emptyAdv    = { numer_dokumentu:'', data:'', kwota:'', kod_waluty:'' };

    const pays    = Array.isArray(prefillPay)    && prefillPay.length    ? prefillPay    : [ {...emptyPay} ];
    const settles = Array.isArray(prefillSettle) && prefillSettle.length ? prefillSettle : [ {...emptySettle} ];
    const advs    = Array.isArray(prefillAdv)    && prefillAdv.length    ? prefillAdv    : [ {...emptyAdv} ];

    return {
        pays, settles, advs,
        addPay(){ this.pays.push({...emptyPay}); },
        removePay(i){ this.pays.splice(i,1); if(this.pays.length===0) this.pays.push({...emptyPay}); },
        addSettle(){ this.settles.push({...emptySettle}); },
        removeSettle(i){ this.settles.splice(i,1); if(this.settles.length===0) this.settles.push({...emptySettle}); },
        addAdv(){ this.advs.push({...emptyAdv}); },
        removeAdv(i){ this.advs.splice(i,1); if(this.advs.length===0) this.advs.push({...emptyAdv}); },
    };
}
</script>

@endsection

@push('styles')

<style>
.glass-card{
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(20,20,40,.1);
  border-radius: 1rem;
}
@media (prefers-color-scheme: dark){
  .glass-card{ background: rgba(25,27,32,.45); border-color: rgba(255,255,255,.08); }
}
.progress{ border-radius: 999px; background-color: rgba(0,0,0,.06); }
.progress-bar{ border-radius: 999px; }
</style>

@endpush