@extends('layouts.dashboard')

@section('title', isset($realisation) ? 'Modifier la réalisation' : 'Nouvelle réalisation')

@section('content')
<div class="max-w-4xl mx-auto">
    {{-- En-tête --}}
    <div class="mb-10">
        <a href="{{ route('dashboard.realisations.index') }}" class="inline-flex items-center gap-2 text-slate-600 hover:text-slate-900 mb-6 transition">
            <svg class="w-5 h-5" 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>
            Retour aux réalisations
        </a>
        <h1 class="text-3xl font-bold text-slate-900 tracking-tight">
            {{ isset($realisation) ? 'Modifier la réalisation' : 'Nouvelle réalisation' }}
        </h1>
        <p class="mt-2 text-slate-600">
            {{ isset($realisation) ? 'Mettez à jour les informations de cette réalisation.' : 'Renseignez les détails du projet pour l\'ajouter à votre portfolio.' }}
        </p>
    </div>

    {{-- Formulaire --}}
    <form action="{{ isset($realisation) ? route('dashboard.realisations.update', $realisation) : route('dashboard.realisations.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @if(isset($realisation))
        @method('PUT')
        @endif

        <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 overflow-hidden">
            {{-- Section principale --}}
            <div class="p-8 md:p-10 space-y-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {{-- Lieu --}}
                    <div class="md:col-span-2">
                        <label for="lieu" class="block text-sm font-semibold text-slate-800 mb-2">
                            Lieu <span class="text-amber-500">*</span>
                        </label>
                        <input type="text" name="lieu" id="lieu" value="{{ old('lieu', isset($realisation) ? $realisation->lieu : '') }}" required
                               placeholder="Ex : Casablanca, Quartier Anfa"
                               class="w-full px-4 py-3.5 rounded-xl border border-slate-200 bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition placeholder:text-slate-400 @error('lieu') border-red-300 focus:ring-red-500/20 focus:border-red-500 @enderror">
                        @error('lieu')
                        <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Type de travaux --}}
                    <div>
                        <label for="type_travaux" class="block text-sm font-semibold text-slate-800 mb-2">
                            Type de travaux <span class="text-amber-500">*</span>
                        </label>
                        <input type="text" name="type_travaux" id="type_travaux" value="{{ old('type_travaux', isset($realisation) ? $realisation->type_travaux : '') }}" required
                               placeholder="Ex : Installation électrique, Rénovation"
                               class="w-full px-4 py-3.5 rounded-xl border border-slate-200 bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition placeholder:text-slate-400 @error('type_travaux') border-red-300 @enderror">
                        @error('type_travaux')
                        <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Durée des travaux --}}
                    <div>
                        <label for="duree_travaux" class="block text-sm font-semibold text-slate-800 mb-2">
                            Durée des travaux <span class="text-amber-500">*</span>
                        </label>
                        <input type="text" name="duree_travaux" id="duree_travaux" value="{{ old('duree_travaux', isset($realisation) ? $realisation->duree_travaux : '') }}" required
                               placeholder="Ex : 2 semaines, 3 mois"
                               class="w-full px-4 py-3.5 rounded-xl border border-slate-200 bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition placeholder:text-slate-400 @error('duree_travaux') border-red-300 @enderror">
                        @error('duree_travaux')
                        <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Client (optionnel) --}}
                    <div class="md:col-span-2">
                        <label for="client" class="block text-sm font-semibold text-slate-800 mb-2">
                            Client <span class="text-slate-400 font-normal">(optionnel)</span>
                        </label>
                        <input type="text" name="client" id="client" value="{{ old('client', isset($realisation) ? $realisation->client : '') }}"
                               placeholder="Ex : Société XYZ, Particulier"
                               class="w-full px-4 py-3.5 rounded-xl border border-slate-200 bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition placeholder:text-slate-400 @error('client') border-red-300 @enderror">
                        @error('client')
                        <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Description --}}
                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-semibold text-slate-800 mb-2">
                            Description <span class="text-amber-500">*</span>
                        </label>
                        <textarea name="description" id="description" rows="5" required
                                  placeholder="Décrivez le projet, les travaux réalisés, les défis rencontrés..."
                                  class="w-full px-4 py-3.5 rounded-xl border border-slate-200 bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition placeholder:text-slate-400 resize-none @error('description') border-red-300 @enderror">{{ old('description', isset($realisation) ? $realisation->description : '') }}</textarea>
                        @error('description')
                        <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Image --}}
                    <div class="md:col-span-2">
                        <label for="image" class="block text-sm font-semibold text-slate-800 mb-2">Image du projet</label>
                        @if(isset($realisation) && $realisation->image)
                        <div class="mb-4 flex items-center gap-4">
                            <img src="{{ asset('storage/' . $realisation->image) }}" alt="Aperçu actuel du projet" class="h-24 w-auto rounded-lg object-cover border border-slate-200">
                            <span class="text-sm text-slate-500">Image actuelle</span>
                        </div>
                        @endif
                        <div class="relative">
                            <input type="file" name="image" id="image" accept="image/*"
                                   class="block w-full text-sm text-slate-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:bg-amber-500 file:text-white file:font-medium file:cursor-pointer hover:file:bg-amber-600 cursor-pointer px-4 py-3.5 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/30 hover:border-amber-400 hover:bg-amber-50/30 focus:border-amber-500 focus:bg-white transition">
                        </div>
                        <p class="mt-1.5 text-xs text-slate-500">PNG, JPG ou WEBP. Max 2 Mo recommandé.</p>
                    </div>
                </div>
            </div>

            {{-- Pied du formulaire --}}
            <div class="px-8 md:px-10 py-6 bg-slate-50/80 border-t border-slate-100 flex flex-col sm:flex-row gap-4 justify-end">
                <a href="{{ route('dashboard.realisations.index') }}" class="inline-flex justify-center items-center px-6 py-3 rounded-xl border border-slate-200 text-slate-700 font-medium hover:bg-white hover:border-slate-300 transition">
                    Annuler
                </a>
                <button type="submit" class="inline-flex justify-center items-center gap-2 px-8 py-3.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-semibold shadow-lg shadow-amber-500/25 hover:shadow-amber-500/30 transition">
                    {{ isset($realisation) ? 'Mettre à jour' : 'Créer la réalisation' }}
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                </button>
            </div>
        </div>
    </form>
</div>
@endsection
