@extends('layouts.app')
@section('title', 'Projects')
@section('breadcrumb')
    <span style="font-weight:600;color:var(--text-primary);">Projects</span>
@endsection

@section('content')
    <div class="page-header">
        <div class="page-header-left">
            <h1>Projects</h1>
            <span class="badge badge-primary">{{ $projects->total() }}</span>
        </div>
        <div class="page-header-actions">
            <a href="{{ route('projects.create') }}" class="btn btn-primary">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                New Project
            </a>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card mb-4">
        <div class="card-body" style="padding:12px 20px;">
            <form method="GET" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
                <div style="flex:1;min-width:200px;">
                    <input type="text" name="search" class="form-control" placeholder="Search projects..." value="{{ request('search') }}" style="padding:8px 14px;">
                </div>
                <select name="status" class="form-control" style="width:auto;padding:8px 36px 8px 14px;">
                    <option value="">All Statuses</option>
                    <option value="not_started" {{ request('status') == 'not_started' ? 'selected' : '' }}>Not Started</option>
                    <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="on_hold" {{ request('status') == 'on_hold' ? 'selected' : '' }}>On Hold</option>
                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                </select>
                <select name="team_id" class="form-control" style="width:auto;padding:8px 36px 8px 14px;">
                    <option value="">All Teams</option>
                    @foreach($teams as $team)
                        <option value="{{ $team->id }}" {{ request('team_id') == $team->id ? 'selected' : '' }}>{{ $team->name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn btn-secondary btn-sm">Filter</button>
                @if(request()->hasAny(['search','status','team_id']))
                    <a href="{{ route('projects.index') }}" class="btn btn-ghost btn-sm">Clear</a>
                @endif
            </form>
        </div>
    </div>

    {{-- Projects Grid --}}
    <div class="grid grid-3">
        @forelse($projects as $project)
            <a href="{{ route('projects.show', $project) }}" class="project-card">
                <div class="project-card-color" style="background: {{ $project->color }};"></div>
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
                    <div class="project-card-title">{{ $project->name }}</div>
                    <span class="badge badge-{{ $project->status_badge }}">{{ ucfirst(str_replace('_', ' ', $project->status)) }}</span>
                </div>
                <div class="project-card-desc">{{ Str::limit($project->description, 100) }}</div>

                <div class="project-card-progress">
                    @php $progress = $project->tasks_count > 0 ? round(($project->completed_tasks_count / $project->tasks_count) * 100) : 0; @endphp
                    <div style="display:flex;justify-content:space-between;font-size:0.78rem;color:var(--text-tertiary);margin-bottom:4px;">
                        <span>{{ $project->completed_tasks_count }}/{{ $project->tasks_count }} tasks</span>
                        <span>{{ $progress }}%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar {{ $progress >= 70 ? 'green' : '' }}" style="width: {{ $progress }}%"></div>
                    </div>
                </div>

                <div class="project-card-stats">
                    <div class="flex items-center gap-2">
                        @if($project->owner)
                            <div class="avatar avatar-xs">{{ $project->owner->initials }}</div>
                            <span>{{ $project->owner->name }}</span>
                        @endif
                    </div>
                    @if($project->due_date)
                        <span>Due {{ $project->due_date->format('M j, Y') }}</span>
                    @endif
                </div>
            </a>
        @empty
            <div class="empty-state" style="grid-column:1/-1;">
                <div class="empty-state-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
                </div>
                <div class="empty-state-title">No projects yet</div>
                <div class="empty-state-text">Create your first project to get started.</div>
                <a href="{{ route('projects.create') }}" class="btn btn-primary">Create Project</a>
            </div>
        @endforelse
    </div>

    @if($projects->hasPages())
        <div class="pagination">{{ $projects->links() }}</div>
    @endif
@endsection