@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') }}">
@endsection

@section('content')

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

<section class="treat">
    <div class="row">
        <div class="col-md-9">
            <div class="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="{{ asset('images/circle_new.gif') }}" 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%">
                                <div class="analysis_box">

                                </div>
                                <div class="analysis_price">
                                    <span id="durationCount" class="d-inline-block"></span>
                                    <audio id="audio" 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-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 class="col-md-3 no-padding-md no-padding-lg">
            <div class="right-panel">
                <div class="card">
                    <div class="card-header">
                        <h6 class="m-0">{{__('action.currently_treatment')}} <span class="text-secondary" id="trt_count"></span>/<span class="text-secondary" id="loop">0</span></h6>
                    </div>
                    <div class="card-body">
                        <div class="right-panel-list">
                            <ul class="p-0" id="playlist">
                            @if(!empty($analyses))
                            @foreach($analyses as $key => $ana)
                                @php
                                    $getproid = $all_proids[$ana->id];

                                    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 : '';
                                    }
                                @endphp

                                <li class="p-1 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="{{ $cartCnt1 }}">
                                    <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
                                    $cartCnt1++;
                                    $totaltime += $ana->cau_price;
                                    @endphp
                                    <li class="p-1 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="{{ $cartCnt1 }}">
                                        <input type="hidden" name="analysis_freq" id="analysis_freq{{ $ana->causes }}" value="{{calculationFrequency($causes['causes'])}}">
                                    </li>
                                @endif
                                @if ($mediumop == 1 && $causes['medium'] != null)
                                    @php
                                        $cartCnt1++;
                                        $totaltime += $ana->mid_price;
                                    @endphp
                                    <li class="p-1 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="{{ $cartCnt1 }}">
                                        <input type="hidden" name="analysis_freq" id="analysis_freq{{ $ana->medium }}" value="{{calculationFrequency($causes['medium'])}}">
                                    </li>
                                @endif
                                @if ($tippop == 1 && $causes['tipp'] != null)
                                     @php
                                        $cartCnt1++;
                                        $totaltime += $ana->tipp_price;
                                    @endphp
                                    <li class="p-1 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="{{ $cartCnt1 }}">
                                        <input type="hidden" name="analysis_freq" id="analysis_freq{{ $ana->tipp }}" value="{{calculationFrequency($causes['tipp'])}}">
                                    </li>

                                @endif
                                @endif

                                @php
                                    $totaltime += $ana->time;
                                    $cartCnt1++;
                                @endphp
                            @endforeach
                            @endif

                            @if(count($causes_types))
                            @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="p-1 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="{{ $cartCnt1 }}">
                                    <input type="hidden" name="analysis_freq" id="analysis_freq{{ $ana->id }}" value="{{calculationFrequency($ana->name)}}">
                                </li>

                                @php
                                    $totaltime += $ana->time;
                                    $cartCnt1++;
                                @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="totalcount1" value="{{ $cartCnt1 }}">
                            <input type="hidden" name="count" id="totalcount2" value="{{ $cartCnt1 }}">
                            <input type="hidden" name="count" id="loop1" value="{{ $cartCnt2 }}">
                            <input type="hidden" name="count" id="loop2" value="">
                            <input type="hidden" name="time" id="totaltime" value="{{ $totaltime }}">
                            <input type="hidden" name="time" id="treattimes" value="{{ $times }}">
                        </div>
                        <div class="right-panel-button">
                            <div>
                                <button class="btn btn-default" 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" 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>
    </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>

</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());
    });

    var totalAvailableTime = $("#treattimes").val();
    $(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,name,price,topic);
    });

    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 min = "{{ $bio->gs_form_frequency }}";
        var max = "{{ $bio->gs_to_frequency }}";

        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');
    var duration = $("#treattimes").val();
    var timer = duration, hour, minutes, seconds;

    var refreshIntervalId = window.setInterval(function(){

        var id     = $("#playlist").find(".active").attr('id');
        var prices = $("#prices"+id).val();
        var price  = $("#price"+id).val();

        prices--;
        totalAvailableTime--;

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

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

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

        myFunctionx_treat(prices,id,price,audioFinish);

    }, 1000);


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

        var count1 = $("#totalcount1").val();
        var count2 = $("#totalcount2").val();
        var loop2 = $("#loop2").val();
        var loop1 = $("#loop1").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() {
            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');

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

        };

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

        if (prices <= 0) {
            var $next = $navlis.filter('.active').removeClass('active').next();
            if (!$next.length) $next = $navlis.first();

            let activeClass = $next.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');

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

            $("#totalcount1").val(count1);

            changename(anaid, name);

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

            if (startaud == '0') {
                o.disconnect();
                $("#start_audio").attr("data-type", "1");
                start_audio();
            }
        }

        if(count1 == 1)
        {
            loop1++;

            $("#loop1").val(loop1);
            $("#loop").html(loop1);

            $("#totalcount2").val(count2);
            $("#totalcount1").val(count2);

            $('.list-item').addClass('updateclass');
            $('#playlist li').first().removeClass('updateclass')
            
            $('#playlist li').each(function(key,value){
                $('#prices'+$(value).attr('id')).val($('#price'+$(value).attr('id')).val())
            })

            if(totalAvailableTime <= 0) {
                clearInterval(refreshIntervalId);
                this.treatFinish();
                return 0;
            }
        }
    }

    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');
    }

    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, analysis_id: anaid },
                success: function (response) {
                    $('#audio').attr('src', response);
                    var audio = document.getElementById('audio');
                    audio.load();
                    audio.addEventListener("load", function() {
                        audio.play();
                    }, true);
                    checkAudio = true;
                    // $('#audio').attr('src', "{{ asset('/analysis_audio') }}/" + response);
                }
            });
        }        
    }

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

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

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

    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');
        }
    }

</script>
@endsection