@extends('layouts.app')

@section('meta_title', 'Contact - ' . config('app.name'))
@section('meta_description', 'Contactez Modulux CMF pour un devis gratuit. Telephone, e-mail, WhatsApp ou formulaire de contact.')

@section('content')
    {{-- Header --}}
    <section class="hero-gradient text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="text-sm text-blue-200 mb-4">
                <a href="{{ route('home') }}" class="hover:text-white transition">Accueil</a>
                <span class="mx-2">/</span>
                <span class="text-white">Contact</span>
            </nav>
            <h1 class="text-4xl font-extrabold mb-4">Contactez-nous</h1>
            <p class="text-xl text-blue-100 max-w-2xl">
                Une question, un projet ? N'hesitez pas a nous ecrire. Nous vous repondrons dans les meilleurs delais.
            </p>
        </div>
    </section>

    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Message flash de succes --}}
            @if(session('success'))
                <div class="mb-8 bg-green-50 border border-green-200 rounded-xl p-5 flex items-start space-x-3"
                     x-data="{ show: true }" x-show="show" x-transition>
                    <svg class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div class="flex-1">
                        <p class="font-semibold text-green-800">Message envoye !</p>
                        <p class="text-green-700 text-sm mt-1">{{ session('success') }}</p>
                    </div>
                    <button @click="show = false" class="text-green-400 hover:text-green-600 transition">&times;</button>
                </div>
            @endif

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                {{-- ===== Formulaire (2/3) ===== --}}
                <div class="lg:col-span-2">
                    {{-- Erreurs globales --}}
                    @if($errors->any())
                        <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4">
                            <p class="text-red-700 font-semibold text-sm mb-2">Veuillez corriger les erreurs suivantes :</p>
                            <ul class="list-disc list-inside text-red-600 text-sm space-y-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('contact.send') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                        @csrf

                        {{-- Honeypot --}}
                        <div class="hidden" aria-hidden="true" style="position:absolute;left:-9999px;">
                            <label for="website">Ne pas remplir ce champ</label>
                            <input type="text" name="website" id="website" tabindex="-1" autocomplete="off" value="">
                        </div>

                        {{-- Nom + Email --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1.5">Nom complet *</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                       class="w-full px-4 py-3 border rounded-lg outline-none transition
                                              {{ $errors->has('name') ? 'border-red-400 focus:ring-2 focus:ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500' }}"
                                       placeholder="Jean Dupont">
                                @error('name')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">E-mail *</label>
                                <input type="email" name="email" id="email" value="{{ old('email') }}" required
                                       class="w-full px-4 py-3 border rounded-lg outline-none transition
                                              {{ $errors->has('email') ? 'border-red-400 focus:ring-2 focus:ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500' }}"
                                       placeholder="jean@exemple.be">
                                @error('email')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                            </div>
                        </div>

                        {{-- Telephone --}}
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1.5">Telephone <span class="text-gray-400 font-normal">(optionnel)</span></label>
                            <input type="tel" name="phone" id="phone" value="{{ old('phone') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition"
                                   placeholder="+32 498 19 70 09">
                            @error('phone')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>

                        {{-- Message --}}
                        <div>
                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1.5">Message *</label>
                            <textarea name="message" id="message" rows="6" required
                                      class="w-full px-4 py-3 border rounded-lg outline-none transition resize-y
                                             {{ $errors->has('message') ? 'border-red-400 focus:ring-2 focus:ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500' }}"
                                      placeholder="Decrivez votre projet ou votre demande...">{{ old('message') }}</textarea>
                            @error('message')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                            <p class="text-xs text-gray-400 mt-1">Minimum 10 caracteres</p>
                        </div>

                        {{-- Photos --}}
                        <div x-data="photoUpload()">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                Photos <span class="text-gray-400 font-normal">(optionnel, max 5 photos, 5 Mo chacune)</span>
                            </label>

                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary-400 transition cursor-pointer"
                                 @click="$refs.fileInput.click()"
                                 @dragover.prevent="dragOver = true"
                                 @dragleave.prevent="dragOver = false"
                                 @drop.prevent="handleDrop($event)"
                                 :class="dragOver ? 'border-primary-500 bg-primary-50' : ''">

                                <input type="file" name="photos[]" multiple accept="image/jpeg,image/png,image/webp"
                                       x-ref="fileInput" class="hidden" @change="handleFiles($event)">

                                <svg class="w-10 h-10 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                <p class="text-sm text-gray-500">Cliquez ou glissez vos photos ici</p>
                                <p class="text-xs text-gray-400 mt-1">JPG, PNG ou WebP</p>
                            </div>

                            {{-- Apercu des fichiers selectionnes --}}
                            <div x-show="files.length > 0" x-cloak class="mt-3 space-y-2">
                                <template x-for="(file, index) in files" :key="index">
                                    <div class="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2 text-sm">
                                        <div class="flex items-center space-x-2 min-w-0">
                                            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                            </svg>
                                            <span class="truncate text-gray-700" x-text="file.name"></span>
                                            <span class="text-gray-400 flex-shrink-0" x-text="formatSize(file.size)"></span>
                                        </div>
                                        <button type="button" @click="removeFile(index)" class="text-red-400 hover:text-red-600 ml-2 flex-shrink-0">
                                            <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="M6 18L18 6M6 6l12 12"/></svg>
                                        </button>
                                    </div>
                                </template>
                                <p class="text-xs text-gray-400" x-text="files.length + '/5 photo(s) selectionnee(s)'"></p>
                            </div>

                            @error('photos')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                            @error('photos.*')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>

                        {{-- Submit --}}
                        <button type="submit"
                                class="inline-flex items-center px-8 py-3 bg-primary-700 hover:bg-primary-800 text-white font-semibold rounded-lg transition shadow-lg">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                            Envoyer le message
                        </button>
                    </form>
                </div>

                {{-- ===== Coordonnees (1/3) ===== --}}
                <div class="space-y-6">
                    {{-- Coordonnees --}}
                    <div class="bg-white rounded-2xl p-8 shadow-sm border">
                        <h3 class="text-lg font-bold text-gray-900 mb-6">Nos coordonnees</h3>
                        <div class="space-y-5">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-primary-50 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">Adresse</p>
                                    <p class="text-gray-500 text-sm">Steenweg op Mechelen 455/1<br>1950 Kraainem</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-primary-50 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">Telephone</p>
                                    <a href="tel:+32498197009" class="text-primary-600 hover:text-primary-800 text-sm font-medium transition">+32 498 19 70 09</a>
                                </div>
                            </div>
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-primary-50 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">E-mail</p>
                                    <a href="mailto:info@modulux-cmf.be" class="text-primary-600 hover:text-primary-800 text-sm font-medium transition">info@modulux-cmf.be</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- WhatsApp --}}
                    <a href="https://wa.me/32498197009?text=Bonjour%2C%20je%20souhaite%20un%20renseignement." target="_blank"
                       class="block bg-[#25D366] hover:bg-[#1da851] rounded-2xl p-6 transition shadow-sm group">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
                                <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                            </div>
                            <div>
                                <p class="text-white font-bold text-base">Ecrivez-nous sur WhatsApp</p>
                                <p class="text-white/80 text-sm">Reponse rapide garantie</p>
                            </div>
                            <svg class="w-5 h-5 text-white/60 ml-auto group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </div>
                    </a>

                    {{-- Devis gratuit --}}
                    <div class="bg-accent-50 rounded-2xl p-8 border border-accent-200">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 bg-accent-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                            </div>
                            <h3 class="text-lg font-bold text-gray-900">Devis gratuit</h3>
                        </div>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            Nous realisons des devis gratuits et sans engagement. Decrivez votre projet et nous vous recontacterons rapidement.
                        </p>
                    </div>

                    {{-- Horaires --}}
                    <div class="bg-gray-50 rounded-2xl p-8 border">
                        <h3 class="text-sm font-bold text-gray-700 uppercase tracking-wider mb-3">Horaires</h3>
                        <div class="space-y-2 text-sm text-gray-600">
                            <div class="flex justify-between"><span>Lundi - Vendredi</span><span class="font-medium">8h00 - 17h00</span></div>
                            <div class="flex justify-between"><span>Samedi</span><span class="font-medium">Sur RDV</span></div>
                            <div class="flex justify-between"><span>Dimanche</span><span class="text-gray-400">Ferme</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    function photoUpload() {
        return {
            files: [],
            dragOver: false,
            maxFiles: 5,
            maxSize: 5 * 1024 * 1024, // 5 Mo

            handleFiles(event) {
                this.addFiles(event.target.files);
            },

            handleDrop(event) {
                this.dragOver = false;
                this.addFiles(event.dataTransfer.files);
            },

            addFiles(fileList) {
                for (const file of fileList) {
                    if (this.files.length >= this.maxFiles) {
                        alert('Maximum 5 photos autorisees.');
                        break;
                    }
                    if (!file.type.match(/^image\/(jpeg|png|webp)$/)) {
                        alert(file.name + ' : format non accepte (JPG, PNG ou WebP uniquement).');
                        continue;
                    }
                    if (file.size > this.maxSize) {
                        alert(file.name + ' : taille trop grande (max 5 Mo).');
                        continue;
                    }
                    this.files.push(file);
                }
                this.updateInput();
            },

            removeFile(index) {
                this.files.splice(index, 1);
                this.updateInput();
            },

            updateInput() {
                const dt = new DataTransfer();
                this.files.forEach(f => dt.items.add(f));
                this.$refs.fileInput.files = dt.files;
            },

            formatSize(bytes) {
                if (bytes < 1024) return bytes + ' o';
                if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' Ko';
                return (bytes / (1024 * 1024)).toFixed(1) + ' Mo';
            }
        };
    }
</script>
@endpush