@extends('layouts.app')

@section('title', 'Projects - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">Projects</h1>
@endsection

@section('content')
    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-800" x-data x-init="setTimeout(() => $el.remove(), 3000)">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800" x-data x-init="setTimeout(() => $el.remove(), 3000)">
            {{ session('error') }}
        </div>
    @endif

    <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
        @if ($showArchived)
            <a href="{{ route('projects.index') }}" class="text-sm text-indigo-600 hover:text-indigo-800">Hide archived</a>
        @else
            <a href="{{ route('projects.index', ['archived' => 1]) }}" class="text-sm text-indigo-600 hover:text-indigo-800">Show archived</a>
        @endif
        <button
            type="button"
            @click="$dispatch('open-create-project-modal')"
            class="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700"
        >
            New Project
        </button>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($projects as $project)
            <a href="{{ route('projects.show', $project) }}" class="group block rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition hover:border-indigo-300 hover:shadow-md">
                <div class="flex items-start justify-between gap-2">
                    <div class="flex min-w-0 items-center gap-2">
                        <span class="block h-3 w-3 shrink-0 rounded-full" style="background-color: {{ $project->color ?? '#9ca3af' }}"></span>
                        <span class="truncate font-medium text-gray-900">{{ $project->name }}</span>
                    </div>
                    <span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {{ $project->visibility === 'shared' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ $project->visibility }}
                    </span>
                </div>
                @if ($project->description)
                    <p class="mt-2 line-clamp-2 text-sm text-gray-500">{{ $project->description }}</p>
                @endif
                <div class="mt-3 flex gap-4 text-xs text-gray-500">
                    <span>{{ $project->members_count }} {{ Str::plural('member', $project->members_count) }}</span>
                    <span>{{ $project->tasks_count }} {{ Str::plural('task', $project->tasks_count) }}</span>
                </div>
            </a>
        @endforeach
    </div>

    @if ($projects->isEmpty())
        <p class="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center text-gray-500">No projects yet. Create one to get started.</p>
    @endif

    {{-- Create Project Modal --}}
    <div
        x-data="{ open: false }"
        x-on:open-create-project-modal.window="open = true"
        x-on:close-create-project-modal.window="open = false"
        x-show="open"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        role="dialog"
        aria-modal="true"
    >
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="open" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="open = false"></div>
            <div x-show="open" x-transition class="relative w-full max-w-lg rounded-lg bg-white p-6 shadow-xl">
                <h3 class="text-lg font-semibold text-gray-900">New Project</h3>
                <form method="post" action="{{ route('projects.store') }}" class="mt-4 space-y-4">
                    @csrf
                    <div>
                        <label for="create_name" class="block text-sm font-medium text-gray-700">Name</label>
                        <input id="create_name" type="text" name="name" value="{{ old('name') }}" required class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="create_description" class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea id="create_description" name="description" rows="3" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Color</label>
                        <div class="flex flex-wrap gap-2">
                            @foreach (\App\Models\Project::predefinedColors() as $hex => $label)
                                <label class="cursor-pointer">
                                    <input type="radio" name="color" value="{{ $hex }}" {{ old('color', '#3b82f6') === $hex ? 'checked' : '' }} class="sr-only peer" />
                                    <span class="block h-8 w-8 rounded-full border-2 border-transparent peer-checked:border-gray-900 peer-checked:ring-2 peer-checked:ring-offset-2" style="background-color: {{ $hex }}"></span>
                                </label>
                            @endforeach
                        </div>
                        @error('color')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Visibility</label>
                        <div class="mt-1 flex gap-4">
                            <label class="flex items-center gap-2">
                                <input type="radio" name="visibility" value="private" {{ old('visibility', 'private') === 'private' ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                <span class="text-sm text-gray-700">Private</span>
                            </label>
                            <label class="flex items-center gap-2">
                                <input type="radio" name="visibility" value="shared" {{ old('visibility') === 'shared' ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                <span class="text-sm text-gray-700">Shared</span>
                            </label>
                        </div>
                        @error('visibility')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" @click="$dispatch('close-create-project-modal')" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                        <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection