@extends('layouts.app')

@section('content')
<div class="container py-4">
    {{-- 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 5/5: Załączniki, kurs waluty, stopka</h2>
            <p class="text-secondary small mb-0">
                Korekta ID: {{ $korektaId }}
            </p>
        </div>
        <a href="{{ route('korekty.create.payments', $korektaId) }}" class="btn btn-outline-secondary">
            Wstecz
        </a>
    </div>

    {{-- Pasek postępu --}}
    <div class="mb-4">
        <div class="progress" style="height:8px;"><div class="progress-bar bg-primary" style="width:100%"></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>4. Płatności</span>
            <span class="fw-semibold text-primary">5. Załączniki/Kurs/Stopka</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.extras', $korektaId) }}">
        @csrf

        {{-- === ZAŁĄCZNIKI (metadane 1:1 jak w FA) === --}}
        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-0">Załączniki</h5>
                    <small class="text-muted d-block">
                        W korekcie przechowujemy <b>te same metadane</b> co w FA: <code>nazwa_pliku</code>, <code>mime_type</code>, <code>rozmiar_b</code>, <code>plik_ba</code> (opcjonalnie), <code>storage_url</code>.
                    </small>
                </div>
                <button type="button" id="addRow" class="btn btn-sm btn-outline-primary">Dodaj wiersz</button>
            </div>

            <div class="card-body">
                {{-- Lista istniejących załączników z możliwością usunięcia --}}
                @if($zalaczniki && count($zalaczniki))
                    <div class="border rounded mb-3">
                        <div class="px-3 py-2 border-bottom small text-muted">Istniejące załączniki</div>
                        <ul class="list-group list-group-flush">
                            @foreach($zalaczniki as $att)
                                @php
                                    $b = $att->rozmiar_b ?? 0;
                                    $kb = $b / 1024;
                                    $size = $kb >= 1024
                                        ? number_format($kb/1024, 2, ',', ' ').' MB'
                                        : number_format($kb, 1, ',', ' ').' KB';
                                @endphp
                                <li class="list-group-item d-flex align-items-center justify-content-between">
                                    <div class="small">
                                        <div class="fw-semibold d-flex align-items-center gap-2">
                                            {{ $att->nazwa_pliku ?? 'zalacznik' }}
                                            @if(!empty($att->storage_url))
                                                <a class="link-primary" href="{{ $att->storage_url }}" target="_blank" rel="noopener">
                                                    podgląd/pobierz
                                                </a>
                                            @endif
                                        </div>
                                        <div class="text-muted">
                                            {{ $att->mime_type ?? 'plik' }} · {{ $size }}
                                            @if($att->storage_url) · <code class="text-truncate d-inline-block" style="max-width:420px">{{ $att->storage_url }}</code> @endif
                                        </div>
                                    </div>
                                    <label class="small text-danger d-flex align-items-center gap-2 mb-0">
                                        <input type="checkbox" name="usun_zalacznik[]" value="{{ $att->id }}">
                                        Usuń
                                    </label>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                {{-- Nowe wiersze metadanych do dodania --}}
                <div class="table-responsive">
                    <table class="table align-middle mb-0" id="metaTable">
                        <thead class="table-light">
                            <tr>
                                <th class="small">Nazwa pliku</th>
                                <th class="small">MIME type</th>
                                <th class="small">Rozmiar (B)</th>
                                <th class="small">Storage URL</th>
                                <th class="small text-end">Akcje</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- jeżeli wraca old() po błędach --}}
                            @php $oldRows = old('zalaczniki', []); @endphp
                            @forelse($oldRows as $i => $row)
                                <tr data-idx="{{ $i }}">
                                    <td><input name="zalaczniki[{{ $i }}][nazwa_pliku]" class="form-control" value="{{ $row['nazwa_pliku'] ?? '' }}"></td>
                                    <td><input name="zalaczniki[{{ $i }}][mime_type]" class="form-control" value="{{ $row['mime_type'] ?? '' }}" placeholder="np. application/pdf"></td>
                                    <td><input name="zalaczniki[{{ $i }}][rozmiar_b]" class="form-control" value="{{ $row['rozmiar_b'] ?? '' }}" inputmode="numeric" placeholder="w bajtach"></td>
                                    <td><input name="zalaczniki[{{ $i }}][storage_url]" class="form-control" value="{{ $row['storage_url'] ?? '' }}" placeholder="pełny URL lub ścieżka storage"></td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-sm btn-outline-danger delRow">Usuń</button>
                                    </td>
                                </tr>
                            @empty
                                {{-- start bez wierszy; dodasz przyciskiem --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <small class="text-muted d-block mt-2">
                    Wypełnij co najmniej <b>nazwa_pliku</b> lub <b>storage_url</b>, aby dodać rekord metadanych.
                </small>
            </div>
        </div>

        {{-- === KURS WALUTY (opcjonalny) === --}}
        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">Kurs waluty (opcjonalnie)</h5>
                <small class="text-muted">Zapis nastąpi tylko, gdy wypełnisz <b>kod waluty</b>.</small>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label small">Kod waluty (ISO 4217)</label>
                        <input name="kurs[kod_waluty]"
                               value="{{ old('kurs.kod_waluty', $kurs->kod_waluty ?? '') }}"
                               class="form-control" placeholder="np. EUR">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Tabela</label>
                        <input name="kurs[tabela]"
                               value="{{ old('kurs.tabela', $kurs->tabela ?? '') }}"
                               class="form-control" placeholder="np. A/123">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Data kursu</label>
                        <input type="date" name="kurs[data_kursu]"
                               value="{{ old('kurs.data_kursu', $kurs->data_kursu ?? '') }}"
                               class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Kurs</label>
                        <input name="kurs[kurs]" class="form-control"
                               value="{{ old('kurs.kurs', $kurs->kurs ?? '') }}"
                               placeholder="np. 4.234500" inputmode="decimal">
                    </div>
                </div>
            </div>
        </div>

        {{-- === STOPKA === --}}
        <div class="card glass-card shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">Stopka (uwagi do korekty)</h5>
                <small class="text-muted">Np. opis przyczyny, dodatkowe informacje.</small>
            </div>
            <div class="card-body">
                <textarea name="stopka[uwagi]" rows="3" class="form-control"
                          placeholder="Treść stopki...">{{ old('stopka.uwagi', $stopka->uwagi ?? '') }}</textarea>
            </div>
        </div>

        {{-- Przyciski --}}
        <div class="d-flex justify-content-between">
            <a href="{{ route('korekty.create.payments', $korektaId) }}" class="btn btn-outline-secondary">
                Wstecz
            </a>
            <button class="btn btn-primary">
                Zakończ — zapisz i przejdź do podsumowania
            </button>
        </div>
    </form>
</div>
@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

@push('scripts')
<script>
(function(){
  const table = document.querySelector('#metaTable tbody');
  const addBtn = document.getElementById('addRow');

  function newIndex(){
    const rows = table.querySelectorAll('tr');
    return rows.length ? Math.max(...Array.from(rows).map((tr)=>parseInt(tr.dataset.idx||'-1'))) + 1 : 0;
  }

  addBtn?.addEventListener('click', () => {
    const i = newIndex();
    const tr = document.createElement('tr');
    tr.dataset.idx = String(i);
    tr.innerHTML = `
      <td><input name="zalaczniki[${i}][nazwa_pliku]" class="form-control"></td>
      <td><input name="zalaczniki[${i}][mime_type]" class="form-control" placeholder="np. application/pdf"></td>
      <td><input name="zalaczniki[${i}][rozmiar_b]" class="form-control" inputmode="numeric" placeholder="w bajtach"></td>
      <td><input name="zalaczniki[${i}][storage_url]" class="form-control" placeholder="pełny URL lub ścieżka w storage"></td>
      <td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger delRow">Usuń</button></td>`;
    table.appendChild(tr);
  });

  table?.addEventListener('click', (e) => {
    const btn = e.target.closest('.delRow');
    if (btn){
      const tr = btn.closest('tr');
      tr?.remove();
    }
  });
})();
</script>
@endpush