@extends('layouts.dashboard')

@section('content')
@push('head')
    <style>[x-cloak] { display: none !important; }</style>
@endpush
<div x-data="clientsPage()">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold flex items-center gap-2">
            <i class="bi bi-person-badge mr-2"></i>
            Clients
        </h1>
        <button type="button"
            class="px-5 py-2 bg-gray-900 text-white rounded-lg font-semibold shadow hover:bg-black transition"
            @click="openClientModal()"
            x-show="tab==='active'"
        >
            <i class="bi bi-plus-lg mr-2"></i>
            Nouveau client
        </button>
    </div>

    <div class="flex gap-2 px-8" x-cloak>
        <template x-for="(label, state) in { active: 'Actifs', history: 'Historique', trash: 'Corbeille' }" :key="state">
            <button type="button"
                class="px-6 py-3 rounded-t-lg font-semibold text-sm focus:outline-none transition border-b-2 flex items-center gap-2"
                :class="tab === state
                    ? 'border-gray-900 bg-white text-gray-900 shadow'
                    : 'border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200'"
                @click="tab = state; filter='';">
                <i x-show="state === 'trash'" class="bi bi-trash3"></i>
                <i x-show="state === 'history'" class="bi bi-clock-history"></i>
                <span x-text="label"></span>
                <template x-if="state !== 'history' && clients[state] && clients[state].length > 0">
                    <span class="ml-2 px-2 py-1 rounded-full text-xs font-bold"
                        :class="state === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-gray-100 text-gray-600'"
                        x-text="clients[state].length">
                    </span>
                </template>
            </button>
        </template>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 p-8" x-cloak>
        <!-- Tab Actifs/Corbeille -->
        <template x-for="(items, state) in clients" :key="state">
            <div x-show="tab === state && state !== 'history'" x-cloak x-transition.opacity>
                <div x-show="items.length > 0">
                    <div class="mb-4">
                        <input type="text"
                            class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0"
                            placeholder="Filtrer par nom, prénom, identifiant..."
                            x-model="filter"
                        >
                    </div>
                </div>
                <div class="grid md:grid-cols-2 gap-5">
                    <template x-for="client in items.filter(c => 
                        filter === '' ||
                        c.first_name.toLowerCase().includes(filter.toLowerCase()) ||
                        c.last_name.toLowerCase().includes(filter.toLowerCase()) ||
                        c.identifier.toLowerCase().includes(filter.toLowerCase())
                    )" :key="client.id">
                        <div class="rounded-lg border border-gray-200 hover:border-brand hover:shadow-md p-4 transition cursor-pointer" @click="openDetailsModal(client)">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-sm"
                                    x-text="(client.first_name[0] || '').toUpperCase() + (client.last_name[0] || '').toUpperCase()">
                                </div>
                                <div class="flex items-center gap-3">
                                    <div class="font-semibold" x-text="client.first_name + ' ' + client.last_name"></div>
                                    <span class="px-2 py-1 rounded-full text-xs font-semibold" :class="warrantyStatus(client).class" x-text="warrantyStatus(client).text"></span>
                                </div>
                            </div>
                            <div class="flex gap-2 flex-wrap" @click.stop>
                                <button type="button" class="px-3 py-1 text-xs border rounded hover:bg-black hover:text-white transition"
                                    @click="openClientModal(client)" x-show="!client.deleted_at">
                                    Modifier
                                </button>
                                <button type="button" class="px-3 py-1 text-xs border rounded hover:bg-black hover:text-white transition"
                                    @click="openRecordsModal(client)">
                                    Entretiens
                                </button>
                                <button type="button" class="px-3 py-1 text-xs border rounded hover:bg-black hover:text-white transition"
                                    @click="stopWarranty(client)" x-show="!client.warranty_stop_date && !client.deleted_at">
                                    Arrêter garantie
                                </button>
                                <button type="button" class="px-3 py-1 text-xs border rounded hover:bg-black hover:text-white transition"
                                    @click="restoreWarranty(client)" x-show="client.warranty_stop_date && !client.deleted_at">
                                    Rétablir garantie
                                </button>
                                <button type="button" class="px-3 py-1 text-xs border border-red-300 text-red-600 rounded hover:bg-red-600 hover:text-white transition"
                                    @click="softDeleteClient(client.id)" x-show="!client.deleted_at">
                                    Supprimer
                                </button>
                                <button type="button" class="px-3 py-1 text-xs border rounded hover:bg-black hover:text-white transition"
                                    @click="restoreClient(client.id)" x-show="client.deleted_at">
                                    Restaurer
                                </button>
                            </div>
                        </div>
                    </template>
                    <template x-if="items.length === 0">
                        <div class="col-span-full text-gray-400 py-16 text-center text-lg">Aucun client dans cet état.</div>
                    </template>
                </div>
            </div>
        </template>

        <!-- Tab Historique -->
        <div x-show="tab === 'history'" x-cloak x-transition.opacity>
            <div class="space-y-3">
                <template x-for="log in history" :key="log.id">
                    <div class="border border-gray-200 rounded-lg p-4 text-sm">
                        <div class="flex items-start justify-between mb-2">
                            <div>
                                <div class="font-semibold text-brand" x-text="log.action"></div>
                                <div class="text-xs text-gray-500 mt-1">
                                    <i class="bi bi-person-circle"></i>
                                    <span x-text="log.user"></span>
                                </div>
                            </div>
                            <div class="text-xs text-gray-400" x-text="log.created_at"></div>
                        </div>
                        <div class="text-gray-700 mt-2" x-text="log.description"></div>
                    </div>
                </template>
                <template x-if="history.length === 0">
                    <div class="text-gray-400 py-16 text-center text-lg">Aucun historique.</div>
                </template>
            </div>
        </div>
    </div>

    <!-- Modal Détails Client -->
    <div x-show="showDetailsModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @keydown.escape.window="closeDetailsModal()">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-4xl w-full relative max-h-[95vh] flex flex-col overflow-hidden">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black z-10" @click="closeDetailsModal()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <div class="flex flex-col items-center bg-gradient-to-br from-blue-50 via-white to-gray-100 px-8 pt-10 pb-6">
                <div class="w-20 h-20 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-3xl mb-3 shadow"
                    x-text="detailsClient ? (detailsClient.first_name[0] || '').toUpperCase() + (detailsClient.last_name[0] || '').toUpperCase() : ''">
                </div>
                <div class="text-2xl font-bold mb-1" x-text="detailsClient ? detailsClient.first_name + ' ' + detailsClient.last_name : ''"></div>
                <div class="text-sm text-gray-600" x-text="detailsClient?.identifier || ''"></div>
            </div>
            <div class="overflow-y-auto px-8 py-6" x-show="detailsClient">
                <div class="space-y-6">
                    <!-- Informations personnelles -->
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 mb-4 flex items-center gap-2">
                            <i class="bi bi-person-circle text-brand"></i>
                            Informations personnelles
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="grid md:grid-cols-2 gap-4 text-sm">
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Nom</span>
                                    <span class="font-semibold" x-text="detailsClient?.last_name"></span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Prénom</span>
                                    <span class="font-semibold" x-text="detailsClient?.first_name"></span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Identifiant</span>
                                    <span class="font-semibold" x-text="detailsClient?.identifier"></span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Mot de passe</span>
                                    <span class="font-mono text-xs bg-white px-2 py-1 rounded border" x-text="detailsClient?.password"></span>
                                </div>
                                <div class="flex justify-between items-center py-2 md:col-span-2">
                                    <span class="text-gray-600">Type de compte</span>
                                    <span class="px-3 py-1 rounded-full text-xs font-bold"
                                        :class="detailsClient?.account_type === 1 ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'"
                                        x-text="detailsClient?.account_type === 1 ? 'Dans la zone' : 'Hors zone'">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Moto -->
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 mb-4 flex items-center gap-2">
                            <i class="bi bi-bicycle text-brand"></i>
                            Moto
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div x-show="detailsClient?.chassis">
                                <div class="flex gap-4 items-center">
                                    <img :src="'/storage/' + (detailsClient?.chassis?.moto_primary_image || '')" 
                                        :alt="detailsClient?.chassis?.moto_title || 'Moto'"
                                        class="w-24 h-24 object-cover rounded-lg border-2 border-white shadow"
                                        x-show="detailsClient?.chassis?.moto_primary_image"
                                        onerror="this.style.display='none'">
                                    <div class="flex-1 space-y-3 text-sm">
                                        <div class="flex justify-between py-2 border-b border-gray-200">
                                            <span class="text-gray-600">Modèle</span>
                                            <span class="font-semibold" x-text="detailsClient?.chassis?.moto_title || 'N/A'"></span>
                                        </div>
                                        <div class="flex justify-between py-2 border-b border-gray-200">
                                            <span class="text-gray-600">Préfixe châssis</span>
                                            <span class="font-semibold" x-text="detailsClient?.chassis?.chassis_prefix || 'N/A'"></span>
                                        </div>
                                        <div class="flex justify-between py-2">
                                            <span class="text-gray-600">N° châssis complet</span>
                                            <span class="font-semibold font-mono" x-text="detailsClient?.chassis_number || 'N/A'"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div x-show="!detailsClient?.chassis" class="text-gray-400 text-center py-4">
                                <i class="bi bi-exclamation-circle text-2xl mb-2"></i>
                                <div>Aucune moto assignée</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Garantie -->
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 mb-4 flex items-center gap-2">
                            <i class="bi bi-shield-check text-brand"></i>
                            Garantie
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="grid md:grid-cols-3 gap-4 text-sm">
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Durée</span>
                                    <span class="font-semibold" x-text="detailsClient?.warranty_months + ' mois'"></span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Kilométrage garanti</span>
                                    <span class="font-semibold" x-text="detailsClient?.warranty_km !== null ? detailsClient.warranty_km + ' km' : 'Non défini'"></span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Date de vente</span>
                                    <span class="font-semibold" x-text="formatDate(detailsClient?.sale_date)"></span>
                                </div>
                                <div class="flex justify-between items-center py-2 border-b border-gray-200">
                                    <span class="text-gray-600">État</span>
                                    <span class="px-3 py-1 rounded-full text-xs font-semibold"
                                        :class="detailsClient ? warrantyStatus(detailsClient).class : 'bg-gray-100 text-gray-800'"
                                        x-text="detailsClient ? warrantyStatus(detailsClient).text : 'Non définie'"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Client (Ajout/Modification) -->
    <div x-show="showClientModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @keydown.escape.window="closeClientModal()">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-2xl w-full relative max-h-[95vh] flex flex-col overflow-y-scroll">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black z-10" @click="closeClientModal()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <template x-if="modalClient">
                <div>
                    <div class="flex flex-col items-center bg-gradient-to-br from-amber-50 via-white to-gray-100 px-8 pt-10 pb-6">
                        <div class="w-20 h-20 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-3xl mb-3 shadow">
                            <i class="bi bi-person-badge"></i>
                        </div>
                        <div class="text-xl font-bold mb-1" x-text="modalClient.id ? 'Modifier le client' : 'Nouveau client'"></div>
                    </div>
                    <form @submit.prevent="submitClient()" class="px-8 pb-8 pt-4 flex flex-col gap-4">
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <label class="font-semibold mb-2 block">Nom <span class="text-red-600">*</span></label>
                                <input type="text" x-model="modalClient.last_name"
                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                    :class="errors.last_name ? 'border-red-500' : ''"
                                    placeholder="min. 2 caractères">
                                <p class="text-xs text-red-600 mt-1" x-text="errors.last_name" x-show="errors.last_name"></p>
                            </div>
                            <div>
                                <label class="font-semibold mb-2 block">Prénom <span class="text-red-600">*</span></label>
                                <input type="text" x-model="modalClient.first_name"
                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                    :class="errors.first_name ? 'border-red-500' : ''"
                                    placeholder="min. 3 caractères">
                                <p class="text-xs text-red-600 mt-1" x-text="errors.first_name" x-show="errors.first_name"></p>
                            </div>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Type de compte <span class="text-red-600">*</span></label>
                            <select x-model.number="modalClient.account_type"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0">
                                <option value="0">Client hors zone</option>
                                <option value="1">Client dans la zone</option>
                            </select>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Identifiant <span class="text-red-600">*</span></label>
                            <input type="text" x-model="modalClient.identifier"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                :class="errors.identifier ? 'border-red-500' : ''"
                                placeholder="min. 3 caractères, unique">
                            <p class="text-xs text-red-600 mt-1" x-text="errors.identifier" x-show="errors.identifier"></p>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Mot de passe <span class="text-red-600" x-show="!modalClient.id">*</span></label>
                            <input type="text" x-model="modalClient.password"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                :class="errors.password ? 'border-red-500' : ''"
                                :placeholder="modalClient.id ? 'Laisser vide pour ne pas changer (min. 5)' : 'min. 5 caractères'">
                            <p class="text-xs text-red-600 mt-1" x-text="errors.password" x-show="errors.password"></p>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Modèle (préfixe châssis) <span class="text-red-600">*</span></label>
                            <select x-model.number="modalClient.maint_chassis_id"
                                @change="updateChassisPrefix()"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                :class="errors.maint_chassis_id ? 'border-red-500' : ''"
                                required>
                                <template x-for="ch in chassisList" :key="ch.id">
                                    <option :value="Number(ch.id)"
                                            :selected="Number(ch.id) === Number(modalClient.maint_chassis_id)"
                                            x-text="ch.chassis_prefix + ' (' + ch.moto_title + ')'"></option>
                                </template>
                            </select>
                            <p class="text-xs text-red-600 mt-1" x-text="errors.maint_chassis_id" x-show="errors.maint_chassis_id"></p>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Numéro de châssis complet <span class="text-red-600">*</span></label>
                            <div class="flex">
                                <span class="inline-flex items-center px-4 py-3 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg text-gray-600 font-mono text-sm"
                                    x-text="getSelectedChassisPrefix()"></span>
                                <input type="text" x-model="chassisSuffix"
                                    @input="modalClient.chassis_number = getSelectedChassisPrefix() + chassisSuffix"
                                    class="flex-1 px-4 py-3 rounded-r-lg border border-gray-300 focus:border-brand outline-0 font-mono"
                                    :class="errors.chassis_number ? 'border-red-500' : ''"
                                    placeholder="Suite du numéro...">
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Numéro complet: <span class="font-mono" x-text="modalClient.chassis_number || '-'"></span></p>
                            <p class="text-xs text-red-600 mt-1" x-text="errors.chassis_number" x-show="errors.chassis_number"></p>
                        </div>
                        <div>
                            <label class="font-semibold mb-2 block">Date de vente <span class="text-red-600">*</span></label>
                            <input type="date" x-model="modalClient.sale_date"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                :class="errors.sale_date ? 'border-red-500' : ''">
                            <p class="text-xs text-red-600 mt-1" x-text="errors.sale_date" x-show="errors.sale_date"></p>
                        </div>
                        
                        <div>
                            <label class="font-semibold mb-2 block">Plan de garantie <span class="text-red-600">*</span></label>
                            <div class="grid grid-cols-2 gap-4">
                                <!-- Option 12 mois / 10000 km -->
                                <button type="button"
                                    @click="modalClient.warranty_months = 12; modalClient.warranty_km = 10000;"
                                    class="relative flex flex-col items-center justify-center p-4 rounded-lg border-2 transition-all"
                                    :class="modalClient.warranty_months === 12 && modalClient.warranty_km === 10000 
                                        ? 'border-brand bg-brand/5 shadow-md' 
                                        : 'border-gray-300 hover:border-gray-400'">
                                    <div class="absolute top-2 right-2">
                                        <div class="w-5 h-5 rounded-full border-2 flex items-center justify-center transition"
                                            :class="modalClient.warranty_months === 12 && modalClient.warranty_km === 10000 
                                                ? 'border-brand bg-brand' 
                                                : 'border-gray-300'">
                                            <i class="bi bi-check-lg text-white text-xs"
                                                x-show="modalClient.warranty_months === 12 && modalClient.warranty_km === 10000"></i>
                                        </div>
                                    </div>
                                    <div class="text-3xl font-bold text-gray-900 mb-1">12</div>
                                    <div class="text-sm text-gray-600 mb-2">mois</div>
                                    <div class="text-lg font-semibold text-brand">10 000 km</div>
                                </button>
                                
                                <!-- Option 24 mois / 20000 km -->
                                <button type="button"
                                    @click="modalClient.warranty_months = 24; modalClient.warranty_km = 20000;"
                                    class="relative flex flex-col items-center justify-center p-4 rounded-lg border-2 transition-all"
                                    :class="modalClient.warranty_months === 24 && modalClient.warranty_km === 20000 
                                        ? 'border-brand bg-brand/5 shadow-md' 
                                        : 'border-gray-300 hover:border-gray-400'">
                                    <div class="absolute top-2 right-2">
                                        <div class="w-5 h-5 rounded-full border-2 flex items-center justify-center transition"
                                            :class="modalClient.warranty_months === 24 && modalClient.warranty_km === 20000 
                                                ? 'border-brand bg-brand' 
                                                : 'border-gray-300'">
                                            <i class="bi bi-check-lg text-white text-xs"
                                                x-show="modalClient.warranty_months === 24 && modalClient.warranty_km === 20000"></i>
                                        </div>
                                    </div>
                                    <div class="text-3xl font-bold text-gray-900 mb-1">24</div>
                                    <div class="text-sm text-gray-600 mb-2">mois</div>
                                    <div class="text-lg font-semibold text-brand">20 000 km</div>
                                </button>
                            </div>
                        </div>
                        <div class="flex justify-end mt-4 gap-3">
                            <button type="submit"
                                class="flex items-center gap-2 px-6 py-2 bg-gray-900 text-white rounded-lg hover:bg-black transition font-semibold">
                                <i class="bi bi-check-lg"></i>
                                Enregistrer
                            </button>
                        </div>
                    </form>
                </div>
            </template>
        </div>
    </div>

    <!-- Modal Entretiens du client -->
    <div x-show="showRecordsModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @keydown.escape.window="closeRecordsModal()">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-2xl w-full relative max-h-[95vh] flex flex-col overflow-hidden">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black z-10" @click="closeRecordsModal()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <div class="flex flex-col items-center bg-gradient-to-br from-emerald-50 via-white to-gray-100 px-8 pt-10 pb-6">
                <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-700 text-3xl mb-3 shadow">
                    <i class="bi bi-wrench-adjustable"></i>
                </div>
                <div class="text-2xl font-bold" x-text="'Entretiens de ' + (selectedClient?.first_name || '') + ' ' + (selectedClient?.last_name || '')"></div>
                <button type="button" class="mt-4 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-black text-sm"
                    @click="openRecordForm()">
                    <i class="bi bi-plus-lg mr-2"></i>Ajouter un entretien
                </button>
            </div>
            <div class="flex-1 overflow-y-auto px-8 py-6">
                <!-- Timeline -->
                <div class="relative" x-show="clientRecords.length > 0">
                    <!-- Ligne verticale -->
                    <div class="absolute left-[60px] top-0 bottom-0 w-0.5 bg-gray-200"></div>
                    
                    <!-- Statut actuel (prochain entretien en km) -->
                    <div class="relative flex items-start mb-6" x-show="getNextServiceKm() !== null">
                        <div class="w-[60px] flex-shrink-0"></div>
                        <div class="relative z-10 w-4 h-4 rounded-full bg-red-500 border-2 border-white shadow -ml-2"></div>
                        <div class="ml-4 text-sm text-gray-700">
                            <span class="text-emerald-600 font-bold" x-text="'À ' + getNextServiceKm() + ' km'"></span>
                        </div>
                    </div>
                    
                    <!-- Liste des entretiens -->
                    <template x-for="(record, index) in clientRecords" :key="record.id">
                        <div>
                            <!-- Entretien -->
                            <div class="relative flex items-start mb-2">
                                <!-- Date à gauche -->
                                <div class="w-[60px] flex-shrink-0 text-right pr-4">
                                    <div class="text-lg font-bold text-gray-800" x-text="formatDateDay(record.service_date)"></div>
                                    <div class="text-xs text-gray-500" x-text="formatDateMonthYear(record.service_date)"></div>
                                </div>
                                
                                <!-- Point sur la timeline -->
                                <div class="relative z-10 w-4 h-4 rounded-full bg-emerald-500 border-2 border-white shadow -ml-2"></div>
                                
                                <!-- Contenu -->
                                <div class="ml-4 flex-1 bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-brand transition">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <div class="font-semibold text-gray-800">
                                                fait à <span class="text-red-600" x-text="record.mileage + ' km'"></span>
                                            </div>
                                            <div class="text-sm text-gray-600 mt-1">
                                                <span x-text="(record.parts?.length || 0) + ' remplacement' + ((record.parts?.length || 0) > 1 ? 's' : '')"></span>
                                            </div>
                                            <div class="text-xs mt-1" :class="record.payment_status === 2 ? 'text-red-600' : record.payment_status === 1 ? 'text-emerald-600' : 'text-amber-600'">
                                                <span x-text="record.payment_status === 0 ? 'Garantie' : record.payment_status === 1 ? 'Payé' : 'Non payé'"></span>
                                            </div>
                                            <div class="text-xs text-gray-500 mt-1">
                                                <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>
                                            </div>
                                        </div>
                                        <div class="flex gap-2">
                                            <button type="button" class="w-8 h-8 rounded-full bg-purple-100 text-purple-700 hover:bg-purple-200 flex items-center justify-center"
                                                x-show="record.proof_image"
                                                @click="viewProofImage(record.proof_image)" title="Voir la preuve">
                                                <i class="bi bi-file-earmark-image"></i>
                                            </button>
                                            <button type="button" class="w-8 h-8 rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 flex items-center justify-center"
                                                @click="viewRecordDetails(record)" title="Voir">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button type="button" class="w-8 h-8 rounded-full bg-amber-100 text-amber-700 hover:bg-amber-200 flex items-center justify-center"
                                                @click="openRecordForm(record)" title="Modifier">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Rappel entretien prévu (ou message si non défini) -->
                            <div class="relative flex items-start mb-6" x-show="index < clientRecords.length - 1">
                                <div class="w-[60px] flex-shrink-0"></div>
                                <div class="relative z-10 w-3 h-3 rounded-full bg-red-400 border-2 border-white shadow -ml-1.5 mt-0.5"></div>
                                <div class="ml-4 text-xs text-gray-500">
                                    <template x-if="clientRecords[index + 1].next_service_mileage">
                                        Était prévu : <span class="font-bold text-[#6B7280]" x-text="'Prévu à ' + 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>
                                    </template>
                                    <template x-if="!clientRecords[index + 1].next_service_mileage">
                                        <span class="text-gray-400">Aucun entretien prévu</span>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                    
                    <!-- Point de départ (création client) -->
                    <div class="relative flex items-start">
                        <div class="w-[60px] flex-shrink-0"></div>
                        <div class="relative z-10 w-3 h-3 rounded-full bg-gray-300 border-2 border-white shadow -ml-1.5"></div>
                        <div class="ml-4 text-xs text-gray-400">Début du suivi</div>
                    </div>
                </div>
                
                <div x-show="clientRecords.length === 0" class="text-gray-400 py-12 text-center">
                    <i class="bi bi-clipboard-x text-4xl mb-2"></i>
                    <div>Aucun entretien enregistré</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal Détails Entretien -->
    <div x-show="showRecordDetails" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60" @keydown.escape.window="closeRecordDetails()">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-lg w-full relative max-h-[95vh] flex flex-col overflow-hidden">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black z-10" @click="closeRecordDetails()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <div class="flex flex-col items-center bg-gradient-to-br from-blue-50 via-white to-gray-100 px-8 pt-10 pb-6">
                <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 text-3xl mb-3 shadow">
                    <i class="bi bi-file-earmark-text"></i>
                </div>
                <div class="text-2xl font-bold" x-text="'Entretien N\u00b0' + (viewingRecord?.id || '')"></div>
            </div>
            <div class="flex-1 overflow-y-auto px-8 py-6" x-show="viewingRecord">
                <div class="space-y-6">
                    <!-- Informations Générales -->
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 mb-4 flex items-center gap-2">
                            <i class="bi bi-info-circle text-brand"></i>
                            Informations Générales
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4 space-y-3 text-sm">
                            <div class="flex justify-between py-2 border-b border-gray-200">
                                <span class="text-gray-600">Fait le</span>
                                <span class="font-semibold" x-text="formatDate(viewingRecord?.service_date)"></span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-gray-200"
                                 x-show="viewingRecord?.next_service_mileage && getPreviousRecord(viewingRecord) && getPreviousRecord(viewingRecord).next_service_mileage">
                                <span class="text-gray-900">Était prévu à</span>
                                <span class="font-semibold text-black" x-text="getPreviousRecord(viewingRecord) && getPreviousRecord(viewingRecord).next_service_mileage ? (getPreviousRecord(viewingRecord).next_service_mileage + ' km') : ''"></span>
                                <span x-show="getPreviousRecord(viewingRecord) && (viewingRecord?.mileage || 0) - (getPreviousRecord(viewingRecord).next_service_mileage || 0) > 0" class="ml-2 font-bold text-black">(retard: <span x-text="getPreviousRecord(viewingRecord) ? ((viewingRecord?.mileage || 0) - getPreviousRecord(viewingRecord).next_service_mileage) : ''"></span>km)</span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-gray-200">
                                <span class="text-gray-900">Fait à</span>
                                <span class="font-semibold text-black" x-text="(viewingRecord?.mileage || 0) + ' km'"></span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-gray-200" x-show="viewingRecord?.next_service_mileage">
                                <span class="text-gray-900">Prochain entretien</span>
                                <span class="font-semibold text-black" x-text="viewingRecord?.next_service_mileage + ' km'"></span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-gray-200">
                                <span class="text-gray-900">Paiement</span>
                                <span class="font-semibold text-black"
                                    x-text="viewingRecord?.payment_status === 0 ? 'Aucun (Garantie)' : viewingRecord?.payment_status === 1 ? 'Payé' : 'Non payé'"></span>
                            </div>
                            <div class="flex justify-between py-2">
                                <span class="text-gray-900">Garantie</span>
                                <span class="font-semibold text-black"
                                    x-text="viewingRecord?.warranty_void ? 'Terminé' : 'Intacte'"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Détails de l'intervention -->
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 mb-4 flex items-center gap-2">
                            <i class="bi bi-tools text-brand"></i>
                            Détails de l'intervention
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4 space-y-3 text-sm">
                            <div x-show="viewingRecord?.comment">
                                <div class="text-gray-600 mb-1">Commentaire</div>
                                <div class="font-medium text-gray-800 italic" x-text="'\"' + (viewingRecord?.comment || '') + '\"'"></div>
                            </div>
                            <div x-show="!viewingRecord?.comment" class="text-gray-400">Aucun commentaire</div>
                            
                            <div x-show="viewingRecord?.proof_image" class="mt-4">
                                <div class="text-gray-600 mb-2">Preuve d'entretien</div>
                                <div @click="viewProofImage(viewingRecord ? viewingRecord.proof_image : null)" class="cursor-pointer">
                                    <img :src="viewingRecord ? viewingRecord.proof_image : ''" alt="Preuve d'entretien" class="w-full rounded-lg border-2 border-gray-300 hover:border-brand transition">
                                </div>
                            </div>
                            
                            <div class="mt-4" x-show="viewingRecord?.parts?.length > 0">
                                <div class="text-gray-600 mb-2">Remplacements faits :</div>
                                <ul class="list-disc list-inside space-y-1">
                                    <template x-for="part in viewingRecord?.parts || []" :key="part.id">
                                        <li class="text-gray-800 font-medium" x-text="part.name"></li>
                                    </template>
                                </ul>
                            </div>
                            <div x-show="!viewingRecord?.parts?.length" class="text-gray-400 mt-4">Aucun remplacement</div>
                            
                            <div class="mt-4" x-show="viewingRecord?.shop">
                                <div class="text-gray-600 mb-1">Effectué chez</div>
                                <div class="font-medium text-gray-800" x-text="viewingRecord?.shop?.name || 'N/A'"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-8 py-4 flex justify-end gap-3">
                <button type="button" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300" @click="closeRecordDetails()">Fermer</button>
               
            </div>
        </div>
    </div>

    <!-- Form Entretien (dans modal entretiens) -->
    <div x-show="showRecordForm" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60" @click.self="closeRecordForm()">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black z-10" @click="closeRecordForm()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <div class="flex flex-col items-center bg-gradient-to-br from-emerald-50 via-white to-gray-100 px-8 pt-10 pb-6">
                <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-700 text-3xl mb-3 shadow">
                    <i class="bi bi-wrench-adjustable"></i>
                </div>
                <div class="text-2xl font-bold" x-text="modalRecord?.id ? 'Modifier l\'entretien' : 'Nouvel entretien'"></div>
            </div>
            <form @submit.prevent="submitRecord()" class="flex-1 overflow-y-auto px-8 py-6">
                <div class="space-y-4">
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <label class="font-semibold mb-2 block">Kilométrage <span class="text-red-600">*</span></label>
                        <input type="number" x-model.number="modalRecord.mileage" min="0" 
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                            :class="recordErrors.mileage ? 'border-red-500' : ''">
                        <p class="text-xs text-red-600 mt-1" x-text="recordErrors.mileage" x-show="recordErrors.mileage"></p>
                    </div>
                    <div>
                        <label class="font-semibold mb-2 block">Date d'entretien <span class="text-red-600">*</span></label>
                        <input type="date" x-model="modalRecord.service_date" 
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                            :class="recordErrors.service_date ? 'border-red-500' : ''">
                        <p class="text-xs text-red-600 mt-1" x-text="recordErrors.service_date" x-show="recordErrors.service_date"></p>
                    </div>
                </div>
                <div>
                    <label class="font-semibold mb-2 block">Commentaire</label>
                    <textarea x-model="modalRecord.comment" rows="3" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                        :class="recordErrors.comment ? 'border-red-500' : ''"></textarea>
                    <p class="text-xs text-red-600 mt-1" x-text="recordErrors.comment" x-show="recordErrors.comment"></p>
                </div>
                <div>
                    <label class="font-semibold mb-2 block">Paiement <span class="text-red-600">*</span></label>
                    <select x-model.number="modalRecord.payment_status" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                        :class="recordErrors.payment_status ? 'border-red-500' : ''">
                        <option value="0">Aucun</option>
                        <option value="1">Payé</option>
                        <option value="2">Non payé</option>
                    </select>
                    <p class="text-xs text-red-600 mt-1" x-text="recordErrors.payment_status" x-show="recordErrors.payment_status"></p>
                </div>
                <div x-show="selectedClient?.account_type === 1">
                    <label class="font-semibold mb-2 block">Magasin (optionnel)</label>
                    <select x-model.number="modalRecord.maint_shop_id" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                        :class="recordErrors.maint_shop_id ? 'border-red-500' : ''">
                        <option value="">Aucun</option>
                        <template x-for="shop in shopsList" :key="shop.id">
                            <option :value="shop.id" x-text="shop.name"></option>
                        </template>
                    </select>
                    <p class="text-xs text-red-600 mt-1" x-text="recordErrors.maint_shop_id" x-show="recordErrors.maint_shop_id"></p>
                </div>
                <div>
                    <label class="font-semibold mb-2 block">Kilométrage prochain entretien (optionnel)</label>
                    <input type="number" x-model.number="modalRecord.next_service_mileage" min="0"
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                        :class="recordErrors.next_service_mileage ? 'border-red-500' : ''">
                    <p class="text-xs text-red-600 mt-1" x-text="recordErrors.next_service_mileage" x-show="recordErrors.next_service_mileage"></p>
                </div>
                <div>
                    <label class="font-semibold mb-2 block">Preuve d'entretien (optionnel)</label>
                    <input type="file" @change="handleProofUpload" accept="image/*" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                        :class="recordErrors.proof_image ? 'border-red-500' : ''">
                    <p class="text-xs text-red-600 mt-1" x-text="recordErrors.proof_image" x-show="recordErrors.proof_image"></p>
                </div>
                <div>
                    <label class="flex items-center gap-2">
                        <input type="checkbox" x-model="modalRecord.warranty_void" class="rounded">
                        <span class="font-semibold">Annuler la garantie à cet entretien</span>
                    </label>
                    <p class="text-xs text-red-600 mt-1" x-text="recordErrors.warranty_void" x-show="recordErrors.warranty_void"></p>
                </div>
                <div>
                    <label class="font-semibold mb-2 block">Remplacements effectués</label>
                    <div class="space-y-2">
                        <template x-for="part in partsList" :key="part.id">
                            <label class="flex items-center gap-2">
                                <input type="checkbox" :value="part.id" 
                                    :checked="modalRecord.part_ids.includes(part.id)"
                                    @change="togglePart(part.id)"
                                    class="rounded">
                                <span x-text="part.name"></span>
                            </label>
                        </template>
                    </div>
                    <p class="text-xs text-red-600 mt-1" x-text="recordErrors.parts" x-show="recordErrors.parts"></p>
                </div>
                </div>
                <div class="px-8 py-4 flex justify-end gap-3">
                    <button type="button" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300" @click="closeRecordForm()">Annuler</button>
                    <button type="submit" class="px-6 py-2 bg-brand text-white rounded-lg hover:bg-brand-dark font-semibold">
                        Enregistrer
                    </button>
                </div>
            </form>
        </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>
