@extends('dashboard.layouts.app')

@section('title', 'Tableau de Bord RH - UAC eservices')

@section('page-title', 'Gestion des Ressources Humaines')

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">RH</li>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('template/src/assets/libs/apexcharts/dist/apexcharts.css') }}">
@endpush

@push('scripts')
<script src="{{ asset('template/src/assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
    // Chart 1: Répartition des employés par rôle
    const employesParRoleData = @json($employesParRole);
    const employesParRoleChart = new ApexCharts(document.querySelector("#employes-par-role-chart"), {
        chart: { type: 'pie', height: 300 },
        series: Object.values(employesParRoleData),
        labels: Object.keys(employesParRoleData),
        colors: ['#007bff', '#28a745', '#ffc107', '#dc3545', '#17a2b8'],
        legend: { position: 'bottom' }
    });
    employesParRoleChart.render();

    // Chart 2: Évolution des embauches
    const embauchesData = @json($embauchesParMois);
    const embauchesChart = new ApexCharts(document.querySelector("#embauches-chart"), {
        chart: { type: 'area', height: 300 },
        series: [{ name: 'Embauches', data: embauchesData.map(item => item.count) }],
        xaxis: { categories: embauchesData.map(item => item.month) },
        colors: ['#007bff']
    });
    embauchesChart.render();

    // Chart 3: Statut des contrats (Actif/Expiré)
    const contratsParTypeData = @json($contratsParType);
    const contratsTypes = Object.keys(contratsParTypeData);
    const contratsValues = Object.values(contratsParTypeData);

    // Attribution des couleurs selon le statut
    const contratsColors = contratsTypes.map(type => {
        switch(type) {
            case 'Actifs': return '#28a745';
            case 'Expirés': return '#dc3545';
            default: return '#6c757d';
        }
    });

    const contratsChart = new ApexCharts(document.querySelector("#contrats-par-type-chart"), {
        chart: { type: 'donut', height: 300 },
        series: contratsValues,
        labels: contratsTypes,
        colors: contratsColors,
        legend: { position: 'bottom' }
    });
    contratsChart.render();

    // Chart 4: Taux de présence par mois
    const presenceData = @json($presenceParMois);
    const presenceChart = new ApexCharts(document.querySelector("#presence-chart"), {
        chart: { type: 'line', height: 300 },
        series: [{ name: 'Taux de présence (%)', data: presenceData.map(item => item.rate) }],
        xaxis: { categories: presenceData.map(item => item.month) },
        colors: ['#17a2b8'],
        yaxis: { max: 100 }
    });
    presenceChart.render();

    // Chart 5: Statut des demandes de congés
    const congesData = @json($congesParStatut);
    const congesStatuts = Object.keys(congesData);
    const congesValues = Object.values(congesData);

    // Crée des séries séparées pour chaque statut avec sa couleur
    const congesSeries = congesStatuts.map((statut, index) => {
        let color;
        switch(statut) {
            case 'Approuvé': color = '#28a745'; break;
            case 'Refusé': color = '#dc3545'; break;
            case 'Demandé': color = '#ffc107'; break;
            default: color = '#6c757d'; break;
        }

        return {
            name: statut,
            data: [congesValues[index]],
            color: color
        };
    });

    const congesChart = new ApexCharts(document.querySelector("#conges-statut-chart"), {
        chart: { type: 'bar', height: 300, stacked: true },
        series: congesSeries,
        xaxis: { categories: ['Statut des congés'] },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
            }
        },
        legend: { position: 'bottom' }
    });
    congesChart.render();
});
</script>
@endpush

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->

<!-- Alertes pour contrats expirants -->
@if($contratsExpirant > 0)
<div class="row">
    <div class="col-12">
        <div class="alert alert-dismissible fade show" role="alert">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <i class="mdi mdi-alert-circle display-4 text-warning"></i>
                </div>
                <div>
                    <h5 class="alert-heading mb-1">Contrats arrivant à expiration</h5>
                    <p class="mb-2">
                        <strong>{{ $contratsExpirant }}</strong> contrat(s) arrivent à expiration dans les 30 prochains jours.
                        Une notification automatique a été envoyée aux employés concernés et aux responsables RH.
                    </p>
                    <a href="{{ route('rh.contrats.index') }}?expiring=1" class="btn btn-warning btn-sm">
                        <i class="mdi mdi-eye"></i> Voir les contrats expirants
                    </a>
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
</div>
@endif

