@extends('Frontend.partials.layout')
@section('styles')
    <link rel="stylesheet" href="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.css') }}">
    <link rel="stylesheet" href="{{ asset('/vendor/libs/select2/select2.css') }}">

    {{-- <style>
        .treat-playlist-canvas {
            position: fixed;
            right: -370px;
            top: 50%;
            width: 370px;
            height: auto;
            z-index: 1111;
            background-color: #fff;
            overflow-y: visible;
            transition: all 0.3s ease-in-out;
            transform: translate(0%, -50%);
        }

        .canvas-open {
            right: 0;
        }

        .right-panel .card,
        .right-panel.custom-right-panel .right-panel-list {
            height: calc(84vh - 138px);
            max-height: unset !important;
        }

        .right-panel.custom-right-panel .right-panel-button {
            max-height: 87px;
        }

        .playlist-toggle-btn {
            position: fixed;
            right: 3px;
            top: 145px;
            border: none;
            outline: none;
            border-radius: 5px 0px 0px 5px;
            background-color: #ffc107;
            padding: 8px 12px;
            color: #fff;
            font-size: 20px;
        }

        .playlist-canvas-backdrop{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 111;
            width: 100vw;
            height: 100vh;
            background-color: #181C21;
            opacity: 0.5;
            display: none;
        }

        #fullscreen-btn {
            background-color: transparent;
            border: none;
            outline: none;
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 18px;
        }

        div#audioModal {
            padding-right: 0px !important;
        }

        #optimizedModal .modal-content {
            left: 0px !important;
        }

        /* @media (max-width: 1200px) and (min-width: 991.92px) {
            .right-panel {
                width: 100% !important;
            }
        } */
    </style> --}}
    <link rel="stylesheet" href="{{ asset('/css/treatment.css') }}">

    <style>
        .seemore {
            display: none;
        }
        #custom-top-padding.single-treat-container {
            padding: 0px !important; 
        }
        .single-treat-container .treat {
            margin: 0px auto !important;
        } 
        @media(max-width: 767px){
            #custom-top-padding.single-treat-container {
                padding: 0px !important; 
            }
            .single-treat-container .treat {
                margin: 0px auto !important;
            } 
            nav#layout-navbar.layout-navbar.navbar {
                position: fixed;
                width: 100%;
                left: 0;
                top: 0;
                z-index: 11111;
                background-color: #00000057 !important;
                padding-bottom: 0px !important;
                padding-top: 0px !important;
            }
            .form-group.form-inline.allBgImgSelectBox .dropdown.bootstrap-select {
                top: 60px !important;
            }
            nav#layout-navbar .nav-link {
                color: #fff !important;
            }
            nav#layout-navbar .nav-link .userFullName {
                color: #fff !important;
            }
            .fullscreen-btn-container {
            }
            #fullscreen-btn {
                bottom: 45px;
                right: 3px;
            }
            .layout-footer {
                position: fixed;
                bottom: 0px;
                width: 100%;
                z-index: 99;
                left: 0;
                background-color: #0000004a !important;
            }
            .bg-footer-theme .footer-left.text-left .footer-link,
            .layout-footer .footer-link {
                color: #fff !important;
            }
            .layout-footer .footer-link a {
                color: #fff !important;
                font-weight: bolder;
            }

            #analysis_name.expandable {
            height: 94px;
            position: relative;
            }
            #analysis_name .seemore {
                display: block;
            cursor: pointer;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            z-index: 11;
            font-size: 15px;
            background-color: #02bc77;
            padding: 6px;
            text-decoration: underline;
            }
            
            .audio-player-name.running-analysis-name {
                top: unset;
                bottom: -175px;

            
            }
            .audio-player-name {
            top: unset !important;
            bottom: -180px;
            }
            #analysis_name.expanded .seemore {
                position: relative;
            }
            .treat-main-content-image {
                margin-left: 0 !important;
            }

            .footer-right .footer-link {
                display: none;
            }
            .layout-sidenav-toggle {
            margin-top: -3px;
            }
            #shoppingCart {
            position: relative;
            top: 2px;
            }
            nav#layout-navbar .nav-link {
            position: relative;  
            }
            .navbar-nav .nav-item .nav-link i.fas.fa-home {
            top: 1px;
            position: relative;
            }
        }
    </style>
