@extends('layouts.portal')

@section('header_title', 'Initiate Project')

@section('content')
<div class="max-w-4xl space-y-8 pb-12">
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="p-8 md:p-12">
            <div class="mb-10">
                <h3 class="text-2xl font-black text-slate-900 mb-2">Create New Project</h3>
                <p class="text-slate-500 font-medium">Define the core objectives and priority of a new project.</p>
            </div>

            <form action="{{ route('portal.projects.store') }}" method="POST" class="space-y-8">
                @csrf
                
                <!-- Title & Client -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Project Name</label>
                        <input type="text" name="title" required placeholder="e.g. Phoenix Brand Redesign" 
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Collaborator (Client)</label>
                        <select name="client_id" required class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                            <option value="">Select Client</option>
                            @foreach($clients as $client)
                            <option value="{{ $client->id }}">{{ $client->name }} ({{ $client->email }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Strategic Priority & Artisans -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-4">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Priority</label>
                        <div class="grid grid-cols-2 gap-4">
                            @foreach(['low', 'medium', 'high', 'urgent'] as $priority)
                            <label class="cursor-pointer group">
                                <input type="radio" name="priority" value="{{ $priority }}" class="sr-only peer" {{ $priority == 'medium' ? 'checked' : '' }}>
                                <div class="p-4 bg-slate-50 border border-slate-100 rounded-2xl text-center transition-all peer-checked:bg-white peer-checked:border-portal-primary peer-checked:shadow-lg peer-checked:shadow-portal-primary/10 group-hover:bg-white">
                                    <span class="text-[10px] font-black uppercase tracking-widest text-slate-400 peer-checked:text-portal-primary">{{ $priority }}</span>
                                </div>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Assigned Team</label>
                        <div class="space-y-2 max-h-48 overflow-y-auto p-4 bg-slate-50 rounded-2xl border border-slate-100">
                            @foreach($employees as $employee)
                            <label class="flex items-center space-x-3 cursor-pointer hover:bg-white p-2 rounded-xl transition-all">
                                <input type="checkbox" name="user_ids[]" value="{{ $employee->id }}" class="w-4 h-4 rounded border-slate-300 text-portal-primary focus:ring-portal-primary/20">
                                <span class="text-sm font-bold text-slate-700">{{ $employee->name }}</span>
                                <span class="text-[10px] text-slate-400 font-medium uppercase tracking-tight">({{ $employee->designation }})</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Narrative -->
                <div class="space-y-3">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Project Description</label>
                    <textarea name="description" rows="6" required placeholder="Outline the primary vision, scope, and key deliverables for this project..." 
                              class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-medium text-slate-600 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none resize-none"></textarea>
                </div>

                <div class="pt-8 border-t border-slate-50 flex items-center justify-end">
                    <button type="submit" class="px-10 py-4 bg-portal-primary text-white font-black rounded-2xl hover:bg-portal-primary-dark transition-all shadow-xl shadow-portal-primary/20 flex items-center">
                        <i data-lucide="zap" class="w-4 h-4 mr-2"></i>
                        Launch Project
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Info Box -->
    <div class="bg-indigo-600 p-8 rounded-[2.5rem] text-white flex items-center justify-between overflow-hidden relative">
        <div class="relative z-10">
            <h4 class="text-lg font-bold mb-1">Collaborative Workspace</h4>
            <p class="text-indigo-100 text-sm max-w-md">Once launched, you can assign team members and map out specific tasks within the project dashboard.</p>
        </div>
        <i data-lucide="layers" class="w-24 h-24 text-white/10 absolute -right-6 -bottom-6"></i>
    </div>
</div>
@endsection