@extends('layouts.app')
@section('title', $team->name)
@section('breadcrumb')
    <a href="{{ route('teams.index') }}" style="color:var(--text-secondary);">Teams</a>
    <span class="topbar-breadcrumb-sep">/</span>
    <span style="font-weight:600;color:var(--text-primary);">{{ $team->name }}</span>
@endsection

@section('content')
    <div class="page-header">
        <div class="page-header-left">
            <div class="team-card-icon" style="background:{{ $team->color }};width:44px;height:44px;font-size:1.1rem;">{{ strtoupper(substr($team->name, 0, 1)) }}</div>
            <div>
                <h1>{{ $team->name }}</h1>
                <p class="text-sm text-muted">{{ $team->department ?? 'No Department' }} · {{ $team->members->count() }} members</p>
            </div>
        </div>
        <div class="page-header-actions">
            <a href="{{ route('teams.edit', $team) }}" class="btn btn-secondary btn-sm">Edit Team</a>
            <form method="POST" action="{{ route('teams.destroy', $team) }}" style="margin:0" onsubmit="return confirm('Delete team?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-sm" style="color:var(--accent-red);">Delete</button>
            </form>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
        {{-- Members --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title">Members</span>
                <span class="badge badge-primary">{{ $team->members->count() }}</span>
            </div>
            <div>
                @foreach($team->members as $member)
                    <div class="task-item">
                        <div class="avatar avatar-sm">{{ $member->initials }}</div>
                        <div class="task-info">
                            <div class="task-title">{{ $member->name }}</div>
                            <div class="text-xs text-muted">{{ $member->job_title ?? $member->email }}</div>
                        </div>
                        <span class="badge badge-secondary">{{ $member->pivot->role }}</span>
                        <form method="POST" action="{{ route('teams.remove-member', [$team, $member]) }}" style="margin:0" onsubmit="return confirm('Remove member?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-ghost btn-icon btn-sm" style="color:var(--accent-red);">×</button>
                        </form>
                    </div>
                @endforeach
            </div>
            <div class="card-footer">
                <form method="POST" action="{{ route('teams.add-member', $team) }}" class="flex gap-2">
                    @csrf
                    <select name="user_id" class="form-control" style="padding:6px 12px;" required>
                        <option value="">Add a member...</option>
                        @foreach($users as $u)
                            @unless($team->members->contains('id', $u->id))
                                <option value="{{ $u->id }}">{{ $u->name }}</option>
                            @endunless
                        @endforeach
                    </select>
                    <button type="submit" class="btn btn-primary btn-sm">Add</button>
                </form>
            </div>
        </div>

        {{-- Projects --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title">Projects</span>
            </div>
            <div>
                @forelse($team->projects as $project)
                    <a href="{{ route('projects.show', $project) }}" class="task-item" style="text-decoration:none;color:var(--text-primary);">
                        <div style="width:8px;height:8px;border-radius:50%;background:{{ $project->color }};"></div>
                        <div class="task-info">
                            <div class="task-title">{{ $project->name }}</div>
                            <div class="text-xs text-muted">{{ $project->owner->name ?? '' }}</div>
                        </div>
                        <span class="badge badge-{{ $project->status_badge }}">{{ ucfirst(str_replace('_', ' ', $project->status)) }}</span>
                    </a>
                @empty
                    <div class="empty-state" style="padding:24px;">
                        <div class="empty-state-text">No projects in this team yet.</div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
@endsection