@extends('layouts.public')
@section('title', "Contactez-nous")
@section('content')
<div class="max-w-2xl mx-auto md:mt-15 mt-10 px-5" x-data="contactForm()">
  <div class="md:py-20 relative">
    @include('backgrounds.bg-5')
    <h2 class="md:text-4xl text-xl px-5 md:px-0 flex flex-col md:items-center tracking-wider capitalize gap-5">
        <span
        >Contactez-nous</span>
        <span class="text-brand md:text-base md:text-center text-sm md:mb-0 tracking-wider mt-2 capitalize">
          Une question ? Une idée ? Nous sommes là pour vous écouter
        </span>
    </h2>   
  </div>
    <form @submit.prevent="submit" class="flex flex-col gap-6 bg-gradient-to-b from-[#0c0c0d] to-black md:p-8 p-5 mt-10 md:mt-0">
        <div class="grid md:grid-cols-2 grid-cols-1 gap-5">
            <input type="text" class="placeholder:text-white/80 px-5 font-open-sans border bg-white/5 border-white/20 py-4" placeholder="Nom" x-model="form.lastname" required>
            <input type="text" class="placeholder:text-white/80 px-5 font-open-sans border bg-white/5 border-white/20 py-4" placeholder="Prénom" x-model="form.firstname" required>
        </div>
        <input type="text" class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" placeholder="Email ou Téléphone" x-model="form.email_or_phone" required>
        <textarea rows="7" class="placeholder:text-white/80 px-5  font-open-sans border bg-white/5 border-white/20 py-4" placeholder="Votre message" x-model="form.message" required></textarea>
        <button type="submit" class="w-full py-3 bg-brand hover:bg-brand-dark transition-colors text-lg tracking-wider" :disabled="loading">
            <span x-show="!loading">Envoyer</span>
            <span x-show="loading">Envoi...</span>
        </button>
    </form>
    <div x-show="showSuccess" x-cloak class="fixed inset-0 z-60 flex items-center justify-center bg-black/60">
        <div class="bg-[#0c0c0d] p-10 text-center max-w-md mx-auto">
          <div class="text-2xl text-green-500 tracking-wider mb-4">Message envoyé !</div>
          <div class="mb-6 font-open-sans">Nous allons vous répondre rapidement.</div>
          <button type="button" class="bg-white/5 hover:bg-white/10 transition-colors px-6 py-2 tracking-wider" @click="closeSuccessModal">Fermer</button>
        </div>
    </div>
    <!-- Modal d'erreur -->
    <div x-show="error" x-cloak class="fixed inset-0 z-60 flex items-center justify-center bg-black/60">
      <div class="bg-[#0c0c0d] p-10 text-center max-w-md mx-auto">
        <div class="text-2xl text-red-500 tracking-wider mb-4">Erreur</div>
        <div class="mb-6 font-open-sans" x-text="error"></div>
        <button type="button" class="bg-white/5 hover:bg-white/10 transition-colors px-6 py-2 tracking-wider" @click="error = ''">Fermer</button>
      </div>
    </div>
</div>
<script>
function contactForm() {
    return {
        form: {
            firstname: '',
            lastname: '',
            email_or_phone: '',
            message: '',
        },
        loading: false,
        success: false,
        error: '',
        showSuccess: false,
        async submit() {
            this.loading = true;
            this.success = false;
            this.error = '';
            try {
                const fd = new FormData();
                fd.append('firstname', this.form.firstname);
                fd.append('lastname', this.form.lastname);
                fd.append('email_or_phone', this.form.email_or_phone);
                fd.append('message', this.form.message);
                fd.append('_token', '{{ csrf_token() }}');
                const res = await fetch('{{ route('contact-message.store') }}', {
                    method: 'POST',
                    body: fd,
                });
                const data = await res.json();
                if (data.success) {
                    this.showSuccess = true;
                    this.form = { firstname: '', lastname: '', email_or_phone: '', message: '' };
                } else {
                    this.error = data.message || 'Erreur lors de l\'envoi';
                }
            } catch (err) {
                this.error = 'Erreur lors de l\'envoi';
            }
            this.loading = false;
        },
        closeSuccessModal() {
            this.showSuccess = false;
        }
    }
}
</script>
@endsection