@extends('layouts.dashboard')

@section('content')
@php
    $states = [
        'pending' => 'En attente',
        'refused' => 'Refusé'
    ];
    $colors = [
        'pending' => 'bg-yellow-100 text-yellow-800',
        'refused' => 'bg-gray-200 text-gray-600'
    ];
@endphp
@push('head')
    <style>[x-cloak] { display: none !important; }</style>
@endpush
<div x-data="savRequests()">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold flex items-center gap-2">
            <i class="bi bi-tools mr-2"></i>
            Demandes d'inscription SAV
        </h1>
    </div>
    <div class="flex gap-2 px-8" x-cloak>
        <template x-for="(label, state) in { pending: 'En attente', refused: 'Refusé' }" :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-brand bg-white text-brand shadow'
                    : 'border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200'"
                @click="tab = state; filter='';">
                <i x-show="state === 'refused'" class="bi bi-x-circle"></i>
                <span x-text="label"></span>
                <template x-if="requests[state] && requests[state].length > 0">
                    <span class="ml-2 px-2 py-1 rounded-full text-xs font-bold"
                        :class="{
                            'bg-yellow-100 text-yellow-800': state === 'pending',
                            'bg-gray-100 text-gray-800': state === 'refused'
                        }"
                        x-text="requests[state].length">
                    </span>
                </template>
            </button>
        </template>
    </div>
    <div class="bg-white rounded-lg border border-gray-200 p-8" x-cloak>
        <template x-for="(reqs, state) in requests" :key="state">
            <div x-show="tab === state" x-cloak x-transition.opacity>
                <div x-show="reqs.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, moto..."
                            x-model="filter"
                        >
                    </div>
                </div>
                <div class="grid md:grid-cols-2 gap-5">
                    <template x-for="req in reqs.filter(r => 
                        filter === '' ||
                        r.firstname.toLowerCase().includes(filter.toLowerCase()) ||
                        r.lastname.toLowerCase().includes(filter.toLowerCase()) ||
                        r.identifier.toLowerCase().includes(filter.toLowerCase()) ||
                        r.moto_title.toLowerCase().includes(filter.toLowerCase())
                    )" :key="req.id">
                        <button type="button"
                            class="rounded-lg border border-gray-200 hover:bg-gray-200/30 p-6 flex justify-between gap-4 transition w-full text-left"
                            @click="openDetail(req.id)">
                            <div class="flex items-center gap-5">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-lg"
                                    x-text="(req.firstname[0] || '').toUpperCase() + (req.lastname[0] || '').toUpperCase()">
                                </div>
                                <div>
                                    <div class="font-semibold text-lg" x-text="req.firstname + ' ' + req.lastname"></div>
                                    <span class="text-xs text-gray-500" x-text="req.identifier"></span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-2">
                                <span class="text-xs text-gray-400" x-text="req.created_at_human"></span>
                            </div>
                        </button>
                    </template>
                    <template x-if="reqs.length === 0">
                        <div class="col-span-full text-gray-400 py-16 text-center text-lg">Aucune demande dans cet état.</div>
                    </template>
                </div>
            </div>
        </template>
    </div>

    <!-- Modale détail demande -->
    <div x-show="showDetail" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="closeDetail()" @keydown.escape.window="closeDetail()">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-2xl w-full relative max-h-[95vh] overflow-y-auto">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black z-10" @click="closeDetail()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <template x-if="detail">
                <form @submit.prevent="createClient()">
                    <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">
                            <span x-text="detail.initials"></span>
                        </div>
                        <div class="text-xl font-bold mb-1" x-text="detail.firstname + ' ' + detail.lastname"></div>
                        <div class="text-sm text-gray-500 mb-2" x-text="'Identifiant: ' + detail.identifier"></div>
                        <div class="text-xs text-gray-400 mb-4" x-text="detail.created_at"></div>
                    </div>
                    <div class="px-8 pb-8 pt-4 flex flex-col gap-4">
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                            <div class="font-semibold text-blue-900 mb-2">Informations de la demande</div>
                            <div class="grid grid-cols-2 gap-2 text-sm">
                                <div class="text-gray-600">Moto:</div>
                                <div class="font-semibold" x-text="detail.moto_title"></div>
                                <div class="text-gray-600">Téléphone:</div>
                                <div class="font-semibold" x-text="detail.phone"></div>
                                <div class="text-gray-600">Châssis:</div>
                                <div class="font-mono text-sm" x-text="detail.chassis_number"></div>
                                <div class="text-gray-600">Date de vente:</div>
                                <div x-text="detail.sale_date"></div>
                            </div>
                        </div>

                        <template x-if="detail.state === 'pending'">
                            <div>
                                <div class="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-4">
                                    <div class="font-semibold text-amber-900 mb-2">Compléter la création du compte</div>
                                    <p class="text-sm text-amber-800">Remplissez les informations ci-dessous pour créer le compte client.</p>
                                </div>

                                <div class="grid md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="font-semibold mb-2 block">Nom</label>
                                        <input type="text" x-model="detail.lastname"
                                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                            required>
                                    </div>
                                    <div>
                                        <label class="font-semibold mb-2 block">Prénom</label>
                                        <input type="text" x-model="detail.firstname"
                                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                            required>
                                    </div>
                                </div>

                                <div>
                                    <label class="font-semibold mb-2 block">Type de compte <span class="text-red-600">*</span></label>
                                    <select x-model.number="clientForm.account_type"
                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                        :class="errors.account_type ? 'border-red-500' : ''"
                                        required>
                                        <option value="" disabled>Sélectionnez un type de compte</option>
                                        <option value="0">Client hors zone</option>
                                        <option value="1">Client dans la zone</option>
                                    </select>
                                    <p class="text-xs text-red-600 mt-1" x-text="errors.account_type" x-show="errors.account_type"></p>
                                </div>

                                <div>
                                    <label class="font-semibold mb-2 block">Modèle (préfixe châssis) <span class="text-red-600">*</span></label>
                                    <div class="bg-gray-50 border border-gray-300 rounded-lg p-3 mb-2">
                                        <div class="text-sm text-gray-600">Détecté automatiquement:</div>
                                        <div class="font-mono font-semibold" x-text="getSelectedChassisInfo()"></div>
                                    </div>
                                    <select x-model.number="clientForm.maint_chassis_id"
                                        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' : ''"
                                        disabled>
                                        <template x-for="ch in chassisList" :key="ch.id">
                                            <option :value="Number(ch.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</label>
                                    <div class="bg-gray-50 border border-gray-300 rounded-lg p-3">
                                        <div class="text-sm text-gray-600 mb-2">Préfixe + Suite:</div>
                                        <div class="font-mono flex items-center gap-2">
                                            <span class="text-brand font-bold" x-text="getChassisPrefix()"></span>
                                            <span>+</span>
                                            <span x-text="getChassisSuffix()"></span>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <label class="font-semibold mb-2 block">Date de vente</label>
                                    <input type="date" x-model="detail.sale_date"
                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand outline-0"
                                        required>
                                </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">
                                        <button type="button"
                                            @click="clientForm.warranty_months = 12; clientForm.warranty_km = 10000; errors.warranty = null;"
                                            class="relative flex flex-col items-center justify-center p-4 rounded-lg border-2 transition-all"
                                            :class="clientForm.warranty_months === 12 && clientForm.warranty_km === 10000 
                                                ? 'border-brand bg-brand/5 shadow-md' 
                                                : (errors.warranty ? 'border-red-500' : '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="clientForm.warranty_months === 12 && clientForm.warranty_km === 10000 
                                                        ? 'border-brand bg-brand' 
                                                        : 'border-gray-300'">
                                                    <i class="bi bi-check-lg text-white text-xs"
                                                        x-show="clientForm.warranty_months === 12 && clientForm.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>
                                        
                                        <button type="button"
                                            @click="clientForm.warranty_months = 24; clientForm.warranty_km = 20000; errors.warranty = null;"
                                            class="relative flex flex-col items-center justify-center p-4 rounded-lg border-2 transition-all"
                                            :class="clientForm.warranty_months === 24 && clientForm.warranty_km === 20000 
                                                ? 'border-brand bg-brand/5 shadow-md' 
                                                : (errors.warranty ? 'border-red-500' : '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="clientForm.warranty_months === 24 && clientForm.warranty_km === 20000 
                                                        ? 'border-brand bg-brand' 
                                                        : 'border-gray-300'">
                                                    <i class="bi bi-check-lg text-white text-xs"
                                                        x-show="clientForm.warranty_months === 24 && clientForm.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>
                                    <p class="text-xs text-red-600 mt-1" x-text="errors.warranty" x-show="errors.warranty"></p>
                                </div>

                                <div class="flex justify-end gap-3 mt-6 pt-4">
                                    <button type="button"
                                        class="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
                                        @click="refuseRequest(detail.id)">
                                        <i class="bi bi-x-circle"></i>
                                        Refuser
                                    </button>
                                    <button type="submit"
                                        class="flex items-center gap-2 px-6 py-2 bg-black text-white rounded-lg hover:bg-gray-900 transition font-semibold"
                                        :disabled="loading">
                                        <i class="bi bi-check-circle"></i>
                                        <span x-show="!loading">Créer le compte</span>
                                        <span x-show="loading">Création en cours...</span>
                                    </button>
                                </div>
                            </div>
                        </template>

                        <template x-if="detail.state === 'refused'">
                            <div>
                                <div class="bg-gray-100 border border-gray-300 rounded-lg p-4 text-center">
                                    <i class="bi bi-x-circle text-4xl text-gray-500 mb-2"></i>
                                    <div class="text-lg font-semibold text-gray-700">Cette demande a été refusée</div>
                                </div>
                            </div>
                        </template>
                    </div>
                </form>
            </template>
        </div>
    </div>
</div>

<script>
window.savRequests = function() {
    return {
        requests: {
            pending: @json($requests['pending'] ?? []),
            refused: @json($requests['refused'] ?? [])
        },
        chassisList: @json(\App\Models\MaintChassis::orderBy('moto_title')->get()),
        tab: 'pending',
        filter: '',
        showDetail: false,
        detail: null,
        loading: false,
        errors: {},
        clientForm: {
            account_type: '',
            maint_chassis_id: null,
            warranty_months: null,
            warranty_km: null,
        },

        getChassisPrefix() {
            if (!this.detail || !this.detail.chassis_number) return '';
            const chassis = this.chassisList.find(c => {
                const prefix = c.chassis_prefix.toUpperCase();
                return this.detail.chassis_number.toUpperCase().startsWith(prefix);
            });
            return chassis ? chassis.chassis_prefix : this.detail.chassis_number.substring(0, 10);
        },

        getChassisSuffix() {
            if (!this.detail || !this.detail.chassis_number) return '';
            const prefix = this.getChassisPrefix();
            return this.detail.chassis_number.substring(prefix.length);
        },

        getSelectedChassisInfo() {
            if (!this.clientForm.maint_chassis_id) return 'Aucun modèle détecté';
            const chassis = this.chassisList.find(c => c.id === this.clientForm.maint_chassis_id);
            return chassis ? `${chassis.chassis_prefix} (${chassis.moto_title})` : 'Aucun modèle détecté';
        },

        autoDetectChassis() {
            if (!this.detail || !this.detail.chassis_number) return;
            
            const chassis = this.chassisList.find(c => {
                const prefix = c.chassis_prefix.toUpperCase();
                return this.detail.chassis_number.toUpperCase().startsWith(prefix);
            });
            
            if (chassis) {
                this.clientForm.maint_chassis_id = chassis.id;
            }
        },

        openDetail(id) {
            fetch(`/dashboard/sav-requests/${id}/ajax`)
                .then(r => r.json())
                .then((data) => {
                    this.detail = {
                        ...data,
                        initials: (data.firstname[0] ?? '').toUpperCase() + (data.lastname[0] ?? '').toUpperCase(),
                    };
                    // Reset form et erreurs
                    this.errors = {};
                    this.clientForm = {
                        account_type: '',
                        maint_chassis_id: null,
                        warranty_months: null,
                        warranty_km: null,
                    };
                    // Détecter automatiquement le modèle
                    this.autoDetectChassis();
                    this.showDetail = true;
                });
        },

        closeDetail() {
            this.showDetail = false;
            this.detail = null;
        },

        async createClient() {
            if (this.loading) return;
            
            // Validation
            this.errors = {};
            
            if (this.clientForm.account_type === '' || this.clientForm.account_type === null) {
                this.errors.account_type = 'Veuillez sélectionner un type de compte';
            }
            
            if (!this.clientForm.maint_chassis_id) {
                this.errors.maint_chassis_id = 'Le modèle n\'a pas pu être détecté automatiquement';
            }
            
            if (!this.clientForm.warranty_months || !this.clientForm.warranty_km) {
                this.errors.warranty = 'Veuillez sélectionner un plan de garantie';
            }
            
            if (Object.keys(this.errors).length > 0) {
                alert('Veuillez remplir tous les champs obligatoires.');
                return;
            }
            
            this.loading = true;

            try {
                const response = await fetch(`/dashboard/sav-requests/${this.detail.id}/create-client`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        account_type: this.clientForm.account_type,
                        maint_chassis_id: this.clientForm.maint_chassis_id || null,
                        chassis_number: this.detail.chassis_number,
                        warranty_months: this.clientForm.warranty_months,
                        warranty_km: this.clientForm.warranty_km,
                        sale_date: this.detail.sale_date,
                        warranty_stop_date: null,
                    })
                });

                const data = await response.json();

                if (data.success) {
                    alert('Le compte client a été créé avec succès !');
                    window.location.reload();
                } else {
                    alert('Erreur lors de la création du compte: ' + (data.message || 'Erreur inconnue'));
                }
            } catch (err) {
                alert('Erreur lors de la création du compte');
                console.error(err);
            }

            this.loading = false;
        },

        async refuseRequest(id) {
            if (!confirm('Êtes-vous sûr de vouloir refuser cette demande ?')) {
                return;
            }

            try {
                const response = await fetch(`/dashboard/sav-requests/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    window.location.reload();
                }
            } catch (err) {
                alert('Erreur lors du refus de la demande');
                console.error(err);
            }
        },
    }
}
</script>
@endsection