<!-- Card Group - Statistiques principales -->
<div class="card-group">
    <div class="card p-2 p-lg-3">
        <div class="p-lg-3 p-2">
            <div class="d-flex align-items-center">
                <button class="btn btn-circle btn-primary text-white btn-lg" href="javascript:void(0)">
                    <i class="ti-user"></i>
                </button>
                <div class="ms-4" style="width: 38%;">
                    <h4 class="fw-normal">Total Employés</h4>
                    <div class="progress">
                        <div class="progress-bar bg-primary" style="width: 85%" role="progressbar"></div>
                    </div>
                </div>
                <div class="ms-auto">
                    <h2 class="display-7 mb-0">{{ $totalEmployes }}</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="card p-2 p-lg-3">
        <div class="p-lg-3 p-2">
            <div class="d-flex align-items-center">
                <button class="btn btn-circle btn-success text-white btn-lg" href="javascript:void(0)">
                    <i class="ti-file"></i>
                </button>
                <div class="ms-4" style="width: 38%;">
                    <h4 class="fw-normal">Contrats Actifs</h4>
                    <div class="progress">
                        <div class="progress-bar bg-success" style="width: 75%" role="progressbar"></div>
                    </div>
                </div>
                <div class="ms-auto">
                    <h2 class="display-7 mb-0">{{ $contratsActifs }}</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="card p-2 p-lg-3">
        <div class="p-lg-3 p-2">
            <div class="d-flex align-items-center">
                <button class="btn btn-circle btn-warning text-white btn-lg" href="javascript:void(0)">
                    <i class="ti-alert"></i>
                </button>
                <div class="ms-4" style="width: 38%;">
                    <h4 class="fw-normal">Contrats Expirant</h4>
                    <div class="progress">
                        <div class="progress-bar bg-warning" style="width: {{ $contratsExpirant > 0 ? 60 : 10 }}%" role="progressbar"></div>
                    </div>
                </div>
                <div class="ms-auto">
                    <h2 class="display-7 mb-0">{{ $contratsExpirant }}</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="card p-2 p-lg-3">
        <div class="p-lg-3 p-2">
            <div class="d-flex align-items-center">
                <button class="btn btn-circle btn-info text-white btn-lg" href="javascript:void(0)">
                    <i class="ti-calendar"></i>
                </button>
                <div class="ms-4" style="width: 38%;">
                    <h4 class="fw-normal">Demandes Congés</h4>
                    <div class="progress">
                        <div class="progress-bar bg-info" style="width: 45%" role="progressbar"></div>
                    </div>
                </div>
                <div class="ms-auto">
                    <h2 class="display-7 mb-0">{{ $demandesCongesEnAttente }}</h2>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="row">
    <div class="d-flex align-items-stretch col-lg-8">
        <div class="card w-100">
            <div class="card-body">
                <div class="d-md-flex align-items-center">
                    <h5 class="card-title">Évolution des Embauches</h5>
                    <ul class="list-inline dl mb-0 ms-auto">
                        <li class="list-inline-item text-info"><i class="fa fa-circle"></i> Embauches</li>
                    </ul>
                </div>
                <div id="embauches-chart"></div>
            </div>
        </div>
    </div>
    <div class="d-flex align-items-stretch col-lg-4">
        <div class="card w-100">
            <div class="d-flex justify-content-center">
                <div id="employes-par-role-chart" class="mx-auto" style="height: 304px"></div>
            </div>
            <div class="p-4">
                <div class="d-flex align-items-center">
                    <div>
                        <h4 class="font-weight-medium card-title">Répartition par Rôle</h4>
                        {{-- <h5 class="card-subtitle mb-0">Employés actifs</h5> --}}
                    </div>
                    <div class="ms-auto">
                        <button class="btn btn-circle btn-info text-white btn-lg" href="javascript:void(0)">
                            <i class="ti-pie-chart"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Actions rapides et Statistiques détaillées -->
