@extends('layouts.app')

@section('content')
@php
    $isEdit = isset($mode) && $mode === 'edit';
@endphp
<div class="container py-4"
     x-data="paymentsForm(
        @js(old('platnosci', $prefillPay     ?: [ (object)[] ])),
        @js(old('rozliczenia', $prefillSettle ?: [ (object)[] ])),
        @js(old('zaliczki',   $prefillAdv    ?: [ (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">
                {{ $isEdit ? 'Edycja pro formy — Krok 4/5: Płatności, rozliczenia, zaliczki'
                           : 'Nowa pro forma — Krok 4/5: Płatności, rozliczenia, zaliczki' }}
            </h2>
            <p class="text-secondary small mb-0">
                Pro forma #{{ $faktura->id_faktura }} · {{ $faktura->p_2_numer }} · {{ $faktura->p_1_data_wystawienia }}
            </p>
        </div>
        <a href="{{ $isEdit ? route('proforma.edit.lines',  $faktura->id_faktura)
                            : route('proforma.create.lines',$faktura->id_faktura) }}"
           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="{{ $isEdit ? route('proforma.update.payments', $faktura->id_faktura)
                             : route('proforma.store.payments',  $faktura->id_faktura) }}">
        @csrf
        @if($isEdit) @method('PATCH') @endif

        {{-- === 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 (<code>/Fa/Platnosc/FormaPlatnosci</code>) 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 class="form-text"><code>platnosc_inna</code></div>
                        </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 class="form-text"><code>/Fa/Platnosc/FormaPlatnosci</code></div>
                        </div>

                        <div class="col-md-7">
                            <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, nr rachunku itd.">
                        </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">Częściowa?</label>
                            <select class="form-select form-select-sm" :name="`platnosci[${i}][is_czesciowa]`" x-model="pl.is_czesciowa">
                                <option value="">—</option>
                                <option value="1">Tak</option>
                            </select>
                            <div class="form-text">Jeśli „Tak” → kwota wymagana.</div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small">Zapłacono?</label>
                            <select class="form-select form-select-sm" :name="`platnosci[${i}][zaplacono]`" x-model="pl.zaplacono">
                                <option value="">—</option>
                                <option value="1">Tak</option>
                                <option value="0">Nie</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Data zapłaty</label>
                            <input type="date" class="form-control form-control-sm" :name="`platnosci[${i}][data_zaplaty]`" x-model="pl.data_zaplaty">
                        </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 class="form-text"><code>/TerminPlatnosci/Termin</code></div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small">Termin (dni)</label>
                            <input type="number" class="form-control form-control-sm" :name="`platnosci[${i}][termin_dni]`" x-model="pl.termin_dni" placeholder="np. 14">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Zdarzenie pocz.</label>
                            <select class="form-select form-select-sm" :name="`platnosci[${i}][zdarzenie_pocz]`" x-model="pl.zdarzenie_pocz">
                                <option value="">—</option>
                                <option value="1">1 — Wystawienie</option>
                                <option value="2">2 — Dostawa</option>
                                <option value="3">3 — Otrzymanie zaliczki</option>
                            </select>
                        </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">
                            <details>
                                <summary class="small text-body fw-semibold mb-2">Zaawansowane dane płatności / rachunku i faktora</summary>
                                <div class="row g-3">
                                    <div class="col-md-2">
                                        <label class="form-label small">Nasz rachunek?</label>
                                        <select class="form-select form-select-sm" :name="`platnosci[${i}][rachunek_wlasny]`" x-model="pl.rachunek_wlasny">
                                            <option value="">—</option><option value="1">Tak</option><option value="0">Nie</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small">IBAN</label>
                                        <input class="form-control form-control-sm" :name="`platnosci[${i}][iban]`" x-model="pl.iban">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small">Nazwa banku</label>
                                        <input class="form-control form-control-sm" :name="`platnosci[${i}][nazwa_banku]`" x-model="pl.nazwa_banku">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small">Opis rachunku</label>
                                        <input class="form-control form-control-sm" :name="`platnosci[${i}][opis_rachunku]`" x-model="pl.opis_rachunku">
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label small">Faktor?</label>
                                        <select class="form-select form-select-sm" :name="`platnosci[${i}][faktor]`" x-model="pl.faktor">
                                            <option value="">—</option><option value="1">Tak</option><option value="0">Nie</option>
                                        </select>
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label small">Rachunek faktora</label>
                                        <input class="form-control form-control-sm" :name="`platnosci[${i}][rachunek_faktora]`" x-model="pl.rachunek_faktora">
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label small">Nazwa faktora</label>
                                        <input class="form-control form-control-sm" :name="`platnosci[${i}][nazwa_faktora]`" x-model="pl.nazwa_faktora">
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label small">Skonto %</label>
                                        <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm" :name="`platnosci[${i}][skonto_percent]`" x-model="pl.skonto_percent">
                                    </div>
                                    <div class="col-md-9">
                                        <label class="form-label small">Warunki skonta</label>
                                        <input class="form-control form-control-sm" :name="`platnosci[${i}][skonto_warunki]`" x-model="pl.skonto_warunki">
                                    </div>
                                </div>
                            </details>
                        </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">Odniesienia do dokumentów (KSeF/numery) i kwoty rozliczone.</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">Ref. KSeF</label>
                            <input class="form-control form-control-sm" :name="`rozliczenia[${j}][ref_ksef]`" x-model="r.ref_ksef" placeholder="np. KSeF-...">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small">Ref. numer</label>
                            <input class="form-control form-control-sm" :name="`rozliczenia[${j}][ref_numer]`" x-model="r.ref_numer" placeholder="np. FV/12/2025">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small">Ref. data</label>
                            <input type="date" class="form-control form-control-sm" :name="`rozliczenia[${j}][ref_data]`" x-model="r.ref_data">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small">Kwota rozliczona</label>
                            <input type="number" step="0.01" min="0" class="form-control form-control-sm" :name="`rozliczenia[${j}][kwota_rozliczona]`" x-model="r.kwota_rozliczona">
                        </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">Kwoty otrzymanych zaliczek i data otrzymania.</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-7">
                            <label class="form-label small">Opis</label>
                            <input class="form-control form-control-sm" :name="`zaliczki[${k}][opis]`" x-model="z.opis" placeholder="np. Zaliczka do FV/12/2025">
                        </div>
                        <div class="col-md-3">
                            <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">Data otrzymania</label>
                            <input type="date" class="form-control form-control-sm" :name="`zaliczki[${k}][data_otrzymania]`" x-model="z.data_otrzymania">
                        </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="{{ $isEdit ? route('proforma.edit.lines',  $faktura->id_faktura)
                                : route('proforma.create.lines',$faktura->id_faktura) }}"
               class="btn btn-outline-secondary">
                Wstecz
            </a>
            <button class="btn btn-primary">
                Zapisz i przejdź do podsumowania
            </button>
        </div>
    </form>
</div>

<script>
function paymentsForm(prefillPay, prefillSettle, prefillAdv){
    const emptyPay = {
        platnosc_inna:'', forma:'', opis_platnosci:'',
        kwota:'', is_czesciowa:'', zaplacono:'', data_zaplaty:'',
        termin:'', termin_dni:'', zdarzenie_pocz:'',
        link_do_platnosci:'', ipksef:'',
        rachunek_wlasny:'', iban:'', opis_rachunku:'', nazwa_banku:'',
        faktor:'', rachunek_faktora:'', nazwa_faktora:'',
        skonto_percent:'', skonto_warunki:''
    };
    const emptySettle = { ref_ksef:'', ref_numer:'', ref_data:'', kwota_rozliczona:'' };
    const emptyAdv    = { opis:'', kwota:'', data_otrzymania:'' };

    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