@extends('layouts.app')

@section('title', 'Factures')
@section('page-title', 'Factures')

@php
$clientsOptions = collect($impayes->items())
    ->map(fn($c) => $c->client)
    ->filter()
    ->unique('id')
    ->sortBy('nom')
    ->values()
    ->map(fn($c) => ['value' => $c->nom, 'label' => $c->nom])
    ->all();

$clientsOptions = array_merge([['value' => '', 'label' => 'Tous les clients']], $clientsOptions);

$facturesData = collect($impayes->items())
    ->map(function ($c) {
        $vente = $c->vente;
        $client = $c->client;
        $produit = $vente?->produit;
        $magasin = $vente?->magasin;

        $montant = (float) ($vente?->montant ?? 0);
        $reste = (float) ($c->montant_restant ?? 0);
        $paye = max(0, $montant - $reste);

        $dateVente = $vente?->date_vente;

        return [
            'reference' => $vente?->reference ?? ('CR-' . $c->id),
            'client' => $client?->nom ?? '—',
            'produit' => $produit?->designation ?? '—',
            'magasin' => $magasin?->nom ?? '—',
            'montant' => $montant,
            'montant_paye' => $paye,
            'montant_restant' => $reste,
            'statut_paiement' => $vente?->statut_paiement ?? 'en_attente',
            'date' => $dateVente ? $dateVente->format('d/m/Y') : '—',
            'dateObj' => $dateVente ? $dateVente->format('Y-m-d') : null,
        ];
    })
    ->values()
    ->all();
@endphp

@section('content')
<div x-data="factureManager()" id="facture-form">
    <x-page-card title="Liste des factures" action="" actionLabel="">
        {{-- Barre de filtres --}}
        <div class="mb-6 p-6 rounded-xl bg-slate-50/80 border border-slate-200">
            <div class="flex items-center gap-2 mb-4">
                <div class="w-8 h-8 rounded-lg bg-slate-200/80 flex items-center justify-center">
                    <svg class="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                </div>
                <span class="text-sm font-semibold text-slate-700 uppercase tracking-wide">Filtres</span>
            </div>
            <div class="flex flex-wrap items-end gap-x-6 gap-y-5">
                <div class="min-w-[180px] max-w-xs">
                    <x-form-group label="Du">
                        <input type="date" x-model="filterDateFrom" class="form-input py-2.5 text-sm w-full">
                    </x-form-group>
                </div>
                <div class="min-w-[180px] max-w-xs">
                    <x-form-group label="Au">
                        <input type="date" x-model="filterDateTo" class="form-input py-2.5 text-sm w-full">
                    </x-form-group>
                </div>
                <div class="min-w-[220px] max-w-sm flex-1">
                    <x-form-group label="Client">
                        <x-searchable-select form-id="facture-form" model="filterClient" placeholder="Tous les clients" :options="$clientsOptions" />
                    </x-form-group>
                </div>
                <div class="flex items-center gap-2 ml-auto">
                    <button type="button" @click="filterDateFrom = ''; filterDateTo = ''; filterClient = ''" class="px-4 py-2.5 rounded-lg text-sm font-medium text-slate-600 bg-white border border-slate-200 hover:bg-slate-50 hover:border-slate-300 transition-colors shrink-0">
                        Réinitialiser
                    </button>
                    <a
                        :href="exportUrl"
                        class="inline-flex items-center gap-2 px-3 py-2.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium shadow-sm transition-colors shrink-0"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4h16v4H4zM4 12h16v8H4zM10 8v8m4-8v8"/>
                        </svg>
                        Exporter
                    </a>
                </div>
            </div>
        </div>
        <div class="overflow-x-auto -mx-4 sm:mx-0">
            <table class="min-w-full divide-y divide-slate-200">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">N° Facture</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Client</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Produit</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Magasin</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Montant</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut paiement</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider w-24">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <template x-for="(f, i) in facturesFiltrees" :key="i">
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-4 py-3 font-mono text-sm text-slate-600" x-text="f.reference"></td>
                            <td class="px-4 py-3 font-medium text-slate-800" x-text="f.client"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="f.produit || '—'"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="f.magasin"></td>
                            <td class="px-4 py-3 font-semibold text-slate-800" x-text="formatPrice(f.montant)"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="f.date"></td>
                            <td class="px-4 py-3">
                                <span :class="getStatutClass(f.statut_paiement)" class="inline-flex px-2 py-1 rounded-md text-xs font-medium" x-text="getStatutLabel(f.statut_paiement)"></span>
                                <template x-if="(f.montant_restant || 0) > 0 && (f.montant_paye || 0) > 0">
                                    <p class="text-xs text-slate-500 mt-1" x-text="'Payé: ' + formatPrice(f.montant_paye || 0) + ' · Reste: ' + formatPrice((f.montant || 0) - (f.montant_paye || 0))"></p>
                                </template>
                            </td>
                            <td class="px-4 py-3">
                                <button type="button" @click="viewFacture(i)" class="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-colors" title="Voir">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </x-page-card>

    <x-detail-modal showVar="showDetailModal" title="Détail de la facture" subtitleVar="selectedItem ? selectedItem.reference : ''" maxWidth="max-w-2xl" :compact="true">
        <template x-if="selectedItem">
            <div class="space-y-4">
                <div class="p-4 rounded-xl bg-emerald-50 border border-emerald-100">
                    <p class="font-mono font-semibold text-emerald-800" x-text="selectedItem.reference"></p>
                    <p class="text-lg font-bold text-emerald-700 mt-1" x-text="formatPrice(selectedItem.montant)"></p>
                    <span :class="getStatutClass(selectedItem.statut_paiement)" class="inline-flex mt-2 px-2 py-1 rounded text-xs font-medium" x-text="getStatutLabel(selectedItem.statut_paiement)"></span>
                    <template x-if="selectedItem.statut_paiement === 'partiellement'">
                        <div class="mt-3 pt-3 border-t border-emerald-200/50 text-sm">
                            <p class="text-emerald-700"><span class="font-medium">Payé:</span> <span x-text="formatPrice(selectedItem.montant_paye || 0)"></span></p>
                            <p class="text-amber-700 mt-1"><span class="font-medium">Reste à payer:</span> <span x-text="formatPrice((selectedItem.montant || 0) - (selectedItem.montant_paye || 0))"></span></p>
                        </div>
                    </template>
                </div>
                <dl class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
                    <div><dt class="text-slate-500">Client</dt><dd class="font-medium text-slate-800" x-text="selectedItem.client"></dd></div>
                    <div><dt class="text-slate-500">Produit</dt><dd class="font-medium text-slate-800" x-text="selectedItem.produit || '—'"></dd></div>
                    <div><dt class="text-slate-500">Magasin</dt><dd class="font-medium text-slate-800" x-text="selectedItem.magasin"></dd></div>
                    <div><dt class="text-slate-500">Date</dt><dd class="font-medium text-slate-800" x-text="selectedItem.date"></dd></div>
                    <div><dt class="text-slate-500">Montant total</dt><dd class="font-semibold text-emerald-600" x-text="formatPrice(selectedItem.montant)"></dd></div>
                </dl>
            </div>
        </template>
    </x-detail-modal>