@endsection
@section('content')

@php
    $cartProduct = getCartdata();
    
    $bio = biorythVisibleDetails();
    
    $udetails  = ($data['userDetails'] != null) ? $data['userDetails'] : getUserDetails();

    $bgimage = getTreatBGImage($udetails);
    $totaltime = 0;
    $allBGImage = ($allBGImage != null)?$allBGImage:getCustomeImage();
    if ($data['random_status']) {
       $count = array_rand($allBGImage->toArray(),1);
       $bgimage = $allBGImage[$count]->image;
    }
@endphp

<section class="treat">
    <div class="row">
        <div class="col-md-12">
            <div class="treat-main-content treat-main-content-container position-relative" id="treat-main-content">
                <div class="treat-main-content-animation" style="position:relative">
                    <div class="treat-main-content-image">
                        <div class="treat-main-content-image-inner mt-3">
                            <img src="@if(!empty($bgimage)) {!! asset($bgimage) !!} @else {{ asset('images/circle_new.gif') }}@endif" id="bgimgContainer" class="ap-disk-img" alt="">
                            <div class="audio-player d-flex flex-column align-items-center justify-content-between">
                                
                                <img data-profileimage="true" id="center_img" class="d-inline-block rounded-circle user-avatar" height="100%" width="100%">

                                <div class="analysis_box"> </div>
                                <div class="analysis_price">
                                    {{-- <span id="durationCount" class="d-inline-block"></span> --}}
                                    <span class="treat-global-count d-block center-treat-global-dur-count">00:00:00</span>                                    
                                </div>
                            </div>

                            <div  class="audio-player-name">
                                <p id="analysis_name" class="bg-success"></p>
                                <style>
                                    @media(min-width: 768px){
                                        .lessmorebtn {
                                            display: none !important;
                                        }
                                    }
                                    @media(max-width: 767px){
                                        .lessmorebtn {
                                            position: absolute;
                                            bottom: -12px;
                                            background-color: #02BC77 !important;
                                            max-width: 345px;
                                            width: 100%;
                                            padding: 5px;
                                            border-bottom-left-radius: 5px;
                                            border-bottom-right-radius: 5px;
                                        }
                                        
                                        .lessmorebtn span {
                                            font-size: 16px;
                                            text-decoration: underline;
                                            cursor: pointer;
                                        }

                                        .seemore {
                                            display: block;
                                        }

                                        .lessmorebtn.expandable .seeless {
                                            display: none;
                                        }
                                        .lessmorebtn .seemore {
                                            display: none;
                                        }
                                        .lessmorebtn.expandable .seemore {
                                            display: block;
                                        }
                                    }
                                </style>
                                <div class="lessmorebtn" style="display: none;">
                                    <span class="seemore">{{trans('action.more')}}</span>
                                    <span class="seeless">{{trans('action.less')}}</span>
                                </div>
                            </div>
                            {{-- audio player --}}
                            <audio id="audio" autoplay="true" class="hide" type="audio/mp3"></audio>
                        </div>
                        @if($allBGImage && !$allBGImage->isEmpty() && $data['randomAnalysis']==0)
                            <div class="form-group form-inline allBgImgSelectBox">
                                <select data-show-subtext="true" class="selectpicker bs-select form-control m-0 mr-2 col-md-6" id="changeImage" data-userid="{{ $udetails->id }}" data-size="8" name="bgImage">
                                    <option value="" >{{__('action.defaultimage')}}</option>
                                    <option value="Random" @if($data['random_status']) selected @endif>{{__('action.randomimage')}}</option>
                                    @foreach ($allBGImage as $img)
                                        <option id="imageid" data-src="{!! asset($img->image) !!}" data-content="<img style='background-color:#02BC77;' src='{!! asset($img->image) !!}' height='25px' width='25px'/>" value="{{ $img->id }}" @if($bgimage == $img->image && $data['random_status'] == false) selected class="selected"  @endif></option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- playlist sidebar contents --}}
    <div class="treat-playlist-canvas">
        {{-- playlist sidebar toggle button --}}
        <button class="playlist-toggle-btn">
            <i class="fas fa-angle-left"></i>
        </button>
        <div class="no-padding-md no-padding-lg">
            <div class="right-panel custom-right-panel p-0">
                <div class="card position-relative border-0 rounded-0">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        {{-- playlist heading --}}
                        <h5 class="m-0 text-success" style="line-height: 22px; float: left;">
                            <i class="fas fa-music">&nbsp;</i>{{__('action.currently_treatment')}}
                            {{-- treat playlist total time countdown --}}
                            {{-- <span class="text-secondary" id="trt_count">00:00:00</span> --}}
                            <span class="text-secondary treat-global-count">00:00:00</span>/<span class="_count text-secondary">0</span>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="right-panel-list">
                            {{-- treat playlist items --}}
                            <ul class="p-1" id="playlist" >
                                @forelse ($cartProduct as $cart)
                                    @continue($cart->options->optimized == true || $cart->options->price == 0)
                                    @php
                                        $cartCnt++;
                                        $totaltime += $cart->options->price;
                                        $types = [
                                            'Analysis'  => $cart->options->analysisID,
                                            'Causes'    => $cart->options->causes_id,
                                            'Medium'    => $cart->options->medium_id,
                                            'Tipp'      => $cart->options->tipp_id,
                                            'Fokus'     => $cart->options->causes_id,
                                            'Einfluss'  => $cart->options->causes_id,
                                            'Topic'     => $cartCnt."T"
                                        ];
                                        
                                    @endphp
                                    <li class="updateclass divid{{ $types[$cart->options->type].$cart->options->type }}" 
                                        data-name="{{ $cart->options->analysisName }}" 
                                        data-price="{{ $cart->options->price }}" 
                                        data-anaid="{{ $types[$cart->options->type] }}" 
                                        data-subid="{{$cart->options->submenu_id }}" 
                                        data-proid="{{ $cart->options->productID }}" 
                                        data-serialno="{{ $cartCnt }}" 
                                        data-frequncy="{{ calculationFrequency($cart->options->analysisName) }}" 
                                        data-body="{{ (($bodyImages) && $bodyImages->firstWhere('analyse_id', $cart->options->analysisID)) ? Storage::disk('images')->url($bodyImages->firstWhere('analyse_id', $cart->options->analysisID)->image) : null }}"
                                        data-mental="{{ (($mentalImages) && $mentalImages->firstWhere('analyse_id', $cart->options->analysisID)) ? Storage::disk('images')->url($mentalImages->firstWhere('analyse_id', $cart->options->analysisID)->image) : null }}"
                                        data-global="{{ (($globalImages) && $globalImages->firstWhere('analyse_id', $cart->options->analysisID)) ? Storage::disk('images')->url($globalImages->firstWhere('analyse_id', $cart->options->analysisID)->desc_image) : null }}"
                                        data-type="{{ $cart->options->type }}">
                                        <p data-toggle="tooltip" data-placement="bottom" title="{{ $cart->options->analysisName }}"> <span class="text-success">{{ gmdate('i:s', $cart->options->price) }}</span> {{ $cart->options->analysisName }} </p>
                                    </li>
                                @empty
                                    <li class="updateclass">
                                        <p class="text-danger" data-toggle="tooltip" data-placement="bottom" title="{{ trans('action.no_data_found') }}"> 00:00 {{ trans('action.no_data_found') }} </p>
                                    </li>
                                @endforelse
                            </ul>
                            <input type="hidden" name="setting" class="_tretment-basic-settings" 
                            data-totalcount={{ $cartCnt }}
                            data-totaltime={{ $totaltime }}
                            data-rangeValue={{ $range }}
                            data-min="{{ $bio->gs_form_frequency }}" 
                            data-max="{{ $bio->gs_to_frequency }}"                             
                            data-sound="{{ $udetails->useroption->sound }}" 
                            data-playfrom="durpower">
                        </div>
                        {{-- treat sound control buttons container --}}
                        <div class="right-panel-button border-top bg-white">
                            <div class="current-player-session">
                                @livewire('treatment.session-id')
                            </div>
                            <div class="sound_controll_point">

                                {{-- treat sound control button --}}
                                @if($udetails->useroption->sound)
                                    <button class="btn btn-default mb-2" id="sound" onclick="soundControll(2)" data-music="1">
                                        <span class="d-inline-block">
                                            <i id="vup" class="fas fa-volume-up"></i> {{ __('action.music') }}
                                        </span>
                                    </button>
                                @else 
                                    <button class="btn btn-default mb-2" id="sound" onclick="soundControll(2)" data-music="2">
                                        <span class="d-inline-block">
                                            <i id="vup" class="fas fa-volume-down"></i> {{ __('action.music') }}
                                        </span>
                                    </button>
                                @endif

                                {{-- treat sound control button --}}
                                <button class="btn btn-default mb-2" id="frequencyset" onclick="soundControll(1)" data-freq="@if(isset(request()->frequency)){{request()->frequency}}@else{{'2'}}@endif">
                                    <span class="d-inline-block">
                                        <i id="vdwn" class="fas fa-volume-down"></i> {{ __('action.frequency_due_power') }}
                                    </span>
                                </button>
                                <button class="btn bg-success btn-success" id="abbrechen" data-id="relode">{{__('action.abrot')}}</button>
                                <button class="bg-warning btn btn-warning" onclick="playPause(this)" data-play='fas fa-play'><i  class="fas fa-pause">&nbsp;</i><span>Pause</span></button>
                        
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- playlist sidebar backdrop--}}
    <div class="playlist-canvas-backdrop"></div>
    {{-- playlist sidebar end--}}

    {{-- fullscreen button --}}
    <div class="fullscreen-btn-container text-right">
        <button class="text-white" id="fullscreen-btn">
            <i class="fas fa-expand"></i>
        </button>
    </div>

    {{--START treatment tutorial view modal--}}
    <div class="modal modal-top fade lg" id="treatmentTutorialVideoPlayModal" tabindex="-1" role="dialog"
        aria-labelledby="tutorialModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <video id="treatmentTutorialVideo" controlsList="nodownload" class="vjs-default-skin vjs-big-play-centered" controls
                        preload="auto" width="100%" height="100%" data-setup='{}'>
                        <source src="" type="video/mp4">
                    </video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning icon pdfCreateModal" data-dismiss="modal">{{
                        __('action.close') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{--END treatment tutorial view modal--}}

</section>


@endsection

@section('scripts')
<script src="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.js') }}"></script>
<script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>
<script src="{{ asset('/js/tone/Tone.js') }}"></script>
<script src="{{ asset('/js/tone/player.js') }}"></script>

    {{-- <script src="{{ asset('/js/commontreatment.js') }}"></script> --}}
    <script src="{{ asset('/js/playdurtreatment.js') }}"></script>
    <script>
        $(document).ready(function(){
            $('#custom-top-padding').addClass('single-treat-container');
            showSwalModal();
            $('#treatmentTutorialVideoPlayModal').on('hidden.bs.modal', function () {
                $('#treatmentTutorialVideo source').closest('video')[0].pause();
                showSwalModal();
            });
            async function showSwalModal() {
                let response = await getTutorialVideoLink();
                Swal.fire({
                    title: '{{trans("action.play_treatment")}}',
                    icon: 'success',
                    allowOutsideClick: false,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#fb0404',
                    showConfirmButton: response.video_link ? true : false,
                    confirmButtonText: '{{trans("action.cron_tutorial")}}',
                    cancelButtonText: '{{trans("action.cancel")}}',
                    showDenyButton: true,
                    denyButtonColor: '#20c997',
                    denyButtonText: '{{trans("action.start_treat")}}'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Handle Tutorial button action
                        $('#treatmentTutorialVideo source').attr('src', response.video_link).closest('video')[0].load();
                        $('#treatmentTutorialVideoPlayModal').modal('show');
                    } else if (result.isDenied) {
                        // Handle Start Treat button action
                        __startTreatment();
                    } else {
                        // Navigate back to the previous page
                        if (window.history.length > 1) {
                            // There is a history to go back to, so go back one step.
                            window.history.back();
                        } else {
                            // There is no history, so navigate to the home page or another URL.
                            window.location.href = '/';
                        }
                    }
                });
            }
            async function getTutorialVideoLink() {
                try {
                    const response = await fetch(`/get/tutorial/video`);
                    const data = await response.json();
                    return data;
                } catch (error) {
                    return false;
                }
            }
            $('.lessmorebtn').on('click', function(){
                $(this).toggleClass('expandable');
                $('#analysis_name').toggleClass('expandable');
            });
        })
    </script>

@endsection