@extends('layouts.base')

@section('title')
    Réclamation
@endsection

@section('style')
    <style>
        .k {
            color: #aeca12;
        }
    </style>
@endsection

@section('content')

    <!-- Breadcrumb start -->
    <div class="row">
        <div class="col-12">
            <h4 class="main-title">Tableau de bord - {{ Str::ucfirst(auth()->user()->getRoleNames()->first()) }}
            </h4>
        </div>
    </div>
    @if (userHasPermission('can_initiate_claim'))
        <!-- Filtre global pour les données statistiques du réceptionniste -->
        <div class="row mt-2">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Filtre des données statistiques - Réceptionniste</h5>
                            <select id="receptionist-period-filter" class="form-select w-auto">
                                <option value="this_week">Cette semaine</option>
                                <option value="last_week">Semaine passée</option>
                                <option value="this_month" selected>Ce mois</option>
                                <option value="last_month">Mois passé</option>
                                <option value="this_year">Cette année</option>
                                <option value="last_year">Année passée</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <!-----ici il faut afficher les données globales pour le réceptionniste connecté----->
            <div class="col-sm-4">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Réclamations saisies</h6>
                            <div class="dropdown bg-light-secondary h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-plus-circle f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="receptionist-total-initiated">{{ $receptionistKpis['total_initiated'] ?? 0 }}</h3>
                        @php $var = $receptionistKpis['total_initiated_variation'] ?? 0; $up = ($var >= 0); @endphp
                        <p class="mt-3 f-s-16 f-w-500 mb-0">
                            <i
                                class="ph-bold  {{ $up ? 'ph-arrow-up-right text-success' : 'ph-arrow-down-right text-danger' }} f-s-20"></i>
                            <span class="{{ $up ? 'text-success' : 'text-danger' }}">{{ $var }}%</span>
                            <span class="text-secondary f-s-16 f-w-200"> depuis le mois dernier </span>
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>En attente d'enregistrement</h6>
                            <div class="dropdown bg-light-warning h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-clock f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="receptionist-pending-registration">{{ $receptionistKpis['pending_registration'] ?? 0 }}</h3>
                        @php $var = $receptionistKpis['pending_registration_variation'] ?? 0; $up = ($var >= 0); @endphp
                        <p class="mt-3 f-s-16 f-w-500 mb-0">
                            <i
                                class="ph-bold  {{ $up ? 'ph-arrow-up-right text-success' : 'ph-arrow-down-right text-danger' }} f-s-20"></i>
                            <span class="{{ $up ? 'text-success' : 'text-danger' }}">{{ $var }}%</span>
                            <span class="text-secondary f-s-16 f-w-200"> depuis le mois dernier </span>
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Taux de complétude</h6>
                            <div class="dropdown bg-light-success h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-check-circle f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="receptionist-completion-rate">{{ $receptionistKpis['completion_rate'] ?? 0 }}%</h3>
                        @php $var = $receptionistKpis['completion_rate_variation'] ?? 0; $up = ($var >= 0); @endphp
                        <p class="mt-3 f-s-16 f-w-500 mb-0">
                            <i
                                class="ph-bold  {{ $up ? 'ph-arrow-up-right text-success' : 'ph-arrow-down-right text-danger' }} f-s-20"></i>
                            <span class="{{ $up ? 'text-success' : 'text-danger' }}">{{ $var }}%</span>
                            <span class="text-secondary f-s-16 f-w-200"> depuis le mois dernier </span>
                        </p>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!----ici il faut afficher les graphiques des données du réceptionniste connecté----->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Réclamations saisies/Jrs</h5>
                            
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="recp-created-bar"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Réclamations par statut</h5>

                        </div>
                    </div>
                    <div class="card-body">
                        <div id="recp-status-donut"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!----ici il faut afficher les 10 dernières réclamations saisies pour le réceptionniste connecté----->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Dernières réclamations saisies</h5>
                            <a href="{{ route('reclamation.list') }}" class="text-primary">Voir tout <i class="ph ph-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="app-datatable-default overflow-auto">
                            <table id="recentAll" class="display app-data-table default-data-table">
                                <thead>
                                    <tr>
                                        <th>Réference</th>
                                        <th>Parieur</th>
                                        <th>Type de jeux</th>
                                        <th>Montant (FCFA)</th>
                                        <th>Status</th>
                                        <th>Date de réclamation</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentAll as $claim)
                                    <tr>
                                        <td>{{ $claim->claim_reference }}</td>
                                        <td>{{ $claim->claimant_first_name }} {{ $claim->claimant_last_name }}</td>
                                        <td>{{ $claim->gameType->name ?? '-' }}</td>
                                        <td>{{ number_format($claim->gain_amount ?? 0, 0, ',', ' ') }}</td>
                                        <td>
                                            @php
                                            $statusId = (int) $claim->claim_statuse_id;
                                            $badge = 'bg-secondary';
                                            $label = $claim->claimStatus->name ?? '';
                                            if ($statusId == 1) {
                                            $badge = 'bg-info';
                                            $label = 'Soumise';
                                            } elseif ($statusId == 2) {
                                            $badge = 'bg-primary';
                                            $label = 'Enregistrée';
                                            } elseif ($statusId == 3) {
                                            $badge = 'bg-warning';
                                            $label = 'En attente';
                                            } elseif ($statusId == 4) {
                                            $badge = 'bg-primary';
                                            $label = 'A transmettre';
                                            } elseif ($statusId === 5) {
                                            $badge = 'bg-primary';
                                            $label = 'Transmise';
                                            } elseif ($statusId === 6) {
                                            $badge = 'bg-success';
                                            $label = 'Clôturée';
                                            } elseif ($statusId === 7) {
                                            $badge = 'bg-danger';
                                            $label = 'Rejetée';
                                            }
                                            @endphp
                                            <span class="badge {{ $badge }}">{{ $label }}</span>
                                        </td>
                                        <td>{{ optional($claim->created_at)->format('d/m/Y H:i') }}</td>
                                    </tr>
                                    @empty
                                    {{-- <tr>
                                        <td colspan="6" class="text-center">Aucune donnée</td>
                                    </tr> --}}
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (userHasAnyPermission(['can_view_claim_transmeted','can_close_claim']))
        <!-- Filtre global pour les données statistiques du financier -->
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Filtre des données statistiques - Financier</h5>
                            <select id="financial-period-filter" class="form-select w-auto">
                                <option value="this_week">Cette semaine</option>
                                <option value="last_week">Semaine passée</option>
                                <option value="this_month" selected>Ce mois</option>
                                <option value="last_month">Mois passé</option>
                                <option value="this_year">Cette année</option>
                                <option value="last_year">Année passée</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <!-----ici il faut afficher les données globales pour le financier connecté----->
            <div class="col-sm-3">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Transmises</h6>
                            <div class="dropdown bg-light-primary h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-paper-plane-tilt f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="financial-transmitted-total">{{ $financialKpis['transmitted_total'] ?? 0 }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Clôturées</h6>
                            <div class="dropdown bg-light-success h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-check-circle f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="financial-closed-total">{{ $financialKpis['closed_total'] ?? 0 }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Montant total réglé</h6>
                            <div class="dropdown bg-light-secondary h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-currency-circle-dollar f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="financial-total-paid">{{ number_format($financialKpis['total_paid_amount'] ?? 0, 0, ',', ' ') }}
                            FCFA</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Évolution des paiements</h5>
                            {{-- <select id="fin-payments-period" class="form-select w-auto">
                                <option value="last_7_days">7 derniers jours</option>
                                <option value="last_30_days" selected>30 derniers jours</option>
                                <option value="this_year">Cette année</option>
                                <option value="last_year">Année passée</option>
                            </select> --}}
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="fin-payments-line"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Payées par type de jeu</h5>
                            {{-- <select id="fin-by-game-period" class="form-select w-auto">
                                <option value="last_7_days">7 derniers jours</option>
                                <option value="last_30_days" selected>30 derniers jours</option>
                                <option value="this_month">Ce mois</option>
                                <option value="this_year">Cette année</option>
                            </select> --}}
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="fin-by-game-donut"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Derniers paiements</h5>
                            <a href="{{ route('reclamation.list') }}" class="text-primary">Voir tout <i class="ph ph-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="app-datatable-default overflow-auto">
                            <table id="recentPayments" class="display app-data-table default-data-table">
                                <thead>
                                    <tr>
                                        <th>Réference</th>
                                        <th>Parieur</th>
                                        <th>Type de jeux</th>
                                        <th>Montant (FCFA)</th>
                                        <th>Date de paiement</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse(($recentPayments ?? []) as $claim)
                                    <tr>
                                        <td>{{ $claim->claim_reference }}</td>
                                        <td>{{ $claim->claimant_first_name }} {{ $claim->claimant_last_name }}</td>
                                        <td>{{ $claim->gameType->name ?? '-' }}</td>
                                        <td>{{ number_format($claim->gain_amount ?? 0, 0, ',', ' ') }}</td>
                                        <td>{{ optional($claim->payment_date)->format('d/m/Y H:i') }}</td>
                                    </tr>
                                    @empty
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if(userHasPermission('can_view_own_claim_assigned'))
        <!-- Filtre global pour les données statistiques du contrôle lot -->
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Filtre des données statistiques - Contrôle Lot</h5>
                            <select id="lot-control-period-filter" class="form-select w-auto">
                                <option value="this_week">Cette semaine</option>
                                <option value="last_week">Semaine passée</option>
                                <option value="this_month" selected>Ce mois</option>
                                <option value="last_month">Mois passé</option>
                                <option value="this_year">Cette année</option>
                                <option value="last_year">Année passée</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <!-----ici il faut afficher les données globales pour le controle lot connecté----->
            <div class="col-sm-3">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Assignées</h6>
                            <div class="dropdown bg-light-primary h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-user-switch f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="lot-assigned-total">{{ $lotControlKpis['assigned_total'] ?? 0 }}</h3>
                        @php $var = $lotControlKpis['assigned_variation'] ?? 0; $up = ($var >= 0); @endphp
                        <p class="mt-3 f-s-16 f-w-500 mb-0">
                            <i
                                class="ph-bold  {{ $up ? 'ph-arrow-up-right text-success' : 'ph-arrow-down-right text-danger' }} f-s-20"></i>
                            <span class="{{ $up ? 'text-success' : 'text-danger' }}">{{ $var }}%</span>
                            <span class="text-secondary f-s-16 f-w-200"> mois dernier </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Traitées</h6>
                            <div class="dropdown bg-light-success h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-check-circle f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="lot-treated-total">{{ $lotControlKpis['treated_total'] ?? 0 }}</h3>
                        @php $var = $lotControlKpis['treated_variation'] ?? 0; $up = ($var >= 0); @endphp
                        <p class="mt-3 f-s-16 f-w-500 mb-0">
                            <i
                                class="ph-bold  {{ $up ? 'ph-arrow-up-right text-success' : 'ph-arrow-down-right text-danger' }} f-s-20"></i>
                            <span class="{{ $up ? 'text-success' : 'text-danger' }}">{{ $var }}%</span>
                            <span class="text-secondary f-s-16 f-w-200"> mois dernier </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Taux de rejet</h6>
                            <div class="dropdown bg-light-danger h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-prohibit f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="lot-rejection-rate">{{ $lotControlKpis['rejection_rate'] ?? 0 }}%</h3>
                        <p class="mt-3 f-s-16 f-w-500 mb-0">
                            <span class="text-secondary f-s-16 f-w-200"> Validées: <span class="text-success" id="treated">{{ $lotControlKpis['treated_validated'] ?? 0
                                }} </span>| Rejetées: <span class="text-danger" id="rejected">{{ $lotControlKpis['treated_rejected'] ?? 0 }} </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="card api-eshop-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>En cours</h6>
                            <div class="dropdown bg-light-warning h-40 w-40 d-flex-center b-r-15">
                                <i class="ph ph-hourglass f-s-20"></i>
                            </div>
                        </div>
                        <h3 id="lot-in-progress">{{ $lotControlKpis['in_progress'] ?? 0 }}</h3>
                        <p class="mt-3 f-s-16 f-w-500 mb-0">
                            <span class="text-secondary f-s-16 f-w-200" id="avg-processing-time"> Temps moyen: {{
                                isset($lotControlKpis['avg_processing_seconds']) ?
                                round($lotControlKpis['avg_processing_seconds']/60,1) : 0 }} min </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!----ici il faut afficher les graphiques des données du controle lot connecté----->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Réclamations traitées</h5>
                            {{-- <select id="lot-processed-period" class="form-select w-auto">
                                <option value="last_7_days" selected>7 derniers jours</option>
                                <option value="last_30_days">30 derniers jours</option>
                            </select> --}}
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="lot-processed-bar"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Évolution traitement</h5>
                            {{-- <div class="d-flex gap-2">
                                <select id="lot-evol-period" class="form-select w-auto">
                                    <option value="last_7_days" selected>7 derniers jours</option>
                                    <option value="last_30_days">30 derniers jours</option>
                                </select>
                                <select id="lot-evol-granularity" class="form-select w-auto">
                                    <option value="day" selected>Jour</option>
                                    <option value="week">Semaine</option>
                                </select>
                            </div> --}}

                        </div>
                    </div>
                    <div class="card-body">
                        <div id="lot-evol-line"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!----ici il faut afficher les 10 dernières assigné au controle lot connecté----->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Dernières réclamations assignées</h5>
                            <a href="{{ route('reclamation.list') }}" class="text-primary">Voir tout <i class="ph ph-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="app-datatable-default overflow-auto">
                            <table id="recentAssigned" class="display app-data-table default-data-table">
                                <thead>
                                    <tr>
                                        <th>Réference</th>
                                        <th>Parieur</th>
                                        <th>Type de jeux</th>
                                        <th>Montant (FCFA)</th>
                                        <th>Status</th>
                                        <th>Date de réclamation</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($lotControlKpis['recentAssigned'] as $claim)
                                    <tr>
                                        <td>{{ $claim->claim_reference }}</td>
                                        <td>{{ $claim->claimant_first_name }} {{ $claim->claimant_last_name }}</td>
                                        <td>{{ $claim->gameType->name ?? '-' }}</td>
                                        <td>{{ number_format($claim->gain_amount ?? 0, 0, ',', ' ') }}</td>
                                        <td>
                                            @php
                                            $statusId = (int) $claim->claim_statuse_id;
                                            $badge = 'bg-secondary';
                                            $label = $claim->claimStatus->name ?? '';
                                            if ($statusId == 1) {
                                            $badge = 'bg-info';
                                            $label = 'Soumise';
                                            } elseif ($statusId == 2) {
                                            $badge = 'bg-primary';
                                            $label = 'Enregistrée';
                                            } elseif ($statusId == 3) {
                                            $badge = 'bg-warning';
                                            $label = 'En attente';
                                            } elseif ($statusId == 4) {
                                            $badge = 'bg-primary';
                                            $label = 'A transmettre';
                                            } elseif ($statusId === 5) {
                                            $badge = 'bg-primary';
                                            $label = 'Transmise';
                                            } elseif ($statusId === 6) {
                                            $badge = 'bg-success';
                                            $label = 'Clôturée';
                                            } elseif ($statusId === 7) {
                                            $badge = 'bg-danger';
                                            $label = 'Rejetée';
                                            }
                                            @endphp
                                            <span class="badge {{ $badge }}">{{ $label }}</span>
                                        </td>
                                        <td>{{ optional($claim->created_at)->format('d/m/Y H:i') }}</td>
                                    </tr>
                                    @empty
                                    {{-- <tr>
                                        <td colspan="6" class="text-center">Aucune donnée</td>
                                    </tr> --}}
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (userHasPermission('can_view_all_colaborator_claim_assignment'))
        <!-- Filtre global pour les données statistiques -->
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Filtre des données statistiques</h5>
                            <select id="global-period-filter" class="form-select w-auto">
                                <option value="this_week">Cette semaine</option>
                                <option value="last_week">Semaine passée</option>
                                <option value="this_month" selected>Ce mois</option>
                                <option value="last_month">Mois passé</option>
                                <option value="this_year">Cette année</option>
                                <option value="last_year">Année passée</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-sm-3 col-lg-3">
                <div class="card project-profit-card">
                    <div class="card-body">
                        <div class="profit-arrow">
                            <span class="bg-white text-primary h-45 w-45 d-flex-center">
                                <i class="ph-bold  ph-arrow-up-right f-s-18"></i>
                            </span>
                        </div>
                        <span class="bg-info h-45 w-45 d-flex-center b-r-50">
                            <i class="ph-bold  ph-file-text f-s-24"></i>
                        </span>
                        <div class="mt-3">
                            <h4 class="text-dark" id="total-claims-count">{{ $chiefDatas['totalClaims'] ?? 0 }}</h4>
                            <p class="f-w-500 mb-0 txt-ellipsis-1">Total Réclamation(s)</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-lg-3">
                <div class="card project-profit-card">
                    <div class="card-body">
                        <div class="profit-arrow">
                            <span class="bg-white text-primary h-45 w-45 d-flex-center">
                                <i class="ph-bold  ph-arrow-up-right f-s-18"></i>
                            </span>
                        </div>
                        <span class="bg-warning h-45 w-45 d-flex-center b-r-50">
                            <i class="ph-bold  ph-clock f-s-24"></i>
                        </span>
                        <div class="mt-3">
                            <h4 class="text-dark" id="pending-claims-count">{{ $chiefDatas['pendingClaims'] ?? 0 }}</h4>
                            <p class="f-w-500 mb-0 txt-ellipsis-1">En attente(s)</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-lg-3">
                <div class="card project-profit-card">
                    <div class="card-body">
                        <div class="profit-arrow">
                            <span class="bg-white text-primary h-45 w-45 d-flex-center">
                                <i class="ph-bold  ph-arrow-up-right f-s-18"></i>
                            </span>
                        </div>
                        <span class="bg-primary h-45 w-45 d-flex-center b-r-50">
                            <i class="ph-bold  ph-check-circle f-s-24"></i>
                        </span>
                        <div class="mt-3">
                            <h4 class="text-dark" id="validated-claims-count">{{ $chiefDatas['validatedClaims'] ?? 0 }}</h4>
                            <p class="f-w-500 mb-0 txt-ellipsis-1">Transmise(s)</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-lg-3">
                <div class="card project-profit-card">
                    <div class="card-body">
                        <div class="profit-arrow">
                            <span class="bg-white text-primary h-45 w-45 d-flex-center">
                                <i class="ph-bold  ph-arrow-up-right f-s-18"></i>
                            </span>
                        </div>
                        <span class=" bg-danger-300 h-45 w-45 d-flex-center b-r-50">
                            <i class="ph-bold ph-prohibit f-s-24"></i>
                        </span>
                        <div class="mt-3">
                            <h4 class="text-dark" id="rejected-claims-count">{{ $chiefDatas['rejectedClaims'] ?? 0 }}</h4>
                            <p class="f-w-500 mb-0 txt-ellipsis-1">Rejetée(s)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Évolution des gains</h5>
                            
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="gains-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="w-100 d-flex justify-content-between align-items-center">
                            <h5>Réclamations par statut</h5>
                            
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="status_donut"></div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('script')
    <script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.ApexCharts) return;

            // Lot control charts
            var lotProcessedChart = document.querySelector('#lot-processed-bar') ? new ApexCharts(document.querySelector('#lot-processed-bar'), {
                chart: { type: 'bar', height: 300, stacked: true },
                series: [
                    { name: 'Traitées', data: [] },
                    { name: 'Rejetées', data: [] }
                ],
                xaxis: { categories: ['Total'] },
                colors: ['#16a34a', '#dc2626']
            }) : null;
            if (lotProcessedChart) lotProcessedChart.render();

            var lotEvolChart = document.querySelector('#lot-evol-line') ? new ApexCharts(document.querySelector('#lot-evol-line'), {
                chart: { type: 'line', height: 350 },
                series: [
                    { name: 'Traitées', data: [] },
                    { name: 'Rejetées', data: [] }
                ],
                xaxis: { categories: [] },
                stroke: { width: 3 },
                colors: ['#16a34a', '#dc2626']
            }) : null;
            if (lotEvolChart) lotEvolChart.render();


            function loadFinPayments(period) {
                if (!finPaymentsChart) return;
                fetch(`{{ route('reclamation.stats.gains') }}?period=${period}`)
                    .then(r => r.json())
                    .then(({ labels, series }) => {
                        finPaymentsChart.updateOptions({ xaxis: { categories: labels } });
                        finPaymentsChart.updateSeries(series);
                    });
            }

            var finPaymentsSelect = document.getElementById('fin-payments-period');
            if (finPaymentsSelect) {
                loadFinPayments(finPaymentsSelect.value);
                finPaymentsSelect.addEventListener('change', function () { loadFinPayments(this.value); });
            }
            var finByGameSelect = document.getElementById('fin-by-game-period');
            if (finByGameSelect) {
                loadFinByGame(finByGameSelect.value);
                finByGameSelect.addEventListener('change', function () { loadFinByGame(this.value); });
            }

            function loadLotProcessed(period) {
                if (!lotProcessedChart) return;
                fetch(`{{ route('reclamation.stats.processed') }}?period=${period}`)
                    .then(r => r.json())
                    .then(({ labels, series }) => {
                        lotProcessedChart.updateOptions({ xaxis: { categories: ['Total'] } });
                        lotProcessedChart.updateSeries([
                            { name: 'Validées', data: [series[0] || 0] },
                            { name: 'Rejetées', data: [series[1] || 0] }
                        ]);
                    });
            }

            function loadLotEvolution(period, granularity) {
                if (!lotEvolChart) return;
                fetch(`{{ route('reclamation.stats.processed_overtime') }}?period=${period}&granularity=${granularity}`)
                    .then(r => r.json())
                    .then(({ labels, series }) => {
                        lotEvolChart.updateOptions({ xaxis: { categories: labels } });
                        lotEvolChart.updateSeries(series);
                    });
            }


            var lotProcessedSelect = document.getElementById('lot-processed-period');
            if (lotProcessedSelect) {
                loadLotProcessed(lotProcessedSelect.value);
                lotProcessedSelect.addEventListener('change', function () { loadLotProcessed(this.value); });
            }
            var lotEvolPeriod = document.getElementById('lot-evol-period');
            var lotEvolGranularity = document.getElementById('lot-evol-granularity');
            if (lotEvolPeriod && lotEvolGranularity) {
                function loadLotEvol() { loadLotEvolution(lotEvolPeriod.value, lotEvolGranularity.value); }
                loadLotEvol();
                lotEvolPeriod.addEventListener('change', loadLotEvol);
                lotEvolGranularity.addEventListener('change', loadLotEvol);
            }
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#recentAll, #recentAssigned, #recentPayments').DataTable({
                language: {
                    processing: "Traitement en cours...",
                    search: "Rechercher&nbsp;:",
                    lengthMenu: " _MENU_ ",
                    info: "",
                    infoEmpty: "Affichage de l'élément 0 à 0 sur 0 élément",
                    infoFiltered: "(filtré de _MAX_ éléments au total)",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun élément à afficher",
                    emptyTable: "Aucune donnée disponible dans le tableau",
                    paginate: {
                        first: "Premier",
                        previous: "Précédent",
                        next: "Suivant",
                        last: "Dernier"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                }
            });
        });
    </script>
    
    <script>
        // Statistiques globales pour le chef de service controle lot
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.ApexCharts) return;

            var gainsChart = new ApexCharts(document.querySelector('#gains-chart'), {
                chart: { type: 'line', height: 300, toolbar: { show: false } },
                series: [{ name: 'Gains (FCFA)', data: [] }],
                xaxis: { categories: [] },
                stroke: { width: 3 },
                colors: ['#075e27'],
                dataLabels: { enabled: false }
            });
            gainsChart.render();

            var statusChart = new ApexCharts(document.querySelector('#status_donut'), {
                chart: { type: 'donut', height: 350 },
                labels: [],
                series: [],
                legend: { position: 'bottom' },
                // Colors mapped to API labels order: ['En attente','Transmise','Payée','Rejetée']
                colors: ['#f59e0b', '#065f46', '#16a34a', '#dc2626']
            });
            statusChart.render();

            // Charger les données initiales avec la période par défaut
            var globalPeriodFilter = document.getElementById('global-period-filter');

            loadGains(globalPeriodFilter.value);
            loadStatus(globalPeriodFilter.value);

            // Gestion du filtre global pour les données statistiques
            if (globalPeriodFilter) {
                // Charger les données initiales
                loadGlobalStats(globalPeriodFilter.value);

                // Écouter les changements
                globalPeriodFilter.addEventListener('change', function () {
                    loadGlobalStats(this.value);
                });
            }

            function loadGlobalStats(period) {
                // Mettre à jour les cartes de statistiques
                fetch(`{{ route('reclamation.stats.global') }}?period=${period}`)
                    .then(r => r.json())
                    .then(data => {
                        // Mettre à jour les compteurs
                        document.getElementById('total-claims-count').textContent = data.totalClaims || 0;
                        document.getElementById('pending-claims-count').textContent = data.pendingClaims || 0;
                        document.getElementById('validated-claims-count').textContent = data.validatedClaims || 0;
                        document.getElementById('rejected-claims-count').textContent = data.rejectedClaims || 0;
                    })
                    .catch(error => {
                        console.error('Erreur lors du chargement des statistiques globales:', error);
                    });

                // Mettre à jour les graphiques avec la même période
                loadGains(period);
                loadStatus(period);
            }  
            
            function loadGains(period) {
                fetch(`{{ route('reclamation.stats.gains') }}?period=${period}`)
                .then(r => r.json())
                .then(({ labels, series }) => {
                    gainsChart.updateOptions({ xaxis: { categories: labels } });
                    gainsChart.updateSeries(series);
                });
            }

            function loadStatus(period) {
                fetch(`{{ route('reclamation.stats.status') }}?period=${period}`)
                .then(r => r.json())
                .then(({ labels, series }) => {
                    statusChart.updateOptions({ labels });
                    statusChart.updateSeries(series);
                });
            }
        });
    </script>

    <script>
        // filtre global pour le receptionniste
        $(document).ready(function() {
            var recpCreatedChart = document.querySelector('#recp-created-bar') ? new ApexCharts(document.querySelector('#recp-created-bar'), {
                chart: { type: 'bar', height: 300, toolbar: { show: false } },
                series: [{ name: 'Saisies', data: [] }],
                xaxis: { categories: [] },
                colors: ['#0ea5e9']
            }) : null;
            if (recpCreatedChart) recpCreatedChart.render();

            var recpStatusChart = document.querySelector('#recp-status-donut') ? new ApexCharts(document.querySelector('#recp-status-donut'), {
                chart: { type: 'donut', height: 350 },
                labels: [],
                series: [],
                legend: { position: 'bottom' },
                colors: ['#3b82f6', '#06b6d4', '#065f46', '#dc2626']
            }) : null;
            if (recpStatusChart) recpStatusChart.render();
            // Charger les données initiales avec la période par défaut

            var defaultPeriod = $('#receptionist-period-filter').val();
            loadReceptionistStats(defaultPeriod);
            loadRecpCreated(defaultPeriod);

            // Écouter les changements du filtre global
            $('#receptionist-period-filter').on('change', function() {
                var selectedPeriod = $(this).val();
                loadReceptionistStats(selectedPeriod);
                loadRecpCreated(selectedPeriod);
            });

            // mettre à jour les stats du receptionniste
            function loadReceptionistStats(period) {
                // Mettre à jour les cartes de statistiques du réceptionniste
                $.ajax({
                    url: `{{ route('reclamation.stats.receptionist_stats') }}?period=${period}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        console.log('Données receptionist pour la période', period, data);
                        // Mettre à jour les compteurs
                        $('#receptionist-total-initiated').text(data.total_initiated || 0);
                        $('#receptionist-pending-registration').text(data.pending_registration || 0);
                        $('#receptionist-completion-rate').text((data.completion_rate || 0) + '%');
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement des statistiques du réceptionniste:', error);
                    }
                });
                loadRecpCreated(period);
                loadRecpStatus(period);
            }

            // chart des réclamations par status du réceptionniste
            function loadRecpStatus(period) {
                if (!recpStatusChart) return;
                fetch(`{{ route('reclamation.stats.receptionist') }}?period=${period}`)
                    .then(r => r.json())
                    .then(({ labels, series }) => {
                        recpStatusChart.updateOptions({ labels });
                        recpStatusChart.updateSeries(series);
                    });
            }

            // chart des réclamations créées par le réceptionniste
            function loadRecpCreated(period) {
                if (!recpCreatedChart) return;
                // Convertir la période du filtre global vers la granularité appropriée
                {{-- var granularity = period === 'this_week' || period === 'last_week' ? 'day' : 'day'; --}}
                fetch(`{{ route('reclamation.stats.created') }}?period=${period}`)
                    .then(r => r.json())
                    .then(({ labels, series }) => {
                        recpCreatedChart.updateOptions({ xaxis: { categories: labels } });
                        recpCreatedChart.updateSeries(series);
                    });
            }
        });
    </script>

    <script>
        // filtre global pour le controle lot
        $(document).ready(function() {
            // Gestion du filtre global pour le controle lot
             // Lot control charts
            var lotProcessedChart = document.querySelector('#lot-processed-bar') ? new ApexCharts(document.querySelector('#lot-processed-bar'), {
                chart: { type: 'bar', height: 300, stacked: true },
                series: [
                    { name: 'Traitées', data: [] },
                    { name: 'Rejetées', data: [] }
                ],
                xaxis: { categories: ['Total'] },
                colors: ['#16a34a', '#dc2626']
            }) : null;
            if (lotProcessedChart) lotProcessedChart.render();

            var lotEvolChart = document.querySelector('#lot-evol-line') ? new ApexCharts(document.querySelector('#lot-evol-line'), {
                chart: { type: 'line', height: 350 },
                series: [
                    { name: 'Traitées', data: [] },
                    { name: 'Rejetées', data: [] }
                ],
                xaxis: { categories: [] },
                stroke: { width: 3 },
                colors: ['#16a34a', '#dc2626']
            }) : null;

            if (lotEvolChart) lotEvolChart.render();
            // Charger les données initiales
            var defaultPeriod = $('#lot-control-period-filter').val();
            // Charger les données initiales avec la période par défaut
            loadLotControlStats(defaultPeriod);

            $('#lot-control-period-filter').on('change', function() {
                var selectedPeriod = $(this).val();
                loadLotControlStats(selectedPeriod);
            });

            // mettre à jour les stats du control lot
            function loadLotControlStats(period){
                // Mettre à jour les cartes de statistiques du contrôle lot
                $.ajax({
                    url: `{{ route('reclamation.stats.lot_control') }}?period=${period}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        console.log('Données reçues pour la période', period, data);
                        // Mettre à jour les compteurs
                        console.log('Données reçues pour la période', period, data);
                        // Mettre à jour les compteurs
                        $('#lot-assigned-total').text(data.assigned_total || 0);
                        $('#lot-treated-total').text(data.treated_total || 0);
                        $('#lot-rejection-rate').text((data.rejection_rate || 0) + '%');
                        $('#lot-in-progress').text(data.in_progress || 0);
                        $('#avg-processing-time').text('Temps moyen: ' + (data.avg_processing_seconds ? (Math.round(data.avg_processing_seconds / 60 * 10) / 10) + ' min' : '0 min'));
                        $('#treated').text(data.treated_validated || 0);
                        $('#rejected').text(data.treated_rejected || 0);
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement des statistiques du contrôle lot:', error);
                    }
                });
                // Mettre à jour les graphiques du contrôle lot avec la même période
                loadLotProcessed(period);
                loadLotEvolution(period, 'day');
            }

            function loadLotProcessed(period) {
                if (!lotProcessedChart) return;
                $.ajax({
                    url: `{{ route('reclamation.stats.processed') }}?period=${period}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function({ labels, series }) {
                        lotProcessedChart.updateOptions({ xaxis: { categories: ['Total'] } });
                        lotProcessedChart.updateSeries([
                            { name: 'Traitées', data: [series[0] || 0] },
                            { name: 'Rejetées', data: [series[1] || 0] }
                        ]);
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement des réclamations traitées:', error);
                    }
                });
            }

            function loadLotEvolution(period) {
                if (!lotEvolChart) return;
                $.ajax({
                    url: `{{ route('reclamation.stats.processed_overtime') }}?period=${period}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function({ labels, series }) {
                        lotEvolChart.updateOptions({ xaxis: { categories: labels } });
                        lotEvolChart.updateSeries(series);
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement de l\'évolution des réclamations traitées:', error);
                    }
                });
            }
        });
    </script>

    <script>
        // filtre global pour le financier
        $(document).ready(function() {
            var defaultPeriod = $('#financial-period-filter').val();

            // Financier charts
            var finPaymentsChart = document.querySelector('#fin-payments-line') ? new ApexCharts(document.querySelector('#fin-payments-line'), {
                chart: { type: 'line', height: 300, toolbar: { show: false } },
                series: [{ name: 'Montant payé (FCFA)', data: [] }],
                xaxis: { categories: [] },
                stroke: { width: 3 },
                colors: ['#0f766e']
            }) : null;
            if (finPaymentsChart) finPaymentsChart.render();

            var finByGameChart = document.querySelector('#fin-by-game-donut') ? new ApexCharts(document.querySelector('#fin-by-game-donut'), {
                chart: { type: 'donut', height: 350 },
                labels: [],
                series: [],
                legend: { position: 'bottom' },
                colors: ['#1d4ed8', '#16a34a', '#ef4444', '#f59e0b', '#8b5cf6', '#0ea5e9', '#64748b', '#22c55e']
            }) : null;
            if (finByGameChart) finByGameChart.render();
            // Charge les graphiques du financier
            loadFinPayments('this_month');
            loadFinByGame('this_month');

            // Gestion du filtre global pour les données du financier
            $('#financial-period-filter').on('change', function() {
                var selectedPeriod = $(this).val();
                //alert('Selected period: ' + selectedPeriod); // Pour le débogage
                loadFinancialStats(selectedPeriod);
            });

            function loadFinancialStats(period) {
                // Mettre à jour les cartes de statistiques du financier
                $.ajax({
                    url: `{{ route('reclamation.stats.financial') }}?period=${period}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        console.log('Données reçues pour la période', period, data);
                        // Mettre à jour les compteurs
                        document.getElementById('financial-transmitted-total').textContent = data.transmitted_total || 0;
                        document.getElementById('financial-closed-total').textContent = data.closed_total || 0;

                        // Mettre à jour le montant total réglé avec formatage
                        const totalPaid = data.total_paid_amount || 0;
                        document.getElementById('financial-total-paid').textContent =
                            new Intl.NumberFormat('fr-FR').format(totalPaid) + ' FCFA';
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement des statistiques du financier:', error);
                    }
                });
                // Mettre à jour les graphiques du financier avec la même période
                loadFinPayments(period);
                loadFinByGame(period);
            }


            function loadFinPayments(period) {
                if (!finPaymentsChart) return;
                $.ajax({
                    url: `{{ route('reclamation.stats.gains') }}?period=${period}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function({ labels, series }) {
                        finPaymentsChart.updateOptions({ xaxis: { categories: labels } });
                        finPaymentsChart.updateSeries(series);
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement des gains:', error);
                    }
                });
            }

            function loadFinByGame(period) {
                if (!finByGameChart) return;
                $.ajax({
                    url: `{{ route('reclamation.stats.payments_by_game') }}?period=${period}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function({ labels, series }) {
                        finByGameChart.updateOptions({ labels });
                        finByGameChart.updateSeries(series);
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement des paiements par jeu:', error);
                    }
                });
            }
        });
    </script>
@endsection