</div>

<script>
function factureManager() {
    return {
        showDetailModal: false,
        selectedItem: null,
        filterClient: '',
        filterDateFrom: '',
        filterDateTo: '',
        factures: @json($facturesData),
        get exportUrl() {
            const params = new URLSearchParams();
            if (this.filterClient) params.append('client', this.filterClient);
            if (this.filterDateFrom) params.append('date_from', this.filterDateFrom);
            if (this.filterDateTo) params.append('date_to', this.filterDateTo);
            const qs = params.toString();
            return '{{ route('factures.export') }}' + (qs ? ('?' + qs) : '');
        },
        get facturesFiltrees() {
            return this.factures.filter(f => {
                if (this.filterClient && f.client !== this.filterClient) return false;
                const d = f.dateObj || f.date.split('/').reverse().join('-');
                if (this.filterDateFrom && d < this.filterDateFrom) return false;
                if (this.filterDateTo && d > this.filterDateTo) return false;
                return true;
            });
        },
        formatPrice(n) { return new Intl.NumberFormat('fr-FR').format(n) + ' FCFA'; },
        getStatutLabel(s) {
            const labels = { paye: 'Payé', partiellement: 'Partiellement', en_attente: 'En attente' };
            return labels[s] || s;
        },
        getStatutClass(s) {
            const classes = { paye: 'bg-emerald-100 text-emerald-700', partiellement: 'bg-amber-100 text-amber-700', en_attente: 'bg-slate-100 text-slate-700' };
            return classes[s] || 'bg-slate-100 text-slate-600';
        },
        viewFacture(i) {
            this.selectedItem = this.facturesFiltrees[i];
            this.showDetailModal = true;
        }
    };
}
</script>

@if($impayes->hasPages())
<div class="mt-4 px-4">
    {{ $impayes->links() }}
</div>
@endif
@endsection