@extends('layouts.portal')

@section('header_title', 'Refine 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 flex items-center justify-between">
                <div>
                    <h3 class="text-2xl font-black text-slate-900 mb-2">Edit Project</h3>
                    <p class="text-slate-500 font-medium">Update the objectives and team structure of an active project.</p>
                </div>
                <div class="hidden md:block">
                    <span class="px-4 py-2 bg-indigo-50 text-portal-primary rounded-xl text-xs font-bold uppercase tracking-widest">ID: #PROJ-{{ $project->id }}</span>
                </div>
            </div>

            <form action="{{ route('portal.projects.update', $project) }}" method="POST" class="space-y-8">
                @csrf
                @method('PATCH')
                
                <!-- Title & Status -->
                <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 value="{{ old('title', $project->title) }}"
                               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">Project Status</label>
                        <select name="status" 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">
                            @foreach(['planning' => 'Planning', 'active' => 'Active', 'on_hold' => 'On Hold', 'completed' => 'Completed'] as $key => $label)
                            <option value="{{ $key }}" {{ $project->status == $key ? 'selected' : '' }}>{{ $label }}</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" {{ $project->priority == $priority ? '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">
                            @php $teamIds = $project->users->pluck('id')->toArray(); @endphp
                            @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 }}" 
                                       {{ in_array($employee->id, $teamIds) ? 'checked' : '' }}
                                       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>

                <!-- Descriptive Content -->
                <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..." 
                              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">{{ $project->description }}</textarea>
                </div>

                <div class="pt-8 border-t border-slate-50 flex items-center justify-end space-x-4">
                    <a href="{{ route('portal.projects.show', $project) }}" class="px-8 py-4 bg-slate-50 text-slate-500 font-bold rounded-2xl border border-slate-100 hover:bg-slate-100 transition-all">
                        Cancel Changes
                    </a>
                    <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">
                        Update Project
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection