@extends('layouts.app')
@section('title', 'Fakturor')

@section('content')
<!-- Header -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Instrument Serif',serif;font-size:26px;color:#E8EAF0;">Fakturor</h2>
        <p style="font-size:13px;color:#5B6478;margin-top:2px;">Hantera och spåra alla dina fakturor</p>
    </div>
    <div style="display:flex;gap:10px;">
        <a href="{{ route('invoices.index') }}?export=1" class="btn btn-ghost" style="font-size:13px;padding:9px 16px;">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Exportera
        </a>
        <a href="{{ route('invoices.create') }}" class="btn btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Ny faktura
        </a>
    </div>
</div>

<!-- Stats Row -->
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px;">
    @foreach([
        ['Totalt',$stats['total'],'#8B9AB8',''],
        ['Utkast',$stats['draft'],'#6B7280','badge-draft'],
        ['Skickade',$stats['sent'],'#93C5FD','badge-sent'],
        ['Förfallna',$stats['overdue'],'#FCA5A5','badge-overdue'],
        ['Betalda',$stats['paid'],'#6EE7B7','badge-paid'],
    ] as [$lbl,$val,$color,$badge])
    <a href="?status={{ strtolower($lbl) }}" style="text-decoration:none;">
        <div class="ff-stat-card" style="padding:16px 20px;{{ request('status')===strtolower($lbl)?'border-color:rgba(59,125,255,.3);':''; }}">
            <div style="font-size:24px;font-weight:600;color:{{ $color }};font-variant-numeric:tabular-nums;margin-bottom:4px;">{{ $val }}</div>
            <div style="font-size:12px;color:#5B6478;text-transform:uppercase;letter-spacing:.04em;">{{ $lbl }}</div>
        </div>
    </a>
    @endforeach
</div>

<!-- Search & Filter -->
<div class="ff-card" style="padding:14px 20px;margin-bottom:16px;">
    <form method="GET" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
        <input type="text" name="search" placeholder="Sök fakturanummer eller kundnamn..." value="{{ request('search') }}"
               style="flex:1;min-width:200px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:9px 14px;color:#E8EAF0;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;">
        <select name="status" style="padding:9px 32px 9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#E8EAF0;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;appearance:none;cursor:pointer;">
            <option value="">Alla statusar</option>
            @foreach(['draft'=>'Utkast','sent'=>'Skickad','viewed'=>'Läst','partially_paid'=>'Delbetald','paid'=>'Betald','overdue'=>'Förfallen','cancelled'=>'Annullerad'] as $s=>$l)
            <option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ $l }}</option>
            @endforeach
        </select>
        <input type="date" name="from" value="{{ request('from') }}" style="padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#E8EAF0;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;">
        <input type="date" name="to" value="{{ request('to') }}" style="padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#E8EAF0;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;">
        <button type="submit" class="btn btn-secondary" style="padding:9px 18px;font-size:13px;">Sök</button>
        @if(request()->hasAny(['search','status','from','to']))
        <a href="{{ route('invoices.index') }}" style="font-size:13px;color:#5B6478;text-decoration:none;white-space:nowrap;">Rensa filter</a>
        @endif
    </form>
</div>

<!-- Table -->
<div class="ff-card" style="padding:0;">
    <table class="ff-table">
        <thead>
            <tr>
                <th>Faktura</th>
                <th>Kund</th>
                <th>Fakturadatum</th>
                <th>Förfallodatum</th>
                <th class="text-right">Belopp</th>
                <th class="text-right">Utestående</th>
                <th>Status</th>
                <th>Åtgärder</th>
            </tr>
        </thead>
        <tbody>
            @forelse($invoices as $invoice)
            <tr onclick="window.location='{{ route('invoices.show', $invoice) }}'" style="cursor:pointer;">
                <td>
                    <div class="mono" style="font-size:13px;font-weight:500;color:#E8EAF0;">{{ $invoice->invoice_number }}</div>
                    @if($invoice->type==='credit')<div style="font-size:10px;color:#F97316;font-weight:600;text-transform:uppercase;letter-spacing:.05em;">Kreditnota</div>@endif
                </td>
                <td>
                    <div style="font-size:13px;font-weight:500;color:#E8EAF0;">{{ $invoice->customer->name }}</div>
                    @if($invoice->your_reference)<div style="font-size:11px;color:#5B6478;">Ref: {{ $invoice->your_reference }}</div>@endif
                </td>
                <td style="font-size:13px;color:#8B9AB8;">{{ $invoice->invoice_date->format('d.m.Y') }}</td>
                <td style="font-size:13px;color:{{ $invoice->due_date->isPast() && !in_array($invoice->status,['paid','cancelled']) ? '#FCA5A5' : '#8B9AB8' }};">
                    {{ $invoice->due_date->format('d.m.Y') }}
                    @if($invoice->due_date->isPast() && !in_array($invoice->status,['paid','cancelled']))<div style="font-size:10px;color:#EF4444;">{{ $invoice->due_date->diffForHumans() }}</div>@endif
                </td>
                <td class="text-right" style="font-size:13px;font-weight:500;color:#E8EAF0;font-variant-numeric:tabular-nums;">
                    {{ number_format($invoice->total, 0, ',', ' ') }} {{ $invoice->currency }}
                </td>
                <td class="text-right" style="font-variant-numeric:tabular-nums;">
                    @if($invoice->total_remaining > 0 && !in_array($invoice->status,['draft','cancelled']))
                        <span style="font-size:13px;font-weight:500;color:{{ $invoice->status==='overdue'?'#FCA5A5':'#F59E0B' }};">{{ number_format($invoice->total_remaining, 0, ',', ' ') }} kr</span>
                    @elseif($invoice->status==='paid')
                        <span style="font-size:13px;color:#6EE7B7;">—</span>
                    @else
                        <span style="font-size:13px;color:#5B6478;">—</span>
                    @endif
                </td>
                <td><span class="badge badge-{{ $invoice->status }}">{{ $invoice->status_label }}</span></td>
                <td onclick="event.stopPropagation()">
                    <div style="display:flex;gap:6px;">
                        <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-ghost btn-sm" title="Visa">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        </a>
                        <a href="{{ route('invoices.download', $invoice) }}" class="btn btn-ghost btn-sm" title="PDF">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        </a>
                        @if($invoice->status==='draft')
                        <a href="{{ route('invoices.edit', $invoice) }}" class="btn btn-ghost btn-sm" title="Redigera">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        </a>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" style="text-align:center;padding:60px;color:#5B6478;">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" style="margin:0 auto 14px;display:block;opacity:.3;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                    @if(request()->hasAny(['search','status','from','to']))
                        Inga fakturor matchar din sökning.
                        <a href="{{ route('invoices.index') }}" style="color:#3B7DFF;">Rensa filter</a>
                    @else
                        Inga fakturor ännu.<br>
                        <a href="{{ route('invoices.create') }}" style="color:#3B7DFF;font-size:14px;">Skapa din första faktura →</a>
                    @endif
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    @if($invoices->hasPages())
    <div style="padding:16px 20px;border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:between;">
        <div style="font-size:13px;color:#5B6478;flex:1;">
            Visar {{ $invoices->firstItem() }}–{{ $invoices->lastItem() }} av {{ $invoices->total() }} fakturor
        </div>
        {{ $invoices->appends(request()->query())->links() }}
    </div>
    @endif
</div>
@endsection