@extends('layouts.app', ['title' => 'Videos informativos', 'titleIconClass' => 'video'])
@section('content')
    <div class="container" id="videos">

        <div class="video-responsive text-center" v-show="video==1">
            <iframe width="560" height="315" src="{{setting('welcome_video_1')}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

        <div class="video-responsive text-center" v-show="video==2">
            <iframe width="560" height="315" src="{{setting('welcome_video_2')}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

        <div class="text-center mt-3">
            <button class="btn btn-primary" @click="video=2" v-show="video==1">
                <i class="fa fa-arrow-circle-right"></i> Siguiente
            </button>
            
            <a class="btn btn-primary" href="{{ route('admin.buy.index') }}" class="nav-link @if(request()->is('*buy*')) active @endif">
                             Regresar a COMPRAR OTROS PINES          
            </a>

            <a class="btn btn-primary"
               href="@if(auth()->user()->clientTypeName == 'personal') {{route('admin.partakers.create')}}
                     @else {{route('admin.partakers.massive-upload.index')}} @endif"
               v-show="video==2">
                @if(auth()->user()->isNoneOrFirstPurchase)
                    <i class="fa fa-flag"></i> Empezar
                @else
                    <i class="fa fa-user"></i> Agregar Nuevo Participante
                @endif
            </a>
        </div>

    </div>
@endsection
@if(auth()->user()->isNoneOrFirstPurchase)
    @push('js')
        <script>
            $('#sidenav-main').css('display', 'none')
            $('.main-content').css('margin-left', '0')
        </script>
    @endpush
@endif
@push('js')
    <script>
        new Vue({
            el: '#videos',
            data() {
                return {
                    video: 1
                }
            },
        })
    </script>
@endpush