@php
    use Carbon\Carbon;
@endphp

@extends('layouts.root')

@section('root-body')
    


		<!-- Counter boxes START -->
		<div class="row g-4 mb-4">
			<!-- Counter item -->
			<div class="col-md-6 col-xxl-3">
				<div class="card card-body bg-warning bg-opacity-15 p-4 h-100">
					<div class="d-flex justify-content-between align-items-center">
						<!-- Digit -->
						<div>
							<h2 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="1958" data-purecounter-delay="200">
                                {{ $agents->count() }}
                            </h2>
							<span class="mb-0 h6 fw-light">Agents</span>
						</div>
						<!-- Icon -->
						<div class="icon-lg rounded-circle bg-warning text-white mb-0"><i class="fas fa-tv fa-fw"></i></div>
					</div>
				</div>
			</div>

			<!-- Counter item -->
			<div class="col-md-6 col-xxl-3">
				<div class="card card-body bg-purple bg-opacity-10 p-4 h-100">
					<div class="d-flex justify-content-between align-items-center">
						<!-- Digit -->
						<div>
							<h2 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="1958" data-purecounter-delay="200">
                                {{ $collectes->count() }}
                            </h2>
							<span class="mb-0 h6 fw-light">Recensements</span>
						</div>
						<!-- Icon -->
						<div class="icon-lg rounded-circle bg-purple text-white mb-0"><i class="fas fa-user-tie fa-fw"></i></div>
					</div>
				</div>
			</div>

			<!-- Counter item -->
			<div class="col-md-6 col-xxl-3">
				<div class="card card-body bg-primary bg-opacity-10 p-4 h-100">
					<div class="d-flex justify-content-between align-items-center">
						<!-- Digit -->
						<div>
							<h2 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="1958" data-purecounter-delay="200">
                                {{ $operateurs->count() }}
                            </h2>
							<span class="mb-0 h6 fw-light">Operateurs</span>
						</div>
						<!-- Icon -->
						<div class="icon-lg rounded-circle bg-primary text-white mb-0"><i class="fas fa-user-graduate fa-fw"></i></div>
					</div>
				</div>
			</div>

			<!-- Counter item -->
			<div class="col-md-6 col-xxl-3">
				<div class="card card-body bg-success bg-opacity-10 p-4 h-100">
					<div class="d-flex justify-content-between align-items-center">
						<!-- Digit -->
						<div>
							<h2 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="1958" data-purecounter-delay="200">
                                {{ $cartes->count() }}
                            </h2>
							<span class="mb-0 h6 fw-light">Cartes</span>
						</div>
						<!-- Icon -->
						<div class="icon-lg rounded-circle bg-success text-white mb-0"><i class="bi bi-stopwatch-fill fa-fw"></i></div>
					</div>
				</div>
			</div>
		</div>
		<!-- Counter boxes END -->

		<!-- Chart and Ticket START -->
		<div class="row g-4 mb-4">

			<!-- Chart START -->
			<div class="col-xxl-8">
				<div class="card shadow h-100">

					<!-- Card header -->
					<div class="card-header p-4 border-bottom">
						<h5 class="card-header-title">Recensements (2024)</h5>
					</div>

					<!-- Card body -->
					<div class="card-body">
						<!-- Apex chart -->
						<div id="ChartPayout"></div>
					</div>
				</div>
			</div>
			<!-- Chart END -->

			<!-- Ticket START -->
			<div class="col-xxl-4">
				<div class="card shadow h-100">
					<!-- Card header -->
					<div class="card-header border-bottom d-flex justify-content-between align-items-center p-4">
						<h5 class="card-header-title">Recensements recents</h5>
						<a href="#" class="btn btn-link p-0 mb-0">Voir tout</a>
					</div>

					<!-- Card body START -->
					<div class="card-body p-4">

                        @if(count($collectes_encours) > 0)

                            @foreach($collectes_encours as $collecte)

                            <!-- Ticket item START -->
                            <div class="d-flex justify-content-between position-relative">
                                <div class="d-sm-flex">
                                    <!-- Avatar -->
                                    <div class="avatar avatar-md flex-shrink-0">
                                        <img class="avatar-img rounded-circle" src="{{ URL::to('assets/images/logo2.png') }}" alt="avatar">
                                    </div>
                                    <!-- Info -->
                                    <div class="ms-0 ms-sm-2 mt-2 mt-sm-0">
                                        <h6 class="mb-0"><a href="#" class="stretched-link">{{ $collecte->libelle }}</a></h6>
                                        <p class="mb-0 small text-info">
                                            {{ $collecte->type_recensement->libelle }} | 
                                            @if(intval($collecte->active) == 1)
                                            <em class="text-success">active</em>
                                            @else
                                            <em class="text-danger">inactive</em>
                                            @endif
                                            <br>
                                            <strong class="text-primary">Superviseur : </strong> {{ $collecte->superviseur->noms }} {{ $collecte->superviseur->prenoms }}
                                            <br>
                                            <strong class="text-primary">Periode : </strong> 
                                            {{ Carbon::parse($collecte->date_debut)->isoFormat('dddd D MMMM YYYY') }} au 
                                            {{ Carbon::parse($collecte->date_fin)->isoFormat('dddd D MMMM YYYY') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <!-- Ticket item END -->

                            @endforeach

                        @else

						<!-- Ticket item START -->
						<div class="d-flex justify-content-between position-relative">
							<div class="d-sm-flex">
								<!-- Avatar -->
								<div class="avatar avatar-md flex-shrink-0">
									<img class="avatar-img rounded-circle" src="{{ URL::to('assets/images/logo2.png') }}" alt="avatar">
								</div>
								<!-- Info -->
								<div class="ms-0 ms-sm-2 mt-2 mt-sm-0">
									<h6 class="mb-0"><a href="#" class="stretched-link">Pas de nouveaute</a></h6>
									<p class="mb-0">Aucun operateur recemment recense !</p>
									<span class="small">{{ Carbon::now()->diffForHumans() }}</span>
								</div>
							</div>
						</div>
						<!-- Ticket item END -->

                        @endif
						
					</div>
					<!-- Card body END -->
				</div>
			</div>
			<!-- Ticket END -->
		</div>
		<!-- Chart and Ticket END -->

@endsection