@php
    use Carbon\Carbon;
@endphp

@extends('layouts.root')



@section('scripts')
<!-- Inclure les bibliothèques CSS et JS de Morris.js -->
@endsection




@section('root-content')

<!-- Row Start -->
<div class="row align-items-center gx-4 gy-4 mb-4">
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="dash-wrap-bloud">
            <div class="dash-wrap-bloud-icon">
                <div class="bloud-icon text-success bg-light-success">
                    <i class="bi bi-alexa me-2"></i>
                </div>
            </div>
            <div class="dash-wrap-bloud-caption">
                <div class="dash-wrap-bloud-content">
                    <h5 class="ctr">{{ $entreprises->count() }}</h5>
                    <p>Entreprises</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="dash-wrap-bloud">
            <div class="dash-wrap-bloud-icon">
                <div class="bloud-icon text-warning bg-light-warning">
                    <i class="bi bi-bug"></i>
                </div>
            </div>
            <div class="dash-wrap-bloud-caption">
                <div class="dash-wrap-bloud-content">
                    <h5 class="ctr">{{ $freelances->count() }}</h5>
                    <p>Freelances</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="dash-wrap-bloud">
            <div class="dash-wrap-bloud-icon">
                <div class="bloud-icon text-danger bg-light-danger">
                    <i class="bi bi-bullseye"></i>
                </div>
            </div>
            <div class="dash-wrap-bloud-caption">
                <div class="dash-wrap-bloud-content">
                    <h5 class="ctr">{{ $clients->count() }}</h5>
                    <p>Clients</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="dash-wrap-bloud">
            <div class="dash-wrap-bloud-icon">
                <div class="bloud-icon text-info bg-light-info">
                    <i class="bi bi-clipboard"></i>
                </div>
            </div>
            <div class="dash-wrap-bloud-caption">
                <div class="dash-wrap-bloud-content">
                    <h5 class="ctr">{{ $demandes->count() }}</h5>
                    <p>Demandes</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Row End -->

<!-- Row Start -->
<div class="row gx-4 gy-4 mb-4">
    <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12">
        <div class="card d-none d-lg-block">
            <div class="card-header">
                <h4 class="mb-0">Statistiques</h4>
            </div>
            <div class="card-body">
                <ul class="list-inline text-center m-t-40">
                    <li>
                        <h5><i class="fa fa-circle me-1 text-warning"></i>Freelances {{ $freelances->count() }}</h5>
                    </li>
                    <li>
                        <h5><i class="fa fa-circle me-1 text-danger"></i>Entreprises {{ $entreprises->count() }}</h5>
                    </li>
                    <li>
                        <h5><i class="fa fa-circle me-1 text-success"></i>Clients {{ $clients->count() }}</h5>
                    </li>
                    <li>
                        <h5><i class="fa fa-circle me-1 text-primary"></i>Demandes {{ $demandes->count() }}</h5>
                    </li>
                </ul>
                <div class="chart full-width" id="line-chart-2" style="height:300px;"></div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header">
                <h4>Notifications</h4>
            </div>
            <div class="ground-list ground-list-hove">
                @if($alertes->count() > 0)
                    @foreach($alertes as $alerte)
                    <div class="ground ground-single-list">
                        <a href="JavaScript:Void(0);">
                            <div class="btn-circle-40 text-warning bg-light-warning"><i class="bi bi-bell"></i></div>
                        </a>

                        <div class="ground-content">
                            <h6><a href="JavaScript:Void(0);"><strong>{{ $alerte->libelle }}</strong></a></h6>
                            <span class="small">{{ Carbon::parse($alerte->created_at)->diffForHumans() }}</span>
                        </div>
                    </div>
                    @endforeach
                @else
                <div class="ground ground-single-list">
                    <a href="JavaScript:Void(0);">
                        <div class="btn-circle-40 text-danger bg-light-danger"><i class="bi bi-bell"></i></div>
                    </a>

                    <div class="ground-content">
                        <h6><a href="JavaScript:Void(0);">Pas de notification <strong>aujourd'hui</strong> !</a></h6>
                        <span class="small">{{ Carbon::now() }}</span>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>



