@extends('layouts.app')

@section('title', 'Demande de Financement')

@section('content')
<div x-data="financingForm({ userMatricule: '{{ auth()->user()->matricule }}' })">
    {{-- * Header --}}
    <header class="bg-white shadow-md">
        <div class="max-w-4xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-boulanger-orange rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-md">
                    💳
                </div>
                <div>
                    <h1 class="text-xl sm:text-2xl font-display font-bold tracking-tight text-gray-900">
                        Fiche de Liaison <span class="text-boulanger-orange">Financement</span>
                    </h1>
                    <p class="text-xs sm:text-sm text-gray-500">Générer et envoyer un dossier de financement</p>
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-4xl mx-auto px-4 py-6 sm:px-6 lg:px-8 pb-24">

        {{-- * Flash Message Succès avec instructions --}}
        <template x-if="showSuccessMessage">
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 p-6 rounded-r-xl shadow-lg">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i data-lucide="check-circle-2" class="w-8 h-8 text-green-500"></i>
                    </div>
                    <div class="ml-4 flex-1">
                        <h3 class="text-lg font-bold text-green-900">✅ PDF généré avec succès !</h3>
                        <div class="mt-3 text-sm text-green-800 space-y-2">
                            <p class="font-semibold">📧 Prochaines étapes :</p>
                            <ol class="list-decimal ml-5 space-y-1">
                                <li>Le PDF a été téléchargé automatiquement</li>
                                <li>Votre application mail devrait s'ouvrir</li>
                                <li>Joignez le PDF téléchargé</li>
                                <li>Utilisez comme objet : <span class="font-mono bg-white px-2 py-1 rounded font-bold" x-text="pdfSubject"></span></li>
                            </ol>
                        </div>
                        <button @click="showSuccessMessage = false" class="mt-4 text-sm text-green-700 hover:text-green-900 font-semibold">
                            Fermer ✕
                        </button>
                    </div>
                </div>
            </div>
        </template>

        {{-- * Alerte erreur --}}
        <template x-if="error">
            <div class="mb-6 bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg">
                <div class="flex items-start">
                    <i data-lucide="alert-circle" class="w-5 h-5 text-red-400 mr-3 mt-0.5"></i>
                    <div>
                        <p class="font-semibold text-red-800">Oups, une erreur est survenue</p>
                        <p class="text-sm text-red-700" x-text="error"></p>
                    </div>
                </div>
            </div>
        </template>

        <form @submit.prevent="submitForm" class="space-y-6">

            {{-- * Section 1 : Informations du Financement --}}
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-boulanger-orange to-orange-500 px-4 py-3 sm:px-6">
                    <h2 class="text-lg font-display font-bold text-white">
                        <i data-lucide="file-text" class="w-5 h-5 inline mr-2"></i>Informations du Financement
                    </h2>
                </div>
                <div class="p-4 sm:p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">
                            N° de Facture <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               x-model="form.invoice_number"
                               required
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                               placeholder="Ex: F1091699611">
                        <p class="mt-1 text-xs text-gray-500">Doit commencer par F suivi de chiffres</p>
                        <template x-if="errors.invoice_number">
                            <p class="mt-1 text-sm text-red-600" x-text="errors.invoice_number[0]"></p>
                        </template>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">
                            Matricule Vendeur <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               x-model="form.vendor_id"
                               required
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                               placeholder="Ex: BL169961">
                        <p class="mt-1 text-xs text-gray-500">Doit commencer par BL suivi de chiffres/lettres</p>
                        <template x-if="errors.vendor_id">
                            <p class="mt-1 text-sm text-red-600" x-text="errors.vendor_id[0]"></p>
                        </template>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">
                            Nom du Client <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               x-model="form.client_name"
                               required
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                               placeholder="Ex: DUPONT Jean">
                        <template x-if="errors.client_name">
                            <p class="mt-1 text-sm text-red-600" x-text="errors.client_name"></p>
                        </template>
                    </div>
                </div>
            </div>

            {{-- * Section 2 : Famille de Produit --}}
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-boulanger-orange to-orange-500 px-4 py-3 sm:px-6">
                    <h2 class="text-lg font-display font-bold text-white">
                        <i data-lucide="package" class="w-5 h-5 inline mr-2"></i>Famille de Produit
                    </h2>
                </div>
                <div class="p-4 sm:p-6">
                    <p class="text-sm text-gray-600 mb-3">Sélectionnez au moins une famille <span class="text-red-500">*</span></p>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                        <template x-for="family in productFamilies" :key="family.value">
                            <label class="flex items-center gap-2 p-3 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                                   :class="form.product_families.includes(family.value) ? 'border-boulanger-orange bg-orange-50' : 'border-gray-300'">
                                <input type="checkbox"
                                       :value="family.value"
                                       x-model="form.product_families"
                                       class="w-4 h-4 text-boulanger-orange focus:ring-boulanger-orange">
                                <span class="text-sm font-medium" x-text="family.label"></span>
                            </label>
                        </template>
                    </div>
                    <template x-if="errors.product_families">
                        <p class="mt-2 text-sm text-red-600" x-text="errors.product_families"></p>
                    </template>
                </div>
            </div>

            {{-- * Section 3 : Documents à Fournir --}}
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-boulanger-orange to-orange-500 px-4 py-3 sm:px-6">
                    <h2 class="text-lg font-display font-bold text-white">
                        <i data-lucide="file-check" class="w-5 h-5 inline mr-2"></i>Documents à Fournir
                    </h2>
                </div>
                <div class="p-4 sm:p-6">
                    <p class="text-sm text-gray-600 mb-3">Cochez les documents fournis par le client</p>
                    <div class="space-y-3">
                        <template x-for="doc in availableDocuments" :key="doc.value">
                            <label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                                   :class="form.documents.includes(doc.value) ? 'border-boulanger-orange bg-orange-50' : 'border-gray-300'">
                                <input type="checkbox"
                                       :value="doc.value"
                                       x-model="form.documents"
                                       class="w-5 h-5 text-boulanger-orange rounded focus:ring-boulanger-orange">
                                <span class="text-sm font-medium" x-text="doc.label"></span>
                            </label>
                        </template>
                    </div>
                    <p class="mt-3 text-xs text-gray-500 italic">
                        ⚠️ Rappel : CNI/Passeport, Carte bleue et RIB sont obligatoires.<br>
                        Si montant > 1000€ : Justificatif de domicile + revenu (< 3 mois)
                    </p>
                </div>
            </div>

            {{-- * Section 4 : Carte B+ --}}
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-boulanger-orange to-orange-500 px-4 py-3 sm:px-6">
                    <h2 class="text-lg font-display font-bold text-white">
                        <i data-lucide="credit-card" class="w-5 h-5 inline mr-2"></i>Carte B+
                    </h2>
                </div>
                <div class="p-4 sm:p-6">
                    <div class="space-y-3">
                        <label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                               :class="form.carte_b_plus === 'ouverture' ? 'border-boulanger-orange bg-orange-50' : 'border-gray-300'">
                            <input type="radio"
                                   value="ouverture"
                                   x-model="form.carte_b_plus"
                                   class="w-4 h-4 text-boulanger-orange focus:ring-boulanger-orange">
                            <span class="text-sm font-medium">Ouverture de la carte B+</span>
                        </label>
                        <label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                               :class="form.carte_b_plus === 'titulaire' ? 'border-boulanger-orange bg-orange-50' : 'border-gray-300'">
                            <input type="radio"
                                   value="titulaire"
                                   x-model="form.carte_b_plus"
                                   class="w-4 h-4 text-boulanger-orange focus:ring-boulanger-orange">
                            <span class="text-sm font-medium">Déjà titulaire d'une carte B+</span>
                        </label>
                        <label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                               :class="form.carte_b_plus === 'non' ? 'border-boulanger-orange bg-orange-50' : 'border-gray-300'">
                            <input type="radio"
                                   value="non"
                                   x-model="form.carte_b_plus"
                                   class="w-4 h-4 text-boulanger-orange focus:ring-boulanger-orange">
                            <span class="text-sm font-medium">Non</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- * Section 5 : Co-déclarant --}}
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-boulanger-orange to-orange-500 px-4 py-3 sm:px-6">
                    <h2 class="text-lg font-display font-bold text-white">
                        <i data-lucide="users" class="w-5 h-5 inline mr-2"></i>Co-déclarant
                    </h2>
                </div>
                <div class="p-4 sm:p-6">
                    <label class="flex items-center gap-3 mb-4 cursor-pointer">
                        <input type="checkbox"
                               x-model="form.has_co_declarant"
                               class="w-5 h-5 text-boulanger-orange rounded focus:ring-boulanger-orange">
                        <span class="font-semibold">Présence d'un co-déclarant</span>
                    </label>

                    <template x-if="form.has_co_declarant">
                        <div class="space-y-4 pl-0 sm:pl-8">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-1">
                                        Nom <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text"
                                           x-model="form.co_declarant_lastname"
                                           :required="form.has_co_declarant"
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-1">
                                        Prénom(s) <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text"
                                           x-model="form.co_declarant_firstname"
                                           :required="form.has_co_declarant"
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-1">
                                    Date de naissance <span class="text-red-500">*</span>
                                </label>
                                <input type="date"
                                       x-model="form.co_declarant_birthdate"
                                       :required="form.has_co_declarant"
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent">
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-1">
                                        Ville <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text"
                                           x-model="form.co_declarant_city"
                                           :required="form.has_co_declarant"
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-1">
                                        Pays <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text"
                                           x-model="form.co_declarant_country"
                                           :required="form.has_co_declarant"
                                           value="France"
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent">
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            {{-- * Section 6 : Financement --}}
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-boulanger-orange to-orange-500 px-4 py-3 sm:px-6">
                    <h2 class="text-lg font-display font-bold text-white">
                        <i data-lucide="euro" class="w-5 h-5 inline mr-2"></i>Financement
                    </h2>
                </div>
                <div class="p-4 sm:p-6 space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1">
                                Montant à financer (€) <span class="text-red-500">*</span>
                            </label>
                            <input type="number"
                                   step="0.01"
                                   x-model="form.amount"
                                   required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                                   placeholder="Ex: 1500.00">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1">
                                Apport (€)
                            </label>
                            <input type="number"
                                   step="0.01"
                                   x-model="form.deposit"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                                   placeholder="Ex: 300.00">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Type de financement <span class="text-red-500">*</span>
                        </label>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <template x-for="type in financingTypes" :key="type.value">
                                <label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                                       :class="form.financing_type === type.value ? 'border-boulanger-orange bg-orange-50' : 'border-gray-300'">
                                    <input type="radio"
                                           :value="type.value"
                                           x-model="form.financing_type"
                                           class="w-4 h-4 text-boulanger-orange focus:ring-boulanger-orange">
                                    <span class="text-sm font-medium" x-text="type.label"></span>
                                </label>
                            </template>
                        </div>
                    </div>

                    <template x-if="form.financing_type === 'autre'">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1">
                                Précisez <span class="text-red-500">*</span>
                            </label>
                            <input type="text"
                                   x-model="form.financing_other"
                                   :required="form.financing_type === 'autre'"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                                   placeholder="Type de financement">
                        </div>
                    </template>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">
                            Mensualité (€)
                        </label>
                        <input type="number"
                               step="0.01"
                               x-model="form.monthly_payment"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                               placeholder="Ex: 50">
                    </div>
                </div>
            </div>

            {{-- * Mention légale --}}
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
                <p class="text-sm text-yellow-800 italic">
                    ⚠️ Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.
                </p>
            </div>

            {{-- * Bouton d'envoi visible dans le flux --}}
            <div class="pb-20 sm:pb-6">
                <button @click="submitForm"
                        type="button"
                        :disabled="isSubmitting"
                        :class="isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-boulanger-orange hover:bg-orange-600'"
                        class="w-full text-white font-bold py-4 px-6 rounded-xl transition shadow-lg flex items-center justify-center gap-2">
                    <template x-if="!isSubmitting">
                        <span class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                            </svg>
                            Envoyer par Email
                        </span>
                    </template>
                    <template x-if="isSubmitting">
                        <span class="flex items-center gap-2">
                            <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            Envoi en cours...
                        </span>
                    </template>
                </button>
            </div>

        </form>
    </main>

    {{-- * Bouton fixe en bas pour mobile (Mobile-first) --}}
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-10 safe-area-bottom sm:hidden">
        <div class="max-w-4xl mx-auto px-4 py-3">
            <button @click="submitForm"
                    type="button"
                    :disabled="isSubmitting"
                    :class="isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-boulanger-orange hover:bg-orange-600'"
                    class="w-full text-white font-bold py-3.5 px-6 rounded-lg transition shadow-md flex items-center justify-center gap-2">
                <template x-if="!isSubmitting">
                    <span class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                        Envoyer
                    </span>
                </template>
                <template x-if="isSubmitting">
                    <span class="flex items-center gap-2">
                        <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Envoi en cours...
                    </span>
                </template>
            </button>
        </div>
    </div>
</div>
@endsection