@extends('vitrines.base');
@php
    $header = htmlHeader("","","","");
@endphp
@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.kkiapay.me/k.js"></script> --}}
    <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
    <script src="{{ asset("assets/vitrines/js/tickets/buy-tickets.js") }}"></script>
@endsection
@section('content')

<div class="page-wrapper">

    <!-- Preloader -->
    <div class="preloader"></div>
 	<!-- Header span -->


    <!-- Register Section -->
    <section class="register-section" style="padding: 50px 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">
                                <div class="icon-box"><span class="fas fa-ticket"></span></div>
                                <h2>DERNIÈRE ÉTAPE ! </h2>
                                <div class="text">Identifiez vous, sélectionnez le type et le nombre de tickets, puis payez.</div>
                            </div>
                        </div>
                    </div>

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

                            <form method="post" id="buyTicket">

                                <div class="row clearfix">

                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <input type="text" name="username" id="username" placeholder="Nom et prénoms" required="">
                                    </div>

                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <input type="email" name="email" id="email" placeholder="Adresse Email">
                                    </div>

                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        <select required  id="ticket" name="ticket">
                                            <option selected value="{{ $buyTicket->id }}" >
                                                {{ $buyTicket->TicketType->label }}
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        <input type="number" min="1" name="quantity" id="quantity" placeholder="Quantité" required="">
                                    </div>

                                    {{-- <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> --}}

                                    <input type="hidden" id="eventId" name="eventId" value="{{ $buyTicket->event_id }}">
                                    <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>
                                    
                                    <input type="hidden" name="visitor_identifier" id="visitor_identifier">

                                    <div class="form-group col-lg-8 col-md-12 col-sm-12">
                                        <input type="text" id="totalAmount" name="totalAmount" placeholder="Montant total ici" disabled=""
                                            autocomplete="off" style="background: #CECED2; color: black;">
                                    </div>
                                    <div style="display: none" class="alert alert-danger col-lg-12 col-md-12 col-sm-12"  id="errorMessage">
                                        <span class="ticketErrorMessage"></span>
                                    </div>                                    @csrf
                                    <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">Payer 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="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                                <li><a href="#"><i class="fab fa-linkedin"></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="">{{ env('PHONE_NUMBER') }}</a></div>
                            </ul>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Register Section -->




    <!-- Video Section -->
    <!--
    <section class="video-section" style="background-image: url(images/background/1.jpg);">
        <div class="auto-container">
            <div class="content-box">
                <div class="text">WE’RE A LEADING INDUSTRY COMPANY</div>
                <h2>We Are Always at The <br>Forefront of The Business Conference !</h2>
                <a href="https://www.youtube.com/watch?v=Fvae8nxzVz4" class="play-now" data-fancybox="gallery" data-caption=""><i class="icon flaticon-play-button-3" aria-hidden="true"></i><span class="ripple"></span></a>
            </div>
        </div>
    </section>
    -->
    <!--End Video Section -->

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

@endsection