@extends('layouts.magazine')

@section('content')

    <div class="container bb-custom-container">

        <div class="bb-bookroot">
            <div class="bb-bookframe">
                <div id="bb-bookblock" class="bb-bookblock">

                    @foreach($magazine->pages->chunk(2) as  $pages)
                        <div class="bb-item">
                            @foreach($pages as  $page)
                                <div class="bb-custom-side image-side">
                                    <img class="" src="{{ asset('storage/' .$page['src']) }}" alt="">
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                    <img class="bb-bookcover bb-bookcover-first d-none"
                         src="{{ asset("storage/magazine/frame-first.png") }}" alt="">
                    <img class="bb-bookcover bb-bookcover-middle d-none"
                         src="{{ asset("storage/magazine/frame-middle.png") }}" alt="">
                    <img class="bb-bookcover bb-bookcover-last d-none "
                         src="{{ asset("storage/magazine/frame-last.png") }}" alt="">

                    <div class="shadows">
                        <div class="shadow-middle"></div>
                    </div>
                </div>
            </div>

            <nav class="bb-nav">
                <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
                <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
                <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
                <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
            </nav>
        </div>
    </div>
@endsection

@push('inline-styles')
    <style>
        .bb-bookroot {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            height: 100%;
        }

        .bb-bookframe {
            width: 100%;
            height: 56vw;
            max-height: 678px;
            padding: 0 5px;
        }

        @media screen and (max-width: 1200px) {
            .bb-bookframe {
                height: 56.5vw;
            }
        }

        @media screen and (max-width: 900px) {
            .bb-bookframe {
                height: 56vw;
            }
        }

        @media screen and (max-width: 900px) {
            .bb-bookframe {
                height: 55.5vw;
            }
        }

        @media screen and (max-width: 500px) {
            .bb-bookframe {
                height: 54vw;
            }
        }

        .bb-bookblock {
            width: 100% !important;
            height: 100% !important;
        }

        .bb-bookcover {
            position: absolute;
            left: -2%;
            top: -1%;
            width: 104%;
            height: 102%;
            z-index: -1;
        }

        .shadows {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;

            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .shadow-middle {
            width: 0;
            height: 100%;
            box-shadow: 0px 0px 12px 15px rgba(0, 0, 0, 0.1);
        }

    </style>
@endpush

@push('inline-scripts')
    <script>
        function resetPageBorder() {
            const $item = $(".bb-item");
            const $frame = $('.bb-bookcover');
            const $firstFrame = $('.bb-bookcover-first');
            const $middleFrame = $('.bb-bookcover-middle');
            const $lastFrame = $('.bb-bookcover-last');

            $frame.addClass('d-none');

            if ($item.first().css('display') == 'none' && $item.last().css('display') == 'none') {
                $middleFrame.removeClass('d-none');
            }

            if ($item.first().css('display') == 'block') {
                $firstFrame.removeClass('d-none');
            }

            if ($item.last().css('display') == 'block') {
                $lastFrame.removeClass('d-none');
            }

        }

        var Page = (function () {

            var config = {
                    $bookBlock: $('#bb-bookblock'),
                    $navNext: $('#bb-nav-next'),
                    $navPrev: $('#bb-nav-prev'),
                    $navFirst: $('#bb-nav-first'),
                    $navLast: $('#bb-nav-last'),

                },
                init = function () {
                    config.$bookBlock.bookblock({
                        speed: 1200,
                        shadowSides: 0.2,
                        shadowFlip: 0.2,
                        onEndFlip: function () {
                            resetPageBorder();
                        },
                    });
                    initEvents();
                },
                initEvents = function () {

                    var $slides = config.$bookBlock.children();

                    // add navigation events
                    config.$navNext.on('click touchstart', function () {
                        config.$bookBlock.bookblock('next');
                    });

                    config.$navPrev.on('click touchstart', function () {
                        config.$bookBlock.bookblock('prev');
                    });

                    config.$navFirst.on('click touchstart', function () {
                        config.$bookBlock.bookblock('first');
                    });

                    config.$navLast.on('click touchstart', function () {
                        config.$bookBlock.bookblock('last');
                    });

                    // add swipe events
                    $slides.on({
                        'swipeleft': function (event) {
                            config.$bookBlock.bookblock('next');
                        },
                        'swiperight': function (event) {
                            config.$bookBlock.bookblock('prev');
                        }
                    });

                    // add keyboard events
                    $(document).keydown(function (e) {
                        var keyCode = e.keyCode || e.which,
                            arrow = {
                                left: 37,
                                up: 38,
                                right: 39,
                                down: 40
                            };

                        switch (keyCode) {
                            case arrow.left:
                                config.$bookBlock.bookblock('prev');
                                break;
                            case arrow.right:
                                config.$bookBlock.bookblock('next');
                                break;
                        }
                    });
                };

            return {init: init};

        })();

        Page.init();

        resetPageBorder();
    </script>
@endpush