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

@section('content')
    <div class="page-header">
        <h1>Create New Project</h1>
    </div>

    <div class="card" style="max-width:680px;">
        <div class="card-body">
            <form method="POST" action="{{ route('projects.store') }}">
                @csrf

                <div class="form-group">
                    <label class="form-label">Project Name *</label>
                    <input type="text" name="name" class="form-control" placeholder="Enter project name" value="{{ old('name') }}" required>
                    @error('name') <div class="form-error">{{ $message }}</div> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="3" placeholder="What is this project about?">{{ old('description') }}</textarea>
                </div>

                <div class="grid grid-2">
                    <div class="form-group">
                        <label class="form-label">Team</label>
                        <select name="team_id" class="form-control">
                            <option value="">No Team</option>
                            @foreach($teams as $team)
                                <option value="{{ $team->id }}">{{ $team->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Priority</label>
                        <select name="priority" class="form-control">
                            <option value="medium">Medium</option>
                            <option value="low">Low</option>
                            <option value="high">High</option>
                            <option value="urgent">Urgent</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-2">
                    <div class="form-group">
                        <label class="form-label">Start Date</label>
                        <input type="date" name="start_date" class="form-control" value="{{ old('start_date') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Due Date</label>
                        <input type="date" name="due_date" class="form-control" value="{{ old('due_date') }}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Color</label>
                    <div class="flex gap-2" x-data="{ color: '#6366f1' }">
                        @foreach(['#6366f1','#ec4899','#22c55e','#f97316','#3b82f6','#eab308','#14b8a6','#ef4444'] as $c)
                            <label style="cursor:pointer;">
                                <input type="radio" name="color" value="{{ $c }}" class="hidden" {{ $loop->first ? 'checked' : '' }}>
                                <div style="width:32px;height:32px;border-radius:50%;background:{{ $c }};border:3px solid transparent;transition:all 0.15s;" onclick="this.style.borderColor='white';document.querySelectorAll('input[name=color]').forEach(el => { if(el.value !== '{{ $c }}') el.nextElementSibling.style.borderColor = 'transparent'; });"></div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="flex gap-3 mt-4">
                    <button type="submit" class="btn btn-primary">Create Project</button>
                    <a href="{{ route('projects.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection