@extends('layouts.admin')
@section('titre')
    Etats par district
@endsection
@section('header')
@endsection
@section('content')
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1><b><i class="fas fa-cogs"></i></b> Etats par districts</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/">Accueil</a></li>
                            <li class="breadcrumb-item active">Etat/Centre/{{(isset($district)?$district->name:"")}}</li>
                        </ol>
                    </div>
                </div>
                <hr>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- modal qui ajoute -->
                <div class="row">
                    <div class="col col-md-12">
                        <form action="{{ route('Reporting.leCentre.poste') }}" method="POST" >
                            @csrf
                            <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                            <div class="row">
                                <div class="col-sm-3">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <select id="province" class="form-control select2" name="province_id" onchange="populate_dep(this.id, 'departement')">
                                            <option disabled selected >--Choisir la province--</option>
                                            @foreach($provinces as $province)
                                                <option value="{{$province->id}}" >
                                                    {{$province->name}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <select id="departement" class="form-control select2" name="department_id"  onchange="populate_dist(this.id, 'district')" required>
                                            <option disabled >--Choisissez le province--</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <select id="district" class="form-control select2" name="district_id" required>
                                            <option disabled >--Choisissez le département--</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <center>
                                        <button type="submit" name="ajouter" class="btn btn-success text-center float-right">
                                            <B><i class="fas fa-search"></i>&nbsp;&nbsp;</B>
                                        </button>
                                    </center>
                                </div>
                            </div>
                        </form>
                        <hr>
                    </div>
                    <div class="col col-sm-12 col-md-12">

                        @if(isset($district))
                        <div class="card card-default">
                            <div class="card-header">
                                <h3 class="card-title">DETAILS DU DISTRICT:  {{  $district->department->province->name }} <span  class="fas fa-chevron-right"></span> {{  $district->department->name }} <span  class="fas fa-chevron-right"></span> {{  $district->name }} <span  class="fas fa-chevron-right"></span> {{  $district->name }} </h3>
                            </div>
                            <div class="body">
                                <div class="row p-2">
                                    <div class="col-md-3">
                                        <div class="info-box card-primary card-outline shadow-lg">
                                            <span class="info-box-icon bg-primary"> <i class="fas fa-users"></i> </span>
                                            <div class="info-box-content">
                                                <center>
                                                    <span class="info-box-text">Nbr Inscrits</span>
                                                    <span class="info-box-number" style="font-size: 150%;">{{$district->inscrit}}</span>
                                                </center>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="info-box card-primary card-outline shadow-lg">
                                            <span class="info-box-icon bg-primary"> <i class="fas fa-users"></i> </span>
                                            <div class="info-box-content">
                                                <center>
                                                    <span class="info-box-text">Nbr Votants</span>
                                                    <span class="info-box-number" style="font-size: 150%;">{{$district->votants}}</span>
                                                </center>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="info-box card-warning card-outline shadow-lg">
                                            <span class="info-box-icon bg-warning"> <i class="fas fa-users"></i> </span>
                                            <div class="info-box-content">
                                                <center>
                                                    <span class="info-box-text">Nbr Bul. Blanc</span>
                                                    <span class="info-box-number" style="font-size: 150%;">{{$district->blancs}}</span>
                                                </center>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="info-box card-success card-outline shadow-lg">
                                            <span class="info-box-icon bg-success"> <i class="fas fa-users"></i> </span>
                                            <div class="info-box-content">
                                                <center>
                                                    <span class="info-box-text">Nbr Suf. Exprimés</span>
                                                    <span class="info-box-number" style="font-size: 150%;">{{$district->resultats()->sum('vote')}}</span>
                                                </center>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-box card-danger card-outline shadow-lg">
                                            <span class="info-box-icon bg-danger"> <i class="fas fa-users"></i> </span>
                                            <div class="info-box-content">
                                                <center>
                                                    <span class="info-box-text">Nbr Abstentions</span>
                                                    <span class="info-box-number" style="font-size: 150%;">{{$district->abstention}}</span>
                                                </center>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">                                                
                                        <table class="table text-center table-striped table-sm">
                                            <thead>
                                                <tr>
                                                    <th>N°</th>
                                                    <th>Candidat</th>
                                                    <th>Inscrits</th>
                                                    <th>Votants</th>
                                                    <th>Bulletins blancs</th>
                                                    <th>Suffrages exprimés</th>
                                                    <th>Sufrages obtenus</th>
                                                    <th>Pourcentage</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($candidats as $ke => $lecandidat)
                                                    <tr>
                                                        <td>{{$ke+1}}</td>
                                                        <td style="text-align: left;">{{$lecandidat->nom_params}}</td>
                                                        <td>{{$district->inscrit}}</td>
                                                        <td>{{$district->votants}}</td>
                                                        <td>{{$district->blancs}}</td>
                                                        <td>{{$district->resultats()->sum('vote')}}</td>
                                                        <td>{{$district->resultats()->where('candidat_id', $lecandidat->id)->sum('vote')}}</td>
                                                        <td>{{$district->pourcentage($lecandidat->id)}}%</td>
                                                    </tr>
                                                @endforeach 
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
@endsection

@section('footer')

    <script type="text/javascript">
        function populate_dep(s1,s2){
            var s1 = document.getElementById(s1);
            var s2 = document.getElementById(s2);
            s2.innerHTML = "";
            @php foreach($provinces as $province): @endphp
            if(s1.value == "{{ $province->id}}"){
                var optionArray = ["0| Choisir le département"
                                        @forelse ($province->departments()->orderBy('name')->get() as $departement)
                                            ,"{{$departement->id}}||{{$departement->name}}"
                                        @endforeach
                                    ];
            }
            @php endforeach; @endphp

            for(var option in optionArray){
                var pair = optionArray[option].split("||");
                var newOption = document.createElement("option");
                newOption.value = pair[0];
                newOption.innerHTML = pair[1];
                s2.options.add(newOption);
            }
        }
        function populate_dist(s1,s2){
            var s1 = document.getElementById(s1);
            var s2 = document.getElementById(s2);
            s2.innerHTML = "";
            @php foreach($departements as $departement): @endphp
            if(s1.value == "{{ $departement->id}}"){
                var optionArray = ["0| Choisir la districte"
                                        @forelse ($departement->districts()->orderBy('name')->get() as $districte)
                                            ,"{{$districte->id}}||{{$districte->name}}"
                                        @endforeach
                                    ];
            }
            @php endforeach; @endphp

            for(var option in optionArray){
                var pair = optionArray[option].split("||");
                var newOption = document.createElement("option");
                newOption.value = pair[0];
                newOption.innerHTML = pair[1];
                s2.options.add(newOption);
            }
        }

    </script>

@endsection