@extends('layouts.prestataire')

@section('title', 'Mes Factures & Releves')

@push('styles')
<style>
    .invoice-compact-page .invoice-top {
        margin-bottom: 1rem;
    }
    .invoice-compact-page .invoice-action {
        min-height: 42px;
        padding: 0.65rem 0.95rem;
        border-radius: 0.95rem;
        border: none !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }
    .invoice-compact-page .invoice-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
        margin-bottom: 1rem;
    }
    .invoice-compact-page .invoice-stat-card {
        width: 100%;
        min-width: 0;
        padding: 0.92rem;
        border-radius: 1rem;
        border: none !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }
    .invoice-compact-page .invoice-stat-label {
        font-size: 0.72rem;
        line-height: 1.1;
    }
    .invoice-compact-page .invoice-stat-value {
        font-size: 1.35rem;
        line-height: 1;
    }
    .invoice-compact-page .invoice-stat-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.8rem;
    }
    .invoice-compact-page .invoice-filter-panel {
        margin-bottom: 1rem;
        background: transparent;
        border: none !important;
        box-shadow: none;
    }
    .invoice-compact-page .invoice-filter-form {
        gap: 0.7rem;
    }
    .invoice-compact-page .invoice-filter-box {
        background: #ffffff;
        border-radius: 1rem;
        padding: 0.82rem 0.9rem;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }
    .invoice-compact-page .invoice-filter-box input,
    .invoice-compact-page .invoice-filter-box select {
        width: 100%;
        border: none !important;
        box-shadow: none !important;
        background: #f8fafc !important;
        border-radius: 0.82rem !important;
        padding: 0.72rem 0.82rem !important;
        font-size: 0.92rem;
    }
    .invoice-compact-page .invoice-filter-submit {
        min-width: 132px;
        border: none !important;
        box-shadow: 0 10px 24px rgba(79, 70, 229, 0.18);
    }
    .invoice-compact-page .invoice-list-head {
        padding: 0.2rem 0.25rem 0.55rem;
    }
    .invoice-compact-page .invoice-list {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }
    .invoice-compact-page .invoice-row {
        border-radius: 1rem;
        border: none !important;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        transition: transform 0.16s ease, box-shadow 0.16s ease;
    }
    .invoice-compact-page .invoice-row:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    }
    .invoice-compact-page .invoice-badge {
        padding: 0.34rem 0.58rem;
        border-radius: 9999px;
        font-size: 0.72rem;
        line-height: 1;
        font-weight: 600;
    }
    .invoice-compact-page .invoice-empty {
        border-radius: 1rem;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }
    @media (min-width: 768px) {
        .invoice-compact-page .invoice-stats {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (min-width: 1280px) {
        .invoice-compact-page .invoice-stats {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
    }
    @media (max-width: 640px) {
        .invoice-compact-page {
            padding-top: 0.7rem;
            padding-bottom: 1rem;
        }
        .invoice-compact-page .invoice-top {
            margin-bottom: 0.8rem;
        }
        .invoice-compact-page .invoice-title {
            font-size: 1.16rem;
            line-height: 1.1;
        }
        .invoice-compact-page .invoice-subtitle {
            font-size: 0.78rem;
            margin-top: 0.2rem;
        }
        .invoice-compact-page .invoice-action {
            width: auto;
            align-self: flex-start;
            justify-content: center;
            min-height: 36px;
            padding: 0.5rem 0.74rem;
            font-size: 0.72rem;
            border-radius: 0.78rem;
        }
        .invoice-compact-page .invoice-stats {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 0.35rem;
        }
        .invoice-compact-page .invoice-stat-card {
            height: 78px;
            min-height: 0;
            padding: 0.45rem;
            border-radius: 0.76rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .invoice-compact-page .invoice-stat-label {
            font-size: 0.54rem;
            line-height: 1.02;
        }
        .invoice-compact-page .invoice-stat-value {
            font-size: 0.8rem;
            line-height: 1;
        }
        .invoice-compact-page .invoice-stat-icon {
            width: 1.38rem;
            height: 1.38rem;
            border-radius: 0.52rem;
        }
        .invoice-compact-page .invoice-filter-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.35rem;
        }
        .invoice-compact-page .invoice-filter-box {
            padding: 0.56rem 0.6rem;
            border-radius: 0.78rem;
        }
        .invoice-compact-page .invoice-filter-box--search,
        .invoice-compact-page .invoice-filter-box--submit {
            grid-column: auto;
        }
        .invoice-compact-page .invoice-filter-box input,
        .invoice-compact-page .invoice-filter-box select {
            padding: 0.54rem 0.6rem !important;
            font-size: 0.74rem;
        }
        .invoice-compact-page .invoice-filter-submit {
            width: 100%;
            min-height: 36px;
            font-size: 0.72rem;
            padding: 0.54rem 0.6rem !important;
            border-radius: 0.7rem;
        }
        .invoice-compact-page .invoice-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.35rem;
        }
        .invoice-compact-page .invoice-row {
            height: 146px;
            border-radius: 0.8rem;
        }
        .invoice-compact-page .invoice-mobile-card {
            height: 100%;
            padding: 0.62rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .invoice-compact-page .invoice-mobile-description {
            font-size: 0.74rem;
            line-height: 1.18;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .invoice-compact-page .invoice-mobile-meta {
            font-size: 0.66rem;
            line-height: 1.12;
        }
        .invoice-compact-page .invoice-mobile-number {
            font-size: 0.74rem;
            line-height: 1.05;
        }
        .invoice-compact-page .invoice-mobile-net-label {
            font-size: 0.58rem;
            line-height: 1;
        }
        .invoice-compact-page .invoice-mobile-net-value {
            font-size: 0.76rem;
            line-height: 1;
        }
        .invoice-compact-page .invoice-badge {
            padding: 0.22rem 0.38rem;
            font-size: 0.58rem;
        }
    }
</style>
@endpush

@section('content')
<div class="invoice-compact-page min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 py-4 sm:py-6">
    <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">

        <div class="invoice-top flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <h1 class="invoice-title text-xl sm:text-2xl font-bold text-gray-900">Factures & releves</h1>
                <p class="invoice-subtitle text-sm text-gray-600 mt-1">Historique compact de vos ventes, commissions et montants nets.</p>
            </div>
            <a href="{{ route('prestataire.invoices.export') }}"
               class="invoice-action inline-flex items-center justify-center bg-green-600 text-white hover:bg-green-700 text-sm font-semibold">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                Export CSV
            </a>
        </div>

        <div class="invoice-stats">
            <div class="invoice-stat-card bg-white">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="invoice-stat-label text-gray-500 uppercase tracking-wide">Factures</p>
                        <p class="invoice-stat-value font-bold text-gray-900 mt-2">{{ $stats['total_count'] }}</p>
                    </div>
                    <div class="invoice-stat-icon bg-slate-100 flex items-center justify-center text-slate-600">
                        <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="M9 12h6m-6 4h6M7 8h10M7 3h8l4 4v14a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2z"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="invoice-stat-card bg-white">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="invoice-stat-label text-gray-500 uppercase tracking-wide">CA total</p>
                        <p class="invoice-stat-value font-bold text-blue-600 mt-2">{{ number_format($stats['total_revenue'], 0, ',', ' ') }}€</p>
                    </div>
                    <div class="invoice-stat-icon bg-blue-100 flex items-center justify-center text-blue-600">
                        <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="invoice-stat-card bg-white">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="invoice-stat-label text-gray-500 uppercase tracking-wide">Commission</p>
                        <p class="invoice-stat-value font-bold text-red-500 mt-2">{{ number_format($stats['total_commission'], 0, ',', ' ') }}€</p>
                    </div>
                    <div class="invoice-stat-icon bg-red-100 flex items-center justify-center text-red-500">
                        <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="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="invoice-stat-card bg-white">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="invoice-stat-label text-gray-500 uppercase tracking-wide">Net recu</p>
                        <p class="invoice-stat-value font-bold text-green-600 mt-2">{{ number_format($stats['total_net'], 0, ',', ' ') }}€</p>
                    </div>
                    <div class="invoice-stat-icon bg-green-100 flex items-center justify-center text-green-600">
                        <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="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="invoice-stat-card bg-gradient-to-br from-blue-500 to-indigo-600 text-white">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="invoice-stat-label text-blue-100 uppercase tracking-wide">CA mois</p>
                        <p class="invoice-stat-value font-bold mt-2">{{ number_format($stats['this_month_revenue'], 0, ',', ' ') }}€</p>
                    </div>
                    <div class="invoice-stat-icon bg-white/20 flex items-center justify-center text-white">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="invoice-stat-card bg-gradient-to-br from-green-500 to-emerald-600 text-white">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="invoice-stat-label text-green-100 uppercase tracking-wide">Net mois</p>
                        <p class="invoice-stat-value font-bold mt-2">{{ number_format($stats['this_month_net'], 0, ',', ' ') }}€</p>
                    </div>
                    <div class="invoice-stat-icon bg-white/20 flex items-center justify-center text-white">
                        <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="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <div class="invoice-filter-panel">
            <form method="GET" class="invoice-filter-form flex flex-wrap items-end">
                <div class="invoice-filter-box invoice-filter-box--search flex-1 min-w-[220px]">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Recherche</label>
                    <input type="text" name="search" value="{{ request('search') }}"
                           placeholder="Numero, client, description">
                </div>
                <div class="invoice-filter-box min-w-[170px]">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Statut</label>
                    <select name="status">
                        <option value="">Tous statuts</option>
                        <option value="paid" {{ request('status') === 'paid' ? 'selected' : '' }}>Payee</option>
                        <option value="issued" {{ request('status') === 'issued' ? 'selected' : '' }}>En attente</option>
                    </select>
                </div>
                <div class="invoice-filter-box min-w-[170px]">
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Periode</label>
                    <select name="period">
                        <option value="">Toutes periodes</option>
                        <option value="month" {{ request('period') === 'month' ? 'selected' : '' }}>Ce mois</option>
                        <option value="quarter" {{ request('period') === 'quarter' ? 'selected' : '' }}>Ce trimestre</option>
                        <option value="year" {{ request('period') === 'year' ? 'selected' : '' }}>Cette annee</option>
                    </select>
                </div>
                <div class="invoice-filter-box invoice-filter-box--submit min-w-[132px]">
                    <button type="submit" class="invoice-filter-submit w-full px-4 py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 text-sm font-semibold">
                        Filtrer
                    </button>
                </div>
            </form>
        </div>

        <div class="hidden sm:grid invoice-list-head grid-cols-12 gap-3 text-[11px] font-semibold text-gray-500 uppercase tracking-wide">
            <div class="col-span-4">Facture</div>
            <div class="col-span-3">Client</div>
            <div class="col-span-2 text-right">Montant</div>
            <div class="col-span-2 text-right">Net</div>
            <div class="col-span-1 text-center">Statut</div>
        </div>

        <div class="invoice-list">
            @forelse($invoices as $invoice)
                <a href="{{ route('prestataire.invoices.show', $invoice) }}"
                   class="invoice-row block sm:grid sm:grid-cols-12 sm:gap-3">

                    <div class="invoice-mobile-card sm:hidden">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <p class="invoice-mobile-number font-semibold text-sm text-gray-900 truncate">{{ $invoice->invoice_number }}</p>
                                <p class="invoice-mobile-description text-gray-700 mt-1">{{ \Illuminate\Support\Str::limit($invoice->description, 68) }}</p>
                            </div>
                            <span class="invoice-badge shrink-0 {{ $invoice->status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700' }}">{{ $invoice->status_label }}</span>
                        </div>
                        <div class="mt-3 flex items-end justify-between gap-3">
                            <div class="invoice-mobile-meta min-w-0 text-gray-500">
                                <p class="truncate">{{ $invoice->billing_name }}</p>
                                <p>{{ $invoice->issued_at?->format('d/m/Y') }}</p>
                            </div>
                            <div class="text-right shrink-0">
                                <p class="invoice-mobile-net-label text-[11px] text-gray-400">Net</p>
                                <p class="invoice-mobile-net-value text-sm font-bold text-green-600">+{{ number_format($invoice->net_amount, 2) }}€</p>
                            </div>
                        </div>
                    </div>

                    <div class="hidden sm:block col-span-4 px-4 py-3">
                        <p class="font-semibold text-sm text-gray-900">{{ $invoice->invoice_number }}</p>
                        <p class="text-sm text-gray-600 mt-1">{{ \Illuminate\Support\Str::limit($invoice->description, 48) }}</p>
                        <p class="text-xs text-gray-400 mt-1">{{ $invoice->issued_at?->format('d/m/Y a H:i') }}</p>
                    </div>
                    <div class="hidden sm:block col-span-3 px-2 py-3">
                        <p class="text-sm font-medium text-gray-900">{{ $invoice->billing_name }}</p>
                        <p class="text-xs text-gray-500 mt-1">{{ $invoice->billing_email }}</p>
                    </div>
                    <div class="hidden sm:block col-span-2 text-right px-2 py-3">
                        <p class="text-sm font-medium text-gray-900">{{ number_format($invoice->total, 2) }}€</p>
                        <p class="text-xs text-red-500 mt-1">-{{ number_format($invoice->commission_amount, 2) }}€ com.</p>
                    </div>
                    <div class="hidden sm:block col-span-2 text-right px-2 py-3">
                        <p class="text-base font-bold text-green-600">{{ number_format($invoice->net_amount, 2) }}€</p>
                    </div>
                    <div class="hidden sm:flex col-span-1 items-center justify-center px-2 py-3">
                        <span class="invoice-badge {{ $invoice->status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700' }}">
                            {{ $invoice->status_label }}
                        </span>
                    </div>
                </a>
            @empty
                <div class="invoice-empty text-center py-10 px-4">
                    <div class="text-4xl mb-3">📭</div>
                    <p class="text-gray-500">Aucune facture trouvee</p>
                </div>
            @endforelse
        </div>

        @if($invoices->hasPages())
            <div class="mt-6">
                {{ $invoices->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>
@endsection