@extends('vitrines.base');
@php
$header =
htmlHeader($candidatDetail->name,$candidatDetail->description,route("App#OneCandidate",["link"=>$candidatDetail->link]),$candidatDetail->photo)
@endphp
{{ $voteIsFree = (bool)$candidatDetail->vote->free }}
@section("css")
    <link href="{{ asset("assets/css/swall.css") }}" rel="stylesheet">
@endsection
@section("js")
    <script>
        var API_KEY = "{{ env("KKIAPAY_PUBLIC_KEY") }}"
        var API_KEY_FEDPAY = "{{ env("FEDPAY_PUBLIC_KEY") }}"
    </script>
    <script>
        // Initialize the agent at application startup.
        var identifyKeyUser ;
        const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
            .then(FingerprintJS => FingerprintJS.load())

        // Get the visitor identifier when you need it.
        fpPromise
            .then(fp => fp.get())
            .then(result => {
                // This is the visitor identifier:
                const identifyKeyUserConst = result.visitorId
                inputIdentify = document.getElementById('visitor_identifier');
                inputIdentify.value = identifyKeyUserConst
                identifyKeyUser = identifyKeyUserConst
            })
    </script>
    <script src="{{ asset("assets/js/sweetalert.min.js") }}"></script>
    <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
    <script src="{{ asset("assets/vitrines/js/vote/main.js") }}"></script>

    <script>
        new ClipboardJS('.copy');

    </script>
@endsection
@section('content')
<div class="page-wrapper">
    <!-- Preloader -->
    <div class="preloader"></div>
    <!-- Header span -->
    <!-- Candidate Detail -->
    <section class="speaker-detail" style="padding: 40px 0 10px;">
        <div class="auto-container">
            <div class="sec-title text-center">
                <h2 class="title">
                    <font size="5">Informations détaillées sur {{ $candidatDetail->name }} et vote</font>
                </h2>
            </div>
        </div>
    </section>
    <!--End Candidate Detail -->
    <!-- Register Section -->
    <section class="register-section" style="padding: 30px 0px 20px;">
        <div class="auto-container">
            <div class="anim-icons full-width">
                <span class="icon icon-circle-3 wow zoomIn"></span>
            </div>
            <div class="outer-box">
                <div class="row no-gutters">
                    <div class="title-column col-lg-4 col-md-6 col-sm-12">
                        <div class="inner">
                            <div class="sec-title light">
                                <img class="" style="border-radius: 50%; width:200px; height:200px"
                                    src="{{ $candidatDetail->photo }}" alt="{{ $candidatDetail->name }}">
                                <h2>{{ $candidatDetail->name }}</h2>
                                <div class="text">{{ $candidatDetail->description }}</div>
                            </div>
                            <button class="btn btn-primary btn-small copy"
                                data-clipboard-text="{{ route("App#OneCandidate",["link"=>$candidatDetail->link]) }}">Copier
                                mon lien <i class="fas btn btn-sm fa-link"></i></button>

                        </div>
                    </div>


                    <!--Register Form-->
                    <div class="register-form col-lg-5 col-md-6 col-sm-12" id="vote">
                        <div class="form-inner">
                            <form method="post" id="voted">

                                <div class="row clearfix">
                                    @csrf
                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <span class="icon fa fa-user"></span>
                                        <input type="text" name="username" id="username" placeholder="Nom et prénoms"
                                            required="">
                                    </div>
                                    <input type="hidden" name="voteId" id="voteId"
                                        value="{{ $candidatDetail->vote->id }}">
                                    <input type="hidden" name="candidateId" id="candidateId"
                                        value="{{ $candidatDetail->id }}">
                                    <input type="hidden" name="visitor_identifier" id="visitor_identifier">

                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <span class="icon fa fa-envelope"></span>
                                        <input type="email" name="email" id="email" placeholder="Adresse Email">
                                    </div>
                                    @if($candidatDetail->vote->type === "custom")
                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <span class="icon fa fa-edit"></span>
                                        <input type="number" name="quantity" id="quantity"
                                            max="{{ $candidatDetail->vote->number }}" placeholder="Nombre de vote"
                                            required="">
                                    </div>
                                    @elseif ($candidatDetail->vote->type === "unlimited")
                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <span class="icon fa fa-edit"></span>
                                        <input type="number" name="quantity" id="quantity" placeholder="Nombre de vote"
                                            required="">
                                    </div>
                                    @elseif ($candidatDetail->vote->type === "unique")
                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <span class="icon fa fa-edit"></span>
                                        <input type="number" name="quantity" id="quantity" required value="1" max="1"
                                            maxlength="1" max="1" placeholder="Nombre de vote">
                                    </div>
                                    @endif
                                    {{-- <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <span class="icon fa fa-phone"></span>
                                        <input type="text" name="phone_number" id="phone_number" placeholder="Contact téléphonique" required="">
                                    </div> --}}
                                    @if (!$voteIsFree)
                                    <div class="form-group col-lg-4 col-md-12 col-sm-12">
                                        <input type="text" name="" placeholder="Total : " disabled="" autocomplete="off"
                                            style="background: #CECED2; color: black;">
                                    </div>
                                    <div class="form-group col-lg-8 col-md-12 col-sm-12">
                                        <input type="text" name="totalAmount" id="totalAmount" disabled=""
                                            autocomplete="off" style="background: #CECED2; color: black;">
                                    </div>
                                    @endif
                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <button class="theme-btn btn-style-three" type="submit" name="Submit"><span
                                                class="btn-title">Voter maintenant</span></button>
                                    </div>

                                </div>

                            </form>
                        </div>
                    </div>


                    <div class="register-column col-lg-3 col-md-6 col-sm-12" style="padding: 40px 30px 0;">
                        <div class="inner-column">

                            <!-- Follow Us -->
                            <div class="follow-us">
                                <h3>Suivez-nous !</h3>
                                <ul class="social-icon-two social-icon-colored">
                                    <li><a href="{{ env("FACEBOOK_LINK ") }}"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="{{ env("INSTAGRAM_LINK") }}"><i class="fab fa-instagram"></i></a></li>
                                    <li><a href="#" class="copy"
                                            data-clipboard-text="{{ route("App#OneCandidate",["link",$candidatDetail->link]) }}"><i
                                                class="fas btn btn-sm fa-link"></i></a></li>
                                </ul>
                            </div>
                            <p></p>

                            <div class="support-box">
                                <h3>Besoin d'aide ?</h3>
                                <p>Contactez nous par appel téléphonique direct ou par whatsapp et nous vous répondrons
                                    très vite.</p>
                                <div class="number"><span class="fa fa-phone-volume"></span> <a
                                        href="tel:{{ env("PHONE_NUMBER") }}">{{ env("PHONE_NUMBER") }}</a></div>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Register Section -->


</div>
<!--End pagewrapper-->
@endsection