@extends('layouts.shop')

@section('content')
<div x-data="shopPortal()" class="min-h-screen bg-gray-100">
    
    <!-- Page principale de recherche -->
    <div x-show="!showDetailsModal && !showRecordsModal && !showNewClientModal" class="h-screen flex flex-col">
        <!-- Header -->
        <div class="bg-gray-900 text-white px-6 py-4 flex items-center justify-between shrink-0">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center">
                    <i class="bi bi-search text-2xl"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold">Recherche Client</div>
                    <div class="text-gray-400">Portail Magasin</div>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <button type="button" 
                    @click="openNewClientModal()"
                    class="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-xl font-semibold transition flex items-center gap-2">
                    <i class="bi bi-person-plus text-xl"></i>
                    <span class="hidden sm:inline">Nouveau Client</span>
                </button>
                <form action="{{ route('shop.logout') }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="px-6 py-3 bg-red-500/20 hover:bg-red-500/30 text-red-300 rounded-xl font-semibold transition flex items-center gap-2">
                        <i class="bi bi-box-arrow-right text-xl"></i>
                        <span class="hidden sm:inline">Déconnexion</span>
                    </button>
                </form>
            </div>
        </div>
        
        <!-- Zone de recherche -->
        <div class="p-6 bg-white border-b border-gray-200">
            <div class="max-w-5xl mx-auto">
                <div class="grid lg:grid-cols-3 gap-4">
                    <div>
                        <label class="text-lg font-bold text-gray-900 mb-3 block">
                            <i class="bi bi-hash mr-2"></i>Préfixe châssis
                        </label>
                        <select x-model="searchPrefix" 
                            class="w-full text-xl px-5 py-4 rounded-xl border-2 border-gray-200 focus:border-gray-900 outline-0 bg-gray-50">
                            <option value="">Sélectionner...</option>
                            <template x-for="chassis in chassisList" :key="chassis.id">
                                <option :value="chassis.chassis_prefix" x-text="chassis.chassis_prefix + ' - ' + chassis.moto_title"></option>
                            </template>
                        </select>
                    </div>
                    <div>
                        <label class="text-lg font-bold text-gray-900 mb-3 block">
                            <i class="bi bi-123 mr-2"></i>Suite du numéro
                        </label>
                        <input type="text" x-model="searchSuffix" 
                            placeholder="Entrez les chiffres..."
                            class="w-full text-xl px-5 py-4 rounded-xl border-2 border-gray-200 focus:border-gray-900 outline-0 bg-gray-50"
                            @keyup.enter="searchClients()">
                    </div>
                    <div class="flex items-end">
                        <button type="button" 
                            @click="searchClients()"
                            :disabled="!searchPrefix || !searchSuffix"
                            class="w-full py-5 px-8 bg-gray-900 text-white rounded-xl font-bold text-xl hover:bg-black transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3">
                            <i class="bi bi-search text-2xl"></i>
                            Rechercher
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Résultats -->
        <div class="flex-1 overflow-y-auto p-6">
            <div class="max-w-5xl mx-auto">
                <!-- Message aucun résultat -->
                <div x-show="searchResults.length === 0 && hasSearched" class="text-center py-20">
                    <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-6">
                        <i class="bi bi-search text-4xl text-gray-400"></i>
                    </div>
                    <div class="text-2xl font-bold text-gray-400">Aucun client trouvé</div>
                    <div class="text-gray-400 mt-2">Vérifiez le numéro de châssis et réessayez</div>
                </div>
                
                <!-- Message initial -->
                <div x-show="!hasSearched" class="text-center py-20">
                    <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-6">
                        <i class="bi bi-person-search text-4xl text-gray-400"></i>
                    </div>
                    <div class="text-2xl font-bold text-gray-400">Recherchez un client</div>
                    <div class="text-gray-400 mt-2">Sélectionnez un préfixe et entrez la suite du numéro de châssis</div>
                </div>
                
                <!-- Résultats trouvés -->
                <div x-show="searchResults.length > 0" class="space-y-4">
                    <div class="text-lg font-bold text-gray-600 mb-4">
                        <span x-text="searchResults.length"></span> client<span x-show="searchResults.length > 1">s</span> trouvé<span x-show="searchResults.length > 1">s</span>
                    </div>
                    
                    <template x-for="client in searchResults" :key="client.id">
                        <div class="bg-white rounded-2xl border-2 border-gray-200 p-6 hover:border-gray-400 transition">
                            <div class="flex items-center gap-6">
                                <!-- Avatar -->
                                <div class="w-20 h-20 rounded-2xl bg-gray-100 flex items-center justify-center text-gray-700 font-bold text-2xl shrink-0"
                                    x-text="(client.first_name[0] || '').toUpperCase() + (client.last_name[0] || '').toUpperCase()">
                                </div>
                                
                                <!-- Infos -->
                                <div class="flex-1 min-w-0">
                                    <div class="text-2xl font-bold text-gray-900 truncate" x-text="client.first_name + ' ' + client.last_name"></div>
                                    <div class="text-lg text-gray-500 mt-1" x-text="client.chassis_number || client.identifier"></div>
                                    <div class="flex items-center gap-3 mt-2">
                                        <span class="text-sm text-gray-600" x-show="client.chassis">
                                            <i class="bi bi-bicycle mr-1"></i>
                                            <span x-text="client.chassis?.moto_title || 'N/A'"></span>
                                        </span>
                                        <span class="px-3 py-1 rounded-full text-sm font-bold"
                                            :class="client.account_type === 1 ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'"
                                            x-text="client.account_type === 1 ? 'Zone' : 'Hors zone'">
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- Boutons -->
                                <div class="flex gap-3 shrink-0">
                                    <button type="button" 
                                        @click="openDetailsModal(client)"
                                        class="w-16 h-16 rounded-xl bg-blue-100 text-blue-700 hover:bg-blue-200 flex items-center justify-center transition">
                                        <i class="bi bi-eye text-2xl"></i>
                                    </button>
                                    <button type="button"
                                        @click="openRecordsModal(client)"
                                        class="px-8 h-16 rounded-xl bg-emerald-500 text-white hover:bg-emerald-600 flex items-center justify-center gap-3 transition font-bold text-lg">
                                        <i class="bi bi-wrench-adjustable text-2xl"></i>
                                        <span class="hidden sm:inline">Entretiens</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Détails Client (Fullscreen) -->
    <div x-show="showDetailsModal" x-cloak class="fixed inset-0 z-50 bg-gray-100">
        <div class="h-full flex flex-col">
            <!-- Header -->
            <div class="bg-blue-600 text-white px-6 py-4 flex items-center justify-between shrink-0">
                <div class="flex items-center gap-4">
                    <button type="button" @click="closeDetailsModal()" class="w-14 h-14 rounded-xl bg-white/10 hover:bg-white/20 flex items-center justify-center transition">
                        <i class="bi bi-arrow-left text-2xl"></i>
                    </button>
                    <div>
                        <div class="text-2xl font-bold" x-text="detailsClient ? detailsClient.first_name + ' ' + detailsClient.last_name : ''"></div>
                        <div class="text-blue-200" x-text="detailsClient?.chassis_number || detailsClient?.identifier || ''"></div>
                    </div>
                </div>
                <div class="px-4 py-2 rounded-xl text-lg font-bold"
                    :class="detailsClient?.account_type === 1 ? 'bg-emerald-500' : 'bg-amber-500'"
                    x-text="detailsClient?.account_type === 1 ? 'Zone' : 'Hors zone'">
                </div>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-6">
                <div class="max-w-4xl mx-auto grid lg:grid-cols-2 gap-6">
                    <!-- Informations personnelles -->
                    <div class="bg-white rounded-2xl p-6 shadow-sm">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                            <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600">
                                <i class="bi bi-person text-2xl"></i>
                            </div>
                            Informations
                        </h3>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Nom</span>
                                <span class="font-bold text-xl" x-text="detailsClient?.last_name"></span>
                            </div>
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Prénom</span>
                                <span class="font-bold text-xl" x-text="detailsClient?.first_name"></span>
                            </div>
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Identifiant</span>
                                <span class="font-mono text-lg bg-gray-100 px-3 py-1 rounded-lg" x-text="detailsClient?.identifier"></span>
                            </div>
                            <div class="flex justify-between items-center py-4">
                                <span class="text-gray-600 text-lg">Mot de passe</span>
                                <span class="font-mono text-lg bg-gray-100 px-3 py-1 rounded-lg" x-text="detailsClient?.password"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Moto -->
                    <div class="bg-white rounded-2xl p-6 shadow-sm">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                            <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center text-purple-600">
                                <i class="bi bi-bicycle text-2xl"></i>
                            </div>
                            Moto
                        </h3>
                        <div x-show="detailsClient?.chassis" class="space-y-4">
                            <div class="flex gap-4 items-center mb-4" x-show="detailsClient?.chassis?.moto_primary_image">
                                <img :src="'/storage/' + (detailsClient?.chassis?.moto_primary_image || '')" 
                                    :alt="detailsClient?.chassis?.moto_title || 'Moto'"
                                    class="w-28 h-28 object-cover rounded-xl border-2 border-gray-200"
                                    onerror="this.style.display='none'">
                            </div>
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Modèle</span>
                                <span class="font-bold text-xl" x-text="detailsClient?.chassis?.moto_title || 'N/A'"></span>
                            </div>
                            <div class="flex justify-between items-center py-4">
                                <span class="text-gray-600 text-lg">N° Châssis</span>
                                <span class="font-bold text-xl" x-text="detailsClient?.chassis_number || detailsClient?.chassis?.chassis_prefix || 'N/A'"></span>
                            </div>
                        </div>
                        <div x-show="!detailsClient?.chassis" class="text-center py-12 text-gray-400">
                            <i class="bi bi-exclamation-circle text-4xl mb-3"></i>
                            <div class="text-lg">Aucune moto assignée</div>
                        </div>
                    </div>
                    
                    <!-- Garantie -->
                    <div class="bg-white rounded-2xl p-6 shadow-sm lg:col-span-2">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                            <div class="w-12 h-12 rounded-xl bg-emerald-100 flex items-center justify-center text-emerald-600">
                                <i class="bi bi-shield-check text-2xl"></i>
                            </div>
                            Garantie
                        </h3>
                        <div class="grid sm:grid-cols-3 gap-6">
                            <div class="bg-gray-50 rounded-xl p-5 text-center">
                                <div class="text-gray-500 mb-2">Durée</div>
                                <div class="text-3xl font-bold" x-text="(detailsClient?.warranty_months || 0) + ' mois'"></div>
                            </div>
                            <div class="bg-gray-50 rounded-xl p-5 text-center">
                                <div class="text-gray-500 mb-2">Date de vente</div>
                                <div class="text-3xl font-bold" x-text="formatDate(detailsClient?.sale_date)"></div>
                            </div>
                            <div class="rounded-xl p-5 text-center"
                                :class="warrantyStatus(detailsClient).class.replace('text-', 'text-').replace('bg-', 'bg-')">
                                <div class="opacity-70 mb-2">État</div>
                                <div class="text-xl font-bold" x-text="warrantyStatus(detailsClient).text"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white border-t border-gray-200 px-6 py-4 shrink-0">
                <div class="max-w-4xl mx-auto">
                    <button type="button" @click="closeDetailsModal()" 
                        class="w-full py-5 px-8 bg-gray-200 text-gray-800 rounded-xl font-bold text-xl hover:bg-gray-300 transition flex items-center justify-center gap-3">
                        <i class="bi bi-arrow-left text-2xl"></i>
                        Retour
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Liste Entretiens (Fullscreen) -->
    <div x-show="showRecordsModal" x-cloak class="fixed inset-0 z-50 bg-gray-100">
        <div class="h-full flex flex-col">
            <!-- Header -->
            <div class="bg-emerald-600 text-white px-6 py-4 flex items-center justify-between shrink-0">
                <div class="flex items-center gap-4">
                    <button type="button" @click="closeRecordsModal()" class="w-14 h-14 rounded-xl bg-white/10 hover:bg-white/20 flex items-center justify-center transition">
                        <i class="bi bi-arrow-left text-2xl"></i>
                    </button>
                    <div>
                        <div class="text-2xl font-bold">Entretiens</div>
                        <div class="text-emerald-200" x-text="selectedClient?.first_name + ' ' + selectedClient?.last_name"></div>
                    </div>
                </div>
                <button type="button" @click="openRecordForm()"
                    class="px-6 py-4 bg-white text-emerald-600 rounded-xl font-bold text-lg hover:bg-emerald-50 transition flex items-center gap-3">
                    <i class="bi bi-plus-lg text-2xl"></i>
                    <span class="hidden sm:inline">Ajouter</span>
                </button>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-6">
                <div class="max-w-4xl mx-auto">
                    <!-- Aucun entretien -->
                    <div x-show="clientRecords.length === 0" class="text-center py-20">
                        <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-6">
                            <i class="bi bi-clipboard-x text-4xl text-gray-400"></i>
                        </div>
                        <div class="text-2xl font-bold text-gray-400">Aucun entretien</div>
                        <div class="text-gray-400 mt-2">Ajoutez le premier entretien pour ce client</div>
                        <button type="button" @click="openRecordForm()"
                            class="mt-8 px-8 py-5 bg-emerald-500 text-white rounded-xl font-bold text-xl hover:bg-emerald-600 transition inline-flex items-center gap-3">
                            <i class="bi bi-plus-lg text-2xl"></i>
                            Ajouter un entretien
                        </button>
                    </div>
                    
                    <!-- Liste des entretiens -->
                    <div x-show="clientRecords.length > 0" class="space-y-4">
                        <!-- Prochain entretien prévu (kilométrage) -->
                        <div x-show="getNextServiceInfo() !== null" 
                            class="rounded-2xl p-6 flex items-center gap-4 border-2"
                            :class="{
                                'bg-red-50 border-red-200': getNextServiceInfo()?.status === 'late',
                                'bg-amber-50 border-amber-200': getNextServiceInfo()?.status === 'today',
                                'bg-emerald-50 border-emerald-200': getNextServiceInfo()?.status === 'upcoming'
                            }">
                            <div class="w-16 h-16 rounded-xl flex items-center justify-center shrink-0"
                                :class="{
                                    'bg-red-100 text-red-600': getNextServiceInfo()?.status === 'late',
                                    'bg-amber-100 text-amber-600': getNextServiceInfo()?.status === 'today',
                                    'bg-emerald-100 text-emerald-600': getNextServiceInfo()?.status === 'upcoming'
                                }">
                                <i class="bi text-3xl"
                                    :class="{
                                        'bi-exclamation-triangle': getNextServiceInfo()?.status === 'late',
                                        'bi-alarm': getNextServiceInfo()?.status === 'today',
                                        'bi-check-circle': getNextServiceInfo()?.status === 'upcoming'
                                    }"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-lg font-bold"
                                    :class="{
                                        'text-red-800': getNextServiceInfo()?.status === 'late',
                                        'text-amber-800': getNextServiceInfo()?.status === 'today',
                                        'text-emerald-800': getNextServiceInfo()?.status === 'upcoming'
                                    }">Prochain entretien</div>
                                <div :class="{
                                        'text-red-600': getNextServiceInfo()?.status === 'late',
                                        'text-amber-600': getNextServiceInfo()?.status === 'today',
                                        'text-emerald-600': getNextServiceInfo()?.status === 'upcoming'
                                    }">
                                    <div class="font-bold text-2xl" x-text="getNextServiceInfo()?.value ? 'À ' + getNextServiceInfo().value + ' km' : (getNextServiceInfo()?.status === 'today' ? 'Aujourd\'hui' : '')"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Entretiens -->
                        <template x-for="(record, index) in clientRecords" :key="record.id">
                            <div class="bg-white rounded-2xl border-2 border-gray-200 overflow-hidden">
                                <div class="p-6">
                                    <div class="flex items-start gap-4">
                                        <!-- Date -->
                                        <div class="w-20 h-20 rounded-xl bg-gray-100 flex flex-col items-center justify-center shrink-0">
                                            <div class="text-3xl font-bold text-gray-800" x-text="formatDateDay(record.service_date)"></div>
                                            <div class="text-sm text-gray-500" x-text="formatDateMonthYear(record.service_date)"></div>
                                        </div>
                                        
                                        <!-- Infos -->
                                        <div class="flex-1 min-w-0">
                                            <div class="text-xl font-bold text-gray-900">
                                                <span class="text-red-600" x-text="record.mileage + ' km'"></span>
                                            </div>
                                            <div class="text-gray-600 mt-1">
                                                <span x-text="(record.parts?.length || 0) + ' remplacement' + ((record.parts?.length || 0) > 1 ? 's' : '')"></span>
                                            </div>
                                            <div class="flex flex-wrap gap-2 mt-3">
                                                <span class="px-3 py-1 rounded-full text-sm font-bold"
                                                    :class="record.payment_status === 0 ? 'bg-amber-100 text-amber-800' : record.payment_status === 1 ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'"
                                                    x-text="record.payment_status === 0 ? 'Garantie' : record.payment_status === 1 ? 'Payé' : 'Non payé'">
                                                </span>
                                                <span class="px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-600">
                                                    <i class="bi mr-1" :class="record.shop_name ? 'bi-shop' : 'bi-person'"></i>
                                                    Fait par: <span x-text="record.shop_name || 'lui-même'"></span>
                                                </span>
                                            </div>
                                            <div class="mt-2">
                                                <p class="text-gray-500 text-sm mt-1" x-show="clientRecords[index + 1] && clientRecords[index + 1].next_service_mileage !== undefined && clientRecords[index + 1].next_service_mileage !== null">
                                                    Était prévu : <span class="font-bold text-[#6B7280]" x-text="'À ' + clientRecords[index + 1].next_service_mileage + ' km'"></span>
                                                    <span x-show="record.mileage !== undefined && clientRecords[index + 1] && clientRecords[index + 1].next_service_mileage !== undefined && (record.mileage - clientRecords[index + 1].next_service_mileage) > 0" class="ml-2 text-red-600 font-bold">
                                                        (retard: <span x-text="record.mileage - clientRecords[index + 1].next_service_mileage"></span>km)
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                        
                                        <!-- Actions -->
                                        <div class="flex gap-3 shrink-0">
                                            <button type="button" 
                                                x-show="record.proof_image"
                                                @click="viewProofImage(record.proof_image)"
                                                class="w-14 h-14 rounded-xl bg-purple-100 text-purple-700 hover:bg-purple-200 flex items-center justify-center transition"
                                                title="Voir la preuve">
                                                <i class="bi bi-file-earmark-image text-xl"></i>
                                            </button>
                                            <button type="button" 
                                                @click="viewRecordDetails(record)"
                                                class="w-14 h-14 rounded-xl bg-blue-100 text-blue-700 hover:bg-blue-200 flex items-center justify-center transition">
                                                <i class="bi bi-eye text-xl"></i>
                                            </button>
                                            <button type="button" 
                                                @click="record.maint_shop_id === shopId && openRecordForm(record)"
                                                :class="record.maint_shop_id !== shopId ? 'opacity-40 cursor-not-allowed' : ''"
                                                class="w-14 h-14 rounded-xl bg-amber-100 text-amber-700 hover:bg-amber-200 flex items-center justify-center transition"
                                                :title="record.maint_shop_id !== shopId ? 'Vous ne pouvez modifier que vos entretiens' : 'Modifier'">
                                                <i class="bi bi-pencil text-xl"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Prochain entretien prévu -->
                                <div x-show="record.next_service_date" 
                                    class="px-6 py-3 border-t flex items-center justify-between"
                                    :class="{
                                        'bg-emerald-50 border-emerald-200': getMaintenanceStatus(record, index)?.status === 'early',
                                        'bg-blue-50 border-blue-200': getMaintenanceStatus(record, index)?.status === 'ontime',
                                        'bg-red-50 border-red-200': getMaintenanceStatus(record, index)?.status === 'late',
                                        'bg-gray-50 border-gray-200': !getMaintenanceStatus(record, index)
                                    }">
                                    <div class="flex items-center gap-2"
                                        :class="{
                                            'text-emerald-700': getMaintenanceStatus(record, index)?.status === 'early',
                                            'text-blue-700': getMaintenanceStatus(record, index)?.status === 'ontime',
                                            'text-red-700': getMaintenanceStatus(record, index)?.status === 'late',
                                            'text-gray-600': !getMaintenanceStatus(record, index)
                                        }">
                                        <i class="bi bi-calendar-event"></i>
                                        <span>Prochain prévu le</span>
                                        <span class="font-bold" x-text="formatDate(record.next_service_date)"></span>
                                    </div>
                                    <div x-show="getMaintenanceStatus(record, index)" class="flex items-center gap-2">
                                        <span class="px-3 py-1 rounded-full text-sm font-bold"
                                            :class="{
                                                'bg-emerald-100 text-emerald-800': getMaintenanceStatus(record, index)?.status === 'early',
                                                'bg-blue-100 text-blue-800': getMaintenanceStatus(record, index)?.status === 'ontime',
                                                'bg-red-100 text-red-800': getMaintenanceStatus(record, index)?.status === 'late'
                                            }">
                                            <i class="bi mr-1"
                                                :class="{
                                                    'bi-check-circle': getMaintenanceStatus(record, index)?.status === 'early' || getMaintenanceStatus(record, index)?.status === 'ontime',
                                                    'bi-exclamation-circle': getMaintenanceStatus(record, index)?.status === 'late'
                                                }"></i>
                                            <span x-text="getMaintenanceStatus(record, index)?.text"></span>
                                            <span x-show="record.next_service_mileage !== undefined && record.next_service_mileage !== null && getMaintenanceStatus(record, index)?.value">
                                                de <span x-text="getMaintenanceStatus(record, index)?.value"></span> km
                                            </span>
                                            <span x-show="getMaintenanceStatus(record, index)?.days > 0">
                                                de <span x-text="getMaintenanceStatus(record, index)?.days"></span>j
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white border-t border-gray-200 px-6 py-4 shrink-0">
                <div class="max-w-4xl mx-auto">
                    <button type="button" @click="closeRecordsModal()" 
                        class="w-full py-5 px-8 bg-gray-200 text-gray-800 rounded-xl font-bold text-xl hover:bg-gray-300 transition flex items-center justify-center gap-3">
                        <i class="bi bi-arrow-left text-2xl"></i>
                        Retour
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Détails Entretien (Fullscreen) -->
    <div x-show="showRecordDetails" x-cloak class="fixed inset-0 z-[60] bg-gray-100">
        <div class="h-full flex flex-col">
            <!-- Header -->
            <div class="bg-blue-600 text-white px-6 py-4 flex items-center justify-between shrink-0">
                <div class="flex items-center gap-4">
                    <button type="button" @click="closeRecordDetails()" class="w-14 h-14 rounded-xl bg-white/10 hover:bg-white/20 flex items-center justify-center transition">
                        <i class="bi bi-arrow-left text-2xl"></i>
                    </button>
                    <div>
                        <div class="text-2xl font-bold" x-text="'Entretien N°' + (viewingRecord?.id || '')"></div>
                        <div class="text-blue-200" x-text="formatDate(viewingRecord?.service_date)"></div>
                    </div>
                </div>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-6">
                <div class="max-w-4xl mx-auto grid lg:grid-cols-2 gap-6">
                    <!-- Informations Générales -->
                    <div class="bg-white rounded-2xl p-6 shadow-sm">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                            <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600">
                                <i class="bi bi-info-circle text-2xl"></i>
                            </div>
                            Informations
                        </h3>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Fait le</span>
                                <span class="font-bold text-xl" x-text="formatDate(viewingRecord?.service_date)"></span>
                            </div>
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Kilométrage</span>
                                <span class="font-bold text-xl text-red-600" x-text="(viewingRecord?.mileage || 0) + ' km'"></span>
                            </div>
                            <div class="flex justify-between items-center py-4 border-b border-gray-100" x-show="getPreviousRecord(viewingRecord) && getPreviousRecord(viewingRecord).next_service_mileage !== undefined && getPreviousRecord(viewingRecord).next_service_mileage !== null">
                                <span class="text-gray-600 text-lg">Était prévu</span>
                                <span class="font-bold text-xl text-[#6B7280]">
                                    <span x-text="'À ' + getPreviousRecord(viewingRecord).next_service_mileage + ' km'"></span>
                                    <span x-show="(viewingRecord?.mileage || 0) - getPreviousRecord(viewingRecord).next_service_mileage > 0" class="ml-2 text-red-600 font-bold">(retard: <span x-text="(viewingRecord?.mileage || 0) - getPreviousRecord(viewingRecord).next_service_mileage"></span>km)</span>
                                </span>
                            </div>
                            <!-- 'Prévu le' removed as requested -->
                            <div class="flex justify-between items-center py-4 border-b border-gray-100" x-show="viewingRecord?.next_service_date">
                                <span class="text-gray-600 text-lg">Prochain</span>
                                <span class="font-bold text-xl text-emerald-600" x-text="formatDate(viewingRecord?.next_service_date)"></span>
                            </div>
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Paiement</span>
                                <span class="px-4 py-2 rounded-xl font-bold"
                                    :class="viewingRecord?.payment_status === 0 ? 'bg-amber-100 text-amber-800' : viewingRecord?.payment_status === 1 ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'"
                                    x-text="viewingRecord?.payment_status === 0 ? 'Garantie' : viewingRecord?.payment_status === 1 ? 'Payé' : 'Non payé'">
                                </span>
                            </div>
                            <div class="flex justify-between items-center py-4 border-b border-gray-100">
                                <span class="text-gray-600 text-lg">Garantie</span>
                                <span class="px-4 py-2 rounded-xl font-bold"
                                    :class="viewingRecord?.warranty_void ? 'bg-red-100 text-red-800' : 'bg-emerald-100 text-emerald-800'"
                                    x-text="viewingRecord?.warranty_void ? 'Terminé' : 'Intacte'">
                                </span>
                            </div>
                            <div class="flex justify-between items-center py-4" x-show="viewingRecord?.shop">
                                <span class="text-gray-600 text-lg">Magasin</span>
                                <span class="font-bold text-xl" x-text="viewingRecord?.shop?.name || 'N/A'"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Détails intervention -->
                    <div class="bg-white rounded-2xl p-6 shadow-sm">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                            <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center text-purple-600">
                                <i class="bi bi-tools text-2xl"></i>
                            </div>
                            Intervention
                        </h3>
                        
                        <!-- Commentaire -->
                        <div class="mb-6">
                            <div class="text-gray-500 mb-2">Commentaire</div>
                            <div x-show="viewingRecord?.comment" class="bg-gray-50 rounded-xl p-4 text-lg italic text-gray-700" x-text="'\"' + (viewingRecord?.comment || '') + '\"'"></div>
                            <div x-show="!viewingRecord?.comment" class="bg-gray-50 rounded-xl p-4 text-gray-400">Aucun commentaire</div>
                        </div>
                        
                        <!-- Preuve d'entretien -->
                        <div x-show="viewingRecord?.proof_image" class="mb-6">
                            <div class="text-gray-500 mb-2">Preuve d'entretien</div>
                            <div @click="viewProofImage(viewingRecord.proof_image)" class="cursor-pointer">
                                <img :src="viewingRecord.proof_image" alt="Preuve d'entretien" class="w-full rounded-xl border-2 border-gray-200 hover:border-blue-400 transition">
                            </div>
                        </div>
                        
                        <!-- Remplacements -->
                        <div>
                            <div class="text-gray-500 mb-3">Remplacements effectués</div>
                            <div x-show="viewingRecord?.parts?.length > 0" class="space-y-2">
                                <template x-for="part in viewingRecord?.parts || []" :key="part.id">
                                    <div class="bg-blue-50 rounded-xl px-4 py-3 font-semibold text-blue-800 flex items-center gap-2">
                                        <i class="bi bi-check-circle"></i>
                                        <span x-text="part.name"></span>
                                    </div>
                                </template>
                            </div>
                            <div x-show="!viewingRecord?.parts?.length" class="bg-gray-50 rounded-xl p-4 text-gray-400">Aucun remplacement</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white border-t border-gray-200 px-6 py-4 shrink-0">
                <div class="max-w-4xl mx-auto">
                    <button type="button" @click="closeRecordDetails()" 
                        class="w-full py-5 px-8 bg-gray-200 text-gray-800 rounded-xl font-bold text-xl hover:bg-gray-300 transition flex items-center justify-center gap-3">
                        <i class="bi bi-arrow-left text-2xl"></i>
                        Retour
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Image Preuve (Lightbox) -->
    <div x-show="showProofImageModal" x-cloak class="fixed inset-0 z-[70] bg-black/90 flex items-center justify-center p-6" @click="closeProofImage()">
        <div class="relative max-w-5xl max-h-[90vh] w-full" @click.stop>
            <button type="button" @click="closeProofImage()" class="absolute -top-12 right-0 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <img :src="proofImageUrl" alt="Preuve d'entretien" class="w-full h-auto max-h-[90vh] object-contain rounded-xl">
        </div>
    </div>

    <!-- Modal Formulaire Entretien (Fullscreen POS Style) -->
    <div x-show="showRecordForm" x-cloak class="fixed inset-0 z-[60] bg-gray-100">
        <div class="h-full flex flex-col">
            <!-- Header -->
            <div class="bg-gray-900 text-white px-6 py-4 flex items-center justify-between shrink-0">
                <div class="flex items-center gap-4">
                    <button type="button" @click="closeRecordForm()" class="w-14 h-14 rounded-xl bg-white/10 hover:bg-white/20 flex items-center justify-center transition">
                        <i class="bi bi-arrow-left text-2xl"></i>
                    </button>
                    <div>
                        <div class="text-2xl font-bold" x-text="modalRecord?.id ? 'Modifier entretien' : 'Nouvel entretien'"></div>
                        <div class="flex items-center gap-3">
                            <span class="text-gray-400" x-text="selectedClient?.first_name + ' ' + selectedClient?.last_name"></span>
                            <span class="text-gray-400 text-sm">Garantie:</span>
                            <span class="px-3 py-1 rounded-lg text-sm font-bold"
                                :class="warrantyStatus(selectedClient).class"
                                x-text="warrantyStatus(selectedClient).text"></span>
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-gray-400 text-sm">Date</div>
                    <div class="text-xl font-bold" x-text="formatDate(new Date().toISOString().split('T')[0])"></div>
                </div>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-6">
                <div class="max-w-5xl mx-auto grid lg:grid-cols-2 gap-6">
                    <!-- Colonne Gauche - Infos principales -->
                    <div class="space-y-6">
                        <!-- Kilométrage -->
                        <div class="bg-white rounded-2xl p-6 shadow-sm">
                            <label class="text-lg font-bold text-gray-900 mb-4 block">
                                <i class="bi bi-speedometer2 mr-2"></i>Kilométrage <span class="text-red-600">*</span>
                            </label>
                            <input type="number" x-model.number="modalRecord.mileage" min="0" 
                                class="w-full text-3xl font-bold text-center px-6 py-5 rounded-xl border-2 border-gray-200 focus:border-gray-900 outline-0"
                                :class="recordErrors.mileage ? 'border-red-500' : ''"
                                placeholder="0">
                            <p class="text-red-600 mt-2 text-center" x-text="recordErrors.mileage" x-show="recordErrors.mileage"></p>
                        </div>

                        <div class="bg-white rounded-2xl p-6 shadow-sm flex gap-4">
                            <button type="button" @click="!isWarrantyExpired(selectedClient) && (modalRecord.payment_status = 0)"
                                :disabled="isWarrantyExpired(selectedClient)"
                                class="flex-1 py-5 px-4 rounded-xl text-center font-bold text-lg transition border-2"
                                :class="{
                                    'bg-amber-500 text-white border-amber-600': modalRecord.payment_status === 0,
                                    'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200': modalRecord.payment_status !== 0 && !isWarrantyExpired(selectedClient),
                                    'bg-gray-200 text-gray-400 border-gray-300 cursor-not-allowed opacity-50': isWarrantyExpired(selectedClient)
                                }">
                                <i class="bi bi-shield-check text-2xl block mb-2"></i>
                                Garantie
                            </button>
                            <button type="button" @click="modalRecord.payment_status = 1"
                                class="flex-1 py-5 px-4 rounded-xl text-center font-bold text-lg transition border-2"
                                :class="modalRecord.payment_status === 1 ? 'bg-emerald-500 text-white border-emerald-600' : 'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200'">
                                <i class="bi bi-check-circle text-2xl block mb-2"></i>
                                Payé
                            </button>
                            <button type="button" @click="modalRecord.payment_status = 2"
                                class="flex-1 py-5 px-4 rounded-xl text-center font-bold text-lg transition border-2"
                                :class="modalRecord.payment_status === 2 ? 'bg-red-500 text-white border-red-600' : 'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200'">
                                <i class="bi bi-x-circle text-2xl block mb-2"></i>
                                Non payé
                            </button>
                        </div>

                        <!-- Prochain entretien -->
                        <div class="bg-white rounded-2xl p-6 shadow-sm">
                            <label class="text-lg font-bold text-gray-900 mb-4 block">
                                <i class="bi bi-speedometer2 mr-2"></i>Prochain entretien (km prévu)
                            </label>
                            <input type="number" x-model.number="modalRecord.next_service_mileage" min="0"
                                placeholder="Ex: 20000"
                                class="w-full text-xl px-6 py-4 rounded-xl border-2 border-gray-200 focus:border-gray-900 outline-0">
                            <p class="text-red-600 mt-2" x-text="recordErrors.next_service_mileage ? recordErrors.next_service_mileage[0] : ''" x-show="recordErrors.next_service_mileage"></p>
                        </div>
                        
                        <!-- Annuler garantie -->
                        <div class="bg-white rounded-2xl p-6 shadow-sm">
                            <button type="button" @click="!isWarrantyExpired(selectedClient) && (modalRecord.warranty_void = !modalRecord.warranty_void)"
                                :disabled="isWarrantyExpired(selectedClient)"
                                class="w-full py-5 px-6 rounded-xl text-left font-bold text-lg transition border-2 flex items-center justify-between"
                                :class="{
                                    'bg-red-500 text-white border-red-600': modalRecord.warranty_void && !isWarrantyExpired(selectedClient),
                                    'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200': !modalRecord.warranty_void && !isWarrantyExpired(selectedClient),
                                    'bg-gray-200 text-gray-400 border-gray-300 cursor-not-allowed opacity-50': isWarrantyExpired(selectedClient)
                                }">
                                <span class="flex items-center gap-3">
                                    <i class="bi bi-shield-x text-2xl"></i>
                                    Annuler la garantie
                                </span>
                                <div class="w-8 h-8 rounded-lg flex items-center justify-center"
                                    :class="modalRecord.warranty_void && !isWarrantyExpired(selectedClient) ? 'bg-white/20' : 'bg-gray-300'">
                                    <i class="bi" :class="modalRecord.warranty_void && !isWarrantyExpired(selectedClient) ? 'bi-check-lg text-white' : 'bi-x-lg text-gray-500'"></i>
                                </div>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Colonne Droite - Pièces et commentaire -->
                    <div class="space-y-6">
                        <!-- Pièces remplacées -->
                        <div class="bg-white rounded-2xl p-6 shadow-sm">
                            <label class="text-lg font-bold text-gray-900 mb-4 block">
                                <i class="bi bi-gear mr-2"></i>Pièces remplacées
                            </label>
                            <div class="grid grid-cols-2 gap-3 overflow-y-auto">
                                <template x-for="part in partsList" :key="part.id">
                                    <button type="button" @click="togglePart(part.id)"
                                        class="py-4 px-4 rounded-xl text-left font-semibold transition border-2 flex items-center gap-3"
                                        :class="modalRecord.part_ids.includes(part.id) ? 'bg-blue-500 text-white border-blue-600' : 'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200'">
                                        <div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
                                            :class="modalRecord.part_ids.includes(part.id) ? 'bg-white/20' : 'bg-white border border-gray-300'">
                                            <i class="bi bi-check-lg" x-show="modalRecord.part_ids.includes(part.id)"></i>
                                        </div>
                                        <span x-text="part.name" class="truncate"></span>
                                    </button>
                                </template>
                            </div>
                            <div x-show="partsList.length === 0" class="text-gray-400 text-center py-8">
                                Aucune pièce configurée
                            </div>
                        </div>
                        
                        <!-- Commentaire -->
                        <div class="bg-white rounded-2xl p-6 shadow-sm">
                            <label class="text-lg font-bold text-gray-900 mb-4 block">
                                <i class="bi bi-chat-left-text mr-2"></i>Commentaire
                            </label>
                            <textarea x-model="modalRecord.comment" rows="4" 
                                class="w-full text-lg px-5 py-4 rounded-xl border-2 border-gray-200 focus:border-gray-900 outline-0 resize-none"
                                placeholder="Ajouter une note..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Footer Actions -->
            <div class="bg-white border-t border-gray-200 px-6 py-4 shrink-0">
                <div class="max-w-5xl mx-auto flex gap-4">
                    <button type="button" @click="closeRecordForm()" 
                        class="flex-1 py-5 px-8 bg-gray-200 text-gray-800 rounded-xl font-bold text-xl hover:bg-gray-300 transition flex items-center justify-center gap-3">
                        <i class="bi bi-x-lg text-2xl"></i>
                        Annuler
                    </button>
                    <button type="button" @click="submitRecord()"
                        class="flex-[2] py-5 px-8 bg-emerald-500 text-white rounded-xl font-bold text-xl hover:bg-emerald-600 transition flex items-center justify-center gap-3">
                        <i class="bi bi-check-lg text-2xl"></i>
                        Enregistrer l'entretien
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Nouveau Client (Fullscreen) -->
    <div x-show="showNewClientModal" x-cloak class="fixed inset-0 z-50 bg-gray-100">
        <div class="h-full flex flex-col">
            <!-- Header -->
            <div class="bg-emerald-600 text-white px-6 py-4 flex items-center justify-between shrink-0">
                <div class="flex items-center gap-4">
                    <button type="button" @click="closeNewClientModal()" class="w-14 h-14 rounded-xl bg-white/10 hover:bg-white/20 flex items-center justify-center transition">
                        <i class="bi bi-arrow-left text-2xl"></i>
                    </button>
                    <div>
                        <div class="text-2xl font-bold">Nouveau Client</div>
                        <div class="text-emerald-200">Remplir les informations</div>
                    </div>
                </div>
                <div class="px-4 py-2 rounded-xl bg-white/10 text-lg font-bold">
                    <i class="bi bi-person-plus mr-2"></i>Création
                </div>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-6">
                <div class="max-w-4xl mx-auto">
                    <div class="bg-white rounded-2xl p-8 shadow-sm">
                        
                        <!-- Message succès -->
                        <div x-show="newClientSuccess" class="mb-8 p-6 bg-emerald-50 border-2 border-emerald-200 rounded-xl">
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 rounded-xl bg-emerald-500 flex items-center justify-center text-white shrink-0">
                                    <i class="bi bi-check-lg text-2xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="text-xl font-bold text-emerald-900 mb-2">Client créé avec succès !</div>
                                    <div class="text-emerald-700 space-y-2">
                                        <p>Le client <strong x-text="createdClient?.first_name + ' ' + createdClient?.last_name"></strong> a été créé.</p>
                                        <p class="text-sm mt-3">✓ Le client peut maintenant se connecter à l'application mobile avec son identifiant et mot de passe.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Formulaire -->
                        <div class="space-y-6">
                            <!-- Nom et Prénom -->
                            <div class="grid md:grid-cols-2 gap-6">
                                <div>
                                    <label class="text-lg font-bold text-gray-900 mb-3 block">
                                        <i class="bi bi-person mr-2"></i>Prénom *
                                    </label>
                                    <input type="text" x-model="newClient.first_name" 
                                        placeholder="Ex: Jean"
                                        class="w-full text-xl px-5 py-4 rounded-xl border-2 focus:border-emerald-500 outline-0 bg-gray-50"
                                        :class="newClientErrors.first_name ? 'border-red-300' : 'border-gray-200'">
                                    <div x-show="newClientErrors.first_name" class="text-red-600 text-sm mt-2" x-text="newClientErrors.first_name?.[0]"></div>
                                </div>
                                <div>
                                    <label class="text-lg font-bold text-gray-900 mb-3 block">
                                        <i class="bi bi-person mr-2"></i>Nom *
                                    </label>
                                    <input type="text" x-model="newClient.last_name" 
                                        placeholder="Ex: Dupont"
                                        class="w-full text-xl px-5 py-4 rounded-xl border-2 focus:border-emerald-500 outline-0 bg-gray-50"
                                        :class="newClientErrors.last_name ? 'border-red-300' : 'border-gray-200'">
                                    <div x-show="newClientErrors.last_name" class="text-red-600 text-sm mt-2" x-text="newClientErrors.last_name?.[0]"></div>
                                </div>
                            </div>

                            <!-- Identifiant et Mot de passe -->
                            <div class="grid md:grid-cols-2 gap-6">
                                <div>
                                    <label class="text-lg font-bold text-gray-900 mb-3 block">
                                        <i class="bi bi-person-badge mr-2"></i>Identifiant *
                                    </label>
                                    <input type="text" x-model="newClient.identifier" 
                                        @input="checkIdentifierAvailability()"
                                        placeholder="Ex: jdupont"
                                        class="w-full text-xl px-5 py-4 rounded-xl border-2 focus:border-emerald-500 outline-0 bg-gray-50"
                                        :class="newClientErrors.identifier ? 'border-red-300' : (identifierChecked && identifierAvailable ? 'border-emerald-300' : 'border-gray-200')">
                                    <div x-show="identifierChecked && !identifierAvailable" class="text-red-600 text-sm mt-2">
                                        <i class="bi bi-x-circle mr-1"></i>Cet identifiant est déjà utilisé
                                    </div>
                                    <div x-show="identifierChecked && identifierAvailable && newClient.identifier" class="text-emerald-600 text-sm mt-2">
                                        <i class="bi bi-check-circle mr-1"></i>Identifiant disponible
                                    </div>
                                    <div x-show="newClientErrors.identifier" class="text-red-600 text-sm mt-2" x-text="newClientErrors.identifier?.[0]"></div>
                                </div>
                                <div>
                                    <label class="text-lg font-bold text-gray-900 mb-3 block">
                                        <i class="bi bi-key mr-2"></i>Mot de passe *
                                    </label>
                                    <input type="text" x-model="newClient.password" 
                                        placeholder="Ex: 123456"
                                        class="w-full text-xl px-5 py-4 rounded-xl border-2 focus:border-emerald-500 outline-0 bg-gray-50"
                                        :class="newClientErrors.password ? 'border-red-300' : 'border-gray-200'">
                                    <div x-show="newClientErrors.password" class="text-red-600 text-sm mt-2" x-text="newClientErrors.password?.[0]"></div>
                                </div>
                            </div>

                            <!-- Modèle de moto -->
                            <div>
                                <label class="text-lg font-bold text-gray-900 mb-3 block">
                                    <i class="bi bi-bicycle mr-2"></i>Modèle de moto *
                                </label>
                                <select x-model="newClient.maint_chassis_id" 
                                    @change="updateChassisPrefix()"
                                    class="w-full text-xl px-5 py-4 rounded-xl border-2 focus:border-emerald-500 outline-0 bg-gray-50"
                                    :class="newClientErrors.maint_chassis_id ? 'border-red-300' : 'border-gray-200'">
                                    <option value="">Sélectionner un modèle...</option>
                                    <template x-for="chassis in chassisList" :key="chassis.id">
                                        <option :value="chassis.id" x-text="chassis.chassis_prefix + ' - ' + chassis.moto_title"></option>
                                    </template>
                                </select>
                                <div x-show="newClientErrors.maint_chassis_id" class="text-red-600 text-sm mt-2" x-text="newClientErrors.maint_chassis_id?.[0]"></div>
                            </div>

                            <!-- Numéro de châssis -->
                            <div>
                                <label class="text-lg font-bold text-gray-900 mb-3 block">
                                    <i class="bi bi-hash mr-2"></i>Numéro de châssis complet *
                                </label>
                                <div class="flex gap-3">
                                    <input type="text" x-model="chassisPrefixDisplay" 
                                        disabled
                                        placeholder="Préfixe"
                                        class="w-32 text-xl px-5 py-4 rounded-xl border-2 border-gray-200 outline-0 bg-gray-200 text-gray-600">
                                    <input type="text" x-model="newClient.chassis_suffix" 
                                        @input="updateFullChassisNumber()"
                                        placeholder="Ex: 12345"
                                        class="flex-1 text-xl px-5 py-4 rounded-xl border-2 focus:border-emerald-500 outline-0 bg-gray-50"
                                        :class="newClientErrors.chassis_number ? 'border-red-300' : 'border-gray-200'">
                                </div>
                                <div x-show="newClient.chassis_number" class="text-gray-600 mt-2 text-sm">
                                    Numéro complet: <strong x-text="newClient.chassis_number"></strong>
                                </div>
                                <div x-show="newClientErrors.chassis_number" class="text-red-600 text-sm mt-2" x-text="newClientErrors.chassis_number?.[0]"></div>
                            </div>

                            <!-- Type de compte -->
                            <div>
                                <label class="text-lg font-bold text-gray-900 mb-3 block">
                                    <i class="bi bi-shield-check mr-2"></i>Type de compte *
                                </label>
                                <div class="grid grid-cols-2 gap-4">
                                    <button type="button" @click="newClient.account_type = 2"
                                        class="py-4 px-6 rounded-xl border-2 font-bold text-lg transition"
                                        :class="newClient.account_type === 2 ? 'border-amber-500 bg-amber-50 text-amber-700' : 'border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300'">
                                        <i class="bi bi-x-circle mr-2"></i>Hors zone
                                    </button>
                                    <button type="button" @click="newClient.account_type = 1"
                                        class="py-4 px-6 rounded-xl border-2 font-bold text-lg transition"
                                        :class="newClient.account_type === 1 ? 'border-emerald-500 bg-emerald-50 text-emerald-700' : 'border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300'">
                                        <i class="bi bi-check-circle mr-2"></i>Zone
                                    </button>
                                </div>
                                <div x-show="newClientErrors.account_type" class="text-red-600 text-sm mt-2" x-text="newClientErrors.account_type?.[0]"></div>
                            </div>

                            <!-- Garantie (optionnel) -->
                            <div class="border-t-2 border-gray-100 pt-6">
                                <h4 class="text-lg font-bold text-gray-700 mb-4">Informations garantie (optionnel)</h4>
                                
                                <div class="mb-4">
                                    <label class="text-sm font-semibold text-gray-600 mb-3 block">Date de vente</label>
                                    <input type="date" x-model="newClient.sale_date" 
                                        class="w-full text-lg px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-emerald-500 outline-0 bg-gray-50">
                                </div>

                                <div>
                                    <label class="text-sm font-semibold text-gray-600 mb-3 block">Plan de garantie</label>
                                    <div class="grid grid-cols-2 gap-4">
                                        <button type="button"
                                            @click="newClient.warranty_months = 12; newClient.warranty_km = 10000;"
                                            class="relative flex flex-col items-center justify-center p-6 rounded-xl border-2 transition-all"
                                            :class="newClient.warranty_months === 12 && newClient.warranty_km === 10000 
                                                ? 'border-emerald-500 bg-emerald-50' 
                                                : 'border-gray-200 hover:border-gray-300 bg-gray-50'">
                                            <div class="absolute top-3 right-3">
                                                <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition"
                                                    :class="newClient.warranty_months === 12 && newClient.warranty_km === 10000 
                                                        ? 'border-emerald-500 bg-emerald-500' 
                                                        : 'border-gray-300'">
                                                    <i class="bi bi-check-lg text-white text-sm"
                                                        x-show="newClient.warranty_months === 12 && newClient.warranty_km === 10000"></i>
                                                </div>
                                            </div>
                                            <div class="text-4xl font-bold text-gray-900 mb-1">12</div>
                                            <div class="text-sm text-gray-600 mb-2">mois</div>
                                            <div class="text-xl font-bold text-emerald-600">10 000 km</div>
                                        </button>
                                        
                                        <button type="button"
                                            @click="newClient.warranty_months = 24; newClient.warranty_km = 20000;"
                                            class="relative flex flex-col items-center justify-center p-6 rounded-xl border-2 transition-all"
                                            :class="newClient.warranty_months === 24 && newClient.warranty_km === 20000 
                                                ? 'border-emerald-500 bg-emerald-50' 
                                                : 'border-gray-200 hover:border-gray-300 bg-gray-50'">
                                            <div class="absolute top-3 right-3">
                                                <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition"
                                                    :class="newClient.warranty_months === 24 && newClient.warranty_km === 20000 
                                                        ? 'border-emerald-500 bg-emerald-500' 
                                                        : 'border-gray-300'">
                                                    <i class="bi bi-check-lg text-white text-sm"
                                                        x-show="newClient.warranty_months === 24 && newClient.warranty_km === 20000"></i>
                                                </div>
                                            </div>
                                            <div class="text-4xl font-bold text-gray-900 mb-1">24</div>
                                            <div class="text-sm text-gray-600 mb-2">mois</div>
                                            <div class="text-xl font-bold text-emerald-600">20 000 km</div>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Footer Actions -->
            <div class="bg-white border-t border-gray-200 px-6 py-4 shrink-0">
                <div class="max-w-4xl mx-auto flex gap-4">
                    <button type="button" @click="closeNewClientModal()" 
                        class="flex-1 py-5 px-8 bg-gray-200 text-gray-800 rounded-xl font-bold text-xl hover:bg-gray-300 transition flex items-center justify-center gap-3">
                        <i class="bi bi-x-lg text-2xl"></i>
                        Annuler
                    </button>
                    <button type="button" @click="submitNewClient()"
                        :disabled="isCreatingClient"
                        class="flex-[2] py-5 px-8 bg-emerald-500 text-white rounded-xl font-bold text-xl hover:bg-emerald-600 transition flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed">
                        <i class="bi bi-check-lg text-2xl"></i>
                        <span x-text="isCreatingClient ? 'Création en cours...' : 'Créer le client'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