<div class="row">
    <div class="col-lg-6 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="d-flex align-items-center px-3 py-4 border-bottom">
                <div>
                    <h4 class="card-title mb-0">Actions Rapides</h4>
                </div>
            </div>
            <div class="card-body">
                <div class="todo-widget">
                    <ul class="list-task todo-list list-group mb-0 p-0">
                        <li class="list-group-item border-0 mb-0 pb-3 pe-3 ps-0" data-role="task">
                            <div class="form-check border-start border-2 border-primary ps-1">
                                <a href="{{ route('rh.contrats.create') }}" class="d-flex align-items-center">
                                    <div class="btn btn-light-primary text-primary btn-circle">
                                        <i data-feather="file-plus" class="feather-sm fill-white"></i>
                                    </div>
                                    <div class="ms-3">
                                        <h5 class="mb-0">Nouveau Contrat</h5>
                                        <span class="text-muted fs-2">Créer un contrat pour un employé</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="list-group-item border-0 mb-0 py-3 pe-3 ps-0" data-role="task">
                            <div class="form-check border-start border-2 border-success ps-1">
                                <a href="{{ route('rh.conges.index') }}" class="d-flex align-items-center">
                                    <div class="btn btn-light-success text-success btn-circle">
                                        <i data-feather="calendar" class="feather-sm fill-white"></i>
                                    </div>
                                    <div class="ms-3">
                                        <h5 class="mb-0">Gérer les Congés</h5>
                                        <span class="text-muted fs-2">Approuver ou refuser les demandes</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="list-group-item border-0 mb-0 py-3 pe-3 ps-0" data-role="task">
                            <div class="form-check border-start border-2 border-warning ps-1">
                                <a href="{{ route('rh.evaluations.create') }}" class="d-flex align-items-center">
                                    <div class="btn btn-light-warning text-warning btn-circle">
                                        <i data-feather="star" class="feather-sm fill-white"></i>
                                    </div>
                                    <div class="ms-3">
                                        <h5 class="mb-0">Nouvelle Évaluation</h5>
                                        <span class="text-muted fs-2">Évaluer un employé</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="list-group-item border-0 mb-0 py-3 pe-3 ps-0" data-role="task">
                            <div class="form-check border-start border-2 border-info ps-1">
                                <a href="{{ route('rh.presences.index') }}" class="d-flex align-items-center">
                                    <div class="btn btn-light-info text-info btn-circle">
                                        <i data-feather="clock" class="feather-sm fill-white"></i>
                                    </div>
                                    <div class="ms-3">
                                        <h5 class="mb-0">Suivi Présences</h5>
                                        <span class="text-muted fs-2">Consulter les présences</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="card-body">
                <div class="d-md-flex align-items-center">
                    <h5 class="card-title">Statut des Contrats</h5>
                    <ul class="list-inline dl mb-0 ms-auto">
                        <li class="list-inline-item text-success"><i class="fa fa-circle"></i> Actifs</li>
                        <li class="list-inline-item text-danger"><i class="fa fa-circle"></i> Expirés</li>
                    </ul>
                </div>
                <div id="contrats-par-type-chart"></div>
            </div>
        </div>
    </div>
</div>

<!-- Charts supplémentaires -->
<div class="row">
    <div class="col-lg-6 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="card-body">
                <div class="d-md-flex align-items-center">
                    <h5 class="card-title">Statut des Congés</h5>
                    <ul class="list-inline dl mb-0 ms-auto">
                        <li class="list-inline-item text-danger"><i class="fa fa-circle"></i> Demandé</li>
                        <li class="list-inline-item text-warning"><i class="fa fa-circle"></i> Approuvé</li>
                        <li class="list-inline-item text-success"><i class="fa fa-circle"></i> Refusé</li>
                    </ul>
                </div>
                <div id="conges-statut-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="card-body">
                <div class="d-md-flex align-items-center">
                    <h5 class="card-title">Taux de Présence</h5>
                    <ul class="list-inline dl mb-0 ms-auto">
                        <li class="list-inline-item text-info"><i class="fa fa-circle"></i> 6 derniers mois</li>
                    </ul>
                </div>
                <div id="presence-chart"></div>
            </div>
        </div>
    </div>
</div>

<!-- -------------------------------------------------------------- -->
<!-- End Page Content -->
<!-- -------------------------------------------------------------- -->
@endsection