@extends('layouts.app')
@section('title','Facturation')
@section('heading','Facturation')
@section('actions')
    <x-btn variant="secondary" :href="route('exports.invoices')">📊 Export Excel</x-btn>
    <x-btn :href="route('invoices.create')">➕ Nouvelle facture</x-btn>
@endsection
@section('content')
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <x-stat label="CA encaissé" :value="eur($stats['ca_encaisse'])" icon="✅" />
    <x-stat label="Impayé" :value="eur($stats['impaye'])" icon="⏳" />
    <x-stat label="En retard" :value="eur($stats['retard'])" icon="🚨" />
    <x-stat label="Brouillons" :value="$stats['brouillon']" icon="📝" />
</div>
<div class="flex gap-2 mb-4 text-sm">
    <a href="{{ route('invoices.index') }}" class="px-3 py-1.5 rounded-lg {{ !request('status')?'bg-brand-600 text-white':'bg-white border' }}">Toutes</a>
    @foreach(['brouillon'=>'Brouillons','envoyee'=>'Envoyées','payee'=>'Payées','remboursee'=>'Remboursés','retard'=>'En retard'] as $k=>$v)
        <a href="{{ route('invoices.index',['status'=>$k]) }}" class="px-3 py-1.5 rounded-lg {{ request('status')==$k?'bg-brand-600 text-white':'bg-white border' }}">{{ $v }}</a>
    @endforeach
</div>
<x-card :padded="false">
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[640px]">
        <thead class="bg-slate-50 text-slate-500 text-left"><tr><th class="w-6"></th><th class="px-4 py-3 font-medium">N°</th><th class="px-4 py-3 font-medium">Client</th><th class="px-4 py-3 font-medium">Type</th><th class="px-4 py-3 font-medium">Date</th><th class="px-4 py-3 font-medium">Échéance</th><th class="px-4 py-3 font-medium">Statut</th><th class="px-4 py-3 font-medium text-right">TTC</th><th class="px-4 py-3 font-medium text-right">Reste</th></tr></thead>
        <tbody class="divide-y divide-slate-50" data-reorder="invoices">
            @forelse($invoices as $i)
                <tr class="hover:bg-slate-50" data-id="{{ $i->id }}">
                    @include('partials.drag')
                    <td class="px-4 py-3"><a href="{{ route('invoices.show',$i) }}" class="font-mono text-brand-600 hover:underline">{{ $i->number }}</a></td>
                    <td class="px-4 py-3">{{ $i->client?->company }}</td>
                    <td class="px-4 py-3"><x-badge status="default" :label="$i->type" /></td>
                    <td class="px-4 py-3 text-slate-500">{{ $i->date?->format('d/m/Y') }}</td>
                    <td class="px-4 py-3 {{ $i->isOverdue() ? 'text-rose-500 font-semibold' : 'text-slate-500' }}">{{ optional($i->due_date)->format('d/m/Y') }}</td>
                    <td class="px-4 py-3"><x-badge :status="$i->isOverdue()?'retard':$i->status" :label="$i->isOverdue()?'retard':$i->status" /></td>
                    <td class="px-4 py-3 text-right font-semibold">{{ eur($i->total) }}</td>
                    <td class="px-4 py-3 text-right {{ $i->balance()>0?'text-rose-500':'text-emerald-500' }}">{{ eur($i->balance()) }}</td>
                </tr>
            @empty <tr><td colspan="9"><x-empty message="Aucune facture" /></td></tr> @endforelse
        </tbody>
    </table>
        </div>
    <div class="p-4">{{ $invoices->links() }}</div>
</x-card>
@endsection