window.shopPortal = function() {
    return {
        chassisList: @json($chassisList),
        partsList: @json($parts),
        shopId: {{ $shopId }},
        
        searchPrefix: '',
        searchSuffix: '',
        searchResults: [],
        hasSearched: false,
        
        showDetailsModal: false,
        detailsClient: null,
        
        showRecordsModal: false,
        selectedClient: null,
        clientRecords: [],
        
        showRecordDetails: false,
        viewingRecord: null,
        
        showRecordForm: false,
        modalRecord: {
            id: null,
            mileage: 0,
            comment: '',
            next_service_date: '',
            payment_status: 0,
            warranty_void: false,
            part_ids: []
        },
        recordErrors: {},
        
        showProofImageModal: false,
        proofImageUrl: null,
        
        // New client modal
        showNewClientModal: false,
        newClient: {
            first_name: '',
            last_name: '',
            identifier: '',
            password: '',
            maint_chassis_id: '',
            chassis_number: '',
            chassis_suffix: '',
            account_type: 2,
            warranty_months: null,
            warranty_km: null,
            sale_date: new Date().toISOString().split('T')[0],
        },
        chassisPrefixDisplay: '',
        newClientErrors: {},
        newClientSuccess: false,
        createdClient: null,
        isCreatingClient: false,
        identifierChecked: false,
        identifierAvailable: false,
        identifierCheckTimeout: null,
        
        formatDate(dateStr) {
            if (!dateStr) return 'Non définie';
            const date = new Date(dateStr);
            return date.toLocaleDateString('fr-FR', { year: 'numeric', month: '2-digit', day: '2-digit' });
        },
        
        formatDateDay(dateStr) {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            return date.getDate().toString().padStart(2, '0');
        },
        
        formatDateMonthYear(dateStr) {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear().toString().slice(-2);
            return month + '/' + year;
        },
        
        warrantyStatus(client) {
            if (!client) return { text: 'N/A', class: 'bg-gray-100 text-gray-800', stopDate: null };
            
            if (client.warranty_stop_date) {
                return { 
                    text: `Terminé`, 
                    class: 'bg-gray-200 text-gray-800',
                    stopDate: client.warranty_stop_date
                };
            }
            
            if (!client.sale_date || !client.warranty_months) {
                return { text: 'Non définie', class: 'bg-gray-200 text-gray-800', stopDate: null };
            }
            
            const saleDate = new Date(client.sale_date);
            const expiryDate = new Date(saleDate);
            expiryDate.setMonth(expiryDate.getMonth() + client.warranty_months);
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            
            if (today <= expiryDate) {
                const daysLeft = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                return { text: `Valide (${daysLeft}j)`, class: 'bg-emerald-100 text-emerald-800', stopDate: null };
            } else {
                const daysExpired = Math.ceil((today - expiryDate) / (1000 * 60 * 60 * 24));
                return { text: `Expirée`, class: 'bg-red-100 text-red-800', stopDate: null };
            }
        },
        
        isWarrantyExpired(client) {
            if (!client) return true;
            
            // Si la garantie a été arrêtée
            if (client.warranty_stop_date) {
                return true;
            }
            
            // Si pas de garantie définie
            if (!client.sale_date || !client.warranty_months) {
                return true;
            }
            
            // Vérifier si la garantie est expirée
            const saleDate = new Date(client.sale_date);
            const expiryDate = new Date(saleDate);
            expiryDate.setMonth(expiryDate.getMonth() + client.warranty_months);
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            
            return today > expiryDate;
        },
        
        getNextServiceInfo() {
            if (!this.clientRecords.length) return null;
            const lastRecord = this.clientRecords[0];
            // Prefer mileage-based next maintenance: return the scheduled km as the primary value
            if (lastRecord.next_service_mileage !== undefined && lastRecord.next_service_mileage !== null) {
                const scheduled = lastRecord.next_service_mileage;
                const diffKm = scheduled - (lastRecord.mileage || 0);
                let status = 'upcoming';
                if (diffKm < 0) status = 'late';
                else if (diffKm === 0) status = 'today';
                return { value: scheduled, status };
            }

            // Fallback to date-based behaviour
            if (!lastRecord.next_service_date) return null;
            const nextDate = new Date(lastRecord.next_service_date);
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            nextDate.setHours(0, 0, 0, 0);
            const diffTime = nextDate - today;
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            if (diffDays < 0) {
                return { value: Math.abs(diffDays), status: 'late' };
            } else if (diffDays === 0) {
                return { value: 0, status: 'today' };
            } else {
                return { value: diffDays, status: 'upcoming' };
            }
        },
        
        getMaintenanceStatus(record, index) {
            // If mileage-based planning exists, compare using the chronologically previous record.
            // clientRecords is ordered newest-first, so the previous (older) record is at index + 1.
            const previousIndex = index + 1;
            if (previousIndex >= this.clientRecords.length) return null;
            const previousRecord = this.clientRecords[previousIndex];

            if (record.next_service_mileage !== undefined && record.next_service_mileage !== null) {
                const diffKm = (previousRecord.mileage || 0) - record.next_service_mileage;
                if (diffKm < 0) return { value: Math.abs(diffKm), status: 'early', text: 'En avance' };
                if (diffKm === 0) return { value: 0, status: 'ontime', text: 'À temps' };
                return { value: diffKm, status: 'late', text: 'En retard' };
            }

            if (!record.next_service_date) return null;

            const plannedDate = new Date(record.next_service_date);
            const actualDate = new Date(previousRecord.service_date);
            plannedDate.setHours(0, 0, 0, 0);
            actualDate.setHours(0, 0, 0, 0);

            const diffTime = actualDate - plannedDate;
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            if (diffDays < 0) {
                return { value: Math.abs(diffDays), status: 'early', text: 'En avance' };
            } else if (diffDays === 0) {
                return { value: 0, status: 'ontime', text: 'À temps' };
            } else {
                return { value: diffDays, status: 'late', text: 'En retard' };
            }
        },
        getPreviousRecord(record) {
            if (!this.clientRecords || !record) return null;
            const idx = this.clientRecords.findIndex(r => r.id === record.id);
            if (idx === -1 || idx + 1 >= this.clientRecords.length) return null;
            return this.clientRecords[idx + 1];
        },
        
        async searchClients() {
            if (!this.searchPrefix || !this.searchSuffix) return;
            
            const res = await fetch('/magasin/search-clients', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    chassis_prefix: this.searchPrefix,
                    chassis_suffix: this.searchSuffix
                })
            });
            
            this.searchResults = await res.json();
            this.hasSearched = true;
        },
        
        async openDetailsModal(client) {
            const res = await fetch(`/magasin/clients/${client.id}`, {
                headers: { 'Accept': 'application/json' }
            });
            this.detailsClient = await res.json();
            this.showDetailsModal = true;
        },
        
        closeDetailsModal() {
            this.showDetailsModal = false;
            this.detailsClient = null;
        },
        
        async openRecordsModal(client) {
            this.selectedClient = client;
            const res = await fetch(`/magasin/clients/${client.id}/records`, {
                headers: { 'Accept': 'application/json' }
            });
            const recordsData = await res.json();
            // ensure newest first (descending by service_date, fallback to mileage)
            this.clientRecords = (recordsData || []).slice().sort((a, b) => {
                const ta = a && a.service_date ? new Date(a.service_date).getTime() : 0;
                const tb = b && b.service_date ? new Date(b.service_date).getTime() : 0;
                if (tb !== ta) return tb - ta;
                return (b.mileage || 0) - (a.mileage || 0);
            });
            this.showRecordsModal = true;
        },
        
        closeRecordsModal() {
            this.showRecordsModal = false;
            this.selectedClient = null;
            this.clientRecords = [];
        },
        
        viewRecordDetails(record) {
            this.viewingRecord = record;
            this.showRecordDetails = true;
        },
        
        closeRecordDetails() {
            this.showRecordDetails = false;
            this.viewingRecord = null;
        },
        
        openRecordForm(record = null) {
            this.recordErrors = {};
            
            if (record) {
                this.modalRecord = {
                    id: record.id,
                    mileage: record.mileage || 0,
                    comment: record.comment || '',
                    next_service_mileage: record.next_service_mileage || '',
                    payment_status: record.payment_status || 0,
                    warranty_void: record.warranty_void ? true : false,
                    part_ids: record.part_ids || []
                };
            } else {
                this.modalRecord = {
                    id: null,
                    mileage: 0,
                    comment: '',
                    next_service_mileage: '',
                    payment_status: 0,
                    warranty_void: false,
                    part_ids: []
                };
            }
            
            this.showRecordForm = true;
        },
        
        closeRecordForm() {
            this.showRecordForm = false;
            this.modalRecord = {
                id: null,
                mileage: 0,
                comment: '',
                next_service_mileage: '',
                payment_status: 0,
                warranty_void: false,
                part_ids: []
            };
        },
        
        togglePart(partId) {
            const idx = this.modalRecord.part_ids.indexOf(partId);
            if (idx >= 0) {
                this.modalRecord.part_ids.splice(idx, 1);
            } else {
                this.modalRecord.part_ids.push(partId);
            }
        },
        
        async submitRecord() {
            this.recordErrors = {};
            
            const url = this.modalRecord.id
                ? `/magasin/records/${this.modalRecord.id}`
                : '/magasin/records';
            
            const body = {
                maint_client_id: this.selectedClient.id,
                mileage: this.modalRecord.mileage,
                comment: this.modalRecord.comment || '',
                next_service_mileage: this.modalRecord.next_service_mileage || null,
                payment_status: this.modalRecord.payment_status,
                warranty_void: this.modalRecord.warranty_void ? true : false,
            };
            
            if (this.modalRecord.id) {
                body.part_ids = this.modalRecord.part_ids;
                body._method = 'PUT';
            } else {
                body.parts = this.modalRecord.part_ids.map(id => ({ id: id }));
            }
            
            const res = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(body)
            });
            
            const data = await res.json();
            
            if (res.status === 422) {
                this.recordErrors = data.errors || {};
                return;
            }
            
            if (res.status === 403) {
                alert(data.error || 'Vous ne pouvez pas modifier cet entretien.');
                return;
            }
            
            if (res.ok) {
                this.closeRecordForm();
                this.openRecordsModal(this.selectedClient);
            }
        },
        
        viewProofImage(imageUrl) {
            this.proofImageUrl = imageUrl;
            this.showProofImageModal = true;
        },
        
        closeProofImage() {
            this.showProofImageModal = false;
            this.proofImageUrl = null;
        },
        
        // New Client Modal Functions
        openNewClientModal() {
            this.resetNewClientForm();
            this.showNewClientModal = true;
        },
        
        closeNewClientModal() {
            this.showNewClientModal = false;
            this.resetNewClientForm();
        },
        
        resetNewClientForm() {
            this.newClient = {
                first_name: '',
                last_name: '',
                identifier: '',
                password: '',
                maint_chassis_id: '',
                chassis_number: '',
                chassis_suffix: '',
                account_type: 2,
                warranty_months: null,
                warranty_km: null,
                sale_date: new Date().toISOString().split('T')[0],
            };
            this.chassisPrefixDisplay = '';
            this.newClientErrors = {};
            this.newClientSuccess = false;
            this.createdClient = null;
            this.isCreatingClient = false;
            this.identifierChecked = false;
            this.identifierAvailable = false;
            if (this.identifierCheckTimeout) {
                clearTimeout(this.identifierCheckTimeout);
            }
        },
        
        updateChassisPrefix() {
            const selectedChassis = this.chassisList.find(c => c.id == this.newClient.maint_chassis_id);
            this.chassisPrefixDisplay = selectedChassis ? selectedChassis.chassis_prefix : '';
            this.updateFullChassisNumber();
        },
        
        updateFullChassisNumber() {
            if (this.chassisPrefixDisplay && this.newClient.chassis_suffix) {
                this.newClient.chassis_number = this.chassisPrefixDisplay + this.newClient.chassis_suffix;
            } else {
                this.newClient.chassis_number = '';
            }
        },
        
        checkIdentifierAvailability() {
            if (this.identifierCheckTimeout) {
                clearTimeout(this.identifierCheckTimeout);
            }
            
            if (!this.newClient.identifier || this.newClient.identifier.length < 3) {
                this.identifierChecked = false;
                return;
            }
            
            this.identifierCheckTimeout = setTimeout(async () => {
                try {
                    const res = await fetch('/magasin/check-identifier', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ identifier: this.newClient.identifier })
                    });
                    
                    const data = await res.json();
                    this.identifierChecked = true;
                    this.identifierAvailable = data.available;
                } catch (error) {
                    this.identifierChecked = false;
                }
            }, 500);
        },
        
        async submitNewClient() {
            if (this.isCreatingClient) return;
            
            this.newClientErrors = {};
            this.newClientSuccess = false;
            this.isCreatingClient = true;
            
            try {
                const res = await fetch('/magasin/clients', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(this.newClient)
                });
                
                const data = await res.json();
                
                if (res.status === 422) {
                    this.newClientErrors = data.errors || {};
                    this.isCreatingClient = false;
                    return;
                }
                
                if (res.ok && data.success) {
                    this.createdClient = data.client;
                    this.newClientSuccess = true;
                    
                    // Afficher une alerte de succès
                    alert('✓ Client créé avec succès !\n\n' + 
                          'Nom: ' + data.client.first_name + ' ' + data.client.last_name + '\n' +
                          'Identifiant: ' + data.client.identifier + '\n' +
                          'Mot de passe: ' + data.client.password);
                    
                    // Fermer la modal
                    this.closeNewClientModal();
                } else {
                    alert(data.message || 'Erreur lors de la création du client');
                }
            } catch (error) {
                alert('Erreur de connexion au serveur');
            } finally {
                this.isCreatingClient = false;
            }
        }
    }
}
</script>
@endsection