@extends('layouts.embed')

@section('title')
    {{ $compte->name }} - Suivi des engagements
@endsection


@section('content')

    @if (!$is_embed)
        <div style="max-width:800px; margin: 80px auto 30px;">
    @endif

    <div class="suivi-des-engagements suivi-des-engagements-{{ $compte->id }}" data-suivi-des-engagements="{{ $compte->str_id }}" @if (!empty($copernic_debug)) data-debug="{{ $copernic_debug }}" @endif style="display: block;">
        
        <div class="header">
            <h1 class="title">
                @if ($configuration AND $configuration->title != null)
                    {{ $configuration->title }} au {{ $today_date->day }} {{ $today_date->monthName }} {{ $today_date->year }}
                @else
                    Suivi des engagements du mandat au {{ $today_date->day }} {{ $today_date->monthName }} {{ $today_date->year }}
                @endif
            </h1>

            @if ($configuration AND !empty($configuration->header_text))
                <p class="header_text">{{ $configuration->header_text }}</p>
            @endif
        </div>


        <div class="body">
            <div class="row">
                <div class="col-md-4">
                    <div class="sidebar">
                        <div class="search">
                            <form id="form-search">
                                <div class="icon">
                                    <i class="fas fa-search"></i>
                                </div>
                                <div class="searchbar">
                                    <input type="text" name="search" class="input-search-box" placeholder="Rechercher un engagement..." />
                                </div>
                            </form>
                            <div style="clear:both;"></div>
                        </div>


                        <h3 class="title">Thématiques</h3>
                        <a class="choose-thematique choose-thematique-all badge" data-thematique="0">Toutes</a>
                        @foreach ($thematiques as $thematique)
                            <a class="choose-thematique choose-thematique-{{ $thematique->id }} badge" data-thematique="{{ $thematique->id }}">{{ $thematique->name }}</a>
                        @endforeach


                        <h3 class="title">Statuts</h3>
                        <a class="choose-statut choose-statut-all badge" data-statut="0">Tous</a>
                        @foreach ($statuts as $statut)
                            <a class="choose-statut choose-statut-{{ $statut->id }} badge" data-statut="{{ $statut->id }}" style="background-color:{{ $statut->bg_color }}; color:{{ $statut->color }};">{{ $statut->name }}</a>
                        @endforeach
                    </div>
                </div>

                <div class="col-md-8">

                    <div class="engagements-list">
                        <div class="progressbar">
                            <div class="progress-numbers">
                                @php 
                                    $previous = 0;
                                @endphp

                                @foreach ($graph_items as $item)
                                    <div class="progress-number number-statut-{{ $item['id'] }}" style="left:calc({{ $previous }}% + 4px); color:{{ $item['embed_color'] }};">{{ $item['name'] }} : {{ round($item['percent']) }}%</div>
                                    @php 
                                        $previous += $item['percent'];
                                    @endphp
                                @endforeach
                            </div>

                            <div class="progressbar-border">
                                

                                @foreach ($graph_items as $item)<div class="progressbar-fill @if ($loop->first) first @endif @if ($loop->last) last @endif" style="background-color: {{ $item['embed_color'] }}; width:{{ $item['percent'] }}%;" data-statut="{{ $item['id'] }}" ></div>@endforeach
                            </div>
                        </div>

                        @foreach ($thematiques as $thematique)

                            <div class="thematique thematique-{{ $thematique->id }}">
                                @if (!empty($thematique->image_path))
                                    <div class="image" style="background-image:url({{ Storage::url($thematique->image_path) }})"></div>
                                @endif 
                                
                                <h2 class="title">{{ $thematique->name }}</h2>

                                <div class="engagements">
                                    @foreach ($thematique->engagements as $engagement)
                                        @php
                                            $page = floor($loop->index / 5) + 1;
                                        @endphp

                                        <div class="engagement engagement-{{ $engagement->id }} engagement-statut-{{ $engagement->statut->id }} engagement-page-{{ $page }} @if ($loop->last) last @endif" @if ($page > 1) style="display:none;" @endif>
                                            <div class="row">
                                                <!--<div class="col-md-8">-->
                                                <div class="col-md-12">
                                                    <div class="engagement-statut">
                                                        <span class="badge" style="background-color:{{ $engagement->statut->bg_color }}; color:{{ $engagement->statut->color }};">{{ $engagement->statut->name }}</span>
                                                    </div>

                                                    <div class="engagement-title">
                                                        {{ $engagement->title }}
                                                        @if (count($engagement->evenements))
                                                            <a href="#" class="more">Où en est-on ?</a>
                                                        @endif
                                                    </div>
                                                </div>
                                                <!--<div class="col-md-4">
                                                    <a href="#" class="button button-vote button-contre">
                                                    </a>
                                                    <a href="#" class="button button-vote button-pour">
                                                    </a>
                                                </div>-->

                                                <div class="col-md-12">
                                                    <div class="evenements" style="display:none;">
                                                        @foreach ($engagement->evenements as $evenement)
                                                            <div class="evenement evenement-{{ $evenement->id }}">
                                                                @if (!empty($evenement->image_path))
                                                                    <img src="{{ Storage::url($evenement->image_path) }}" alt="Image - {{ $evenement->date->day }} {{ $evenement->date->monthName }} {{ $evenement->date->year }}" class="image" />
                                                                @endif
                                                                <b>{{ $evenement->date->day }} {{ $evenement->date->monthName }} {{ $evenement->date->year }} :</b> {{ $evenement->description }}
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                @if (count($thematique->engagements) > 5)
                                    <a href="#" class="more next-page" data-thematique="{{ $thematique->id }}" data-current-page="1" data-last-page="{{ $page }}">Voir plus d'engagements</a>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    <div class="search-results" style="display:none;"></div>
                </div>
            </div>
        </div>

    </div>

    @if (!$is_embed)
        </div>
    @endif
@endsection



@section('js-script')
    <script src="{{ mix('/js/embed-suivi.js') }}"></script>
@endsection