@extends('layouts.base')

@section('title')
    Suivi des collaborateurs
@endsection

@section('content')
    <div class="row m-1">
        <div class="col-12 ">
            <h4 class="main-title">Réclamation de gain</h4>
            <ul class="app-line-breadcrumbs mb-3">
                <li class="">
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.index') }}">
                        <span>
                            <i class="ph-duotone  ph-stack f-s-16 "></i> Tableau de bord
                        </span>
                    </a>
                </li>
                <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Assignations des collaborateurs</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 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 - Collaborateurs</h5>
                        <select id="collaborators-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>

    <!-- Cartes de statistiques générales -->
    <div class="row mt-2">
        <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>Total collaborateurs</h6>
                        <div class="dropdown bg-light-primary h-40 w-40 d-flex-center b-r-15">
                            <i class="ph ph-users f-s-20"></i>
                        </div>
                    </div>
                    <h3 id="total-collaborators">{{ $stats['total_collaborators'] ?? 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>Réclamations en cours</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="claims-in-progress">{{ $stats['claims_in_progress'] ?? 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>Taux de traitement</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="processing-rate">{{ $stats['processing_rate'] ?? 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>Total assignées</h6>
                        <div class="dropdown bg-light-info h-40 w-40 d-flex-center b-r-15">
                            <i class="ph ph-file-text f-s-20"></i>
                        </div>
                    </div>
                    <h3 id="total-assigned">{{ $stats['total_assigned'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Tableau des indicateurs de performance par collaborateur -->
    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Indicateurs de performance par collaborateur</h5>
                        <div class="d-flex gap-2">
                            <button id="refresh-performance" class="btn btn-outline-primary btn-sm">
                                <i class="ph ph-arrow-clockwise"></i> Actualiser
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="app-datatable-default overflow-auto">
                        <table id="performance-table" class="display app-data-table default-data-table w-100">
                            <thead>
                                <tr>
                                    <th>Collaborateur</th>
                                    <th>Réclamations assignées</th>
                                    <th>Total traitées</th>
                                    <th>Taux de traitement</th>
                                    <th>Non traitées</th>
                                    <th>Temps moyen (min)</th>
                                </tr>
                            </thead>
                            <tbody id="performance-tbody">
                                @forelse ($collaboratorStats as $collaborator)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="d-flex gap-3 flex-wrap">
                                                    <span
                                                        class="{{ $loop->index % 2 == 0 ? 'bg-info' : 'bg-secondary' }} h-30 w-30 d-flex-center b-r-50">
                                                        {{ substr($collaborator->name, 0, 1) }}
                                                    </span>
                                                </div>
                                                {{ $collaborator->name }}
                                            </div>
                                        </td>
                                        <td><span class="badge bg-primary">{{ $collaborator->total_assigned }}</span></td>
                                        <td><span class="badge bg-success">{{ $collaborator->total_processed }}</span></td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="progress me-2" style="width: 60px; height: 8px;">
                                                    <div class="progress-bar bg-success"
                                                        style="width: {{ $collaborator->processing_rate }}%"></div>
                                                </div>
                                                <span class="text-success fw-bold">{{ $collaborator->processing_rate }}%</span>
                                            </div>
                                        </td>
                                        <td><span class="badge bg-warning">{{ $collaborator->pending_count }}</span></td>
                                        <td>{{ $collaborator->avg_processing_time }}</td>
                                    </tr>
                                @empty
                                    {{-- <tr>
                                        <td colspan="6" class="text-center text-muted">Aucune donnée disponible.</td>
                                    </tr> --}}
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tableau des assignations actives -->
    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Assignations actives</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="app-datatable-default overflow-auto">
                        <table class="display app-data-table default-data-table w-100">
                            <thead>
                                <tr>
                                    <th>Date de réclamation</th>
                                    <th>Référence</th>
                                    <th>Assigné à</th>
                                    <th>Assigné le</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($assignments as $assignment)
                                    @php $claim = $assignment->claim; @endphp
                                    <tr>
                                        <td>{{ $claim->claim_date->format('d/m/Y H:i') }}</td>
                                        <td>{{ $claim->claim_reference }}</td>
                                        <td>{{ optional($assignment->assignedUser)->full_name ?? ('Utilisateur #' . $assignment->assigned_to) }}
                                        </td>
                                        <td>{{ optional($assignment->assigned_at)->format('d/m/Y H:i') }}</td>
                                        <td>
                                            @php
                                                $statusId = optional($claim->claimStatus)->id;
                                                $statusName = optional($claim->claimStatus)->name;
                                                $badgeClass = match ($statusId) {
                                                    1 => 'bg-secondary',    // Initiée
                                                    2 => 'bg-info',         // Enregistrée
                                                    3 => 'bg-warning',      // En attente
                                                    4 => 'bg-primary',      // A transmettre
                                                    5 => 'bg-indigo',       // Transmise
                                                    6 => 'bg-success',      // Clôturée
                                                    7 => 'bg-danger',       // Rejetée
                                                    default => 'bg-secondary'
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">{{ $statusName }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    {{-- <tr>
                                        <td colspan="5" class="text-center text-muted">Aucune assignation active trouvée.</td>
                                    </tr> --}}
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            // Initialiser DataTable pour tous les tableaux
            $('.app-data-table').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"
                    }
                }
            });

            // Gestion du filtre global pour les données des collaborateurs
            var collaboratorsPeriodFilter = document.getElementById('collaborators-period-filter');
            if (collaboratorsPeriodFilter) {
                // Charger les données initiales
                loadCollaboratorsStats(collaboratorsPeriodFilter.value);

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

            // Bouton d'actualisation des performances
            var refreshPerformanceBtn = document.getElementById('refresh-performance');
            if (refreshPerformanceBtn) {
                refreshPerformanceBtn.addEventListener('click', function () {
                    loadCollaboratorPerformance();
                });
            }

            function loadCollaboratorsStats(period) {
                // Mettre à jour les cartes de statistiques générales
                fetch(`{{ route('reclamation.stats.collaborators') }}?period=${period}`)
                    .then(r => r.json())
                    .then(data => {
                        // Mettre à jour les compteurs
                        document.getElementById('total-collaborators').textContent = data.total_collaborators || 0;
                        document.getElementById('claims-in-progress').textContent = data.claims_in_progress || 0;
                        document.getElementById('processing-rate').textContent = (data.processing_rate || 0) + '%';
                        document.getElementById('total-assigned').textContent = data.total_assigned || 0;
                    })
                    .catch(error => {
                        console.error('Erreur lors du chargement des statistiques des collaborateurs:', error);
                    });
            }

            function loadCollaboratorPerformance() {
                const period = collaboratorsPeriodFilter ? collaboratorsPeriodFilter.value : 'this_month';

                fetch(`{{ route('reclamation.stats.collaborator_performance') }}?period=${period}`)
                    .then(r => r.json())
                    .then(data => {
                        const tbody = document.getElementById('performance-tbody');
                        tbody.innerHTML = '';

                        if (data.length === 0) {
                            tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Aucune donnée disponible.</td></tr>';
                            return;
                        }

                        data.forEach(collaborator => {
                            const row = document.createElement('tr');
                            row.innerHTML = `
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center me-2">
                                                        <span class="text-white fw-bold">${collaborator.name.charAt(0)}</span>
                                                    </div>
                                                    ${collaborator.name}
                                                </div>
                                            </td>
                                            <td><span class="badge bg-primary">${collaborator.total_assigned}</span></td>
                                            <td><span class="badge bg-success">${collaborator.total_processed}</span></td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress me-2" style="width: 60px; height: 8px;">
                                                        <div class="progress-bar bg-success" style="width: ${collaborator.processing_rate}%"></div>
                                                    </div>
                                                    <span class="text-success fw-bold">${collaborator.processing_rate}%</span>
                                                </div>
                                            </td>
                                            <td><span class="badge bg-warning">${collaborator.pending_count}</span></td>
                                            <td>${collaborator.avg_processing_time}</td>
                                        `;
                            tbody.appendChild(row);
                        });

                        // Reinitialiser DataTable
                        $('#performance-table').DataTable().destroy();
                        $('#performance-table').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"
                                }
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Erreur lors du chargement des performances des collaborateurs:', error);
                    });
            }
        });
    </script>
@endsection