@extends('layouts.admin')

@section('title', 'Détails Pool - ' . $month . '/' . $year)
@section('page-title', 'Détails Distribution du Pool')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2 class="mb-1">
                    <i class="bi bi-calendar-month me-2"></i>Période: {{ \DateTime::createFromFormat('m/Y', $month . '/' . $year)->format('F Y') }}
                </h2>
                <p class="text-muted mb-0">Détail complet de la distribution du pool pour cette période</p>
            </div>
            <a href="{{ route('admin.pool.history') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left me-2"></i>Retour à l'historique
            </a>
        </div>
    </div>
</div>

<!-- Cartes de statistiques -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <p class="text-muted small mb-2">Montant total distribué</p>
                <h3 class="text-success mb-0">
                    {{ number_format($totalAmount, 0, ',', ' ') }} XOF
                </h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <p class="text-muted small mb-2">Nombre de bénéficiaires</p>
                <h3 class="text-primary mb-0">
                    {{ $shares->count() }}
                </h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <p class="text-muted small mb-2">Montant moyen</p>
                <h3 class="text-info mb-0">
                    {{ $shares->count() > 0 ? number_format($totalAmount / $shares->count(), 0, ',', ' ') : 0 }} XOF
                </h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <p class="text-muted small mb-2">Montant maximum</p>
                <h3 class="text-warning mb-0">
                    {{ $shares->count() > 0 ? number_format($shares->max('amount'), 0, ',', ' ') : 0 }} XOF
                </h3>
            </div>
        </div>
    </div>
</div>

<!-- Tableau détaillé -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-table me-2"></i>Distribution Détaillée
                </h5>
            </div>
            <div class="card-body">
                @if($shares->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 5%;">#</th>
                                    <th>Utilisateur</th>
                                    <th class="text-end" style="width: 15%;">Ventes Globales</th>
                                    <th class="text-center" style="width: 12%;">Contribution</th>
                                    <th class="text-end" style="width: 15%;">Montant (XOF)</th>
                                    <th class="text-center" style="width: 10%;">Statut</th>
                                    <th class="text-center">Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($shares as $index => $share)
                                    <tr class="align-middle">
                                        <td>
                                            <span class="badge bg-light text-dark">{{ $index + 1 }}</span>
                                        </td>
                                        <td>
                                            <strong>{{ $share->user->name ?? 'N/A' }}</strong>
                                            @if($share->user)
                                                <br>
                                                <small class="text-muted">
                                                    {{ $share->user->email }}
                                                </small>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            <code>{{ number_format($share->global_sales, 0, ',', ' ') }} XOF</code>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-secondary">
                                                {{ number_format($share->user_contribution, 0, ',', ' ') }} XOF
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <strong class="text-success fs-5">
                                                {{ number_format($share->amount, 0, ',', ' ') }}
                                            </strong>
                                        </td>
                                        <td class="text-center">
                                            @if($share->status === 'paid')
                                                <span class="badge bg-success">
                                                    <i class="bi bi-check-circle me-1"></i>Payé
                                                </span>
                                            @elseif($share->status === 'pending')
                                                <span class="badge bg-warning text-dark">
                                                    <i class="bi bi-clock me-1"></i>En attente
                                                </span>
                                            @else
                                                <span class="badge bg-secondary">{{ $share->status }}</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if($share->notes)
                                                <span title="{{ $share->notes }}" class="text-muted cursor-help">
                                                    <i class="bi bi-chat-dots"></i>
                                                </span>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Graphique de distribution (optionnel) -->
                    <div class="mt-5 pt-4 border-top">
                        <h6 class="mb-3">
                            <i class="bi bi-graph-up me-2"></i>Répartition des Parts
                        </h6>
                        <div class="row">
                            @php
                                $topShares = $shares->sortByDesc('amount')->take(5);
                            @endphp
                            @foreach($topShares as $share)
                                @php
                                    $percentage = ($share->amount / $totalAmount) * 100;
                                @endphp
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>
                                            <strong>{{ $share->user->name ?? 'N/A' }}</strong>
                                        </span>
                                        <span>
                                            <strong>{{ number_format($percentage, 1, ',', ' ') }}%</strong>
                                        </span>
                                    </div>
                                    <div class="progress" style="height: 24px;">
                                        <div class="progress-bar" role="progressbar" 
                                             style="width: {{ $percentage }}%; background-color: hsl({{ 120 - ($percentage * 1.2) }}, 70%, 50%);"
                                             aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100">
                                            <span class="ps-2">{{ number_format($share->amount, 0, ',', ' ') }} XOF</span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        Aucune distribution pour cette période.
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Boutons d'action -->
<div class="row mt-4">
    <div class="col-12">
        <div class="d-flex gap-2">
            <a href="{{ route('admin.pool.history') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Retour à l'historique
            </a>
            <a href="{{ route('admin.pool.index') }}" class="btn btn-outline-primary">
                <i class="bi bi-graph-up me-2"></i>Dashboard du Pool
            </a>
        </div>
    </div>
</div>

<style>
    .cursor-help {
        cursor: help;
    }

    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }

    .card {
        transition: box-shadow 0.3s ease;
    }

    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    code {
        background-color: #f8f9fa;
        padding: 4px 8px;
        border-radius: 4px;
        color: #d63384;
        font-weight: 500;
    }
</style>
@endsection
