@extends('Frontend.partials.layout')

@section('content')
{{-- Main content section --}}
<section class="home">
    <div class="row">
        {{--section left --}}
        <div class="col-lg-8 col-sm-12">
            <div class="cui-example">
                {{-- dashboard content --}}
                <div class="row">
                    @if(!empty($products))
                        @foreach ($products as $product)
                            <div class="col-md-12">
                                <div class="card mb-3 dashboard-card">
                                     {{-- header section --}}
                                    <div class="card-header p-name">
                                        <h3 class="card-title">{{ ucfirst($product['product_name']) }}</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            @if($product['submenus'] != null)
                                                @foreach($product['submenus']->sortBy('menu_name') as $submenu)
                                                    <div class="col-md-4 col-sm-4 col-xl-4">
                                                        <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='{!! $submenu->description !!}'>
                                                                            <i class="fas fa-info-circle float-right"></i>
                                                                        </span>
                                                                    @endif
                                                                    @if($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="{{$submenu->product_id }}">
                                                                            <i class="fa fa-play" aria-hidden="true"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else

                        <div class="col-12">
                            <div class="card text-black  mb-3">
                                <div class="card-body">
                                    <h4 class="card-title text-danger text-center text-bold">{{trans('action.payment_alert')}}</h4>

                                    <div class="card-text">{!!trans('action.api_payment_due_message')!!}</div>
                                </div>
                            </div>
                        </div>

                    @endif


                </div>
            </div>
        </div>

        {{-- include layout dashboard Right Section --}}
        @include('Frontend.partials.includes.layout-dashright')
    </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') }} <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 value="3">3 {{__('action.waiting_minutes')}}</option>
                            <option 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>
</section>

@endsection

@section('scripts')
<script>

    $(document).ready(function (){
        $(".fetch").on('click', function(){
            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/duepower')}}/${proid}/${subid}/1`
            let treat_url = `{{url('reset4me/treat')}}/${proid}/${subid}`
            $('#time_range').val('null')
            $.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)

                    if(res.data.red_analyses != null) {
                        let analyses = res.data.red_analyses
                        $.each(analyses, function(index, analyse) {
                            data += `<p> <i class="fas fa-check-circle text-danger"></i> <b>${analyse.ana_val}% ${analyse.ana_name}</b></p>`
                        })
                    } else if(res.data.orange_analyses != null) {
                        let analyses = res.data.orange_analyses
                        $.each(analyses, function(index, analyse) {
                            data += `<p> <i class="fas fa-check-circle text-warning"></i> <b>${analyse.ana_val}% ${analyse.ana_name}</b></p>`
                        })
                    } else if(res.data.green_analyses != null) {
                        let analyses = res.data.green_analyses
                        $.each(analyses, function(index, analyse) {
                            data += `<p> <i class="fas fa-check-circle text-success"></i> <b>${analyse.ana_val}% ${analyse.ana_name}</b></p>`
                        })
                    } else {
                        status = false;
                        data += `<h3 class="text-bold text-success">No analyses found</h3>`
                    }
                    if(!status){
                        $(".modal-footer").addClass('hide')
                    }else $(".modal-footer").removeClass('hide')

                    $("#anadata").html(data)
                    $("#frabklang_play").modal('show')
                },
                error:function(res){}
            });
        })
        $('#users_button').click(function () {
            $("#topic_button").removeClass("dashActive_btn");
            $('#topicTab').hide();
            $("#users_button").addClass("dashActive_btn");
            $("#tab-4").removeClass('hide');
            $("#tab-4").show();
        });

        $("#time_range").on('change', function(){
            let time = $(this).find('option:selected').val()
            let subid = $(this).attr('data-sub')
            let proid = $(this).attr('data-pro')

            if(time != "null") {
                let treat_url = `{{url('reset4me/duepower')}}/${proid}/${subid}/${time}`
                $("#treat_link2").attr("href", treat_url)
                $("#due_btn").prop("disabled", false)
                $("#treat_btn").prop("disabled", true)
                $("#due_btn").removeClass('hide')
                $("#treat_btn").addClass('hide')
            } else {
                let treat_url = `{{url('reset4me/treat')}}/${proid}/${subid}`
                $("#treat_link1").attr("href", treat_url)
                $("#treat_btn").prop("disabled", false)
                $("#due_btn").prop("disabled", true)
                $("#due_btn").addClass('hide')
                $("#treat_btn").removeClass('hide')
            }
        })
    })


</script>
@endsection