{{-- resources/views/client/dashboard.blade.php --}}
@extends('client.layouts.client')
@section('title', 'Dashboard')
@section('page-title', 'Welcome back, ' . explode(' ', $user->name)[0])

@section('client-content')

<p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1.5rem;">
    {{ $client->company_name ? $client->company_name . ' · ' : '' }}Client Portal · {{ now()->format('l, d F Y') }}
</p>

{{-- Stats --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.75rem;">
    @foreach([
        ['Active Projects', $activeProjects,   '#1a56db', 'M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776'],
        ['Completed',       $completedProjects,'#059669', 'M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'],
        ['Open Tickets',    $openTickets,       '#d97706', 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155'],
        ['Unpaid Invoices', $unpaidInvoices,    '#dc2626', 'M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z'],
    ] as [$label,$count,$color,$path])
    <div class="stat-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;">
            <span style="font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;">{{ $label }}</span>
            <div style="width:1.75rem;height:1.75rem;border-radius:6px;background:{{ $color }}12;display:flex;align-items:center;justify-content:center;">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="{{ $color }}" style="width:0.9rem;height:0.9rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="{{ $path }}" />
                </svg>
            </div>
        </div>
        <div style="font-family:'Fraunces',serif;font-size:1.75rem;font-weight:700;color:var(--ink);line-height:1;">{{ $count }}</div>
    </div>
    @endforeach
</div>

@if($totalOwed > 0)
<div class="alert alert-warning" style="margin-bottom:1.5rem;">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#d97706" style="width:1rem;height:1rem;flex-shrink:0;margin-top:0.1rem;">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
    </svg>
    <span>You have <strong>₦{{ number_format($totalOwed, 2) }}</strong> in outstanding invoices. <a href="{{ route('client.invoices.index') }}" style="font-weight:600;color:#854d0e;text-decoration:underline;">View invoices →</a></span>
</div>
@endif

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">

    {{-- Recent projects --}}
    <div class="card">
        <div style="padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
            <h3 style="font-family:'Fraunces',serif;font-size:0.9rem;font-weight:700;">Active Projects</h3>
            <a href="{{ route('client.projects.index') }}" class="btn btn-xs btn-outline">View all</a>
        </div>
        <div class="card-body" style="padding:0;">
            @forelse($recentProjects as $p)
            <a href="{{ route('client.projects.show', $p) }}" style="display:block;padding:1rem 1.25rem;border-bottom:1px solid #f8fafc;text-decoration:none;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;">
                    <span style="font-size:0.82rem;font-weight:600;color:var(--ink);">{{ $p->title }}</span>
                    <span class="pill pill-{{ $p->status }}">{{ ucfirst(str_replace('_',' ',$p->status)) }}</span>
                </div>
                <div style="display:flex;align-items:center;gap:0.6rem;">
                    <div class="progress-track" style="flex:1;">
                        <div class="progress-fill" style="width:{{ $p->progress }}%;background:{{ $p->status_color }};"></div>
                    </div>
                    <span style="font-size:0.7rem;font-weight:600;color:#64748b;white-space:nowrap;">{{ $p->progress }}%</span>
                </div>
                @if($p->deadline)
                <span style="font-size:0.65rem;color:#94a3b8;margin-top:0.25rem;display:block;">Due {{ $p->deadline->format('d M Y') }}</span>
                @endif
            </a>
            @empty
            <div style="padding:2rem;text-align:center;">
                <p style="font-size:0.78rem;color:#94a3b8;">No active projects yet.</p>
            </div>
            @endforelse
        </div>
    </div>

    {{-- Recent tickets + invoices --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">
        <div class="card">
            <div style="padding:0.85rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
                <h3 style="font-family:'Fraunces',serif;font-size:0.88rem;font-weight:700;">Support Tickets</h3>
                <a href="{{ route('client.tickets.index') }}" class="btn btn-xs btn-outline">All tickets</a>
            </div>
            <div style="padding:0;">
                @forelse($recentTickets as $t)
                <a href="{{ route('client.tickets.show', $t) }}" style="display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.25rem;border-bottom:1px solid #f8fafc;text-decoration:none;gap:0.5rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
                    <span style="font-size:0.78rem;font-weight:500;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;">{{ $t->subject }}</span>
                    <span class="pill pill-{{ $t->status }}" style="flex-shrink:0;">{{ ucfirst($t->status) }}</span>
                </a>
                @empty
                <div style="padding:1.25rem;text-align:center;"><p style="font-size:0.75rem;color:#94a3b8;">No tickets. <a href="{{ route('client.tickets.index') }}" style="color:var(--accent);font-weight:600;">Open one →</a></p></div>
                @endforelse
            </div>
        </div>

        <div class="card">
            <div style="padding:0.85rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
                <h3 style="font-family:'Fraunces',serif;font-size:0.88rem;font-weight:700;">Pending Invoices</h3>
                <a href="{{ route('client.invoices.index') }}" class="btn btn-xs btn-outline">All invoices</a>
            </div>
            <div style="padding:0;">
                @forelse($pendingInvoices as $inv)
                <a href="{{ route('client.invoices.show', $inv) }}" style="display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.25rem;border-bottom:1px solid #f8fafc;text-decoration:none;gap:0.5rem;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
                    <div style="flex:1;min-width:0;">
                        <div style="font-size:0.75rem;font-weight:600;color:var(--ink);">{{ $inv->invoice_number }}</div>
                        <div style="font-size:0.68rem;color:#94a3b8;">Due {{ $inv->due_date?->format('d M') ?? 'N/A' }}</div>
                    </div>
                    <div style="text-align:right;flex-shrink:0;">
                        <div style="font-size:0.78rem;font-weight:700;color:var(--ink);">₦{{ number_format($inv->total, 0) }}</div>
                        <span class="pill pill-{{ $inv->status }}">{{ ucfirst($inv->status) }}</span>
                    </div>
                </a>
                @empty
                <div style="padding:1.25rem;text-align:center;"><p style="font-size:0.75rem;color:#94a3b8;">No pending invoices. 🎉</p></div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection