@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">
                                                    {{ $qrCode }}
                                                </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>{{ $event->name }}</h1>
                                                    </div>
                                                    <div>
                                                        <h3>Ticket {{ $ticketType->label }}</h3>

                                                        <h4><i class="material-icons"
                                                                style="font-size:25px;color:white">pin_drop</i>
                                                            {{ $event->configPlace->name }} - {{ $event->place }}</h4>
                                                    </div>
                                                </div>
                                                <div class="top_info3">
                                                    <span>{{ $event->configPlace->numbering }}-{{ $buyTicket->id }}</span>
                                                    <div class="stamp">
                                                        @if (is_null($buyTicket->ticket->price))
                                                            <div style="font-size: 1.2vw">Gratuit</div>
                                                        @else
                                                            {{ $buyTicket->ticket->price }} fcfa
                                                        @endif
                                                    </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 }}</h1>
                                                </div>
                                                <div class="bottom_info2">
                                                    {{ $event->description }}
                                                    {{-- <br>ce ticket vous donne droit à {{ $buyTicket->ticket->description }} --}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="right_part">
                                            <div class="part1">
                                                <span>{{ $event->configPlace->numbering }}-{{ $buyTicket->id }}</span>
                                            </div>

                                            <div class="part2">
                                                <div class="inf1">Ticket {{ $ticketType->label }}</div>
                                                <div class="inf2">{{ $event->name }}
                                                </div>
                                                <div class="inf3">{{ $event->configPlace->name }} -
                                                    {{ $event->place }}</div>
                                            </div>

                                            <div class="part3">
                                                <div class="nbr">{{ $event->date_since }}</div>
                                                {{ $qrCode }}
                                                <div class="nbr">{{ $buyTicket->quantity }} Personnes</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="#">{{ $event->name }}</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