@extends('layouts.app')

@section('page-title')

    @if (Auth::user()->selectedCompte->is_koba_account)
        Bienvenue sur votre espace consultation citoyenne, {{ Auth::user()->prenom }} !
    @else
        Bienvenue sur Copernic.CO, {{ Auth::user()->prenom }} !
    @endif

@endsection

@section('content')


    <!--<div style="background-color:#ffffff; width:100%; margin:0 auto 50px;"><iframe src="https://embed.copernic.test/7107bkPoXfTnPKgzkatJ" style="border:0; width:800px; height:2000px; margin:auto;"></iframe></div>-->


    <div class="row gap-20 pos-r">
        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Consultations en cours</h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR(count(Auth::user()->selectedCompte->consultationsInProgress)) }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Propositions en ligne</h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR(Auth::user()->selectedCompte->count_propositions) }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Propositions à valider</h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR(count(Auth::user()->selectedCompte->sentPropositions)) }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Nombre total de votes</h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR(Auth::user()->selectedCompte->count_votes_total) }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Nombre de contributeurs <i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="Nombre d'utilisateurs ayant envoyé au moins une proposition validée"></i></h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR($contributeurs_nb) }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Nombre de participants <i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="Nombre d'utilisateurs ayant soit voté soit envoyé au moins une proposition validée"></i></h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR($votants_nb + $contributeurs_nb) }}</p>
                </div>
            </div>
        </div>

        {{--<div class="col-md-3">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Nombre de chargement de consultations</h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR($consultations_load) }}</p>
                </div>
            </div>
        </div>--}}

        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Nombre de visiteurs uniques</h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">{{ formatNumberFR($unique_visitors) }}</p>
                </div>
            </div>
        </div>


        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Nombre de votes par votants</h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">@if ($votants_nb > 0) {{ formatNumberFR(Auth::user()->selectedCompte->count_votes_total / $votants_nb, 2) }} @else 0 @endif</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="layers bd bgc-white p-20">
                <div class="layer w-100 mB-10">
                    <h6 class="lh-1">Taux de participation <i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="Pourcentage de visiteurs uniques ayant participé aux consultations de votre compte"></i></h6>
                </div>
                <div class="layer w-100 ta-c">
                    <p class="d-ib lh-0 va-m fw-600 fsz-xl pT-20">@if ($unique_visitors > 0) {{ formatNumberFR((($votants_nb + $contributeurs_nb) / $unique_visitors * 100), 2) }}% @else 0 @endif</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mT-50">
        <div class="col-md-8">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <h4 class="c-grey-900 mB-30">Evolution du nombre de votes</h4>
                
                <canvas id="vote-evolution" height="100"></canvas>
            </div>
        </div>


        <div class="col-md-4">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <h4 class="c-grey-900 mB-30">Répartition des consultations</h4>
                
                <canvas id="consultation-repartition" height="200"></canvas>
            </div>
        </div>
    </div>

    @if (count($sentPropositions))
        <div class="row mT-50">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <h4 class="c-grey-900 mB-30">Propositions à valider</h4>
                    <table class="table table-striped" style="width:100%; table-layout: fixed;">
                        <thead>
                            <tr>
                                <th style="width:5%">#</th>
                                <th style="width:20%" scope="col">Consultation</th>
                                <th style="width:40%" scope="col">Proposition</th>
                                <th style="width:15%" scope="col">Proposé par</th>
                                <th style="width:20%; min-width:190px">Gestion</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($sentPropositions as $sent_proposition)
                                <tr>
                                    <td>{{ $sent_proposition->id }}</td>
                                    <td>{{ $sent_proposition->consultation->title }}</td>
                                    <td>{{ $sent_proposition->texte }}</td>
                                    <td>{{ isset($sent_proposition->guest) ? $sent_proposition->guest_prenom : $sent_proposition->participant->prenom_nom }}</td>
                                    <td class="td-btn">
                                        <a href="{{ route('consultations.propositions.confirmSentProposition', $sent_proposition) }}" class="btn btn-success">Accepter</a>
                                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#refuseModal{{ $sent_proposition->id }}">Refuser</button>
                                        @include('propositions.refuse_modal', ['proposition' => $sent_proposition])
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
@endsection



@section('js')
    <script type="text/javascript">

        $(document).ready( function () {
            var ctx = document.getElementById('vote-evolution').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',

                // The data for our dataset
                data: {
                    labels: [
                        @foreach ($total_votes_by_date as $key => $vote)
                            '{{ Carbon\Carbon::createFromFormat('Y-m-d', $key)->format('d/m/Y') }}',
                        @endforeach
                    ],
                    datasets: [{
                        label: 'Total des votes ',
                        backgroundColor: 'rgba(235, 61, 0, 0.2)',
                        borderColor: '#EB3D00',
                        data: [
                            @foreach ($total_votes_by_date as $key => $vote)
                                '{{ $vote }}',
                            @endforeach
                        ]
                    }]
                },

                // Configuration options go here
                options: {
                    legend: {
                        display: false
                    }
                }
            });


            var ctx = document.getElementById('consultation-repartition').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'doughnut',

                // The data for our dataset
                data: {
                    labels: [
                        @foreach ($consultations_by_type as $key => $number)
                            '{{ Config::get('constants.CONSULT_TYPE_STRING')[$key] }} ',
                        @endforeach
                    ],
                    datasets: [{
                            label: 'Répartition des consultations ',
                            /*backgroundColor: 'rgba(235, 61, 0, 0.2)',
                            borderColor: '#EB3D00',*/
                            data: [
                                @foreach ($consultations_by_type as $key => $number)
                                    {{ $number }},
                                @endforeach
                            ],
                            backgroundColor:["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]
                        }]
                },

                // Configuration options go here
                options: {
                    legend: {
                        display: true
                    }
                }
            });
        });
    </script>
@endsection