@extends('layouts.app')
@section('title','Projets')
@section('heading','Projets')
@section('content')
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <x-stat label="Projets en cours" :value="$stats['ouverts']" icon="📁" />
    <x-stat label="Projets gagnés" :value="$stats['gagnes']" icon="🏆" />
    <x-stat label="Budget gagné (annualisé)" :value="eur($stats['ca_gagne'])" icon="💶" />
    <x-stat label="Taux de réussite" :value="$stats['taux'].'%'" icon="📈" />
</div>

<x-card :padded="false">
    <div class="p-4 border-b border-slate-100">
        <form method="GET" id="projects-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 (projet, prospect, client)…" class="w-full rounded-lg border border-slate-300 px-3 py-2 pr-9 text-sm">
                <span id="projects-spinner" class="hidden absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">⏳</span>
            </div>
            <select name="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Tous les statuts</option>
                @foreach(App\Models\Project::STATUSES as $s)<option value="{{ $s }}" @selected(request('status')===$s)>{{ status_label($s) }}</option>@endforeach
            </select>
            <select name="period" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Tous les budgets</option>
                @foreach(App\Models\Project::PERIODS as $k=>$lab)<option value="{{ $k }}" @selected(request('period')===$k)>{{ $lab }}</option>@endforeach
            </select>
            <noscript><x-btn type="submit" variant="secondary">Rechercher</x-btn></noscript>
            <x-btn variant="secondary" :href="route('projects.index')" id="projects-reset" class="{{ collect(request()->only(['q','status','period']))->filter(fn($v) => $v !== null && $v !== '')->isEmpty() ? 'hidden' : '' }}">Réinitialiser</x-btn>
        </form>
    </div>

    <div id="projects-results">
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[820px]">
            <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">Projet</th>
                <th class="px-4 py-3 font-medium">Prospect / Client</th>
                <th class="px-4 py-3 font-medium">Responsable</th>
                <th class="px-4 py-3 font-medium">Statut</th>
                <th class="px-4 py-3 font-medium text-right">Budget</th>
                <th class="px-4 py-3 font-medium">Clôture prévue</th>
            </tr></thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($projects 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">
                            <span class="font-medium text-slate-800">{{ $p->name }}</span>
                            @if($p->description)<div class="text-xs text-slate-400 truncate max-w-xs">{{ $p->description }}</div>@endif
                        </td>
                        <td class="px-4 py-3">
                            @if($p->client)
                                <a href="{{ route('clients.show', [$p->client, 'tab'=>'projets']) }}" class="text-brand-600 hover:underline">{{ $p->client->company }}</a>
                                <span class="text-xs text-slate-400">(client)</span>
                            @elseif($p->prospect)
                                <a href="{{ route('prospects.show', $p->prospect) }}" class="text-brand-600 hover:underline">{{ $p->prospect->company ?: $p->prospect->civilName() }}</a>
                                <span class="text-xs text-slate-400">(prospect)</span>
                            @else
                                <span class="text-slate-300">—</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-slate-500">{{ $p->commercial?->name }}</td>
                        <td class="px-4 py-3"><x-badge :status="$p->status" /></td>
                        <td class="px-4 py-3 text-right font-semibold">{{ $p->budgetLabel() }}</td>
                        <td class="px-4 py-3 text-slate-500">{{ optional($p->expected_close)->format('d/m/Y') ?? '—' }}</td>
                    </tr>
                @empty <tr><td colspan="7"><x-empty message="Aucun projet — créez-en depuis la fiche d'un prospect ou d'un client" /></td></tr> @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-4">{{ $projects->links() }}</div>
    </div>{{-- /#projects-results --}}
</x-card>

@push('scripts')
<script>
// Recherche automatique (même principe que la liste des prospects).
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('projects-filters');
    const results = document.getElementById('projects-results');
    const spinner = document.getElementById('projects-spinner');
    if (!form || !results) return;

    let timer = null, controller = null;

    const currentUrl = () => {
        const params = new URLSearchParams(new FormData(form));
        document.getElementById('projects-reset')?.classList.toggle('hidden', ![...params.values()].some(v => v !== ''));
        return form.action.split('?')[0] + '?' + params.toString();
    };

    const fetchResults = (url) => {
        if (controller) controller.abort();
        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 fresh = new DOMParser().parseFromString(html, 'text/html').getElementById('projects-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); } });
    };

    form.querySelector('input[name="q"]').addEventListener('input', () => {
        clearTimeout(timer);
        timer = setTimeout(() => fetchResults(currentUrl()), 300);
    });
    form.querySelectorAll('select').forEach(s => s.addEventListener('change', () => fetchResults(currentUrl())));
    form.addEventListener('submit', (e) => { e.preventDefault(); clearTimeout(timer); fetchResults(currentUrl()); });
    results.addEventListener('click', (e) => {
        const link = e.target.closest('#projects-results nav a[href]');
        if (!link) return;
        e.preventDefault();
        fetchResults(link.href);
    });
});
</script>
@endpush
@endsection