@extends('layouts.app')

@section('content')
@php
    $isEdit   = isset($mode) && $mode === 'edit';
    $editable = ($faktura->can_be_editable ?? true) && !($faktura->usunieto ?? false);

    $action = $isEdit
        ? route('faktury.update.payments', $faktura->id_faktura)
        : route('faktury.store.payments',  $faktura->id_faktura);

    $backRoute = $isEdit
        ? route('faktury.edit.lines',  $faktura->id_faktura)
        : route('faktury.create.lines', $faktura->id_faktura);

    $submitLabel = $isEdit ? 'Zapisz zmiany i przejdź do podsumowania' : 'Zapisz i przejdź do podsumowania';
@endphp

<div class="container py-4"
     x-data="paymentsForm(
        @js(old('platnosci',   $prefillPay     ?: [ (object)[] ])),
        @js(old('rozliczenia', $prefillSettle  ?: [ (object)[] ])),
        @js(old('zaliczki',    $prefillAdv     ?: [ (object)[] ])),
        {{ $editable ? 'true' : 'false' }}
     )">

    {{-- 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 faktury — Krok 4/5: Płatności, rozliczenia, zaliczki'
                           : 'Nowa faktura — Krok 4/5: Płatności, rozliczenia, zaliczki' }}
            </h2>
            <p class="text-secondary small mb-0">
                Faktura #{{ $faktura->id_faktura }} · {{ $faktura->p_2_numer }} · {{ $faktura->p_1_data_wystawienia }}
            </p>
        </div>
        <a href="{{ $backRoute }}" 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 (!$editable)
        <div class="alert alert-info">
            Ta faktura jest {{ $faktura->usunieto ? 'oznaczona jako usunięta' : 'zatwierdzona' }} — edycja zablokowana. Pola są tylko do podglądu.
        </div>
    @endif
    @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="{{ $action }}">
        @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>
                <template x-if="editable">
                    <button type="button" class="btn btn-success btn-sm" @click="addPay()">+ Dodaj płatność</button>
                </template>
            </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]`"
                                    :disabled="!editable">
                                <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="!editable || 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"
                                   :disabled="!editable"
                                   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" :disabled="!editable">
                        </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" :disabled="!editable">
                                <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" :disabled="!editable">
                                <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" :disabled="!editable">
                        </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" :disabled="!editable">
                            <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" :disabled="!editable" 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" :disabled="!editable">
                                <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"
                                   :disabled="!editable" 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" :disabled="!editable" 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" :disabled="!editable">
                                            <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" :disabled="!editable">
                                    </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" :disabled="!editable">
                                    </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" :disabled="!editable">
                                    </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" :disabled="!editable">
                                            <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" :disabled="!editable">
                                    </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" :disabled="!editable">
                                    </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" :disabled="!editable">
                                    </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" :disabled="!editable">
                                    </div>
                                </div>
                            </details>
                        </div>

                        <div class="col-12 text-end" x-show="editable">
                            <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>
                <template x-if="editable">
                    <button type="button" class="btn btn-success btn-sm" @click="addSettle()">+ Dodaj rozliczenie</button>
                </template>
            </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" :disabled="!editable" 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" :disabled="!editable" 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" :disabled="!editable">
                        </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" :disabled="!editable">
                        </div>
                        <div class="col-12 text-end" x-show="editable">
                            <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>
                <template x-if="editable">
                    <button type="button" class="btn btn-success btn-sm" @click="addAdv()">+ Dodaj zaliczkę</button>
                </template>
            </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" :disabled="!editable" 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" :disabled="!editable">
                        </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" :disabled="!editable">
                        </div>
                        <div class="col-12 text-end" x-show="editable">
                            <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="{{ $backRoute }}" class="btn btn-outline-secondary">
                Wstecz
            </a>

            @if($editable)
                <button class="btn btn-primary">
                    {{ $submitLabel }}
                </button>
            @else
                <a href="{{ route('faktury.summary', $faktura->id_faktura) }}" class="btn btn-primary">
                    Podgląd podsumowania
                </a>
            @endif
        </div>
    </form>
</div>

<script>
function paymentsForm(prefillPay, prefillSettle, prefillAdv, editable=true){
    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 ensureArr = (a, fallback) => Array.isArray(a) && a.length ? a : [ {...fallback} ];

    const pays    = ensureArr(prefillPay,    emptyPay);
    const settles = ensureArr(prefillSettle, emptySettle);
    const advs    = ensureArr(prefillAdv,    emptyAdv);

    return {
        pays, settles, advs, editable: !!editable,

        addPay(){ if(!this.editable) return; this.pays.push({...emptyPay}); },
        removePay(i){ if(!this.editable) return; this.pays.splice(i,1); if(this.pays.length===0) this.pays.push({...emptyPay}); },

        addSettle(){ if(!this.editable) return; this.settles.push({...emptySettle}); },
        removeSettle(i){ if(!this.editable) return; this.settles.splice(i,1); if(this.settles.length===0) this.settles.push({...emptySettle}); },

        addAdv(){ if(!this.editable) return; this.advs.push({...emptyAdv}); },
        removeAdv(i){ if(!this.editable) return; 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