@extends('layouts.app')
@section('title','Prospects (CRM)')
@section('heading','Prospects')
@section('actions')<x-btn :href="route('prospects.create')">➕ Nouveau prospect</x-btn>@endsection
@section('content')
<x-card :padded="false">
    <div class="p-4 border-b border-slate-100">
        <form method="GET" id="prospects-filters" class="flex flex-wrap gap-2">
            <div class="relative flex-1 min-w-[200px]">
                <input name="q" value="{{ request('q') }}" autocomplete="off" placeholder="Rechercher (société, nom, email, ville)…" class="w-full rounded-lg border border-slate-300 px-3 py-2 pr-9 text-sm">
                <span id="prospects-spinner" class="hidden absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">⏳</span>
            </div>
            <select name="stage" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Toutes les étapes</option>
                @foreach($stages as $s)<option value="{{ $s }}" @selected(request('stage')===$s)>{{ status_label($s) }}</option>@endforeach
            </select>
            <select name="priority" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Toutes priorités</option>
                @foreach(['basse','normale','haute'] as $p)<option value="{{ $p }}" @selected(request('priority')===$p)>{{ status_label($p) }}</option>@endforeach
            </select>
            <select name="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Actifs et perdus</option>
                @foreach(['actif','converti','perdu'] as $s)<option value="{{ $s }}" @selected(request('status')===$s)>{{ status_label($s) }}</option>@endforeach
            </select>
            <noscript><x-btn type="submit" variant="secondary">Rechercher</x-btn></noscript>
            <x-btn variant="secondary" :href="route('prospects.index')" id="prospects-reset" class="{{ collect(request()->only(['q','stage','priority','status']))->filter(fn($v) => $v !== null && $v !== '')->isEmpty() ? 'hidden' : '' }}">Réinitialiser</x-btn>
        </form>
    </div>
    <div id="prospects-results">
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[720px]">
            <thead class="bg-slate-50 text-slate-500 text-left"><tr>
                <th class="px-4 py-3 font-medium w-16">N°</th>
                <th class="px-4 py-3 font-medium">Société</th>
                <th class="px-4 py-3 font-medium">Téléphone</th>
                <th class="px-4 py-3 font-medium">Email</th>
                <th class="px-4 py-3 font-medium">Étape</th>
                <th class="px-4 py-3 font-medium">Projets</th>
                <th class="px-4 py-3 font-medium">Prochaine relance</th>
                <th class="px-4 py-3"></th>
            </tr></thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($prospects as $p)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-3 font-mono text-xs text-slate-400">{{ $p->id }}</td>
                        <td class="px-4 py-3"><a href="{{ route('prospects.show',$p) }}" class="font-medium text-brand-600 hover:underline">{{ $p->company ?: $p->civilName() }}</a></td>
                        <td class="px-4 py-3 text-slate-500">{{ $p->phone ?: $p->mobile }}</td>
                        <td class="px-4 py-3 text-slate-500">@if($p->email)<a href="mailto:{{ $p->email }}" class="hover:underline">{{ $p->email }}</a>@endif</td>
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap items-center gap-1.5">
                                <x-badge :status="$p->pipeline_stage" />
                                {{-- Le statut n'est affiché que lorsqu'il sort du cours normal (converti / perdu) --}}
                                @if($p->status !== 'actif')<x-badge :status="$p->status" />@endif
                            </div>
                            @if($p->isLost() && $p->lostReasonLabel())<div class="text-xs text-slate-400 mt-1">{{ $p->lostReasonLabel() }}</div>@endif
                        </td>
                        <td class="px-4 py-3">
                            @php
                                $ouverts = $p->projects->whereIn('status', ['en_cours','en_attente']);
                                $bGlobal = $ouverts->where('budget_period','global')->sum('amount');
                                $bMensuel = $ouverts->where('budget_period','mensuel')->sum('amount');
                            @endphp
                            @if($p->projects->isEmpty())
                                <span class="text-slate-300">Aucun</span>
                            @else
                                <div class="text-xs text-slate-500">{{ $p->projects->count() }} projet{{ $p->projects->count() > 1 ? 's' : '' }}</div>
                                @if($bGlobal)<div class="font-semibold text-brand-600">{{ eur($bGlobal) }}</div>@endif
                                @if($bMensuel)<div class="font-semibold text-brand-600">{{ eur($bMensuel) }}/mois</div>@endif
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if($p->next_action_date)
                                @php $retard = $p->next_action_date->isPast() && ! $p->next_action_date->isToday(); @endphp
                                <div class="{{ $retard ? 'text-rose-600 font-semibold' : ($p->next_action_date->isToday() ? 'text-amber-600 font-semibold' : 'text-slate-700') }}">
                                    {{ $p->next_action_date->format('d/m/Y') }}
                                    @if($retard) <span class="text-xs">(en retard)</span>
                                    @elseif($p->next_action_date->isToday()) <span class="text-xs">(aujourd'hui)</span>
                                    @endif
                                </div>
                                @if($p->next_action)<div class="text-xs text-slate-400">{{ $p->next_action }}</div>@endif
                            @else
                                <span class="text-slate-300">Aucune relance prévue</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right"><a href="{{ route('prospects.show',$p) }}" class="text-slate-400 hover:text-brand-600">→</a></td>
                    </tr>
                @empty <tr><td colspan="8"><x-empty message="Aucun prospect" /></td></tr> @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-4">{{ $prospects->links() }}</div>
    </div>{{-- /#prospects-results --}}
</x-card>

@push('scripts')
<script>
// Recherche et filtrage automatiques : le tableau se rafraîchit sans rechargement de page.
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('prospects-filters');
    const results = document.getElementById('prospects-results');
    const spinner = document.getElementById('prospects-spinner');
    if (!form || !results) return;

    let timer = null, controller = null;

    const fetchResults = (url) => {
        if (controller) controller.abort();      // annule la requête précédente encore en vol
        controller = new AbortController();
        spinner.classList.remove('hidden');
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, signal: controller.signal })
            .then(r => r.ok ? r.text() : Promise.reject())
            .then(html => {
                const doc = new DOMParser().parseFromString(html, 'text/html');
                const fresh = doc.getElementById('prospects-results');
                if (fresh) results.innerHTML = fresh.innerHTML;
                history.replaceState(null, '', url);
                spinner.classList.add('hidden');
            })
            .catch(err => { if (err?.name !== 'AbortError') { spinner.classList.add('hidden'); erpToast('Erreur de recherche', false); } });
    };

    const currentUrl = () => {
        const params = new URLSearchParams(new FormData(form));
        // Affiche « Réinitialiser » dès qu'un filtre est actif
        const actif = [...params.values()].some(v => v !== '');
        document.getElementById('prospects-reset')?.classList.toggle('hidden', !actif);
        return form.action.split('?')[0] + '?' + params.toString();
    };

    // Saisie au clavier : on attend 300 ms d'inactivité avant de lancer la requête
    form.querySelector('input[name="q"]').addEventListener('input', () => {
        clearTimeout(timer);
        timer = setTimeout(() => fetchResults(currentUrl()), 300);
    });

    // Listes déroulantes : rafraîchissement immédiat
    form.querySelectorAll('select').forEach(s => s.addEventListener('change', () => fetchResults(currentUrl())));

    // Le bouton n'existe plus, mais la touche Entrée ne doit pas recharger la page
    form.addEventListener('submit', (e) => { e.preventDefault(); clearTimeout(timer); fetchResults(currentUrl()); });

    // Pagination : on reste en asynchrone
    results.addEventListener('click', (e) => {
        const link = e.target.closest('#prospects-results nav a[href]');
        if (!link) return;
        e.preventDefault();
        fetchResults(link.href);
    });
});
</script>
@endpush
@endsection