@include('web.layouts.header')
@include('web.layouts.nav')

@if (env('APP_PROJECT') == 'Rouaa')
    <!--d-lg-flex-->
    <div class="layout-wrapper ">
        @php
            $videoPath = match(true) {
                Route::is('web.dashboard') => asset('web/assets/tutorial/Rouaa.mp4'),

                // Route::is('web.settings.index') => asset('web/assets/tutorial/my-account.mp4'),
                Route::is('web.settings.index') => asset('web/assets/tutorial/organization-settings.mp4'),
                Route::is('web.profile') => asset('web/assets/tutorial/profile.mp4'),
                Route::is('web.flows.index') => asset('web/assets/tutorial/flows.mp4'),
                Route::is('web.settings.whatsapp_profile') => asset('web/assets/tutorial/whatsapp-profile.mp4'),
                Route::is('web.agents.index') => asset('web/assets/tutorial/agents.mp4'),
                Route::is('web.contacts.index') => asset('web/assets/tutorial/contacts.mp4'),
                Route::is('web.teams.index') => asset('web/assets/tutorial/teams.mp4'),
                Route::is('web.tags.index') => asset('web/assets/tutorial/tags.mp4'),

                (Request::is('/conversations') || Route::is('web.conversations')) && !Route::is('web.conversations.new') => asset('web/assets/tutorial/chats.mp4'),

                Request::is('roles') || 
                Route::is('web.roles.index') || 
                Route::is('web.rules.index') || 
                Route::is('web.rules.create') || 
                Route::is('web.rules.edit') => asset('web/assets/tutorial/rules.mp4'),

                Route::is('web.templates') || 
                Route::is('web.templates.index') || 
                Route::is('web.templates.create') || 
                Route::is('web.templates.edit') => asset('web/assets/tutorial/template.mp4'),

                Route::is('web.quickReplies.index') || 
                Route::is('web.quickReplies.create') || 
                Route::is('web.quickReplies.edit') => asset('web/assets/tutorial/quick-replies.mp4'),

                Route::is('web.broadcasts.index') || 
                Route::is('web.broadcasts.create') || 
                Route::is('web.broadcasts.edit') => asset('web/assets/tutorial/broadcast.mp4'),

                Request::is('chats') => asset('web/assets/tutorial/chat-history.mp4'),

                default => null,
            };
        @endphp

        @if($videoPath)
            <a href="{{ $videoPath }}" data-fancybox="video-gallery" class="video-icon">
                <span>@lang('user.how_to_use')</span>
                <i class="fas fa-video"></i>
            </a>
        @endif

        <script>
            Fancybox.bind('[data-fancybox]', {
                // Custom options
            });    
        </script>
        <style>
            .video-icon {
                position: fixed;
                bottom: 20px;
                right: 20px;
                font-size: 40px;
                text-align: center;
                display: block;
            }
            .video-icon i{
                font-size: 40px;
                color: #fff;
                background: #791EBA; 
                padding: 10px;
                border-radius: 50%;
                cursor: pointer;
                z-index: 1000;
                animation: waves-effect 2s ease infinite;
            }
            .video-icon span{
                display: block;
                font-size: 18px;
                margin-bottom: 30px;
                background: #fff;
                padding: 5px 20px;
                border-radius: 20px;
                border: 1px solid;
            }
            @keyframes waves-effect {
                0%, 100% {
                    box-shadow: 0 0 0 0 rgba(121, 30, 186, 0.7), 0 0 0 10px rgba(121, 30, 186, 0.5), 0 0 0 20px rgba(121, 30, 186, 0.3);
                }
                50% {
                    box-shadow: 0 0 0 10px rgba(121, 30, 186, 0.7), 0 0 0 20px rgba(121, 30, 186, 0.5), 0 0 0 30px rgba(121, 30, 186, 0.3);
                }
            }
        </style> 
        <div class="{{ Route::is('web.flows.show') ? 'container-fluid' : 'container' }}">
            <div class="d-lg-flex ">
                @yield('content')
            </div>
        </div>
    </div>
@else
    <div class="layout-wrapper d-lg-flex">
        @include('web.layouts.sidebar')
        @yield('content')
    </div>
@endif

@yield('script')
@include('web.layouts.footer')