</div>
<!-- Row End -->

<!-- Row Start -->
<div class="row">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">Demandes récentes</h4>
            </div>
            <div class="card-body px-4 py-4">
                <!-- Start All List -->
                <div class="row justify-content-start gx-3 gy-4">

                    @if($latest_demandes->count() > 0)

                    @foreach($latest_demandes as $demande)
                    <!-- Single Item -->
                    <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="jbs-list-box border">
                            <div class="jbs-list-head">
                                <div class="jbs-list-head-thunner">
                                    <div class="jbs-list-emp-thumb jbs-verified"><a href=""><figure><img src="{{ URL::to('storage/avatars/avatar.png') }}" class="img-fluid" alt=""></figure></a></div>
                                    <div class="jbs-list-job-caption">
                                        <div class="jbs-job-types-wrap">
                                            <span class="label text-success bg-light-success">{{ $demande->secteur_id ? $demande->secteur->libelle : '' }}</span>
                                        </div>
                                        <div class="jbs-job-title-wrap">
                                            <h4>
                                                <a href="" class="jbs-job-title">{{ $demande->prestataire_id ? $demande->prestataire->libelle : '' }}</a>
                                            </h4>
                                        </div>
                                        <div class="jbs-job-mrch-lists">
                                            <div class="single-mrch-lists">
                                                <span>
                                                    <i class="fa-solid fa-location-dot me-1"></i>{{ $demande->adresse }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-list-head-middle">
                                    <div class="elsocrio-jbs">
                                        <div class="ilop-tr">
                                            <i class="fa-solid fa-sack-dollar"></i>
                                        </div>
                                        <h5 class="jbs-list-pack">
                                            {{ $demande->noms }} {{ $demande->prenoms }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="jbs-list-head-last">
                                    <a href="" class="btn btn-md btn-outline-secondary px-3 me-2"><i class="bi bi-eye"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    @else
                    <!-- Single Item -->
                    <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="jbs-list-box border">
                            <div class="jbs-list-head">
                                <div class="jbs-list-head-thunner">
                                    <div class="jbs-list-emp-thumb"><a href=""><figure><img src="{{ URL::to('storage/avatars/avatar.png') }}" class="img-fluid" alt=""></figure></a></div>
                                    <div class="jbs-list-job-caption">
                                        <div class="jbs-job-types-wrap"><span class="label text-success bg-light-success">JOBBO</span></div>
                                        <div class="jbs-job-title-wrap"><h4><a href="" class="jbs-job-title">Aucune demande aujourd'hui !</a></h4></div>
                                        <div class="jbs-job-mrch-lists">
                                            <div class="single-mrch-lists">
                                                <span>{{ Carbon::now() }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                </div>
                <!-- End All Job List -->
            </div>
        </div>
    </div>
</div>
<!-- Row End -->

@endsection

@section('scripts')


<script>
document.addEventListener("DOMContentLoaded", function() {

    Morris.Area({
        element: 'line-chart',
        data: [
            @foreach($freelances as $freelance)
                { year: '{{ $freelance->year }}', freelances: {{ $freelance->count }} },
            @endforeach
            @foreach($entreprises as $entreprise)
                { year: '{{ $entreprise->year }}', entreprises: {{ $entreprise->count }} },
            @endforeach
            @foreach($clients as $client)
                { year: '{{ $client->year }}', clients: {{ $client->count }} },
            @endforeach
            @foreach($demandes as $demande)
                { year: '{{ $demande->year }}', demandes: {{ $demande->count }} },
            @endforeach
        ],
        xkey: 'year',
        ykeys: ['freelances', 'entreprises', 'clients', 'demandes'],
        labels: ['Freelances', 'Entreprises', 'Clients', 'Demandes'],
        pointSize: 4,
        fillOpacity: 0,
        pointStrokeColors: ['#1cc100', '#fdc006', '#1db4bd', '#ff0000'],
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        lineWidth: 1,
        hideHover: 'auto',
        lineColors: ['#1cc100', '#fdc006', '#1db4bd', '#ff0000'],
        resize: true

    });
});
</script>
@endsection