@extends('layouts.master_partner')

@section('title')
    PPT
@endsection

@section('ppt')
    active
@endsection

@section('css')
{{-- <link rel="stylesheet" href="{{ asset('assets/js/plugins/slick-carousel/slick.css') }}">
<link rel="stylesheet" href="{{ asset('assets/js/plugins/slick-carousel/slick-theme.css') }}"> --}}
<link rel="stylesheet" href="{{ asset('assets/js/plugins/fotorama/fotorama.css') }}">

<style>
    .fotorama__img {
        width:100% !important; 
        height:auto !important; 
        margin:auto !important;
        left: 0px !important;
        top: 0px !important;
    }
</style>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <div class="block block-rounded">
                {{-- <div class="slider slider-for">
                    @foreach ($ppts as $key => $value)
                    <div>
                        <img class="img-fluid" src="{{ asset('storage/ppts/' . $key . '.' . $value) }}" alt="">
                    </div>
                    @endforeach
                </div> --}}
                <div class="fotorama" data-nav="false" data-allowfullscreen="native" data-keyboard="true">
                    @foreach ($ppts as $key => $value)
                        <img class="img-fluid" src="{{ asset('storage/ppts/' . $key . '.' . $value) }}" alt="">
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-lg-3"></div>
    </div>
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-2 col-sm-12">
            <div class="form-group">
                <button class="btn btn-block btn-primary" type="button" id="btn-previous">Previous</button>
            </div>
        </div>
        <div class="col-lg-2 col-sm-12">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" id="go-to-slide" name="go_to_slide" value="1">
                    <div class="input-group-prepend">
                        <span class="input-group-text">/ {{ count($ppts) }}</span>
                        <button type="button" class="btn btn-primary" id="btn-go">Go</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-sm-12">
            <div class="form-group text-right">
                <button class="btn btn-block btn-primary" type="button" id="btn-next">Next</button>
            </div>
        </div>
        <div class="col-lg-3"></div>
    </div>
@endsection

@section('js')
{{-- <script src="{{ asset('assets/js/plugins/slick-carousel/slick.js') }}"></script> --}}
<script src="{{ asset('assets/js/plugins/fotorama/fotorama.js') }}"></script>
<script>
    // $('.slider-for').slick({
    //     infinite: false,
    //     arrows: false,
    //     fade: true,
    //     lazyLoad: 'ondemand',
    //     autoplay: false,
    //     slidesToShow: 1,
    //     slidesToScroll: 1,
    //     draggable: false,
    // });

    $(function () {
        // 1. Initialize fotorama manually.
        var $fotoramaDiv = $('.fotorama').fotorama();

        // 2. Get the API object.
        var fotorama = $fotoramaDiv.data('fotorama');

        // 3. Inspect it in console.
        console.log(fotorama);

        $('#btn-previous').on('click', function(){
            fotorama.show('<');

            // Get current slide
            var currentSlide = fotorama.activeIndex;
            $('#go-to-slide').val(currentSlide + 1);
        });

        $('#btn-next').on('click', function(){
            fotorama.show('>');

            // Get current slide
            var currentSlide = fotorama.activeIndex;
            $('#go-to-slide').val(currentSlide + 1);
        });

        $('#btn-go').on('click', function(){
            // get input value
            var slide_no = parseInt($('#go-to-slide').val());
            if(isNaN(slide_no)){
                slide_no = 1;
            }

            // Manually refresh positioning of slick
            fotorama.show(slide_no - 1);
        });
    });
</script>
@endsection