@extends('admin.components.layouts.master', ['title' => 'Tableau de bord'])

@section('content')

<div class="row mb-3">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $nbRep }}</h3>

                <p>Nombre de représentants</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            <a href="{{ route('app.admin.representatives.index') }}" class="small-box-footer">
                Détails <i class="fas fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="col-6">
        <div class="card card-success">
            <div class="card-header">
                <h3 class="card-title">Représentants par province</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="chart">
                    <canvas id="provinces"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">Représentants par centre de vote</div>
    <div class="card-body">
        @if ($votingCenters !== null && $votingCenters ->count() !== 0)
            <table class="table table-bordered table-hover" id="dt1">
                <thead>
                    <tr>
                        <th>Centres de votes</th>
                        <th>Représentants</th>
                    </tr>
                </thead>
            <tbody>
                @foreach ($votingCenters as $data)
                    <tr>
                        <td>{{ $data ->name }}</td>
                        <td>{{ $data ->representatives ->count() }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        @else
            Aucune données disponibles
        @endif
    </div>
</div>

<div class="card">
    <div class="card-header">
        Liste des représentants
    </div>
    <div class="card-body">
        @include('admin.representative.section.table', ['displayed' => 'index'])
    </div>
</div>

@endsection

@section('scripts')

<script>
    $(function () {
        const provinces = document.getElementById('provinces');

        new Chart(provinces, {
            type: 'bar',
            data: {
                labels: [ @foreach ($provinces as $province) '{{ $province ->name }}', @endforeach ],
                datasets: [{
                    label: '# représentants par province',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [@foreach ($provinces as $province) {{ $province ->representatives ->count() }}, @endforeach],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
</script>

@endsection