</div>

<script>
window.clientsPage = function() {
    return {
        clients: {
            active: @json($clients->filter(fn($c) => !$c->deleted_at)->values()),
            trash: @json($clients->filter(fn($c) => $c->deleted_at)->values())
        },
        history: @json($history ?? []),
        chassisList: @json($chassis),
        shopsList: @json($shops),
        partsList: @json($parts),
        tab: 'active',
        filter: '',
        showClientModal: false,
        showDetailsModal: false,
        showRecordsModal: false,
        showRecordForm: false,
        showRecordDetails: false,
        modalClient: null,
        detailsClient: null,
        selectedClient: null,
        clientRecords: [],
        modalRecord: {
            id: null,
            mileage: 0,
            comment: '',
            next_service_mileage: '',
            payment_status: 0,
            warranty_void: false,
            part_ids: []
        },
        viewingRecord: null,
        proofFile: null,
        showPassword: false,
        chassisSuffix: '',
        errors: {},
        recordErrors: {},
        
        showProofImageModal: false,
        proofImageUrl: null,
        
        getSelectedChassisPrefix() {
            const chassis = this.chassisList.find(c => Number(c.id) === Number(this.modalClient?.maint_chassis_id));
            return chassis?.chassis_prefix || '';
        },
        
        updateChassisPrefix() {
            // Quand on change le modèle, on met à jour le numéro complet
            this.modalClient.chassis_number = this.getSelectedChassisPrefix() + this.chassisSuffix;
        },
        
        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;
        },
        
        getNextServiceKm() {
            if (!this.clientRecords.length) return null;
            const lastRecord = this.clientRecords[0];
            if (lastRecord.next_service_mileage == null || lastRecord.next_service_mileage === '') return null;
            return lastRecord.next_service_mileage;
        },

        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];
        },
        
        viewRecordDetails(record) {
            this.viewingRecord = record;
            this.showRecordDetails = true;
        },
        
        closeRecordDetails() {
            this.showRecordDetails = false;
            this.viewingRecord = null;
        },
        
        warrantyStatus(client) {
            // Vérifier d'abord si arrêtée manuellement
            if (client.warranty_stop_date) {
                return { text: 'Terminé', class: 'bg-gray-100 text-gray-800' };
            }

            // Vérifier expiration par kilométrage si défini et si on a le dernier kilométrage
            if (client.warranty_km !== undefined && client.warranty_km !== null && client.latest_mileage !== undefined && client.latest_mileage !== null) {
                if (client.latest_mileage > client.warranty_km) {
                    const over = client.latest_mileage - client.warranty_km;
                    return { text: `Expirée par ${over} km`, class: 'bg-red-100 text-red-800' };
                }
            }

            if (!client.sale_date || !client.warranty_months) {
                return { text: 'Non définie', class: 'bg-gray-100 text-gray-800' };
            }
            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 restants)`, class: 'bg-emerald-100 text-emerald-800' };
            } else {
                const daysExpired = Math.ceil((today - expiryDate) / (1000 * 60 * 60 * 24));
                return { text: `Expirée (${daysExpired}j)`, class: 'bg-red-100 text-red-800' };
            }
        },
        
        openDetailsModal(client) {
            // Récupérer les données à jour + derniers entretiens pour calculs kilométriques
            fetch(`/dashboard/maintenance/clients/${client.id}/records`, { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(data => {
                    // l'endpoint renvoie { client: ..., records: [...] }
                    const c = data.client || client;
                    const records = data.records || [];
                    c.latest_mileage = records.length ? records[0].mileage : null;
                    this.detailsClient = c;
                    this.showDetailsModal = true;
                }).catch(() => {
                    this.detailsClient = client;
                    this.showDetailsModal = true;
                });
        },
        
        closeDetailsModal() {
            this.showDetailsModal = false;
            this.detailsClient = null;
        },
        
        openClientModal(client = null) {
            this.errors = {};
            this.showPassword = false;
            // Extraire le suffixe du châssis si en mode édition
            let chassisSuffix = '';
            if (client && client.chassis_number && client.chassis) {
                const prefix = client.chassis.chassis_prefix || '';
                if (client.chassis_number.startsWith(prefix)) {
                    chassisSuffix = client.chassis_number.substring(prefix.length);
                }
            }
            this.chassisSuffix = chassisSuffix;
            // Déterminer l'ID du châssis sélectionné : préférer une recherche par préfixe si disponible
            let selectedChassisId = null;
            if (client) {
                selectedChassisId = client.maint_chassis_id ? Number(client.maint_chassis_id) : null;
                // 1. Si la relation chassis existe et a un prefixe, on cherche par prefixe
                if (client.chassis && client.chassis.chassis_prefix) {
                    const found = this.chassisList.find(c => c.chassis_prefix === client.chassis.chassis_prefix);
                    if (found) selectedChassisId = Number(found.id);
                } else if (client.chassis_number) {
                    // 2. Sinon, on cherche le premier prefixe qui matche le début du numéro de châssis
                    const found = this.chassisList.find(c => client.chassis_number.startsWith(c.chassis_prefix));
                    if (found) selectedChassisId = Number(found.id);
                }
            }

            this.modalClient = client ? { 
                ...client,
                maint_chassis_id: selectedChassisId || this.chassisList[0]?.id || null,
                sale_date: client.sale_date ? client.sale_date.split('T')[0] : new Date().toISOString().split('T')[0]
            } : {
                id: null,
                last_name: '',
                first_name: '',
                account_type: 0,
                identifier: '',
                password: '',
                maint_chassis_id: this.chassisList[0]?.id || null,
                chassis_number: '',
                warranty_months: 12,
                warranty_km: 10000,
                sale_date: new Date().toISOString().split('T')[0],
                deleted_at: null
            };
            this.showClientModal = true;
        },
        
        closeClientModal() {
            this.showClientModal = false;
            this.modalClient = null;
        },
        
        async submitClient() {
            this.errors = {};
            const url = this.modalClient.id 
                ? `/dashboard/maintenance/clients/${this.modalClient.id}`
                : '{{ route('dashboard.maintenance.clients.store') }}';
            const method = this.modalClient.id ? 'PUT' : 'POST';
            
            const body = {
                last_name: this.modalClient.last_name,
                first_name: this.modalClient.first_name,
                account_type: this.modalClient.account_type,
                identifier: this.modalClient.identifier,
                maint_chassis_id: this.modalClient.maint_chassis_id,
                chassis_number: this.modalClient.chassis_number,
                warranty_months: this.modalClient.warranty_months,
                warranty_km: this.modalClient.warranty_km,
                sale_date: this.modalClient.sale_date,
            };
            if (this.modalClient.password) {
                body.password = this.modalClient.password;
            }

            const res = await fetch(url, {
                method: method,
                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.errors = data.errors || {};
                return;
            }
            if (res.ok) {
                window.location.reload();
            }
        },
        
        async openRecordsModal(client) {
            this.selectedClient = client;
            const res = await fetch(`/dashboard/maintenance/clients/${client.id}/records`, {
                headers: { 'Accept': 'application/json' }
            });
            const recordsData = await res.json();
            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 = [];
        },
        
        openRecordForm(record = null) {
            this.recordErrors = {};
            this.proofFile = null;
            const today = new Date().toISOString().split('T')[0];
            
            if (record) {
                // Mode édition: formater les dates correctement
                const serviceDate = record.service_date ? record.service_date.split('T')[0] : today;
                const nextServiceMileage = record.next_service_mileage != null ? record.next_service_mileage : '';
                
                // Extraire les IDs des pièces
                let partIds = [];
                if (record.part_ids) {
                    partIds = record.part_ids;
                } else if (record.parts) {
                    partIds = record.parts.map(p => p.id);
                }
                
                this.modalRecord = {
                    id: record.id,
                    mileage: record.mileage || 0,
                    comment: record.comment || '',
                    service_date: serviceDate,
                    next_service_mileage: nextServiceMileage,
                    payment_status: record.payment_status || 0,
                    maint_shop_id: record.maint_shop_id || null,
                    warranty_void: record.warranty_void ? true : false,
                    part_ids: partIds
                };
            } else {
                // Mode création: valeurs par défaut
                this.modalRecord = {
                    id: null,
                    mileage: 0,
                    comment: '',
                    service_date: today,
                    next_service_mileage: '',
                    payment_status: 0,
                    maint_shop_id: null,
                    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: []
            };
        },
        
        handleProofUpload(event) {
            this.proofFile = event.target.files[0] || null;
        },
        
        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
                ? `/dashboard/maintenance/records/${this.modalRecord.id}`
                : '{{ route('dashboard.maintenance.records.store') }}';
            
            const formData = new FormData();
            formData.append('maint_client_id', this.selectedClient.id);
            formData.append('mileage', this.modalRecord.mileage);
            formData.append('comment', this.modalRecord.comment || '');
            formData.append('service_date', this.modalRecord.service_date);
            formData.append('next_service_mileage', this.modalRecord.next_service_mileage || '');
            formData.append('payment_status', this.modalRecord.payment_status);
            formData.append('maint_shop_id', this.modalRecord.maint_shop_id || '');
            formData.append('warranty_void', this.modalRecord.warranty_void ? '1' : '0');
            
            // Envoyer les parts - format différent pour create vs update
            if (this.modalRecord.id) {
                // Update: part_ids[] simple
                this.modalRecord.part_ids.forEach(id => formData.append('part_ids[]', id));
            } else {
                // Create: parts[index][id] et parts[index][quantity]
                this.modalRecord.part_ids.forEach((id, index) => {
                    formData.append(`parts[${index}][id]`, id);
                    formData.append(`parts[${index}][quantity]`, 1);
                });
            }
            
            if (this.proofFile) {
                formData.append('proof_image', this.proofFile);
            }
            if (this.modalRecord.id) {
                formData.append('_method', 'PUT');
            }

            const res = await fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: formData
            });

            const data = await res.json();
            if (res.status === 422) {
                this.recordErrors = data.errors || {};
                return;
            }
            if (res.ok) {
                this.closeRecordForm();
                this.openRecordsModal(this.selectedClient);
            }
        },
        
        async stopWarranty(client) {
            if (!confirm('Êtes-vous sûr de vouloir arrêter la garantie de ce client ?')) return;
            const res = await fetch(`/dashboard/maintenance/clients/${client.id}/stop-warranty`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            if (res.ok) {
                window.location.reload();
            }
        },
        
        async restoreWarranty(client) {
            if (!confirm('Êtes-vous sûr de vouloir rétablir la garantie de ce client ?')) return;
            const res = await fetch(`/dashboard/maintenance/clients/${client.id}/restore-warranty`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            if (res.ok) {
                window.location.reload();
            }
        },
        
        async softDeleteClient(id) {
            if (!confirm('Déplacer ce client vers la corbeille ?')) return;
            const res = await fetch(`/dashboard/maintenance/clients/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            if (res.ok) {
                window.location.reload();
            }
        },
        
        async restoreClient(id) {
            const res = await fetch(`/dashboard/maintenance/clients/${id}/restore`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            if (res.ok) {
                window.location.reload();
            }
        },
        
        viewProofImage(imageUrl) {
            this.proofImageUrl = imageUrl;
            this.showProofImageModal = true;
        },
        
        closeProofImage() {
            this.showProofImageModal = false;
            this.proofImageUrl = null;
        }
    }
}
</script>
@endsection