{{-- resources/views/admin/workspaces.blade.php --}}
@extends('admin.layouts.admin')
@section('title', 'All Workspaces')
@section('page-title', 'All Team Workspaces')

@section('admin-content')

<div style="margin-bottom:1.25rem;">
    <p style="font-size:0.82rem;color:#9ca3af;">Company-wide workspace overview. Only visible to Super Admins.</p>
</div>

{{-- Summary stats --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.75rem;">
    @php
        $totalPending  = $members->sum('pending_tasks');
        $totalDone     = $members->sum('done_tasks');
        $totalOverdue  = $members->sum('overdue_tasks');
        $activeMembers = $members->count();
    @endphp
    @foreach([
        ['Active Members', $activeMembers, '#2d3aff'],
        ['Pending Tasks',  $totalPending,  '#f59e0b'],
        ['Completed Tasks',$totalDone,     '#10b981'],
        ['Overdue Tasks',  $totalOverdue,  '#dc2626'],
    ] as [$label,$count,$color])
    <div class="admin-card" style="display:flex;align-items:center;gap:0.85rem;">
        <div style="width:2.5rem;height:2.5rem;border-radius:10px;background:{{ $color }}15;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <div style="width:0.6rem;height:0.6rem;border-radius:999px;background:{{ $color }};"></div>
        </div>
        <div>
            <div style="font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:#0f0f14;line-height:1;">{{ $count }}</div>
            <div style="font-size:0.68rem;color:#9ca3af;font-weight:500;">{{ $label }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Workspace cards --}}
@php
$deptColors = ['executive'=>'indigo','technical'=>'blue','marketing'=>'emerald','support'=>'amber'];
$deptLabels = ['executive'=>'Executive','technical'=>'Technical','marketing'=>'Marketing','support'=>'Support'];
@endphp

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;">
    @foreach($members as $m)
    @php $col = $deptColors[$m->department] ?? 'slate'; @endphp
    <div class="admin-card" style="position:relative;overflow:hidden;">

        {{-- Dept color bar --}}
        <div style="position:absolute;top:0;left:0;right:0;height:3px;
            background:{{ match($col) {
                'indigo'  => 'linear-gradient(90deg,#4338ca,#6366f1)',
                'blue'    => 'linear-gradient(90deg,#1d4ed8,#60a5fa)',
                'emerald' => 'linear-gradient(90deg,#065f46,#34d399)',
                'amber'   => 'linear-gradient(90deg,#92400e,#fbbf24)',
                default   => 'linear-gradient(90deg,#334155,#94a3b8)',
            } }};"></div>

        <div style="padding-top:0.5rem;">
            {{-- Member header --}}
            <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
                @if($m->photo)
                    <img src="{{ $m->photo }}" alt="{{ $m->name }}" style="width:2.75rem;height:2.75rem;border-radius:10px;object-fit:cover;flex-shrink:0;">
                @else
                    <div style="width:2.75rem;height:2.75rem;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-family:'Fraunces',serif;font-size:0.9rem;font-weight:700;
                        background:{{ match($col) {
                            'indigo'  => 'linear-gradient(135deg,#4338ca,#6366f1)',
                            'blue'    => 'linear-gradient(135deg,#1d4ed8,#60a5fa)',
                            'emerald' => 'linear-gradient(135deg,#065f46,#34d399)',
                            'amber'   => 'linear-gradient(135deg,#92400e,#fbbf24)',
                            default   => 'linear-gradient(135deg,#334155,#94a3b8)',
                        } }};">
                        {{ $m->initials }}
                    </div>
                @endif
                <div style="flex:1;min-width:0;">
                    <div style="font-family:'Fraunces',serif;font-size:0.88rem;font-weight:700;color:#0f0f14;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $m->name }}</div>
                    <div style="font-size:0.68rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $m->role }}</div>
                </div>
                <span style="font-size:0.62rem;font-weight:600;padding:0.2rem 0.5rem;border-radius:999px;
                    background:{{ match($col) {'indigo'=>'#eef0ff','blue'=>'#eff6ff','emerald'=>'#f0fdf4','amber'=>'#fef9c3',default=>'#f3f4f6'} }};
                    color:{{ match($col) {'indigo'=>'#2d3aff','blue'=>'#1d4ed8','emerald'=>'#065f46','amber'=>'#854d0e',default=>'#374151'} }};">
                    {{ $deptLabels[$m->department] ?? ucfirst($m->department) }}
                </span>
            </div>

            {{-- Workspace stats --}}
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;margin-bottom:1rem;">
                @foreach([
                    [$m->pending_tasks, 'Pending', '#f59e0b'],
                    [$m->done_tasks,    'Done',    '#10b981'],
                    [$m->overdue_tasks, 'Overdue', '#dc2626'],
                ] as [$count, $label, $color])
                <div style="text-align:center;padding:0.5rem;background:#f8f8fa;border-radius:8px;">
                    <div style="font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:{{ $color }};line-height:1;">{{ $count }}</div>
                    <div style="font-size:0.6rem;color:#9ca3af;font-weight:500;margin-top:0.1rem;">{{ $label }}</div>
                </div>
                @endforeach
            </div>

            {{-- Workspace health bar --}}
            @php
                $total = $m->pending_tasks + $m->done_tasks;
                $pct   = $total > 0 ? round(($m->done_tasks / $total) * 100) : 0;
            @endphp
            <div style="margin-bottom:0.75rem;">
                <div style="display:flex;justify-content:space-between;margin-bottom:0.3rem;">
                    <span style="font-size:0.65rem;color:#9ca3af;">Task completion</span>
                    <span style="font-size:0.65rem;font-weight:600;color:#0f0f14;">{{ $pct }}%</span>
                </div>
                <div style="height:4px;background:#f3f4f6;border-radius:999px;overflow:hidden;">
                    <div style="height:100%;width:{{ $pct }}%;background:{{ $pct >= 70 ? '#10b981' : ($pct >= 40 ? '#f59e0b' : '#dc2626') }};border-radius:999px;transition:width 0.4s;"></div>
                </div>
            </div>

            {{-- Workspace status + account --}}
            <div style="display:flex;align-items:center;justify-content:space-between;">
                <div style="display:flex;align-items:center;gap:0.4rem;">
                    <div style="width:6px;height:6px;border-radius:999px;background:{{ $m->user ? '#10b981' : '#dc2626' }};"></div>
                    <span style="font-size:0.68rem;color:#9ca3af;">{{ $m->user ? 'Account active' : 'No account' }}</span>
                </div>
                @if($m->user)
                <span style="font-size:0.62rem;padding:0.15rem 0.45rem;border-radius:999px;
                    background:{{ $m->user->role==='super_admin' ? '#eef0ff' : ($m->user->role==='admin' ? '#fef9c3' : '#f3f4f6') }};
                    color:{{ $m->user->role==='super_admin' ? '#2d3aff' : ($m->user->role==='admin' ? '#854d0e' : '#6b7280') }};
                    font-weight:600;">
                    {{ ucfirst(str_replace('_',' ',$m->user->role)) }}
                </span>
                @endif
            </div>

            @if($m->overdue_tasks > 0)
            <div style="margin-top:0.75rem;padding:0.5rem 0.75rem;background:#fff5f5;border:1px solid #fecaca;border-radius:6px;">
                <p style="font-size:0.7rem;color:#dc2626;font-weight:500;">⚠️ {{ $m->overdue_tasks }} overdue {{ $m->overdue_tasks === 1 ? 'task' : 'tasks' }}</p>
            </div>
            @endif
        </div>
    </div>
    @endforeach
</div>

@endsection