@extends('layouts.app')

@section('page-title', 'Mon Tableau de Bord')
@section('page-subtitle', 'Mes performances et gains')

@section('content')
<style>
    .welcome-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 1rem;
        padding: 2.5rem;
        color: white;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }

    .welcome-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .welcome-subtitle {
        font-size: 1.1rem;
        opacity: 0.95;
    }

    .earnings-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.2);
        padding: 0.75rem 1.5rem;
        border-radius: 2rem;
        margin-top: 1rem;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border-left: 4px solid;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
    }

    .stat-label {
        font-size: 0.85rem;
        color: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        line-height: 1;
    }

    .stat-detail {
        font-size: 0.9rem;
        color: #6b7280;
    }

    .section-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .section-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .filter-buttons {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
    }

    .filter-btn {
        padding: 0.625rem 1.25rem;
        border: 2px solid #e5e7eb;
        background: white;
        color: #4b5563;
        border-radius: 0.75rem;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .filter-btn:hover {
        border-color: #667eea;
        color: #667eea;
        background: #f3f4f6;
    }

    .filter-btn.active {
        background: #667eea;
        color: white;
        border-color: #667eea;
    }

    .commission-table {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        background: #f9fafb;
        padding: 1rem;
        text-align: left;
        font-weight: 700;
        color: #374151;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #e5e7eb;
    }

    td {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        color: #111827;
    }

    tr:hover {
        background: #f9fafb;
    }

    .badge {
        display: inline-block;
        padding: 0.35rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .progress {
        height: 8px;
        border-radius: 1rem;
        background: #e5e7eb;
        overflow: hidden;
        margin-top: 0.5rem;
    }

    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        transition: width 0.3s ease;
    }
</style>

<!-- Welcome Card -->
<div class="welcome-card">
    <div class="d-flex justify-content-between align-items-start flex-wrap">
        <div>
            <div class="welcome-title">👋 Bonjour, {{ $equipe->name }}!</div>
            <div class="welcome-subtitle">
                <strong>{{ $equipe->magasin ?? 'N/A' }}</strong> • {{ $equipe->service ?? 'N/A' }}
            </div>
            <div class="earnings-badge">
                💰 Gains ce mois: <strong>{{ number_format($currentMonthEarnings, 2) }} MAD</strong>
            </div>
        </div>
        <div class="text-end">
            <div style="font-size: 0.9rem; opacity: 0.9;">Type de paiement</div>
            <div style="font-size: 1.5rem; font-weight: 700;">
                @if($equipe->type_paiement === 'Commission')
                    📊 Commission {{ $equipe->commission_rate }}%
                @else
                    💵 Salaire Fixe
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Filter Buttons -->
<div class="filter-buttons">
    <a href="?period=week" class="filter-btn {{ $period === 'week' ? 'active' : '' }}">
        <i class="fas fa-calendar-week"></i> Cette semaine
    </a>
    <a href="?period=month" class="filter-btn {{ $period === 'month' ? 'active' : '' }}">
        <i class="fas fa-calendar"></i> Ce mois
    </a>
    <a href="?period=year" class="filter-btn {{ $period === 'year' ? 'active' : '' }}">
        <i class="fas fa-calendar-alt"></i> Cette année
    </a>
    <a href="?period=all" class="filter-btn {{ $period === 'all' ? 'active' : '' }}">
        <i class="fas fa-infinity"></i> Tout
    </a>
</div>

<!-- Today's Stats -->
<div class="section-title">
    <i class="fas fa-calendar-day" style="color: #667eea;"></i>
    Statistiques du Jour
</div>

<div class="stats-grid">
    <div class="stat-card" style="border-left-color: #3b82f6;">
        <div class="stat-label">📦 Total Commandes</div>
        <div class="stat-value" style="color: #3b82f6;">{{ $todayStats['total'] }}</div>
        <div class="stat-detail">Aujourd'hui</div>
    </div>

    <div class="stat-card" style="border-left-color: #10b981;">
        <div class="stat-label">✅ Confirmées</div>
        <div class="stat-value" style="color: #10b981;">{{ $todayStats['confirmed'] }}</div>
        <div class="stat-detail">Revenue: {{ number_format($todayStats['revenue'], 2) }} MAD</div>
    </div>

    <div class="stat-card" style="border-left-color: #ef4444;">
        <div class="stat-label">❌ Annulées</div>
        <div class="stat-value" style="color: #ef4444;">{{ $todayStats['cancelled'] }}</div>
        <div class="stat-detail">{{ $todayStats['total'] > 0 ? round(($todayStats['cancelled'] / $todayStats['total']) * 100, 1) : 0 }}% du total</div>
    </div>

    <div class="stat-card" style="border-left-color: #f59e0b;">
        <div class="stat-label">⏳ En Attente</div>
        <div class="stat-value" style="color: #f59e0b;">{{ $todayStats['pending'] }}</div>
        <div class="stat-detail">À traiter</div>
    </div>
</div>

<!-- Monthly Performance -->
<div class="section-title">
    <i class="fas fa-chart-line" style="color: #667eea;"></i>
    Performance du Mois
</div>

<div class="stats-grid">
    <div class="stat-card" style="border-left-color: #8b5cf6;">
        <div class="stat-label">📊 Total Commandes</div>
        <div class="stat-value" style="color: #8b5cf6;">{{ $monthlyStats['total'] }}</div>
        <div class="stat-detail">Ce mois-ci</div>
    </div>

    <div class="stat-card" style="border-left-color: #10b981;">
        <div class="stat-label">✅ Taux de Confirmation</div>
        <div class="stat-value" style="color: #10b981;">
            {{ $monthlyStats['total'] > 0 ? round(($monthlyStats['confirmed'] / $monthlyStats['total']) * 100, 1) : 0 }}%
        </div>
        <div class="progress">
            <div class="progress-bar" style="width: {{ $monthlyStats['total'] > 0 ? round(($monthlyStats['confirmed'] / $monthlyStats['total']) * 100, 1) : 0 }}%;"></div>
        </div>
    </div>

    <div class="stat-card" style="border-left-color: #06b6d4;">
        <div class="stat-label">💰 Revenu Total</div>
        <div class="stat-value" style="color: #06b6d4; font-size: 1.75rem;">
            {{ number_format($monthlyStats['revenue'], 2) }} <span style="font-size: 1rem;">MAD</span>
        </div>
        @if($equipe->type_paiement === 'Commission')
            <div class="stat-detail">Commission: {{ number_format(($monthlyStats['revenue'] * $equipe->commission_rate) / 100, 2) }} MAD</div>
        @endif
    </div>

    <div class="stat-card" style="border-left-color: #10b981;">
        <div class="stat-label">💵 Mes Gains</div>
        <div class="stat-value" style="color: #10b981; font-size: 1.75rem;">
            {{ number_format($currentMonthEarnings, 2) }} <span style="font-size: 1rem;">MAD</span>
        </div>
        <div class="stat-detail">
            @if($equipe->type_paiement === 'Commission')
                {{ $equipe->commission_rate }}% de commission
            @else
                Salaire fixe
            @endif
        </div>
    </div>
</div>

<!-- Performance Charts -->
<div class="section-card">
    <div class="section-title">
        <i class="fas fa-chart-bar" style="color: #667eea;"></i>
        Évolution des Performances
    </div>
    <canvas id="performanceChart" height="80"></canvas>
</div>

<!-- Commission Details (if type is Commission) -->
@if($equipe->type_paiement === 'Commission' && count($commissionDetails) > 0)
<div class="section-card">
    <div class="section-title">
        <i class="fas fa-money-bill-wave" style="color: #10b981;"></i>
        Détails des Commissions
    </div>
    
    <div class="commission-table">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Client</th>
                    <th>Produit</th>
                    <th>Total Commande</th>
                    <th>Taux</th>
                    <th>Ma Commission</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach($commissionDetails as $detail)
                <tr>
                    <td><strong>#{{ $detail['order_id'] }}</strong></td>
                    <td>{{ $detail['client_name'] }}</td>
                    <td>{{ $detail['product_name'] }}</td>
                    <td><strong>{{ number_format($detail['total'], 2) }} MAD</strong></td>
                    <td><span class="badge" style="background: #dbeafe; color: #1e40af;">{{ $detail['commission_rate'] }}%</span></td>
                    <td><strong style="color: #10b981;">{{ number_format($detail['commission_amount'], 2) }} MAD</strong></td>
                    <td>{{ $detail['date']->format('d/m/Y') }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr style="background: #f9fafb; font-weight: 700;">
                    <td colspan="5" class="text-end">Total:</td>
                    <td style="color: #10b981; font-size: 1.1rem;">
                        {{ number_format($earnings['commission_amount'], 2) }} MAD
                    </td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif

<!-- Recent Orders -->
@if(count($recentOrders) > 0)
<div class="section-card">
    <div class="section-title">
        <i class="fas fa-clock" style="color: #667eea;"></i>
        Commandes Récentes
    </div>
    
    <div class="commission-table">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Client</th>
                    <th>Produit</th>
                    <th>Quantité</th>
                    <th>Total</th>
                    <th>Statut</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentOrders as $order)
                <tr>
                    <td><strong>#{{ $order->id }}</strong></td>
                    <td>{{ $order->client_name }}</td>
                    <td>{{ $order->product_name }}</td>
                    <td><span class="badge" style="background: #dbeafe; color: #1e40af;">{{ $order->quantity }}</span></td>
                    <td><strong>{{ number_format($order->total, 2) }} MAD</strong></td>
                    <td>
                        @if($order->status === 'confirmed')
                            <span class="badge" style="background: #d1fae5; color: #065f46;">✅ Confirmée</span>
                        @elseif($order->status === 'cancelled')
                            <span class="badge" style="background: #fee2e2; color: #991b1b;">❌ Annulée</span>
                        @else
                            <span class="badge" style="background: #fef3c7; color: #92400e;">⏳ En attente</span>
                        @endif
                    </td>
                    <td>{{ $order->created_at->format('d/m/Y H:i') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const chartData = @json($chartData);

    // Performance Chart
    const performanceCtx = document.getElementById('performanceChart').getContext('2d');
    new Chart(performanceCtx, {
        type: 'line',
        data: {
            labels: chartData.labels,
            datasets: [
                {
                    label: '✅ Confirmées',
                    data: chartData.confirmed,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    tension: 0.4,
                    fill: true,
                    borderWidth: 3
                },
                {
                    label: '❌ Annulées',
                    data: chartData.cancelled,
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    tension: 0.4,
                    fill: true,
                    borderWidth: 3
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 15, font: { size: 13 } }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { stepSize: 1 }
                }
            }
        }
    });
</script>
@endpush