@extends('Frontend.partials.layout')

@section('content')

<section class="analysis-content products">
    <div class="row">
        <div class="col-md-5 col-sm-5 col-12">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fas fa-home primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{$data['product_name']}}</h2>
                    <p>{{ brandName() }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            <div class="analysis-content-right text-right">
                <ul>
                    <li>
                        {{-- <button class="btn btn-info"  data-toggle="modal" data-target="#topicModal">
                            <i class="fas fa-edit f-18" data-toggle="tooltip" data-placement="bottom" title="{{__('action.manage_topic')}}"></i>{{__('action.topic_pdf')}}
                        </button>
                        <button class="btn btn-success" id="play"><i class="fas fa-play-circle f-18"></i></button> --}}
                        <button class="btn btn-danger" onclick="addFrabklangRedValues()" data-pro="{{$data['product_id']}}" id="allred" data-toggle="tooltip" data-state="danger" data-placement="bottom" title="{{__('action.add_all_red_values_to_cart')}}"><i class="fas fa-plus-circle f-18"></i></button>
                    </li>
                </ul>
            </div>
        </div>
        {{-- Topic Modal --}}
        <div class="modal modal-top fade" id="topicModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog border border-primary rounded" role="document">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h5 class="modal-title " id="myModalLabel"><i class="fa fa-edit inline-flex"></i> {{ __('action.topic_name') }}</h5>
                    </div>
                    <div class="modal-body">
                        <textarea name="" class="form-control" id="own_topic" cols="" rows="3"
                            placeholder="{{ __('action.cron_note_placeholder') }}">{{ getUserDetails()->thema_speichern }}</textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success icon" id="save_topic" onclick="topicSave('Save')"><i class="ion ion-ios-save">&nbsp;</i>{{ __('action.save_topic') }}</button>
                        <button type="button" class="btn btn-danger icon" id="delete_topic" onclick="topicSave('Delete')"><i class="ion ion-ios-trash">&nbsp;</i>{{ __('action.delete_topic') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="card-body frablang-card">
            <div class="row">
                <div class="col-md-8 col-sm-12">
                    <div class="row">
                        @if(count($data['submenus']) > 0)
                            @foreach($data['submenus'] as $submenu)
                                <div class="col-md-4 col-sm-6 col-xl-4  col-12">
                                    <div class="card color-border-one mb-3">
                                        <h6 class="card-header with-elements f-16" style="padding: 7px 10px; display: flex; justify-content: space-between;">
                                            <div class="card-header-title p-0">{{$submenu->menu_name}}</div>
                                            <div class="col-md-4">
                                                @if(!empty($submenu->description))
                                                    <span id="info_{{ $submenu->id }}" class="popover-data" data-id="{{$submenu->id}}" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-title="{{__('action.main_desc')}}" data-content='{!! str_replace("'", "&apos;", $submenu->description) !!}'>
                                                        <i class="fas fa-info-circle float-right"></i>
                                                    </span>
                                                @endif
                                                @if(isset($submenu->frabklangwatch))
                                                    <i class="fas fa-check-circle float-right text-success"></i>
                                                @endif
                                            </div>

                                        </h6>
                                        <div class="card-body p-10 frablang-subcategory-detils text-center">
                                            <div class="frablang-subcategory" style="min-height: 100px">
                                                <img src="{{ getEmbededImage('/submenu_icon/'.$submenu->icon)  }}" alt="{{$submenu->menu_name}}" height="100" width="100">
                                                <div class="frablang-treat-video-content">
                                                    <button style="background: {{ $submenu->direction_status }}" class="fetch" type="button" data-sub="{{$submenu->id}}" data-pro="{{$data['product_id']}}">
                                                        <i class="fa fa-play" aria-hidden="true"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                {{-- include layout dashboard Right Section --}}
                @include('Frontend.partials.includes.layout-dashright')

            </div>

        </div>

    </div>
</section>

{{-- products view section /--}}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Start Frabklang</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Logo -->
        <div class="d-flex justify-content-center align-items-center pb-2">
            <div class="w-100 position-relative text-center" >
                <img src="{{ asset('frablang_img/blauloggo.png') }}" alt="" style="width: auto;height: 138px;">
            </div>
        </div>
        <!-- / Logo -->
        <form>
            <div class="form-group">
                <label class="form-label">Name:</label>
                <input type="text" name="fullname" class="form-control">
            </div>
            <div class="form-group">
                <label class="form-label">Gabdat:</label>
                <input type="date" class="form-control" name="gabdat">
            </div>
            <div class="form-group">
                <label class="form-label">Thema:</label>
                <input type="text" class="form-control" name="thema">
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('action.close')}}</button>
        <button type="button" class="btn btn-primary" id="next_action">Start Treatment</button>
      </div>
    </div>
  </div>
</div>

<div class="modal crn-modal fade" id="frabklang_play" tabindex="-1" aria-labelledby="frabklang_play_label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="frabklang_play_label">{{ __('action.selected_analyses') }} : {{ $loginUser->fullName }} <span id="user_name"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="anadata">

      </div>
      <div class="modal-footer">
        <div class="custom-dropdown">
            <select class="custom-select" id="time_range">
                <option value="null">{{__('action.select_due_time')}}</option>
                <option class="without_red" value="3">3 {{__('action.waiting_minutes')}}</option>
                <option class="without_red" value="5">5 {{__('action.waiting_minutes')}}</option>
                <option value="10">10 {{__('action.waiting_minutes')}}</option>
                <option value="15">15 {{__('action.waiting_minutes')}}</option>
                <option value="30">30 {{__('action.waiting_minutes')}}</option>
                <option value="60">60 {{__('action.waiting_minutes')}}</option>
                <option value="240">240 {{__('action.waiting_minutes')}}</option>
            </select>
        </div>
        <a href="javascript:void(0)" id="treat_link1"><button class="btn btn-outline-success" id="treat_btn"><i class="fa fa-play-circle">&nbsp;</i>{{ __('action.start_btn') }}</button></a>
        <a href="javascript:void(0)" id="treat_link2"><button class="btn btn-success hide" id="due_btn" disabled><i class="fa fa-play-circle">&nbsp;</i>{{ __('action.start_btn') }}</button></a>
        <button type="button" class="btn btn-warning" data-dismiss="modal">{{__('action.close')}}</button>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
    <script>

        $(document).ready(function (){
            $('#play').on('click', function(){
                $("#frabklang_play").modal('show')
            })

            $(document).on('click', '.popover-data', function(){
                let id = $(this).data('id');
                $(`#info_${id}`).popover('show')
            })

            $(".fetch").on('click', function(){
                $('#time_range').val('null')
                let subid = $(this).attr('data-sub')
                let proid = $(this).attr('data-pro')
                let fetch_url = `{{url('reset4me/fetch')}}/${proid}/treat/${subid}`
                let treat_url = `{{url('reset4me/treat')}}/${proid}/${subid}`
                $.ajax({
                    type:'POST',
                    url: fetch_url,
                    dataType:"json",
                    success: function(res){
                        let status = true;
                        let data = ""
                        $("#treat_link1").attr("href", treat_url)
                        $("#time_range").attr('data-sub', subid)
                        $("#time_range").attr('data-pro', proid)
                        $("#time_range").attr('data-status', '')
                        $('#time_range').find('.without_red').show();
                        if(res.data.red_analyses != null) {
                            let analyses = res.data.red_analyses
                            $.each(analyses, function(index, analyse) {
                                data += `<div style="display:flex;gap:10px;">
                                            <div>
                                                <i class="fas fa-dot-circle text-danger"></i>
                                            </div>
                                            <div>`
                                if(analyse.lastOptVal != null){
                                    data += ` <p class="mb-0" style="font-weight:bold;">${analyse.ana_val}% optimize of ${analyse.lastOptVal}%</p><p style="font-weight:bold;">${analyse.ana_name}</p>`
                                }else{
                                    data += `<p style="font-weight:bold;">${analyse.ana_val}% ${analyse.ana_name}</p>`
                                }
                                data += `</div></div>`
                            })
                        } else if(res.data.orange_analyses != null) {
                            let analyses = res.data.orange_analyses
                            $.each(analyses, function(index, analyse) {
                                data += `<div style="display:flex;gap:10px;">
                                            <div>
                                                <i class="fas fa-dot-circle text-warning"></i>
                                            </div>
                                            <div>`
                                if(analyse.lastOptVal != null){
                                    data += ` <p class="mb-0" style="font-weight:bold;">${analyse.ana_val}% optimize of ${analyse.lastOptVal}%</p><p style="font-weight:bold;">${analyse.ana_name}</p>`
                                }else{
                                    data += `<p style="font-weight:bold;">${analyse.ana_val}% ${analyse.ana_name}</p>`
                                }
                                data += `</div></div>`
                            })
                        } else if(res.data.green_analyses != null) {
                            let analyses = res.data.green_analyses
                            $.each(analyses, function(index, analyse) {
                                data += `<div style="display:flex;gap:10px;">
                                            <div>
                                                <i class="fas fa-check-circle text-success"></i>
                                            </div>
                                            <div>`
                                if(analyse.lastOptVal != null){
                                    data += ` <p class="mb-0" style="font-weight:bold;">${analyse.ana_val}% optimize of ${analyse.lastOptVal}%</p><p style="font-weight:bold;">${analyse.ana_name}</p>`
                                }else{
                                    data += `<p style="font-weight:bold;">${analyse.ana_val}% ${analyse.ana_name}</p>`
                                }
                                data += `</div></div>`
                            })
                        } else {
                            status = false;
                            data += `<h3 class="text-bold text-success">{{__('action.no_analysis')}}</h3>`
                        }
                        if(!status){
                            $(".modal-footer").addClass('hide')
                        }else $(".modal-footer").removeClass('hide')
                        $("#anadata").html('')
                        $("#anadata").html(data)
                        $("#frabklang_play").modal('show')
                    },
                    error:function(res){}
                });
            })

            $("#time_range").on('change', function(){
                let time = $(this).find('option:selected').val()
                let subid = $(this).attr('data-sub')
                let proid = $(this).attr('data-pro')
                let status = $(this).attr('data-status')
                if(time != "null") {
                    // let treat_url = (status == "") ? `{{url('reset4me/duepower')}}/${proid}/${time}` : `{{url('reset4me/allred/duepower')}}/${proid}/${time}`
                    let treat_url = (status == "") ? `{{url('reset4me/duepower')}}/${proid}/${subid}/${time}` : `{{url('reset4me/allred/duepower')}}/${proid}/${time}`
                    $("#treat_link2").attr("href", treat_url)
                    $("#due_btn").attr("disabled", false)
                    $("#treat_btn").attr("disabled", true)
                    $("#due_btn").removeClass('hide')
                    $("#treat_btn").addClass('hide')
                } else {
                    let treat_url = (status == "") ? `{{url('reset4me/treat')}}/${proid}/${subid}` : `{{url('reset4me/allred/treat')}}/${proid}`
                    $("#treat_link1").attr("href", treat_url)
                    $("#treat_btn").attr("disabled", false)
                    $("#due_btn").attr("disabled", true)
                    $("#due_btn").addClass('hide')
                    $("#treat_btn").removeClass('hide')
                }
            })
        })

        $( "#select-box" ).click(function() {
            $("#topic_button").removeClass("dashActive_btn");
            $("#select-box").addClass("dashSelectActive_btn");
        });

        $('#select-box').change(function () {
            $("#topic_button").removeClass("dashActive_btn");
            dropdown = $('#select-box').val();
            $('#topicTab').hide();
            $('.tab-content').hide();
            $('#' + "tab-" + dropdown).show();
            $( "#select-box option[value='0']" ).hide();
        });

        $('#topic_button').click(function () {
            $("#select-box").removeClass("dashSelectActive_btn");
            $( "#select-box option[value='0']" ).show();
            $('.tab-content').hide();
            $("#select-box").find('option:selected').prop("selected", false);
            $("#topic_button").addClass("dashActive_btn");
            $('#topicTab').show();
        });


        $('#users_button').click(function () {
            $("#topic_button").removeClass("dashActive_btn");
            $('#topicTab').hide();
            $("#users_button").addClass("dashActive_btn");
            $("#tab-4").removeClass('hide');
            $("#tab-4").show();
        });

        $('body').on('click', function (e) {
            $('[data-toggle=popover]').each(function () {
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });
    </script>
@endsection