@extends('layouts.app')

@section('content')
<div class="top">
    <div>
        <div class="eyebrow">Financije</div>
        <h1>Statistika računa</h1>
    </div>
    <form method="get" class="year-filter">
        <label for="year">Godina</label>
        <select id="year" name="year" onchange="this.form.submit()">
            @foreach($availableYears as $availableYear)
                <option value="{{ $availableYear }}" @selected($availableYear === $year)>{{ $availableYear }}</option>
            @endforeach
        </select>
    </form>
</div>

<div class="stats-grid">
    <div class="stat-card"><span>Izdani računi</span><strong>{{ $totals['count'] }}</strong><small>računa u {{ $year }}.</small></div>
    <div class="stat-card"><span>Ukupno izdano</span><strong>{{ number_format($totals['issued'],2,',','.') }} €</strong><small>s PDV-om</small></div>
    <div class="stat-card paid"><span>Naplaćeno</span><strong>{{ number_format($totals['paid'],2,',','.') }} €</strong><small>{{ $totals['issued'] > 0 ? number_format($totals['paid'] / $totals['issued'] * 100,1,',','.') : '0,0' }}% izdanog</small></div>
    <div class="stat-card outstanding"><span>Za naplatu</span><strong>{{ number_format($totals['outstanding'],2,',','.') }} €</strong><small>otvorena potraživanja</small></div>
</div>

<div class="report-card">
    <div class="report-heading">
        <div><h2>Pregled po mjesecima</h2><p>Izdani računi bez nacrta i storniranih računa.</p></div>
        <div class="legend"><span class="issued-dot"></span>Izdano <span class="paid-dot"></span>Naplaćeno</div>
    </div>
    <div class="chart-list">
        @foreach($months as $month)
            <div class="month-row">
                <div class="month-name"><strong>{{ $month['name'] }}</strong><small>{{ $month['count'] }} računa</small></div>
                <div class="bars">
                    <div class="bar issued-bar" style="width:{{ $month['issued'] / $maxIssued * 100 }}%"></div>
                    <div class="bar paid-bar" style="width:{{ $month['paid'] / $maxIssued * 100 }}%"></div>
                </div>
                <div class="month-total">{{ number_format($month['issued'],2,',','.') }} €</div>
            </div>
        @endforeach
    </div>
</div>

<div class="table-scroll report-table">
    <table>
        <thead><tr><th>Mjesec</th><th>Računa</th><th>Bez PDV-a</th><th>PDV</th><th>Izdano</th><th>Naplaćeno</th><th>Za naplatu</th></tr></thead>
        <tbody>
            @foreach($months as $month)
                <tr>
                    <td><strong>{{ $month['name'] }}</strong></td><td>{{ $month['count'] }}</td>
                    <td>{{ number_format($month['net'],2,',','.') }} €</td><td>{{ number_format($month['vat'],2,',','.') }} €</td>
                    <td>{{ number_format($month['issued'],2,',','.') }} €</td><td class="paid-value">{{ number_format($month['paid'],2,',','.') }} €</td>
                    <td class="{{ $month['outstanding'] > 0 ? 'open-value' : '' }}">{{ number_format($month['outstanding'],2,',','.') }} €</td>
                </tr>
            @endforeach
        </tbody>
        <tfoot><tr><th>UKUPNO</th><th>{{ $totals['count'] }}</th><th>{{ number_format($totals['net'],2,',','.') }} €</th><th>{{ number_format($totals['vat'],2,',','.') }} €</th><th>{{ number_format($totals['issued'],2,',','.') }} €</th><th>{{ number_format($totals['paid'],2,',','.') }} €</th><th>{{ number_format($totals['outstanding'],2,',','.') }} €</th></tr></tfoot>
    </table>
</div>

<div class="report-card">
    <div class="report-heading"><div><h2>Promet po klijentu</h2><p>Izdano, naplaćeno i otvoreno u odabranoj godini.</p></div><a class="btn secondary" href="{{ route('reports.invoices',['year'=>$year,'format'=>'csv']) }}">CSV izvoz</a></div>
    <div class="table-scroll"><table><thead><tr><th>Klijent</th><th>Dokumenata</th><th>Izdano</th><th>Naplaćeno</th><th>Otvoreno</th></tr></thead><tbody>
    @forelse($clients as $client)<tr><td><strong>{{ $client['name'] }}</strong></td><td>{{ $client['documents'] }}</td><td>{{ number_format($client['issued'],2,',','.') }} €</td><td class="paid-value">{{ number_format($client['paid'],2,',','.') }} €</td><td class="{{ $client['outstanding'] > 0 ? 'open-value' : '' }}">{{ number_format($client['outstanding'],2,',','.') }} €</td></tr>@empty<tr><td colspan="5">Nema podataka.</td></tr>@endforelse
    </tbody></table></div>
</div>

<style>
.year-filter{display:flex;align-items:center;gap:10px}.year-filter label{font-weight:700}.year-filter select{width:130px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;box-shadow:0 6px 18px rgba(21,51,43,.04)}.stat-card span,.stat-card small{display:block;color:#68766f}.stat-card strong{display:block;margin:7px 0;font-size:25px}.stat-card.paid{border-top:4px solid #168b64}.stat-card.outstanding{border-top:4px solid #d97832}
.report-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px}.report-heading{display:flex;justify-content:space-between;align-items:flex-start}.report-heading h2{margin:0}.report-heading p{margin:5px 0;color:#68766f}.legend{display:flex;align-items:center;gap:7px;font-size:13px;color:#68766f}.issued-dot,.paid-dot{width:10px;height:10px;border-radius:50%;background:#b7dfd1}.paid-dot{background:#087657;margin-left:8px}
.month-row{display:grid;grid-template-columns:120px 1fr 130px;gap:15px;align-items:center;padding:8px 0}.month-name small{display:block;color:#7b8782;margin-top:2px}.bars{position:relative;height:25px;background:#f0f4f2;border-radius:6px;overflow:hidden}.bar{position:absolute;left:0;border-radius:5px}.issued-bar{top:3px;height:19px;background:#b7dfd1}.paid-bar{top:8px;height:9px;background:#087657}.month-total{text-align:right;font-weight:700}.report-table{overflow:auto}.report-table tfoot{background:#eef5f2}.paid-value{color:#087657;font-weight:700}.open-value{color:#b44822;font-weight:700}
body.dark .stat-card,
body.dark .report-card{background:var(--paper);border-color:var(--line);box-shadow:none;color:var(--ink)}
body.dark .stat-card span,
body.dark .stat-card small,
body.dark .report-heading p,
body.dark .legend,
body.dark .month-name small{color:var(--muted)}
body.dark .stat-card strong,
body.dark .report-heading h2,
body.dark .month-name strong,
body.dark .month-total{color:var(--ink)}
body.dark .bars{background:#263b34}
body.dark .issued-bar{background:#73bda5}
body.dark .paid-bar{background:#35d09a}
body.dark .issued-dot{background:#73bda5}
body.dark .paid-dot{background:#35d09a}
body.dark .report-table tfoot{background:#20352e}
body.dark .paid-value{color:#55dca9}
body.dark .open-value{color:#ff9a68}
@media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}.month-row{grid-template-columns:100px 1fr 110px}}@media(max-width:600px){.stats-grid{grid-template-columns:1fr}.report-heading{flex-direction:column;gap:10px}.month-row{grid-template-columns:90px 1fr}.month-total{grid-column:2}}
</style>
@endsection