@extends('vitrines.base');
@php
$header = htmlHeader('', '', '', '');
@endphp
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

@section('content')
    <div class="page-wrapper">

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

        <!-- Schedule Section Style two -->
        <section class="schedule-section style-two" style="padding: 30px 0 10px;">
            <div class="auto-container text-center" style="max-width: 100%;">
                <div class="sec-title">
                    <span class="title">About Conference</span>
                    <h2>Schedule Plan</h2>
                </div>
                <div class="schedule-timeline row" style="max-width: 100%;">

                    <!-- Ticket Block -->
                    <div class="schedule-block col-lg-8 col-md-12 col-sm-12">
                        {{-- @include("includes.tickets.template_1") --}}
                        <div class="inner-box">
                            <div class="inner" style="background: lightgrey">

                                <div class="container">
                                    <div class="main" id="ticket">
                                        <div class="left_part">
                                            <div class="top_part">
                                                <div class="top_info1">
                                                    <img src="{{ asset('assets/vitrines/images/qr.jpeg') }}" alt=""
                                                    style="width: 100px; height: 100px" />
                                                </div>
                                                <div class="top_info2">
                                                    {{-- <ul class="items">
                                                         <li class="item">ITEM 1</li>
                                                        <li class="item">ITEM 2</li>
                                                        <li class="item">ITEM 3</li>
                                                    </ul> --}}
                                                    <div>
                                                        <h1>Tombola NAME</h1>
                                                    </div>
                                                    <div>
                                                        {{-- <h3>Ticket type</h3> --}}

                                                        <h4><i class="material-icons"
                                                                style="font-size:25px;color:white"></i>
                                                            {{-- {{ $event->configPlace->name }} - {{ $event->place }} --}}
                                                            Promoter Name
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="top_info3">
                                                    <span>
                                                        {{-- {{ $event->configPlace->numbering }}-{{ $buyTicket->id }} --}}
                                                        Ticket number
                                                    </span>
                                                    <div class="stamp">
                                                        1000 fcfa
                                                    </div>
                                                    {{-- <img src="assets/vitrines/images/price_stamp.png" alt=""
                                                                                style="width: 300px; height: 50%"  /> --}}
                                                </div>
                                            </div>
                                            <div class="bottom_part">
                                                <div class="bottom_info1">
                                                    <h1>
                                                        {{-- {{ $event->date_since }} --}}
                                                        Date du tirage
                                                    </h1>
                                                </div>
                                                <div class="bottom_info2">
                                                    {{-- {{ $event->description }} --}}
                                                    Lots à gagner
                                                </div>
                                            </div>
                                        </div>
                                        <div class="right_part">
                                            <div class="part1">
                                                <span>
                                                    {{-- {{ $event->configPlace->numbering }}-{{ $buyTicket->id }} --}}
                                                    Ticket number
                                                </span>
                                            </div>

                                            <div class="part2">
                                                {{-- <div class="inf1">Ticket {{ $ticketType->label }}</div> --}}
                                                <div class="inf2">
                                                    {{-- {{ $event->name }} --}}
                                                    Nom de la tombola
                                                </div>
                                                <div class="inf3">
                                                    Nom du promoteur
                                                </div>
                                            </div>

                                            <div class="part3">
                                                <div class="nbr">Date du tirage</div>
                                                <img src="{{ asset('assets/vitrines/images/qr.jpeg') }}" alt=""
                                                    style="width: 100px; height: 100px; padding-bottom: 10px" />
                                                {{-- <div class="nbr"></div> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- Ticket Block -->
                    <div class="schedule-block col-lg-4 col-md-12 col-sm-12">
                        <div class="inner-box text-center">
                            <div class="inner">
                                <div class="date">Opération réalisée avec succès ! </div>

                                <h4><a href="#">Nom de la tombola</a></h4>
                                <div class="text">Vous pouvez télécharger votre ticket maintenant.</div>
                                <div class="btn-box">
                                    <a class="theme-btn" id="download">Télécharger
                                        <span class="fab fa-down-arrow"></span></a>
                                    <a href="{{ route('App#Home') }}" class="theme-btn">Retour
                                        <span class="fab fa-direction"></span></a>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <!--End schedule Section -->
    </div>
    <!--End pagewrapper-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js">
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.esm.js">
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.js"></script>

    <script type="text/javascript">
        // alert("ok");
        jQuery(document).ready(function() {
            jQuery("#download").click(function() {
                screenshot();
            });

        });

        function screenshot() {
            html2canvas(document.getElementById("ticket")).then(function(canvas) {
                downloadImage(canvas.toDataURL(), "Ticket.png");
            });
        }

        function downloadImage(uri, filename) {
            var link = document.createElement('a');
            if (typeof link.download !== 'string') {
                window.open(uri);
            } else {
                link.href = uri;
                link.download = filename;
                accountForFirefox(clickLink, link);
            }
        }

        function clickLink(link) {
            link.click();
        }

        function accountForFirefox(click) {
            var link = arguments[1];
            document.body.appendChild(link);
            click(link);
            document.body.removeChild(link);
        }
    </script>
@endsection