@extends('layouts.dashboard.app')

@section('content')

    <div class="content-wrapper">

        <section class="content-header">

            <section class="col-md-12">
                <ul class="breadcrumb mt-2">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard.welcome') }}">
                            <i class="fa fa-dashboard"></i> @lang('site.home')
                        </a>
                    </li>
                    <li class="breadcrumb-item active">
                        <i class="fa fa-file-text-o"></i> @lang('site.governanceSales')</a>
                    </li>
                    <li class="breadcrumb-item active">
                        <i class="fa fa-file-text-o"></i> @lang('site.dailyAssessment')</a>
                    </li>
                </ul>
            </section>

            <div class="container">

                <section class="content">
                    <div class="row">
                        <div class="box-body">
                            <div class="col-md-12">

                                <div class="box box-solid">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">تحت التجربة</h3>
                                    </div>
                                    @if(!$hasData)
                                        <div class="box-body border-radius-none">
                                            <div class="col-lg-12 col-xs-12">
                                                <div class="text-black">
                                                    <h4>التاريخ : {{now()}} </h4>
                                                    <h4>رقم الموظف : {{auth()->user()->cCode}} </h4>
                                                    <h4>الاسم : {{auth()->user()->name}} </h4>
                                                    <h4>القسم : {{isset(auth()->user()->department->name)?auth()->user()->department->name:''}} </h4>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="box-body border-radius-none" {{--style="height: 500px;"--}}>
                                            <div id="surveyElement" style="top: 0; left: 0; right: 0; bottom: 0;"></div>
                                        </div>
                                    @else
                                        <div class="box-body border-radius-none">
                                            <div class="col-lg-12 col-xs-12">
                                                <div class="text-black">
                                                    <h4>شكرا</h4>
                                                    <h4>لقد قمت بالارسال التقرير اليومي بافعل</h4>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

        </section>

    </div><!-- end of content wrapper -->

@endsection

@push('scripts')

    <script>
        $(document).ready(function () {
            // todo : كم عدد الزيارات التي قمت بها اليوم علماً بان اقل عدد 10 عميل؟   *
            // drop down not working with empty
            // childValue when showing also not working => fix

            const json = {!! $question->question_data !!};

            // Register a custom expression function
            function calculateCircleArea(params) {
                let radius = params[0];
                return Math.PI * Math.pow(radius, 2);
            }

            Survey.FunctionFactory.Instance.register("calculateCircleArea", calculateCircleArea);
            const storageItemKey = "my-survey";

            function saveSurveyData(survey) {
                const data = survey.data;
                data.pageNo = survey.currentPageNo;
                window.localStorage.setItem(storageItemKey, JSON.stringify(data));
            }

            const survey = new Survey.Model(json);
            survey.applyTheme(SurveyTheme.FlatLight);

            // survey.onComplete.add((sender, options) => {
            //     console.log(JSON.stringify(sender.data, null, 3));
            //     callApi(JSON.stringify(sender.data, null, 3));
            // });
            survey.setVariable('userName', 'Jane Doe');

            // Save survey results to the local storage
            survey.onValueChanged.add(saveSurveyData);
            survey.onCurrentPageChanged.add(saveSurveyData);

            // Restore survey results
            // let prevData = window.localStorage.getItem(storageItemKey) || null;
            let prevData = null;
            if (prevData == null) {
                prevData = {!! $answer_data !!};
            }
            if (prevData) {
                const data = prevData;
                survey.data = data;
                if (data.pageNo) {
                    survey.currentPageNo = data.pageNo;
                }
            }

            // Empty the local storage after the survey is completed
            survey.onComplete.add((sender, options) => {
                console.log(JSON.stringify(sender.data, null, 3));
                callApi(JSON.stringify(sender.data, null, 3));
                window.localStorage.setItem(storageItemKey, "");
            });

            ////// dropDowns

            try {
                survey.onChoicesLazyLoad.add((_, options) => {
                    if (options.question.getType() === "dropdown" || options.question.getType() === "tagbox") {
                        let type = "type";
                        switch (options.question.name) {
                            case "q4v_name":
                            case "q8v_name":
                            case "q11v_code":
                                type = "clients";
                                break
                            case "q11v_sample":
                            case "q8v_item_name":
                                type = "products";
                                break
                        }
                        const url = `{{route('dashboard.assessments.index')}}` + `/data/${type}/${options.filter || "search"}/find`;
                        sendRequest(url, (data) => {
                            options.setItems(data, (data.length || 0));
                        });
                    }
                });

                survey.onGetChoiceDisplayValue.add((_, options) => {
                    if (options.question.getType() === "dropdown" || options.question.getType() === "tagbox") {
                        let type = "type";
                        switch (options.question.name) {
                            case "q4v_name":
                            case "q8v_name":
                            case "q11v_code":
                                type = "clients";
                                break
                            case "q11v_sample":
                            case "q8v_item_name":
                                type = "products";
                                break
                        }
                        const valuesStr = options.values.map(value => "values=" + value).join("&");
                        const url = `{{route('dashboard.assessments.index')}}` + `/data/${type}/${valuesStr || "search"}/find`;
                        sendRequest(url, (data) => {
                            options.setItems(data);
                        });
                    }
                });

                function sendRequest(url, onloadSuccessCallback) {
                    const xhr = new XMLHttpRequest();
                    xhr.open("GET", url);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.onload = () => {
                        if (xhr.status === 200) {
                            onloadSuccessCallback(JSON.parse(xhr.response));
                        }
                    };
                    xhr.send();
                }
            } catch (error) {
                console.error("Unexpected Error:", error);
            }

            //////

            $("#surveyElement").Survey({model: survey});

            function callApi(data) {
                let main_url = '{{ route("dashboard.assessments.send") }}';
                let token = '{{ csrf_token() }}';

                let main_data = new FormData();
                main_data.append('data', data);
                main_data.append('_token', token);

                $.ajax({
                    url: main_url,
                    method: 'post',
                    data: main_data,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log("success");
                    },
                    error: function (xhr, status, error) {
                        console.log(status, error);
                    }
                })
            }
        });//end of delete

    </script>
@endpush