@extends('layouts.app')

@section('title', 'Créer une nouvelle application - DevApp')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-6 flex items-center space-x-3">
        <a href="{{ route('dashboard') }}" class="p-2 rounded-xl bg-white border border-slate-200 text-slate-500 hover:text-slate-800 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
        </a>
        <div>
            <h1 class="text-xl font-black text-slate-900">Nouvelle Application / Projet</h1>
            <p class="text-xs text-slate-500">Un tableau Kanban par défaut sera automatiquement généré pour ce projet.</p>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-8 shadow-xs">
        <form action="{{ route('projects.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Project Name -->
            <div>
                <label for="name" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                    Nom de l'application / Projet <span class="text-rose-500">*</span>
                </label>
                <input type="text" id="name" name="name" value="{{ old('name') }}" required
                    class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                    placeholder="Ex: Refonte Site E-Commerce, Application Mobile iOS...">
            </div>

            <!-- Description -->
            <div>
                <label for="description" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                    Description ou Objectifs
                </label>
                <textarea id="description" name="description" rows="3"
                    class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                    placeholder="Brève description de l'application, contexte ou spécifications...">{{ old('description') }}</textarea>
            </div>

            <!-- Color Palette Selector -->
            <div x-data="{ selectedColor: '{{ old('color', '#6366f1') }}' }">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                    Couleur d'identification
                </label>
                <div class="flex items-center space-x-3">
                    @php
                        $colors = ['#6366f1', '#3b82f6', '#0ea5e9', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#14b8a6', '#64748b'];
                    @endphp
                    @foreach($colors as $color)
                        <button type="button" @click="selectedColor = '{{ $color }}'"
                            class="w-8 h-8 rounded-full border-2 transition-transform transform hover:scale-110 flex items-center justify-center text-white"
                            :class="selectedColor === '{{ $color }}' ? 'border-slate-900 ring-2 ring-indigo-300 scale-110' : 'border-white'"
                            style="background-color: {{ $color }};">
                            <span x-show="selectedColor === '{{ $color }}'" class="text-xs">✓</span>
                        </button>
                    @endforeach
                    <input type="hidden" name="color" :value="selectedColor">
                </div>
            </div>

            <!-- Options & Public Link -->
            <div class="space-y-3 pt-4 border-t border-slate-100">
                <label class="flex items-start space-x-3 cursor-pointer">
                    <input type="checkbox" name="allow_guest_reports" value="1" checked
                        class="w-4 h-4 mt-0.5 rounded text-indigo-600 focus:ring-indigo-500 border-slate-300">
                    <div>
                        <span class="text-sm font-semibold text-slate-800">Autoriser les signalements de bugs sans connexion</span>
                        <p class="text-xs text-slate-500">Génère une URL unique que vous pouvez envoyer par email ou WhatsApp à votre client pour qu'il signale ses bugs en 2 clics.</p>
                    </div>
                </label>

                <label class="flex items-start space-x-3 cursor-pointer">
                    <input type="checkbox" name="client_portal_enabled" value="1" checked
                        class="w-4 h-4 mt-0.5 rounded text-indigo-600 focus:ring-indigo-500 border-slate-300">
                    <div>
                        <span class="text-sm font-semibold text-slate-800">Activer le portail de suivi en direct</span>
                        <p class="text-xs text-slate-500">Permet au client de consulter l'avancement des tâches sans mot de passe via son lien sécurisé.</p>
                    </div>
                </label>
            </div>

            <!-- Assign Collaborators & Clients -->
            <div class="pt-4 border-t border-slate-100 space-y-4">
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Attribuer à des Collaborateurs
                    </label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @foreach($users->where('role', 'collaborator') as $collab)
                            <label class="flex items-center space-x-2.5 p-2 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
                                <input type="checkbox" name="collaborator_ids[]" value="{{ $collab->id }}" class="w-4 h-4 rounded text-indigo-600">
                                <span class="text-xs font-medium text-slate-700">{{ $collab->name }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Associer des Clients (qui ont un compte)
                    </label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @foreach($users->where('role', 'client') as $client)
                            <label class="flex items-center space-x-2.5 p-2 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
                                <input type="checkbox" name="client_ids[]" value="{{ $client->id }}" class="w-4 h-4 rounded text-indigo-600">
                                <div class="text-xs">
                                    <span class="font-medium text-slate-800">{{ $client->name }}</span>
                                    @if($client->company)
                                        <span class="text-slate-400">({{ $client->company }})</span>
                                    @endif
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="pt-6 border-t border-slate-100 flex items-center justify-end space-x-3">
                <a href="{{ route('dashboard') }}" class="px-4 py-2.5 rounded-xl border border-slate-300 text-slate-700 text-sm font-semibold hover:bg-slate-50 transition-colors">
                    Annuler
                </a>
                <button type="submit" class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-sm transition-all">
                    Créer l'application et générer le Kanban
                </button>
            </div>
        </form>
    </div>
</div>
@endsection