@extends("vitrines.base");
@php
    use Carbon\Carbon;
  //  $header = htmlHeader($tombolaDetail->name,$tombolaDetail->description,"passtik,tombola",route("App#TombolaDetail",["link"=>$tombolaDetail->link]),$tombolaDetail->photo);
    $carbon = new Carbon();
    $carbon::setLocale('fr');
@endphp
@section("css")
    <link href="{{ asset("assets/css/swall.css") }}" rel="stylesheet">
@endsection
@section("js")
    <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;
            })
    </script>
    <script>
        var API_KEY = "{{ env("KKIAPAY_PUBLIC_KEY") }}"
        var API_KEY_FEDPAY = "{{ env("FEDPAY_PUBLIC_KEY") }}"
    </script>
    {{-- <script src="https://cdn.kkiapay.me/k.js"></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.cinetpay.com/seamless/main.js"></script>
    <script src="{{ asset("assets/vitrines/js/tickets/buy-tickets.js") }}"></script>
@endsection
@section('content')
<div class="page-wrapper">

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


    <!--Sidebar Page Container-->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="sec-title text-center" style="margin: -20px 0px 0px;">
                <span class="title">Informations détaillées</span>
                <h2>
                    {{-- {{ $tombolaDetail->name }} --}}
                    Nom de la Tombola
                </h2>
            </div>
            <div class="content-side">
                <div class="blog-single">
                    <!-- News Block Three -->
                    <div class="news-block">
                        <div class="inner-boxx">
                            <div class="lower-content">
                                <ul class="post-info text-center">
                                    <li><span class="fas fa-star"></span> Tombola </li>
                                    <li><span class="fas fa-map-pin"></span> Cotonou </li>
                                    <li> </li>
                                    <li><span class="fas fa-phone"></span> +229 90004040 </li>
                                    <li> </li>
                                    <li><span class="fas fa-paper-plane"></span> contact@passtik.com
                                    </li>
                                    <li> </li>
                                    <li><span class="fas fa-clock"></span> Du 4 au 8 Janvier</li>
                                    <li> </li>
                                    <li><span class="icon flaticon-user"></span> 5 lots à gagner</li>
                                    <li> </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row clearfix">

                <!--Content Side / Blog Sidebar-->
                <div class="content-side col-lg-8 col-md-12 col-sm-12">

                    <div class="blog-single">
                        <!-- News Block Three -->
                        <div class="news-block">
                            <div class="inner-boxx">
                                <div class="image-box">
                                    <!-- Banner Section -->
                                    <section class="banner-section">
                                        <div class="banner-carousel owl-carousel owl-theme">
                                            <!-- Slide Item -->
                                            {{-- <div class="slide-item"
                                                style="background-image: url({{$tombolaDetail->banner }});">
                                            <div class="auto-container">
                                                <div class="content-box">
                                                    <span class="title">{{ $tombolaDetail->date_since }}</span>
                                                    <h2> World Digital <br>Conference 2020</h2>
                                                    <ul class="info-list">
                                                        <li><span class="icon fa fa-chair"></span> 5000 Seats</li>
                                                        <li><span class="icon fa fa-user-alt"></span> 12 SPEAKERS
                                                        </li>
                                                        <li><span class="icon fa fa-map-marker-alt"></span> Palo,
                                                            California</li>
                                                    </ul>
                                                    <div class="btn-box"><a href="buy-ticket.html"
                                                            class="theme-btn btn-style-two"><span class="btn-title">Book
                                                                Now</span></a></div>
                                                </div>
                                            </div>
                                        </div> --}}

                                        <!-- Slide Item -->
                                        <div class="slide-item"
                                            style="background-image: url();">
                                            <div class="auto-container">
                                                <div class="content-box">
                                                    <span class="title">Date du tirage : 23 Juillet 2022</span>
                                                    <h2>
                                                        {{-- {{ $tombolaDetail->name }} --}}
                                                        Nom de la Tombola
                                                    </h2>
                                                    <ul class="info-list">
                                                        <li><i
                                                                class="icon fa fa-book" ></i>1500 tickets
                                                                {{-- {{ $tombolaDetail->configPlace->place_number }} --}}
                                                        </li>
                                                        {{-- <li><span class="icon fa fa-user-alt"></span> 12 intervenants
                                                        </li> --}}
                                                        <li><span
                                                                class="icon flaticon-user"></span>
                                                                {{-- {{ $tombolaDetail->place }} --}}
                                                                5 lots à gagner
                                                        </li>
                                                    </ul>
                                                    {{-- <div class="btn-box"><a href="buy-ticket.html"
                                                            class="theme-btn btn-style-two"><span
                                                                class="btn-title">Payer un ticket</span></a>
                                                    </div> --}}
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                </section>
                                <!--End Banner Section -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--Sidebar Side-->
            <div class="sidebar-side col-lg-4 col-md-12 col-sm-12">

                <div class="inner-column">
                    <div class="ticket-form">
                        <form method="post" id="buyTicket">
                            @csrf
                            <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>
                                <input type="hidden" name="visitor_identifier" id="visitor_identifier">
                                <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                    <select required name="country" id="country">
                                        <option selected disabled>Pays</option>
                                        @foreach (config("app.countries") as $country)
                                            <option value="{{ $country }}">{{ $country }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                    <select required id="ticket" name="ticket">
                                        <option selected disabled>Tickets</option>
                                        {{-- @foreach ($tombolaDetail->ticket as $ticket)
                                            <option value="{{ $ticket->id }}">{{ $ticket->TicketType->label }}</option>
                                        @endforeach --}}
                                    </select>
                                </div>
                                <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                    <input type="number" name="quantity" id="quantity" placeholder="Quantité" required="">
                                </div>
{{--
                                <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                    <input type="phone" name="email" placeholder="Contact téléphonique" required="">
                                </div> --}}
                                <input type="hidden" id="eventId" name="eventId" value="">
                                <input type="hidden" id="total" name="">

                                <div style="display: none" class="alert alert-danger col-lg-12 col-md-12 col-sm-12"  id="errorMessage">
                                    <span class="ticketErrorMessage"></span>
                                </div>


                                <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" id="totalAmount" name="" placeholder="Montant total ici" disabled=""
                                        autocomplete="off" style="background: #CECED2; color: black;">
                                </div>

                                <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>
        </div>

    </div>
</div>



<!-- schedule Section -->
<section class="schedule-section">
    <div class="anim-icons">
        <span class="icon icon-circle-4 wow zoomIn"></span>
        <span class="icon icon-circle-3 wow zoomIn"></span>
    </div>

    <div class="auto-container">

        <div class="schedule-tabs tabs-box">

            <div class="btns-box">
                <!--Tabs Box-->
                <ul class="tab-buttons clearfix">

                    <li class="tab-btn active-btn" data-tab="#tab-1">
                        <span class="day">01</span>
                        <span class="date">Tickets</span>
                    </li>

                    <li class="tab-btn" data-tab="#tab-2">
                        <span class="day">02</span>
                        <span class="date">Lots</span>
                    </li>

                    <li class="tab-btn" data-tab="#tab-3">
                        <span class="day">03</span>
                        <span class="date">Sponsor</span>
                    </li>

                    <li class="tab-btn" data-tab="#tab-4">
                        <span class="day">04</span>
                        <span class="date">Infoline</span>
                    </li>

                </ul>
            </div>

            <div class="tabs-content">

                <!--Chronogramme - Tab-->
                {{-- <div class="tab active-tab" id="tab-1">
                    <div class="schedule-timeline">
                        <div class="sec-title text-center">
                            <h2>Chronogramme d'activités</h2>
                        </div>
                        <!-- schedule Block 1-->
                        @foreach ($tombolaDetail->chronogram as $chronogram)
                        @foreach ($chronogram->activity as $activity)
                        <div
                            class="schedule-block {{ strtotime($chronogram->date) === strtotime($chronogram->nextDate()) ? "":"even" }}">
                            <div class="inner-boxx">
                                <div class="inner ">
                                    <div class="date">{{ $chronogram->date }} </div>
                                    <h4>{{ $activity->label }}</h4>
                                    <div class="text">{{ $activity->description }}</div>
                                    <div class="btn-box">
                                        <!-- Outer box -->
                                        <div class="outer-box">
                                            <!--Search Box class="search-box-btn"-->
                                            <div>
                                                <a class="theme-btn " role=>Détails</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endforeach



                    </div>
                </div> --}}

                <!--Tickets et prix - Tab-->
                <div class="tab" id="tab-1">
                    <div class="schedule-timeline">

                        <div class="sec-title text-center">
                            <!--<span class="title">Get Ticket</span>-->
                            <h2>Types et prix des tickets</h2>
                        </div>

                        <!-- Ticket type and pricing with Pricing Section -->
                        <section class="pricing-section">
                            <div class="anim-icons">
                                <span class="icon icon-circle-green wow fadeIn"></span>
                                <span class="icon icon-circle-blue wow fadeIn"></span>
                                <span class="icon icon-circle-pink wow fadeIn"></span>
                            </div>

                            <div class="auto-container">

                                <div class="outer-box">
                                    <div class="row">
                                        <!-- Pricing Block -->
                                        {{-- @foreach($tombolaDetail->ticket as $ticket) --}}
                                        <div class="pricing-block col-lg-4 col-md-6 col-sm-12 wow fadeInUp">
                                            <div class="inner-boxx">
                                                <div class="icon-box">
                                                    <div class="icon-outer"><span
                                                            class="icon flaticon-paper-plane"></span></div>
                                                </div>
                                                <div class="price-box">
                                                    {{-- <div class="title"> {{ $ticket->TicketType->label }}</div> --}}
                                                    <h4 class="price"> Prix du ticket
                                                        <ul class="features">
                                                            <li class="true"></li>
                                                            <!--   <li class="true">Free Lunch And Coffee</li>
                                                        <li class="true">Certificate</li>
                                                        <li class="false">Easy Access</li>
                                                        <li class="false">Free Contacts</li> -->
                                                        </ul>
                                                        <div class="btn-box">
                                                            <a href=""
                                                                class="theme-btn">Acheter</a>
                                                        </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- @endforeach --}}

                                        <!-- Pricing Block
                                            <div class="pricing-block col-lg-4 col-md-6 col-sm-12 wow fadeInUp"
                                                data-wow-delay="400ms">
                                                <div class="inner-box">
                                                    <div class="icon-box">
                                                        <div class="icon-outer"><span
                                                                class="icon flaticon-diamond-1"></span></div>
                                                    </div>
                                                    <div class="price-box">
                                                        <div class="title">Full Pass</div>
                                                        <h4 class="price">$99.99</h4>
                                                    </div>
                                                    <ul class="features">
                                                        <li class="true">Conference Tickets</li>
                                                        <li class="true">Free Lunch And Coffee</li>
                                                        <li class="true">Certificate</li>
                                                        <li class="true">Easy Access</li>
                                                        <li class="false">Free Contacts</li>
                                                    </ul>
                                                    <div class="btn-box">
                                                        <a href="buy-ticket.html" class="theme-btn">BUY Ticket</a>
                                                    </div>
                                                </div>
                                            </div>
                                            -->
                                        <!-- Pricing Block
                                            <div class="pricing-block col-lg-4 col-md-6 col-sm-12 wow fadeInUp"
                                                data-wow-delay="800ms">
                                                <div class="inner-box">
                                                    <div class="icon-box">
                                                        <div class="icon-outer"><span
                                                                class="icon flaticon-rocket-ship"></span></div>
                                                    </div>
                                                    <div class="price-box">
                                                        <div class="title">Group Pass</div>
                                                        <h4 class="price">$199.99</h4>
                                                    </div>
                                                    <ul class="features">
                                                        <li class="true">Conference Tickets</li>
                                                        <li class="true">Free Lunch And Coffee</li>
                                                        <li class="true">Certificate</li>
                                                        <li class="true">Easy Access</li>
                                                        <li class="true">Free Contacts</li>
                                                    </ul>
                                                    <div class="btn-box">
                                                        <a href="buy-ticket.html" class="theme-btn">BUY Ticket</a>
                                                    </div>
                                                </div>
                                            </div>
                                            -->
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!--End Pricing Section -->

                    </div>
                </div>


                <div class="tab" id="tab-2">
                    {{-- <div class="schedule-timeline"> --}}

                        {{-- <div class="sec-title text-center">
                            <!--<span class="title">Speakers</span>-->
                            <h2>Lots à gagner</h2>
                        </div> --}}

                        <!-- Lots à gagner Section -->
                        {{-- <section class="speakers-section-three">
                            <div class="auto-container">


                                <div class="row">


                                    <div class="speaker-block-three col-xl-3 col-lg-4 col-md-6 col-sm-12 wow fadeInUp">
                                        <div class="inner-boxx">
                                            <div class="image-box">
                                                <figure class="image"><a
                                                        href=""><img
                                                            src=""
                                                            alt=""></a></figure>
                                            </div>
                                            <div class="info-box">
                                                <h4 class="name"><a
                                                        href=""></a>
                                                </h4>
                                                <span class="designation"></span>
                                            </div>
                                            <!--
                                                <div class="social-box">
                                                    <ul class="social-links 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-pinterest"></i></a></li>
                                                        <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                                                    </ul>
                                                </div>
                                                -->
                                        </div>
                                    </div>



                                </div>
                            </div>
                        </section> --}}
                        <!-- End Speakers Section -->

                        <div class="auto-container">
                            <div class="row">
                                <!-- Info Column -->
                                <div class="info-column col-lg-7 col-md-12 col-sm-12">
                                    <div class="inner-column">
                                        <div class="sec-title style-two">
                                            <span class="title">Récompenses !</span>
                                            <h2>Les lots et prix à gagner</h2>
                                        </div>

                                        <div class="event-info-tabs tabs-boxx">
                                            <!--Tabs Boxx-->
                                            <ul class="tab-buttons clearfix">
                                                <li class="tab-btnn active-btn" data-tabb="#tab-5">Lot 1</li>
                                                <li class="tab-btnn" data-tabb="#tab-6">Lot 2</li>
                                                <li class="tab-btnn" data-tabb="#tab-7">Lot 3</li>
                                            </ul>

                                            <div class="tabs-content">
                                                <!--Tab-->
                                                <div class="tab active-tab" id="tab-5">
                                                    <h4><span class="icon far fa-star"></span> Constitution du lot</h4>
                                                    <div class="text">Nombre de gagnant possible : 03</div>
                                                    <ul class="info-list">
                                                        <li><span class="icon icon_check"></span> Moto Cross</li>
                                                        <li><span class="icon icon_check"></span> 100.000fcfa</li>
                                                        <li><span class="icon icon_check"></span> Un voyage en Italie</li>
                                                    </ul>
                                                </div>

                                                <!--Tab-->
                                                <div class="tab" id="tab-6">
                                                    <h4><span class="icon far fa-star"></span> Constitution du lot</h4>
                                                    <div class="text">Nombre de gagnant possible : 03</div>
                                                    <ul class="info-list">
                                                        <li><span class="icon icon_check"></span> Moto Cross</li>
                                                        <li><span class="icon icon_check"></span> 100.000fcfa</li>
                                                        <li><span class="icon icon_check"></span> Un voyage en Italie</li>
                                                    </ul>
                                                </div>

                                                <!--Tab-->
                                                <div class="tab" id="tab-7">
                                                    <h4><span class="icon far fa-star"></span> Constitution du lot</h4>
                                                    <div class="text">Nombre de gagnant possible : 03</div>
                                                    <ul class="info-list">
                                                        <li><span class="icon icon_check"></span> Moto Cross</li>
                                                        <li><span class="icon icon_check"></span> 100.000fcfa</li>
                                                        <li><span class="icon icon_check"></span> Un voyage en Italie</li>
                                                    </ul>
                                                </div>

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

                                <!-- Image Column -->
                                <div class="image-column col-lg-5 col-md-12 col-sm-12">
                                    <figure class="image"><img src="images/icons/map-4.png" alt=""></figure>
                                </div>
                            </div>
                        </div>


                </div>

                <!--Sponsors et partenaires - Tab-->
                <div class="tab" id="tab-3">
                    <div class="schedule-timeline">

                        <div class="sec-title text-center">
                            <!--<span class="title">Clients</span>-->
                            <h2>Les sponsors ou partenaires officiels</h2>
                        </div>

                        <!-- Sponsors with Clients Section-->
                        <section class="clients-section">
                            <div class="anim-icons">
                                <span class="icon icon-dots-3 wow zoomIn"></span>
                                <span class="icon icon-circle-blue wow zoomIn"></span>
                            </div>
                            <div class="auto-container">

                                <div class="sponsors-outer">
                                    <!-- <h3>Platinum Sponsors</h3> -->

                                    <h3>Nos ponsors</h3>
                                    <div class="row">

                                        {{-- @foreach ($tombolaDetail->sponsor as $sponsor) --}}

                                        <div class="client-block col-lg-3 col-md-6 col-sm-12">
                                            <figure class="image-box "><a href="#"><img style="width:200px;height:200px"
                                                        src=""
                                                        alt=""></a></figure>
                                        </div>

                                        {{-- @endforeach --}}


                                    </div>
                                </div>
                                <!-- Sponsors with Clients Section -->
                                {{--
                                    <div class="sponsors-outer">
                                        <h3>Gold Sponsors</h3>

                                        <div class="row">

                                            <div class="client-block col-lg-3 col-md-6 col-sm-12">
                                                <figure class="image-box"><a href="#"><img src="images/clients/5.png"
                                                            alt=""></a></figure>
                                            </div>

                                            <div class="client-block col-lg-3 col-md-6 col-sm-12">
                                                <figure class="image-box"><a href="#"><img src="images/clients/6.png"
                                                            alt=""></a></figure>
                                            </div>

                                            <div class="client-block col-lg-3 col-md-6 col-sm-12">
                                                <figure class="image-box"><a href="#"><img src="images/clients/7.png"
                                                            alt=""></a></figure>
                                            </div>

                                            <div class="client-block col-lg-3 col-md-6 col-sm-12">
                                                <figure class="image-box"><a href="#"><img src="images/clients/8.png"
                                                            alt=""></a></figure>
                                            </div>
                                        </div>
                                    </div>

                                     <div class="sponsors-outer">
                                        <h3>Silver Sponsors</h3>

                                        <div class="row">
                                            <div class="client-block col-lg-3 col-md-6 col-sm-12">
                                                <figure class="image-box">
                                                    <a href="#"><img src="images/clients/9.png"
                                                            alt=""></a>
                                                </figure>
                                            </div>

                                        </div>
                                    </div> --}}

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

                    </div>
                </div>

                <!--Sponsors et partenaires - Tab-->
                <div class="tab" id="tab-4">
                    <div class="schedule-timeline">

                        <div class="sec-title text-center">
                            <!--<span class="title">Clients</span>-->
                            <h2>Contact téléphonique : +229 90 00 00 00</h2> <br>ou <br>
                            <h2>Adresse email : contact@promoter.com</h2>



                        </div>


                    </div>
                </div>

            </div>

        </div>
    </div>

</section>
<!--End schedule Section -->

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