@extends('frontend.mediknode.layout.mainlayout')
@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            {!! \App\Helpers\TextHelper::addSup($event->title) !!}
        @endslot
        @slot('li_1')
            {{ $event->title }}
        @endslot
    @endcomponent
    <link rel="stylesheet" href="{{ url('assets/frontend/mediknode/css/flipbook.min.css') }}">
    <style>
        #program-book {
            position: relative;
            width: 90%;
            height: 700px;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        let pdfProgramName = "{{ $event->slug }}" + "-programme.pdf";
    </script>
    <section class="about-content">
        <div class="container">
            @component('frontend.mediknode.components.buttons', ['event' => $event])
            @endcomponent

            <div class="dashboard-details mt-4 mb-4">
                <div class="row dashboard-info">
                    <div class="col-lg-12">
                        <div class="card dash-cards">
                            <div class="card-body">
                                <div class="profile-form">
                                    <div class="row">
                                        <div class="col-md-12 mx-auto">
                                            <div class="text-center mt-2 mb-2">
                                                <a href="/storage/mediknode/documents/{{ $event->slug }}-programme.pdf"
                                                    class="link" download>
                                                    <i class="px-2 fas fa-file-pdf text-danger"></i>
                                                    {{ $event->label_download_program }}
                                                </a>
                                            </div>
                                        </div>
                                        <div class="mt-4 mb-4" id="program-book"></div>
                                        <div class="text-center mt-2 mb-2">
                                            <a href="/storage/mediknode/documents/{{ $event->slug }}-programme.pdf"
                                                class="link" download>
                                                <i class="px-2 fas fa-file-pdf text-danger"></i>
                                                {{ $event->label_download_program }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @component('frontend.mediknode.components.buttons', ['event' => $event])
            @endcomponent
        </div>
    </section>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            jQuery(document).ready(function() {
                // https://real3dflipbook.gitbook.io/jquery/default-options
                if (jQuery('#program-book').length) {
                    jQuery('#program-book').flipBook({
                        pdfUrl: '/storage/mediknode/documents/' + pdfProgramName,
                        viewMode: 'webgl',
                        cover: !!{{ $event->has_cover_page }},
                        // pageFlipDuration: 0.5,
                        skin: 'dark',
                        icons: 'material',
                        menu2Transparent: false,
                        menu2OverBook: false,
                        btnAutoplay: {
                            vAlign: 'top',
                            hAlign: 'left'
                        },
                        btnSelect: {
                            vAlign: 'top',
                            hAlign: 'left'
                        },
                        btnZoomIn: {
                            vAlign: 'top',
                            hAlign: 'right'
                        },
                        btnZoomOut: {
                            vAlign: 'top',
                            hAlign: 'right'
                        },
                        btnShare: {
                            enabled: false
                        },
                        btnDownloadPages: {
                            enabled: false
                        },
                        btnDownloadPdf: {
                            vAlign: 'top',
                            hAlign: 'right'
                        },
                        btnSound: {
                            vAlign: 'top',
                            hAlign: 'right'
                        },
                        btnToc: {
                            vAlign: 'top',
                            hAlign: 'left'
                        },
                        btnThumbs: {
                            vAlign: 'top',
                            hAlign: 'left'
                        },
                        btnBookmark: {
                            enabled: false
                        },
                        btnExpand: {
                            vAlign: 'top',
                            hAlign: 'right'
                        },
                        btnPrint: {
                            vAlign: 'top',
                            hAlign: 'right'
                        },
                        currentPage: {
                            hAlign: 'center'
                        },
                        skin: 'dark',
                        menuMargin: 10,
                        menuTransparent: false,
                        menuOverBook: false,
                        menu2Margin: 10,
                        // sideBtnRadius: 60,
                        // sideBtnSize: 40,
                        sideBtnBackground: 'rgba(0,0,0,.7)',
                        onLoadProgress: function(progress) {
                            // Fonction appelée pendant le chargement du PDF
                            // `progress` est un nombre entre 0 et 1 représentant le pourcentage de chargement
                            updateLoader(progress);
                        }
                    });
                }
            });
        });
    </script>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection