@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;
        }

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

        /* @media (max-width: 1200px) and (min-width: 991.92px) {
            .right-panel {
                width: 100% !important;
            }
        } */
    </style>
@endsection

@section('content')

@php
    $udetails  = $data['userDetails'];
    $cartCnt   = 0;
    $totaltime = 0;
    $bio = biorythVisibleDetails();
    $creator_role = $data['creator_role'];
    $proids = getProducts();
    $bgimage = getTreatBGImage($udetails);
    $allBGImage = ($allBGImage != null)?$allBGImage:getCustomeImage();
    $status = $data['status'];

@endphp

<section class="treat">
     <div class="preloader" id="preload_product">
        <img src="{!! asset('images/Fill-4.png') !!}" alt="">
    </div>

    <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">
                            <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">
                                {{-- @if(empty($udetails->photo))
                                    <img src="{{ ($udetails->gender == 2)?asset('/images/female.jpg'):asset('/images/avatar.png') }}" alt class="d-inline-block rounded-circle" height="100%" width="100%">
                                @elseif($udetails->user_type != 0)
                                   <img src="{!! asset('/profile/admin') !!}/{{ $udetails->photo}}" alt class="d-inline-block rounded-circle" height="100%" width="100%">
                                @elseif($udetails->user_type == 0)
                                    <img src="{!! asset('/profile/users') !!}/{{ $udetails->photo}}" alt class="d-inline-block rounded-circle" height="100%" width="100%">
                                @endif --}}
                                <img src="{{getProfileImage($udetails)}}" alt class="d-inline-block rounded-circle" height="100%" width="100%">
                                <img class="d-inline-block rounded-circle treat-body-mental-img" id="center_img_2" src="">
                                <div class="analysis_box">

                                </div>
                                <div class="analysis_price">
                                    <span id="durationCount" class="d-inline-block"></span>
                                    <audio id="audio" loop autoplay="true" preload="auto" type="audio/mp3" tabindex="0"></audio>
                                </div>

                            </div>
                            <div id="analysis_name" class="audio-player-name bg-success"></div>
                        </div>
                    </div>

                    @if(count($allBGImage) > 0)
                        <div class="form-group form-inline allBgImgSelectBox">
                            <select data-show-subtext="true" class="selectpicker bs-select form-control m-0 col-md-6" id="changeImage" data-size="8" data-userid="{{ $udetails->id }}" 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>

    <button class="playlist-toggle-btn">
        <i class="fas fa-angle-left"></i>
    </button>
    {{-- playlist sidebar contents --}}
    <div class="treat-playlist-canvas">
        {{-- playlist sidebar toggle 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">
                        <h6 class="m-0">{{__('action.currently_treatment')}} <span class="text-secondary" id="trt_count"></span> @if($data['pdf_export'] == 1)<span class="pull-right text-success"><a href="{{route('cron.viewpdf', [$data['userid'], $data['cronid'], $data['ctimeid'], $data['cuniqueid']])}}" target="_blank"><i class="fas fa-file-pdf"></i></a></span>@endif</h6>
                        <button class="canvas-close-btn btn px-2"><i class="fa fa-times"></i></button>
                    </div>
                    <div class="card-body">
                        <div class="right-panel-list">
                            <ul class="p-0" id="playlist">
                            @if(!empty($analyses))
                            {{-- @dd($analyses) --}}
                                @foreach($analyses as $key => $ana)
                                    @php
                                        $getproid = $all_proids[$ana->id];
                                        $body = $mental = $global = null;
                                        if($ana->type_status == 0) {
                                            $causes   = array();
                                            $causes['causes'] = ($causesop == 1) ? $all_causes[$ana->causes]->title : '';
                                            $causes['medium'] = ($mediumop == 1) ? $all_causes[$ana->medium]->title : '';
                                            $causes['tipp'] = ($tippop == 1) ? $all_causes[$ana->tipp]->title : '';
                                            if($ana->type_status == 0) {
                                                if($ana->id){
                                                    $body = $bodyImages->firstWhere('analyse_id', $ana->id);
                                                    $mental = $mentalImages->firstWhere('analyse_id', $ana->id);
                                                    $global = $globalImages->firstWhere('id', $ana->id);
                                                }
                                            }
                                        }
                                    @endphp

                                    <li class="updateclass list-item divid{{ $ana->id }}" id="{{ $ana->id }}" data-name="{{ $ana->name }}" data-ana="{{ $ana->id }}" data-pro="{{ $getproid }}" data-price="{{ gmdate('i:s', $ana->time) }}" data-types="">
                                        <p class="font-weight-bold" data-toggle="tooltip" data-placement="bottom" title="{{ $ana->name }}">{{ gmdate('i:s', $ana->time) }} {{ $ana->name }}</p>
                                        <input type="hidden" name="prices" id="prices{{ $ana->id }}" value="{{ $ana->time }}">
                                        <input type="hidden" name="price" id="price{{ $ana->id }}" value="{{ $ana->time }}">
                                        <input type="hidden" name="count" id="count{{ $ana->id }}" value="{{ $cartCnt }}">
                                        <input type="hidden" name="body" id="b{{ $ana->id }}" value="@if($body != null){{$body->image}}@endif">
                                        <input type="hidden" name="mental" id="m{{ $ana->id }}" value="@if($mental != null){{$mental->image}}@endif">
                                        <input type="hidden" name="global" id="g{{ $ana->id }}" value="@if($global != null){{$global->desc_image}}@endif">
                                        <input type="hidden" name="analysis_freq" id="analysis_freq{{$ana->id}}" value="{{calculationFrequency($ana->name)}}">
                                    </li>

                                    @if($ana->type_status == 0 && $causes['causes'] != null)
                                        @if ($causesop == 1)
                                            @php
                                            $cartCnt++;
                                            $totaltime += $ana->cau_price;
                                            @endphp
                                            <li class="updateclass list-item divid{{ $ana->causes }}" id="{{ $ana->causes }}" data-name="{{ $causes['causes'] }}" data-ana="{{ $ana->causes }}" data-pro="{{ $getproid }}" data-price="{{ gmdate('i:s', $ana->cau_price) }}" data-types="">
                                                <p data-toggle="tooltip" data-placement="bottom" title="{{$causes['causes'] }}"> {{ gmdate('i:s', $ana->cau_price) }} {{ $causes['causes'] }} </p>
                                                <input type="hidden" name="prices" id="prices{{ $ana->causes }}" value="{{ $ana->cau_price }}">
                                                <input type="hidden" name="price" id="price{{ $ana->causes }}" value="{{ $ana->cau_price }}">
                                                <input type="hidden" name="count" id="count{{ $ana->causes }}" value="{{ $cartCnt }}">
                                                <input type="hidden" name="analysis_freq" id="analysis_freq{{$ana->causes}}" value="{{calculationFrequency($causes['causes'])}}">
                                            </li>
                                        @endif

                                        @if ($mediumop == 1 && $causes['medium'] != null)
                                            @php
                                                $cartCnt++;
                                                $totaltime += $ana->mid_price;
                                            @endphp
                                            <li class="updateclass list-item divid{{ $ana->medium }}" id="{{ $ana->medium }}" data-name="{{ $causes['medium'] }}" data-ana="{{ $ana->medium }}" data-pro="{{ $getproid }}" data-price="{{ gmdate('i:s', $ana->mid_price) }}" data-types="">
                                                <p data-toggle="tooltip" data-placement="bottom" title="{{ $causes['medium'] }}"> {{ gmdate('i:s', $ana->mid_price) }} {{ $causes['medium'] }} </p>
                                                <input type="hidden" name="prices" id="prices{{ $ana->medium }}" value="{{ $ana->mid_price }}">
                                                <input type="hidden" name="price" id="price{{ $ana->medium }}" value="{{ $ana->mid_price }}">
                                                <input type="hidden" name="count" id="count{{ $ana->medium }}" value="{{ $cartCnt }}">
                                                <input type="hidden" name="analysis_freq" id="analysis_freq{{$ana->medium}}" value="{{calculationFrequency($causes['medium'])}}">
                                            </li>
                                        @endif

                                        @if ($tippop == 1 && $causes['tipp'] != null)
                                            @php
                                                $cartCnt++;
                                                $totaltime += $ana->tipp_price;
                                            @endphp
                                            <li class="updateclass list-item divid{{ $ana->tipp }}" id="{{ $ana->tipp }}" data-name="{{ $causes['tipp'] }}" data-ana="{{ $ana->tipp }}" data-pro="{{ $getproid }}" data-price="{{ gmdate('i:s', $ana->tipp_price) }}" data-types="">
                                                <p data-toggle="tooltip" data-placement="bottom" title="{{ $causes['tipp'] }}"> {{ gmdate('i:s', $ana->tipp_price) }} {{ $causes['tipp'] }} </p>
                                                <input type="hidden" name="prices" id="prices{{ $ana->tipp }}" value="{{ $ana->tipp_price }}">
                                                <input type="hidden" name="price" id="price{{ $ana->tipp }}" value="{{ $ana->tipp_price }}">
                                                <input type="hidden" name="count" id="count{{ $ana->tipp }}" value="{{ $cartCnt }}">
                                                <input type="hidden" name="analysis_freq" id="analysis_freq{{$ana->tipp}}" value="{{calculationFrequency($causes['tipp'])}}">
                                            </li>

                                        @endif
                                    @endif

                                    @php
                                        $cartCnt++;
                                        $totaltime += $ana->time;
                                    @endphp

                                @endforeach
                            @endif

                            @if(count($causes_types) > 0)
                                @foreach($causes_types as $key => $ana)
                                    @php
                                        if($ana->type_status == 1)
                                            $causeName = $ana->title;
                                        else if($ana->type_status == 2)
                                            $causeName = $ana->title;
                                        else if($ana->type_status == 3)
                                            $causeName = $ana->title;
                                        else if($ana->type_status == 4)
                                            $causeName = $ana->title;
                                        else if($ana->type_status == 5)
                                            $causeName = $ana->title;

                                        $ana->name = $causeName;
                                        $getproid = $proids[rand(0, count($proids) - 1)];
                                    @endphp


                                    <li class="updateclass list-item divid{{ $ana->id }}" id="{{ $ana->id }}" data-name="{{ $ana->name }}" data-ana="{{ $ana->id }}" data-pro="{{ $getproid }}" data-price="{{ gmdate('i:s', $ana->time) }}" data-types="">
                                        <p class="font-weight-bold" data-toggle="tooltip" data-placement="bottom" title="{{ $ana->name }}">{{ gmdate('i:s', $ana->time) }} {{ $ana->name }} </p>
                                        <input type="hidden" name="prices" id="prices{{ $ana->id }}" value="{{ $ana->time }}">
                                        <input type="hidden" name="price" id="price{{ $ana->id }}" value="{{ $ana->time }}">
                                        <input type="hidden" name="count" id="count{{ $ana->id }}" value="{{ $cartCnt }}">
                                        <input type="hidden" name="analysis_freq" id="analysis_freq{{$ana->id}}" value="{{calculationFrequency($ana->name)}}">
                                    </li>

                                    @php
                                        $cartCnt++;
                                        $totaltime += $ana->time;
                                    @endphp

                                @endforeach
                            @endif

                            @if(count($topics) > 0)
                                @foreach($topics as $key => $topic)
                                    @php
                                        $getproid = $proids[rand(0, count($proids) - 1)];
                                    @endphp


                                    <li class="updateclass list-item divid{{ $topic->id }}" id="{{ $topic->id }}" data-name="{{ $topic->topic }}" data-ana="{{ $topic->id }}" data-pro="{{ $getproid }}" data-price="{{ gmdate('i:s', $topic->time) }}" data-types="">
                                        <p class="font-weight-bold" data-toggle="tooltip" data-placement="bottom" title="{{ $topic->topic }}">{{ gmdate('i:s', $topic->time) }} {{ $topic->topic }} </p>
                                        <input type="hidden" name="prices" id="prices{{ $topic->id }}" value="{{ $topic->time }}">
                                        <input type="hidden" name="price" id="price{{ $topic->id }}" value="{{ $topic->time }}">
                                        <input type="hidden" name="count" id="count{{ $topic->id }}" value="{{ $cartCnt }}">
                                        <input type="hidden" name="analysis_freq" id="analysis_freq{{$topic->id}}" value="{{calculationFrequency($topic->topic)}}">
                                    </li>

                                    @php
                                        $cartCnt++;
                                        $totaltime += $topic->time;
                                    @endphp

                                @endforeach
                            @endif
                            </ul>
                            <input type="hidden" name="count" id="totalcount" value="{{ $cartCnt }}">
                            <input type="hidden" name="time" id="totaltime" value="{{ $totaltime }}">
                            <input type="hidden" name="savep" id="savep" value="{{$status}}">
                        </div>
                        <input type="hidden" id="ra_status" value="{{ $ra_status }}">
                        <input type="hidden" id="pdf_status" value="{{ $pdf_status }}">
                    </div>
                    <div class="right-panel-button">
                            <div>
                                <button class="btn btn-default mb-2" id="sound" data-music="0">
                                    <span class="d-inline-block">
                                        <i id="vup" class="fas fa-volume-up"></i> {{ __('action.music') }}
                                    </span>
                                </button>
                                <button class="btn btn-default mb-2" id="start_audio" onclick="start_audio()" data-type="1">
                                    <span class="d-inline-block">
                                        <i id="vdwn" class="fas fa-volume-down"></i> {{ __('action.frequency_due_power') }}
                                    </span>
                                </button>
                            </div>
                            <button class="btn btn-success w-100" id="abbrechen" onclick="treatFinish()">{{__('action.abrot')}}</button>
                        </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>


    {{-- Modal --}}
    <div class="modal fade" id="audioModal" role="dialog">
        <div class="modal-dialog">
            {{-- Modal content --}}
            <div class="modal-content">
                <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="color: white"> {{__('action.alert_allow_msg')}} </h4>
                </div>
                <div class="modal-body">
                <p>{{__('action.alert_allow_msg_details')}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="playMusic()" class="btn btn-success">{{ __('action.start_treat') }}</button>
                    <button type="button" class="btn btn-warning" data-dismiss="modal">{{__('action.close')}}</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Optimized Modal content --}}
    <div class="modal fade custom_modal" id="optimizedModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="optimizedModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="optimizedModalLabel">{{__('action.reactionValue')}}</h5>
                </div>
                <div class="modal-body">
                    <div class="modal_preloader">
                        <div class="loading">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div id="optimizedModalBody">

                    </div>
                </div>
                <div class="modal-footer">
                    @if ($pdf_status)
                        <a href="javascript:void(0)" class="d-inline-block mr-2 cursor-pointer"  data-toggle="modal" data-target="#reactionPdfGenerateModal">
                            <button type="button" class="btn btn-success hide" id="reactionPdfButton">
                                <i class="fas fa-file-pdf text-default">&nbsp;</i>{{ __('action.save_pdf') }}
                            </button>
                        </a>
                    @endif
                    <a href="{{ route('cron.cron_optimize',[$udetails->id, $data['cronid'], $data['ctimeid'], $data['cuniqueid']]) }}" data-opurl="{{ route('cron.cron_optimize',[$udetails->id, $data['cronid'], $data['ctimeid'], $data['cuniqueid']]) }}" class="optimizedDsahClone">
                        <button type="button" class="btn btn-default" id="optimizedbtn">{{__('action.optimize')}}</button>
                    </a>
                    <button type="button" class="btn btn-warning" id="optimizedClosed">{{__('action.close')}}</button>
                </div>
            </div>
        </div>
        </div>
    </div>
    </div>

    {{-- Pdf Generate Modal --}}
    <div class="modal modal-top fade" id="reactionPdfGenerateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">{{ __('action.pdf_title') }}</h4>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="pdfNameforReaction" class="form-control" placeholder="{{__('action.pdf_title')}}" name="pdf_name">
                </div>
                <div class="modal-footer">
                    <button type="button" id="create-pdf" class="btn btn-primary icon"><i class="ion ion-ios-save">&nbsp;</i>{{ __('action.save_pdf') }}</button>
                    {{-- <button type="button" id="pdf-send" class="btn btn-primary icon" target="_blank"><i class="ion ion-ios-mail">&nbsp;</i>{{__('action.save_send_pdf')}}</button> --}}
                    <button type="button" class="btn btn-default icon" data-dismiss="modal">{{ __('action.close') }}</button>
                </div>
            </div>
        </div>
    </div>

</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('/vendor/js/simpleTones.js') }}"></script>

<script>
    $(function () {
    var video1 = document.getElementById('audio');
        _checkAutoPlay(video1.play());
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var ra_status = $('#ra_status').val();
    var pdf_status = $('#pdf_status').val();
    let refreshIntervalId = null;
    let timeCountInterval = null;

    $(document).ready(function(){

        $('#playlist li').first().addClass('active');
        var name  = $("#playlist").find(".active").attr('data-name');
        var anaid = $("#playlist").find(".active").attr('data-ana');
        var proid = $("#playlist").find(".active").attr('data-pro');
        var price = $("#playlist").find(".active").attr('data-price');
        var topic = $("#playlist").find(".active").attr('data-types');
        changename(anaid, name);
        get_audio(proid,anaid,null,name,price,topic);


        // playlist sidebar toggler
        $(".playlist-toggle-btn").click(function () {
            $(".treat-playlist-canvas").addClass("canvas-open");
            $(".playlist-canvas-backdrop").fadeIn("fast");
        });

        // playlist sidebar overlay
        $(".playlist-canvas-backdrop, .canvas-close-btn").click(function () {
            $(".treat-playlist-canvas").removeClass("canvas-open");
            $(".playlist-canvas-backdrop").fadeOut("fast");
        });

        // fullscreen treatment
        $("#fullscreen-btn").click(function () {
            if ($("#fullscreen-btn i").hasClass("fa-expand")) {
                $("#fullscreen-btn i").removeClass("fa-expand").addClass("fa-compress");
                openFullscreen();
            } else{
                $("#fullscreen-btn i").removeClass("fa-compress").addClass("fa-expand");
                document.exitFullscreen();
            }
        });

        function openFullscreen() {
            const element = document.querySelector('.treat');
            const reqFullScreen = element.requestFullscreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
            reqFullScreen.call(element);
        }
    });

    function start_audio() {

        var val = $("#start_audio").attr('data-type');

        if(val=="1")  {
            $("#start_audio").attr("data-type", "0");
            if(o != null){ o.disconnect(); }
            oscOn();
            $("#vdwn").removeClass("fa-volume-down").addClass("fa-volume-up");
            $("#audio").prop('muted', true);
            $("#vup").removeClass("fa-volume-up").addClass("fa-volume-down");
        }
        else if(val=="0")  {
            $("#start_audio").attr("data-type", "1");
            o.disconnect();
            oscOn();
            $("#vdwn").removeClass("fa-volume-up").addClass("fa-volume-down");
            $("#audio").prop('muted', false);
            $("#vup").removeClass("fa-volume-down").addClass("fa-volume-up");
        }
    }

    $("#sound").click(function() {

        var bool = $("#audio").prop("muted");

        if(o != null){ o.disconnect(); }
        var datamusic = $("#sound").attr("data-music");
        if(datamusic == 0){ $("#sound").attr("data-music", 1); }
        else{ $("#sound").attr("data-music", 0); oscOn(); }

        $("#audio").prop("muted",!bool);
        var startA = $("#start_audio").attr("data-type");

        if(startA=='0') o.disconnect();

        $("#vup").toggleClass("fa-volume-down fa-volume-up");
        $("#vdwn").removeClass("fa-volume-up").addClass("fa-volume-down");
        $("#start_audio").attr("data-type", "1");

    });

    function between(min, max) {
        return Math.floor(
            Math.random() * (max - min) + min
        )
    }

    var oscOn = function(){

        var gain = 1;

        var audioid =  $("#playlist").find(".active").attr('id');
        var duration  = $("#prices"+audioid).val();
        var durint = parseInt(duration)*10;
        var ana_name  = $("#playlist").find(".active").attr('data-name');

        var frequency = parseInt($("#analysis_freq"+audioid).val());

        var vol = $("#start_audio").attr('data-type');
        if(vol == 1){ gain = 0.01; }

        playTone(frequency, 'sine', durint, gain);

    }

    var $navlis = $('#playlist li');
    let refCnt = 0;
    let imgType = 1;

    refreshIntervalId = window.setInterval(function(){
        var id     = $("#playlist").find(".active").attr('id');
        var prices = $("#prices"+id).val();
        var price  = $("#price"+id).val();
        prices--;
        refCnt++;

        $("#prices"+id).val(prices);

        if(refCnt == 5) {
            let bImgSrc = $("#b"+id).val();
            let mImgSrc = $("#m"+id).val();
            let gImgSrc = $("#g"+id).val();

            if(bImgSrc && imgType == 2 && bImgSrc != "") {
                $("#center_img_2").attr('src', "{{ asset('/storage/analyse/images/body') }}/"+bImgSrc);
            } else if(mImgSrc && imgType == 3 && mImgSrc != "") {
                $("#center_img_2").attr('src', "{{ asset('/storage/analyse/images/mental') }}/"+mImgSrc);
            }else if(gImgSrc && imgType == 4 && gImgSrc != "") {
                $("#center_img_2").attr('src', "{{ asset('/storage/analyse/images/description') }}/"+gImgSrc);
            }else{
                $("#center_img_2").attr('src', "");
            }
            (imgType == 4) ? imgType = 1  : imgType++;
            refCnt = 0;
        }

        var audioSrc = document.getElementById("audio");
        var audioDur = Math.floor(audioSrc.duration);
        var audioCur = Math.floor(audioSrc.currentTime);
        var audioFinish = Math.floor(audioDur - audioCur);

        var a = myFunctionx_treat(prices,id,price,audioFinish);
        if (a == 0) {
            clearInterval(refreshIntervalId);
        }

    }, 1000);

    function myFunctionx_treat(prices,id,price,audioFinish) {

        var count = $("#totalcount").val();
        var dur = document.getElementById("audio").duration;
        var aud = document.getElementById("audio");

        if(prices > 0){

            var hours   = Math.floor((prices+1) / 3600);
            var minutes = Math.floor(((prices+1) - (hours * 3600)) / 60);
            var seconds = (prices+1) - (hours * 3600) - (minutes * 60);
            seconds = Math.round(seconds * 100) / 100

            var result = "";
            result += "" + (minutes < 10 ? "0" + minutes : minutes);
            result += ":" + (seconds  < 10 ? "0" + seconds : seconds);

            document.getElementById("durationCount").textContent = result;
        }else{
            document.getElementById("durationCount").textContent = result;
        }

        aud.onended = function() {

            // $('#playlist li').first().addClass('active');
            var name  = $("#playlist").find(".active").attr('data-name');
            var anaid = $("#playlist").find(".active").attr('data-ana');
            // var subid = $("#playlist").find(".active").attr('data-subid');
            var proid = $("#playlist").find(".active").attr('data-pro');
            var price = $("#playlist").find(".active").attr('data-price');
            var topic = $("#playlist").find(".active").attr('data-types');

            if(count) get_audio(proid,anaid,null,name,price,topic);

        };

        if(audioFinish < 3 || (prices == 0 && isNaN(audioFinish))) {
            if(count) get_audio(proid,anaid,null,name,price,topic);
        }

        if (prices == 0) {
            let activeClass = $('#playlist li.active').removeClass('active').next().addClass('active')
            count--;

            $("#prices"+id).val(price);

            var name  = activeClass.attr('data-name');
            var anaid = activeClass.attr('data-ana');
            var proid = activeClass.attr('data-pro');
            var subid = activeClass.attr('data-subid');
            var price = activeClass.attr('data-price');
            var topic = activeClass.attr('data-types');

            $("#totalcount").val(count);
            var cnt = $("#count" + anaid).val();

            changename(anaid, name);
            //get_audio(proid,anaid,name,price,topic);

            var startaud = $("#start_audio").attr("data-type");

            if (startaud == '0') {
                o.disconnect();
                $("#start_audio").attr("data-type", "1");
                start_audio();
            }
        }
        if(count <= 0 && ra_status == 0)
        {
           let promise = new Promise(function(resolve, reject) {
               clearInterval(refreshIntervalId);
               clearInterval(timeCountInterval);
               
                $("#trt_count").html("00:00:00");
                $("#totalcount").val(0);
                $("#totaltime").val(0);

                $("#audio").prop('muted', true);
                if(o != null) o.disconnect();

               const result = savePackage();
                resolve(result);
            });

            promise.then((message) => {
                $("#totalcount").val('hold');
                $('#optimizedModal').modal({backdrop: 'static', keyboard: false})

                // For Stoping speaker
                var startaud = $("#start_audio").attr("data-type");
                if (startaud == '0') {
                    o.disconnect();
                    $("#start_audio").attr("data-type", "3");
                }

                $("#audio").prop('muted', true);
                if(o != null){ o.disconnect(); }

                $('.modal_preloader').show();
                $('#optimizedModalBody').hide();
                var action= "{{ route('cron.optimized',[$udetails->id]) }}";
                $.ajax({
                    type:'POST',
                    url:action,
                    data: {
                        type : 0
                    },
                    dataType:"json",
                    success:function(response){
                        var result = "";
                        if(response.status == true)
                        {
                            $.each(response.newValues, function(key, value) {
                                var time = display(value);
                                result += "<div class='row mb-2'>";
                                result += "<div class='col-md-6'>"+time+" "+response.anaNames[key]+" </div>";
                                result += '<div class="col-md-6"><div class="progress" style="height: 20px; border-radius: .25rem; background-color: rgba(0, 0, 0, 0.10)"><div class="progress-bar" role="progressbar" aria-valuenow="'+response.randomValues[key]+'" aria-valuemin="0" aria-valuemax="100" style="background-color: '+response.colors[key]+'; width: '+response.randomValues[key]+'%">'+response.randomValues[key]+'%</div></div></div>';
                                result += '</div>';
                            });

                            $("#optimizedModalBody").html(result);

                            $('.modal_preloader').hide();
                            $('#optimizedModalBody').show();
                        }else{

                            result += '<div class="row" style="text-align: center"> <h3>{{__("action.congratulationReactionMSG")}}</h3>';
                            result += '<p style="text-align: center; width:100%"><img src="{{ asset("images/happy.png") }}" alt="Happy" height="100" width="100"></p></div>';

                            $.each(response.newValues, function(key, value) {
                                var time = display(value);
                                result += "<div class='row mb-2'>";
                                result += "<div class='col-md-6'>"+time+" "+response.anaNames[key]+" </div>";
                                result += '<div class="col-md-6"><div class="progress" style="height: 20px; border-radius: .25rem; background-color: rgba(0, 0, 0, 0.10)"><div class="progress-bar" role="progressbar" aria-valuenow="'+response.randomValues[key]+'" aria-valuemin="0" aria-valuemax="100" style="background-color: '+response.colors[key]+'; width: '+response.randomValues[key]+'%">'+response.randomValues[key]+'%</div></div></div>';
                                result += '</div>';
                            });
                            $("#optimizedModalBody").html(result);
                            $("#optimizedbtn").addClass('hide');
                            // $("#optimizedbtn").html(`{{__('action.finished')}}`);
                            // $(".optimizedDsahClone").removeAttr("href");
                            // $('.optimizedDsahClone').attr('onclick','treatFinish()');
                            if(pdf_status) $('#reactionPdfButton').removeClass('hide');
                            $('.modal_preloader').hide();
                            $('#optimizedModalBody').show();
                        }
                    },
                    error:function(response){

                    }
                });

                $("#optimizedModal").modal('show');
            });

        }
        if(ra_status == 1 && count <= 0){
            clearInterval(refreshIntervalId);
            savePackage();
            treatFinish();
        }
    }

    let checkAudio = true;
    function get_audio(proid, anaid, subid, name, price, topic) {
        if(checkAudio){
            checkAudio = false;
            $.ajax({
                type: "POST",
                url: "{{ route('Aajax.getAudio') }}",
                data: { id: proid,subid:subid, analysis_id: anaid },
                success: function (response) {
                    $('#audio').attr('src', response);
                    checkAudio = true;
                    // $('#audio').attr('src', "{{ asset('/analysis_audio') }}/" + response);
                }
            });
        }        
    }

    $(document).on("click", "#optimizedbtn", function (e) {
        e.preventDefault();
        var url =  $(this).parent().data('opurl')

        window.location.href = url+"?music="+$('#sound').data('music')+"&freq="+$('#start_audio').data('type')
    })

    function savePackage(){
        var action= '{{ route("cron.saveCartToPackage",[$udetails->id]) }}';
        var package_name = "auto_save";

        return $.ajax({
            type:'POST',
            url:action,
            data: {
                package_name : package_name
            },
            dataType:"json",
            success:function(data){
                return data.success;
            },
            error:function(data){

            }
        });
    }

    function treatFinish()
    {
        window.location.href = "{{ route('cron.treatFinish') }}";
    }

    function isSafari() {
        var chr = window.navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
        var sfri = window.navigator.userAgent.toLowerCase().indexOf("safari") > -1;
        return !chr && sfri;
    }
     $('#optimizedClosed').click(function() {
        treatFinish();
    })

    $('#optimizedDashGo').click(function() {
        treatFinish();
    })

    function changename(anaid, name){

        if(o != null){o.disconnect(); }
        var playf = $("#sound").attr("data-music");
        if(playf != 1){ oscOn(); }

        $('#analysis_name').html(name);
        $('.divid' + anaid).removeClass('updateclass');
    }


    function treatFinish()
    {
        if(ra_status == 0){
            var action= '{{ route("cron.optimizedResultSave",[$udetails->id]) }}';
            $.ajax({
                type:'POST',
                url:action,
                data: {
                    status : 1
                },
                dataType:"json",
                success:function(data){
                    toastr.success(`{{__('action.treatment_finished')}}`);
                    window.location.href = "{{ route('cron.treatFinish') }}";
                },
                error:function(data){
                    console.log(data);
                }
            })
        }else{
            toastr.success(`{{__('action.treatment_finished')}}`);
            window.location.href = "{{ route('cron.treatFinish') }}";
        }

    }

    function playMusic(){
        document.getElementById('audio').play();
        $('#audioModal').modal('hide');
    }

    function _checkAutoPlay(p) {

        var s = window['Promise'] ? window['Promise'].toString() : '';
        if (s.indexOf('function Promise()') !== -1 || s.indexOf('function ZoneAwarePromise()') !== -1)
        {
            p.catch(function(error) {

                if(error.name == "NotAllowedError") { // For Chrome/Firefox
                   $('#audioModal').modal('show');
                } else if (error.name == "AbortError" && isSafari()) {  // Only for Safari
                    $('#audioModal').modal('show');
                }
            }).then(function(){

            });
        } else {
            alert('promise could not work in your browser');
        }
    }

    // Create Pdf and save
    $('#create-pdf').click(function() {
        let name = $('#pdfNameforReaction').val();
        if(name == ''){
            return toastr.warning(`{{ __('action.pdf_title_error') }}` );
        }
        $(".preloader").show();
        let action= "{{ route('treat.createPDF') }}";
        $.ajax({
                type:'POST',
                url:action,
                data: {
                    name : name
                },
                dataType:"json",
                success:function(data){
                    if (data.success == true) {
                    $(".preloader").hide();
                        Swal.fire({ type: 'success', title: "{{ __('action.pdf_genrated') }}", showConfirmButton: false, timer: 1500 });
                        window.open(data.pdf);
                        treatFinish();
                    }
                },
                error:function(data){
                    console.log(data);
                }
        })
    });
    function display (seconds) {

        const format = val => `0${Math.floor(val)}`.slice(-2)
        const hours = seconds / 3600
        const minutes = (seconds % 3600) / 60

        return [minutes, seconds % 60].map(format).join(':')
    }
    function startTimer(duration, display) {

        var timer = duration, hour, minutes, seconds;

        timeCountInterval = setInterval(function () {

            hour = Math.floor(timer / 3600);
            minutes = Math.floor((timer%3600) / 60);
            seconds = timer % 60;

            if(hour >= 24) hour = 23;
            else if(hour < 10) hour = "0"+hour;

            hour    = hour;
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            $("#trt_count").html(hour + ":" + minutes + ":" + seconds);

            if (--timer < 0) {
                timer = duration;
            }
        }, 1000);
    }

    window.onload = function () {
        var seconds = $("#totaltime").val(),
            display = $('#trt_count');
        startTimer(seconds);
    };

</script>
@endsection