@extends('layouts.ambassador')

@section('title', 'Mes commissions')

@section('content')
<div class="page-header">
    <h1 class="page-title">Mes commissions</h1>
    <p class="page-subtitle">Suivi détaillé de toutes vos commissions</p>
</div>

<div class="stats-grid">
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #7c3aed, #5b21b6);"><i class="fas fa-calendar-day"></i></div>
        <div class="stat-info"><div class="stat-value">{{ number_format($stats['today'], 2, ',', ' ') }} €</div><div class="stat-label">Aujourd'hui</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #06b6d4, #0891b2);"><i class="fas fa-calendar-week"></i></div>
        <div class="stat-info"><div class="stat-value">{{ number_format($stats['this_week'], 2, ',', ' ') }} €</div><div class="stat-label">Cette semaine</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #10b981, #059669);"><i class="fas fa-calendar-alt"></i></div>
        <div class="stat-info"><div class="stat-value">{{ number_format($stats['this_month'], 2, ',', ' ') }} €</div><div class="stat-label">Ce mois</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);"><i class="fas fa-coins"></i></div>
        <div class="stat-info"><div class="stat-value">{{ number_format($stats['total'], 2, ',', ' ') }} €</div><div class="stat-label">Total</div></div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card-base text-center">
            <div class="text-warning fw-bold fs-4">{{ number_format($stats['pending'], 2, ',', ' ') }} €</div>
            <small class="text-muted">En attente</small>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card-base text-center">
            <div class="text-primary fw-bold fs-4">{{ number_format($stats['payable'], 2, ',', ' ') }} €</div>
            <small class="text-muted">Payable</small>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card-base text-center">
            <div class="text-success fw-bold fs-4">{{ number_format($stats['paid'], 2, ',', ' ') }} €</div>
            <small class="text-muted">Versé</small>
        </div>
    </div>
</div>

<!-- Filtres -->
<div class="card-base mb-4">
    <form method="GET" class="d-flex gap-2 align-items-end flex-wrap">
        <div>
            <label class="form-label small">Statut</label>
            <select name="status" class="form-select form-select-sm" style="width:150px;">
                <option value="">Tous</option>
                @foreach(['pending' => 'En attente', 'validated' => 'Validée', 'payable' => 'Payable', 'paid' => 'Versée', 'cancelled' => 'Annulée'] as $v => $l)
                    <option value="{{ $v }}" {{ request('status') === $v ? 'selected' : '' }}>{{ $l }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label small">Du</label>
            <input type="date" name="period_start" value="{{ request('period_start') }}" class="form-control form-control-sm">
        </div>
        <div>
            <label class="form-label small">Au</label>
            <input type="date" name="period_end" value="{{ request('period_end') }}" class="form-control form-control-sm">
        </div>
        <button class="btn btn-sm btn-primary"><i class="fas fa-search"></i></button>
        <a href="{{ route('ambassador.commissions.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
    </form>
</div>

<div class="card-base">
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr><th>Date</th><th>Type</th><th>Prestataire</th><th>Catégorie</th><th>Montant commande</th><th>Ma commission</th><th>Dispo le</th><th>Statut</th></tr>
            </thead>
            <tbody>
            @forelse($commissions as $c)
                <tr>
                    <td>{{ $c->created_at->format('d/m/Y') }}</td>
                    <td><small>{{ $c->order_type_label }}</small></td>
                    <td>{{ $c->prestataire?->user?->name ?? 'N/A' }}</td>
                    <td>{{ $c->category_key }}</td>
                    <td>{{ number_format($c->gross_order_amount, 2, ',', ' ') }} €</td>
                    <td class="fw-semibold text-success">{{ number_format($c->ambassador_commission_amount, 2, ',', ' ') }} €</td>
                    <td>{{ $c->available_at?->format('d/m/Y') ?? '-' }}</td>
                    <td><span class="badge bg-{{ $c->status_color }}">{{ $c->status_label }}</span></td>
                </tr>
            @empty
                <tr><td colspan="8" class="text-center py-4 text-muted">Aucune commission</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    {{ $commissions->withQueryString()->links() }}
</div>
@endsection