@extends('layouts.embed')

@section('title')
    {{ $consultation->title }}
@endsection

@section('js-head')
<script>
    window.addEventListener("message", function (event) {
        try {
            message = JSON.parse(event.data);
            if (message.type == 'copernic-cookie-parent-to-child' && message.cfp != undefined) {
                $('.consultation').attr('data-fp', message.cfp);
            }
        } catch (e) {
            return false;
        }
    });
</script>
@endsection


@section('content')

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

    <div class="consultation consultation-{{ $consultation->id }}" data-consultation="{{ $consultation->str_id }}" data-account="{{ $consultation->compte->str_id }}" data-last-page="{{ ceil(count($consultation->propositions) / $prop_max) }}" @if (!empty($copernic_debug)) data-debug="{{ $copernic_debug }}" @endif data-login-to-send-proposition="{{ $consultation->login_to_send_proposition }}" data-login-to-vote="{{ $consultation->login_to_vote }}" style="display: block;">
        <div class="consultation-logged-in">
            <p class="consultation-logged-in-info">
                Connecté en tant que <span></span>. 
                <a href="" class="consultation-log-out">Déconnexion</a>
            </p>
        </div>

        <div class="consultation-header">
            <h1 class="consultation-header-title">{{ $consultation->title }}</h1>
            @if (!empty($consultation->description))
                <hr>
                <p class="consultation-header-description">
                    {{ $consultation->description }}
                </p>
            @endif

            <p class="consultation-header-date"></p>
        </div>

        @if ($consultation->is_searchbar_displayed)
            <div class="consultation-search-box">
                <input type="text" class="input-search-box" id="input-search-box" name="search-box" value="" placeholder="Rechercher...">
            </div>
        @endif

        <div class="propositions">
            <div class="list-propositions">
                @foreach ($consultation->orderedPropositions()->paginate($prop_max * 2) as $proposition)

                    @php
                        $current_page = ceil($loop->iteration / $prop_max);
                    @endphp

                    <div class="proposition proposition-{{ $proposition->id }} proposition-page-{{ $current_page }}" data-proposition="{{ $proposition->id }}" data-proposition-page="{{ $current_page }}" data-compte="{{ $proposition->compte_id }}" data-title="{{ $proposition->title }}" @if ($current_page > 1) style="display:none;" @endif>
                        <div class="row">
                            <div class="col-sm-8 proposition-left-bloc">
                                @if ($proposition->type == Config::get('constants.PROPOSITION_TYPE.IMAGE'))
                                    <div class="proposition-image">
                                        <img src="{{ Storage::url($proposition->media_link) }}" alt="Image Proposition {{ $proposition->title }}" class="proposition-{{ $proposition->id }}-image">
                                    </div>
                                @endif

                                <h2 class="proposition-title">{{ $proposition->title }}</h2>
                                @if (!empty($proposition->participant))
                                    <p class="proposition-author propositon-participant participant-{{ $proposition->participant_id }}">
                                        Par {{ $proposition->participant->prenom }}
                                    </p>
                                @elseif (!empty($proposition->guest_prenom))
                                    <p class="proposition-author propositon-guest guest-{{ $proposition->guest_id }}">
                                        Par {{ $proposition->guest_prenom }}
                                    </p>
                                @else
                                    <p class="proposition-author">
                                        Par {{ $consultation->compte->display_name }}
                                    </p>
                                @endif
                                </p>
                                @if (!empty($proposition->description))
                                    <p class="proposition-description-link"><a href="#">{{ $text_proposition_see_more }}</a></p>
                                    <p class="proposition-description">{{ $proposition->description }}</p>
                                @endif
                            </div>
                            <div class="col-sm-4 proposition-right-bloc">
                                <div class="bloc-propositions-buttons" style="margin-top: 32.5px;">

                                    @if ($consultation->type == Config::get('constants.CONSULT_TYPE.PLUS_UN'))
                                        <div class="proposition-buttons proposition-like">
                                            <div class="share-bloc">
                                                <a href="#" class="button button-share"></a>
                                                <div class="share-line"></div>
                                            </div>

                                            <a href="#" class="button button-vote button-like button-pour">@if ($consultation->display_votes == Config::get('constants.DISPLAY_VOTES.OUI'))
                                                    {{ $proposition->count_votes_like }}
                                                @endif
                                            </a>
                                        </div>

                                    @elseif ($consultation->type == Config::get('constants.CONSULT_TYPE.POUR_CONTRE_NEUTRE'))

                                        <div class="proposition-buttons proposition-pcn">
                                            <div class="share-bloc">
                                                <a href="#" class="button button-share"></a>
                                                <div class="share-line"></div>
                                            </div>

                                            <a href="#" class="button button-vote button-neutre">
                                                @if ($consultation->display_votes == Config::get('constants.DISPLAY_VOTES.OUI'))
                                                    {{ $proposition->count_votes_neutre }}
                                                @endif
                                            </a>
                                            <a href="#" class="button button-vote button-contre">
                                                @if ($consultation->display_votes == Config::get('constants.DISPLAY_VOTES.OUI'))
                                                    {{ $proposition->count_votes_contre }}
                                                @endif
                                            </a>
                                            <a href="#" class="button button-vote button-pour">
                                                @if ($consultation->display_votes == Config::get('constants.DISPLAY_VOTES.OUI'))
                                                    {{ $proposition->count_votes_pour }}
                                                @endif
                                            </a>
                                        </div>

                                    @elseif ($consultation->type == Config::get('constants.CONSULT_TYPE.VOTE_UNIQUE'))
                                        <div class="proposition-buttons proposition-unique">
                                            <a href="#" class="button button-vote button-unique">Choisir</a>
                                        </div>
                                    @endif


                                </div>
                            </div>
                        </div>
                        <div class="share-rs">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="title">Partager cette proposition</div>
                                </div>
                                <div class="col-sm-1"></div>
                                <div class="col-sm-2">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($url.'?copernic_proposition='.$proposition->id) }}" class="button-rs button-facebook" target="_blank">
                                        <img src="https://widget.copernic.co/img/share-facebook.svg" alt="Bouton Facebook"> Partager
                                    </a>
                                </div>
                                <div class="col-sm-2">
                                    <a href="https://twitter.com/intent/tweet?text={{ urlencode('Comme moi, donnez votre avis sur « '.$consultation->title.' ». '.$url.'?copernic_proposition='.$proposition->id) }}" class="button-rs button-twitter" target="_blank"><img src="https://widget.copernic.co/img/share-twitter.svg" alt="Bouton Twitter"> Tweeter</a>
                                </div>
                                <div class="col-sm-2">
                                    <a href="https://api.whatsapp.com/send?text={{ urlencode('Comme moi, donnez votre avis sur « '.$consultation->title.' ». '.$url.'?copernic_proposition='.$proposition->id) }}" class="button-rs button-whatsapp" target="_blank"><img src="https://widget.copernic.co/img/share-whatsapp.svg" alt="Bouton WhatsApp"> Partager</a>
                                </div>
                                <div class="col-sm-2">
                                    <a href="mailto:?subject=Donnez votre avis sur cette consultation&amp;body=Comme moi, donnez votre avis sur la consultation « {{ $proposition->title }} », en cliquant sur le lien suivant : {{ $url.'?copernic_proposition='.$proposition->id }}" class="button-rs button-email"><img src="https://widget.copernic.co/img/share-email.svg" alt="Bouton Email"> Email</a>
                                </div>
                                <div class="col-sm-2">
                                    <a href="#" class="button-rs button-copy" data-text="Comme moi, donnez votre avis sur « {{ $consultation->title }} ». {{ $url }}?copernic_proposition={{ $proposition->id }}"><img src="https://widget.copernic.co/img/share-copy-paste.svg" alt="Bouton Copier-Coller"> <span>Copier</span></a>
                                </div>
                            </div>
                        </div>

                        
                        @if ($consultation->login_to_vote == 1)
                            <form class="form-login-to-vote">
                                <div class="row message-for-vote-login">
                                    <div class="col-sm-12">
                                        <div class="alert alert-success account-create-and-vote-sent">Bienvenue <span class="new-user-prenom"></span> ! Votre vote a bien été enregistré.</div>
                                        <div class="alert alert-success account-login-and-vote-sent">Ravi de vous revoir <span class="new-user-prenom"></span> ! Votre vote a bien été enregistré.</div>
                                        <div class="alert alert-warning account-login-but-already-voted">Ravi de vous revoir <span class="new-user-prenom"></span> ! Vous aviez cependant déjà voté sur cette consultation : nous n'avons donc pas enregistré de nouveau vote pour votre compte.</div>
                                    </div>
                                </div>

                                <div class="consultation-register">
                                    <div class="consultation-login" style="display: none;">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p class="register-title">Connectez-vous</p>
                                                <p class="register-description">Pour pouvoir voter, merci de vous connecter.</p>
                                                <p class="register-link">Pas encore de compte ? <a href="#" class="go-to-signup">Créez un compte</a>, ça ne prend que quelques secondes.</p>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="consultation-login-form">
                                                    <input type="email" name="input-email" class="input-email form-control" placeholder="Adresse email">
                                                    <div class="email-valid valid-feedback"></div><div class="email-invalid invalid-feedback"></div>

                                                    <input type="password" name="input-password" class="input-password form-control" placeholder="Mot de passe">
                                                    <div class="password-valid valid-feedback"></div><div class="password-invalid invalid-feedback"></div>

                                                    <button type="submit" class="btn btn-copernic btn-send-proposition">Se connecter et voter <img src="https://widget.copernic.co/img/send.svg" alt="Envoyer" class="send-proposition-img"></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="consultation-sign-up">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p class="register-title">Créez un compte</p>
                                                <p class="register-description">Pour pouvoir voter, merci de vous connecter.</p>
                                                <p class="register-link">Déjà un compte ? <a href="#" class="go-to-login">Connectez-vous</a> !</p>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="consultation-sign-up-form">
                                                    <input type="text" name="input-prenom" class="input-prenom form-control" placeholder="Prénom"><div class="prenom-valid valid-feedback"></div><div class="prenom-invalid invalid-feedback"></div>
                                                    <input type="text" name="input-nom" class="input-nom form-control" placeholder="Nom"><div class="nom-valid valid-feedback"></div><div class="nom-invalid invalid-feedback"></div>
                                                    <input type="email" name="input-email" class="form-control input-email" placeholder="Adresse email"><div class="email-valid valid-feedback"></div><div class="email-invalid invalid-feedback"></div>
                                                    <input type="password" name="input-password" class="form-control input-password" placeholder="Mot de passe"><div class="password-valid valid-feedback"></div><div class="password-invalid invalid-feedback"></div>
                                                    <input type="password" name="input-password-confirmation" class="input-password-confirmation form-control" placeholder="Confirmation du mot de passe"><div class="password-confirmation-valid valid-feedback"></div><div class="password-confirmation-invalid invalid-feedback"></div>
                                                    <div class="form-check">
                                                        <input class="input-newsletter form-check-input" type="checkbox" name="input-newsletter" value="ok"><label class="form-check-label" for="input-newsletter">J'autorise <span class="account_name"></span> à m'envoyer des emails</label>
                                                    </div><div class="newsletter-valid valid-feedback"></div><div class="newsletter-invalid invalid-feedback"></div>
                                                    <div class="form-check">
                                                        <input class="form-check-input input-cgu" type="checkbox" name="input-cgu" value="ok"><label class="form-check-label" for="input-cgu">J'accepte la <a href="http://copernic.co/politique-de-confidentialite-copernic/" target="_blank">politique de confidentialité</a> de Copernic.co</label>
                                                    </div><div class="cgu-valid valid-feedback"></div><div class="cgu-invalid invalid-feedback"></div>

                                                    <button type="submit" class="btn btn-copernic btn-send-proposition">S'inscrire et voter <img src="https://widget.copernic.co/img/send.svg" alt="Envoyer" class="send-proposition-img"></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        @endif
                    </div>
                @endforeach
            </div>

            @if ($consultation->propositions->count() > $prop_max)
                <div class="proposition more-propositions"><a href="#">Voir plus</a></div>
            @endif
        </div>


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

        @if ($consultation->is_opened)
            <div class="proposition-send">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="alert alert-success account-create-and-proposition-sent">
                            Bienvenue <span class="new-user-prenom"></span> ! Votre proposition nous a bien été envoyée. Nous la soumettrons au vote après modération.
                        </div>

                        <div class="alert alert-success account-login-and-proposition-sent">
                            Ravi de vous revoir <span class="new-user-prenom"></span> ! Votre proposition nous a bien été envoyée. Nous la soumettrons au vote après modération.
                        </div>

                        <div class="alert alert-success proposition-sent-with-logged-in-user">
                            Merci <span class="new-user-prenom"></span> ! Votre proposition nous a bien été envoyée. Nous la soumettrons au vote après modération.
                        </div>

                        <div class="alert alert-success proposition-sent">
                            Votre proposition nous a bien été envoyée. Nous la soumettrons au vote après modération.
                        </div>
                    </div>
                </div>

                <form>
                    <div class="row">

                        <div class="col-sm-9">
                            @if ($consultation->login_to_send_proposition === 0)
                                <input type="text" name="prenom" class="form-control input-prenom" placeholder="Prénom" /><div class="prenom-valid valid-feedback"></div><div class="prenom-invalid invalid-feedback"></div>
                            @endif

                            <textarea class="form-control input-proposition" placeholder="Soumettre une proposition..."></textarea>

                            <div class="compteur-caracteres"><span class="number">0</span>/160</div>

                            <div class="proposition-valid valid-feedback"></div>
                            <div class="proposition-invalid invalid-feedback"></div>
                        </div>
                        <div class="col-sm-3">
                            <button type="submit" class="btn btn-copernic btn-send-proposition-only" style="margin-top: 37px;">Envoyer <img src="https://widget.copernic.co/img/send.svg" alt="Envoyer" class="send-proposition-img"></button>
                        </div>
                    </div>

                    <div class="consultation-register">
                        <div class="consultation-login">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="register-title">Connectez-vous</p>
                                    <p class="register-description">Pour soumettre votre proposition, merci de vous connecter.</p>
                                    <p class="register-link">Pas encore de compte ? <a href="#" class="go-to-signup">Créez un compte</a>, ça ne prend que quelques secondes.</p>
                                </div>

                                <div class="col-md-6">
                                    <div class="consultation-login-form">
                                        <input type="email" name="input-email" class="input-email form-control" placeholder="Adresse email">
                                        <div class="email-valid valid-feedback"></div>
                                        <div class="email-invalid invalid-feedback"></div>

                                        <input type="password" name="input-password" class="input-password form-control" placeholder="Mot de passe">
                                        <div class="password-valid valid-feedback"></div>
                                        <div class="password-invalid invalid-feedback"></div>

                                        <button type="submit" class="btn btn-copernic btn-send-proposition">Se connecter et envoyer <img src="https://widget.copernic.co/img/send.svg" alt="Envoyer" class="send-proposition-img"></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="consultation-sign-up">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="register-title">Créez un compte</p>
                                    <p class="register-description">Pour soumettre votre proposition, merci de créer un compte.</p>
                                    <p class="register-link">Déjà un compte ? <a href="#" class="go-to-login">Connectez-vous</a> !</p>
                                </div>

                                <div class="col-md-6">
                                    <div class="consultation-sign-up-form">
                                        <input type="text" name="input-prenom" class="input-prenom form-control" placeholder="Prénom">
                                        <div class="prenom-valid valid-feedback"></div>
                                        <div class="prenom-invalid invalid-feedback"></div>

                                        <input type="text" name="input-nom" class="input-nom form-control" placeholder="Nom">
                                        <div class="nom-valid valid-feedback"></div>
                                        <div class="nom-invalid invalid-feedback"></div>

                                        <input type="email" name="input-email" class="form-control input-email" placeholder="Adresse email">
                                        <div class="email-valid valid-feedback"></div>
                                        <div class="email-invalid invalid-feedback"></div>

                                        <input type="password" name="input-password" class="form-control input-password" placeholder="Mot de passe">
                                        <div class="password-valid valid-feedback"></div>
                                        <div class="password-invalid invalid-feedback"></div>

                                        <input type="password" name="input-password-confirmation" class="input-password-confirmation form-control" placeholder="Confirmation du mot de passe">
                                        <div class="password-confirmation-valid valid-feedback"></div>
                                        <div class="password-confirmation-invalid invalid-feedback"></div>

                                        <div class="form-check">
                                            <input class="input-newsletter form-check-input" type="checkbox" name="input-newsletter" value="ok">
                                            <label class="form-check-label" for="input-newsletter">J'autorise <span class="account_name">{{ $consultation->compte->display_name }}</span> à m'envoyer des emails</label>
                                        </div>
                                        <div class="newsletter-valid valid-feedback"></div>
                                        <div class="newsletter-invalid invalid-feedback"></div>

                                        <div class="form-check">
                                            <input class="form-check-input input-cgu" type="checkbox" name="input-cgu" value="ok" id="input-cgu">
                                            <label class="form-check-label" for="input-cgu">J'accepte la <a href="http://copernic.co/politique-de-confidentialite-copernic/" target="_blank">politique de confidentialité</a> de Copernic.co</label>
                                        </div>
                                        <div class="cgu-valid valid-feedback"></div>
                                        <div class="cgu-invalid invalid-feedback"></div>

                                        <button type="submit" class="btn btn-copernic btn-send-proposition">S'inscrire et envoyer <img src="https://widget.copernic.co/img/send.svg" alt="Envoyer" class="send-proposition-img"></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        @endif

        @if ($consultation->compte->display_copernic_logo)
            <div class="consultation-footer">
                <a href="https://copernic.co/?utm_source=copernic&amp;utm_medium=module&amp;utm_campaign=paris-15-goujon" target="_blank"><img src="https://widget.copernic.co/img/logo-copernic.png" alt="Logo Copernic"></a>
            </div>
        @endif
    </div>

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


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