@extends('crud::show')

@section('header_right')
    <div class="school_show_header_right text-right">
        <button class="btn btn-normal-comfirm btn-school-show-reload text-white">刷新</button>
        <p class="last_updated_at mb-0">最後更新：<span>--</span></p>
        <p class="last_updated_at">*數據以財政年度計算</span></p>
    </div>
@endsection

@section('main_content')
    <div>
        <div class="school_show">
            <div class="row school_type">
                <div class="col">
                    <i class="las la-tag"></i>
                    @if($entry->is_organization == App\Models\School\School::ENUM_NO)
                        {{ optional($entry->schoolType)->nameLanguage }}
                    @else
                        {{ trans("backpack::quotation_inquiry.label.is_organization") }}
                    @endif
                </div>
            </div>

            {{-- School information row--}}
            <div class="row mb-5">
                <div class="col-12 col-lg-7 col-xl-8 mb-2 mb-xl-0 school_information">
                    {{-- School information --}}
                    <div class="row">
                        <div class="col-12 base_selector">
                            <i class="las la-home la-2x"></i>
                            {{ $entry->name." ".optional($entry->district)->namelanguage }}
                        </div>
                        @if(!empty($entry->address))
                            <div class="col-12">
                                <i class="las la-location-arrow"></i>
                                {{ $entry->address }}
                            </div>
                        @endif
                        @if(!empty($entry->email))
                            <div class="col-12">
                                <i class="la la-envelope"></i>
                                {{ $entry->email }}
                            </div>
                        @endif
                        @if(!empty($entry->telephone))
                            <div class="col-12">
                                <i class="las la-phone"></i>
                                {{ $entry->telephone }}
                            </div>
                        @endif
                        @if(!empty($entry->fix))
                            <div class="col-12">
                                <i class="las la-fax"></i>
                                {{ $entry->fix }}
                            </div>
                        @endif
                        @if(!empty($entry->website))
                            <div class="col-12">
                                <i class="las la-window-minimize"></i>
                                {{ $entry->website }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="col-12 col-lg-5 col-xl-4">
                    {{-- School liaison officers --}}
                    <div class="school_liaison_officers">
                        <i class="las la-user"></i>
                        @if(empty($schoolLiaisonOfficer_names))
                            <span class="mb-1">
                                {{ trans("backpack::school.statistic.schoolLiaisonOfficers.no_admin") }}
                            </span>
                        @else
                            <span class="mb-1">
                                <span>{{ trans("backpack::school.statistic.schoolLiaisonOfficers.school") }} {{$schoolLiaisonOfficer_names}}</span>
                                <br>
                                <span>(共{{$count_schoolLiaisonOfficer}}位專員)</span>
                            </span>
                        @endif

                        <br>
                        <span class="mb-1">{{ trans("backpack::school.statistic.schoolLiaisonOfficers.unt") }} {{$unit_name}}</span>

                        @if($count_schoolLiaisonOfficer > 2)
                            <a style="color:white" href="{{route('admin.school_liaison_officers_for_view_by_school.index').'?school_id=["'.$entry->getKey().'"]'}}"><i class="las la-angle-right"></i></a>
                        @endif
                    </div>
                </div>
            </div>

            {{-- School Statistic --}}
            <div class="row mb-5 school_statistic">
                <div class="col-sm-12 col-md totalInquiry">
                    <span>--</span>
                    {{ trans("backpack::school.statistic.currentYear").trans("backpack::school.statistic.totalInquiry") }}
                </div>
                <div class="col-sm-12 col-md totalCompletedInquiry">
                    <span>--</span>
                    {{ trans("backpack::school.statistic.currentYear").trans("backpack::school.statistic.totalCompletedInquiry") }}
                </div>
                <div class="col-sm-12 col-md totalNoOfstudent">
                    <span>--</span>
                    {{ trans("backpack::school.statistic.currentYear").trans("backpack::school.statistic.totalNoOfstudent") }}
                </div>
            </div>

            {{-- Google Chart --}}
            <div class="row mb-5 google-chart">
                <div class="col-xl-6">
                    <i class="las la-heart"></i>{{ trans("backpack::school.statistic.currentYear").trans("backpack::school.statistic.event_method") }}
                    <div id="school-chart-method">
                        {{-- Google Chart method--}}
                    </div>
                </div>
                <div class="col-xl-6">
                    <i class="las la-heart"></i>{{ trans("backpack::school.statistic.currentYear").trans("backpack::school.statistic.searchClass") }}
                    <div id="school-chart-class">
                        {{-- Google Chart Class--}}
                    </div>
                </div>
            </div>

            {{-- Last Teacher --}}
            <div class="row mb-3 lastTeacherWapper">
                <div class="col-12">
                <span class="lastTeacherTitle">
                    {{ trans("backpack::school.statistic.lastTeacher") }}
                </span>
                    <span class="lastTeacherNumber">--</span>
                </div>
            </div>
            <div class="row lastTeacher">

            </div>
        </div>
        <div class="mt-4">
            <div class="row">
                <div class="col-12 col-md-6">
                    <h2>最近期的校本服務</h2>
                </div>
                <div class="col-12 col-md-6 text-right">
                    <a href="{{route('admin.quotation_inquiry.index', ['school_id' => json_encode([$entry->getKey()]), 'status' => json_encode(['complete'])])}}" class="btn btn-normal-comfirm btn-list-toggle">
                        查看本單位服務紀錄
                    </a>
                </div>

                {{--                ?school_id=%5B"1106"%5D--}}
                @include('backpack::view.school.partials.school_ajax_datatable', [
                    'class' => 'completed_service',
                    'th_options' => $columns,
                    'crud' => $crud,
                    'api_url' => route('admin.school.completed_quotation', ['id' => $entry->getKey()])
                ])
            </div>
        </div>
    </div>
@endsection

@push("after_scripts")
    <link rel="stylesheet" type="text/css" href="{{ mix('packages/backpack/crud/css/school_show.css') }}">
@endpush
@push("after_scripts")
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        var schoolShow = {
            googleChartReady: false,
            statisticResult: null,
            reloadButton: function (all_teacher = false) {
                $(".btn-school-show-reload").click(function () {
                    let selfButton = $(this);
                    selfButton.append('<i class="las la-spinner la-spin"></i>');
                    selfButton.attr('disabled',true);

                    schoolShow.setStatistic({
                        'last_updated_at': "--"
                    });

                    $.ajax({
                        url: "{{ route("admin.school.statisticClearCache", ['school_id' => $entry->getKey()]) }}" ,
                        method: "get",
                        data: null,
                        success: function (result) {
                            schoolShow.load();

                            location.reload();
                        },
                        error: function () {
                            new Noty({
                                text: "re-Load statistic error",
                                type: 'error'
                            }).show();

                            selfButton.removeClass("la-spinner");
                        }
                    });
                });
            },
            load: function (all_teacher = false) {
                schoolShow.statisticResult = null;

                $.ajax({
                    url: "{{ route('admin.school.statistic', ['school_id' => $entry->getKey()]) }}?all_teacher=" + all_teacher ,
                    method: "get",
                    data: null,
                    success: function (result) {
                        schoolShow.statisticResult = result;

                        schoolShow.setStatistic(result);
                        schoolShow.drawChart();
                        schoolShow.setLastTeacher(result['lastTeacher'], result['teacherNumber']);
                    },
                    error: function (response) {

                        $.each(JSON.parse(response.responseText)['errors'], function (key, error) {
                            new Noty({
                                text: error,
                                type: 'error'
                            }).show();
                        });

                        new Noty({
                            text: "Load statistic error",
                            type: 'error'
                        }).show();
                    }
                });
            },
            drawChart: function () {
                if (schoolShow.statisticResult) {
                    // schoolShow.setChartTarget(schoolShow.statisticResult['searchTarget']);
                    schoolShow.setChartMethod(schoolShow.statisticResult['searchMethod']);
                    schoolShow.setChartClass(schoolShow.statisticResult['searchClass']);
                }
            },
            setStatistic: function (result) {
                $(".school_show_header_right .last_updated_at span").html(result['last_updated_at']);
                $(".school_statistic .totalInquiry span").html(result['totalInquiry']);
                $(".school_statistic .totalCompletedInquiry span").html(result['totalCompletedInquiry']);
                $(".school_statistic .totalNoOfstudent span").html(result['totalNoOfstudent']);
            },
            setChartTarget: function (result) {

                let rowData = [];
                result['data'].forEach(function (item) {
                    rowData.push([item.name, item.total]);
                });

                var noOptionNumber = parseInt(result['totalInquiry']) - parseInt(result['totalSearch']);
                if (noOptionNumber > 0) {
                    rowData.push(["{{ trans("backpack::school.statistic.noOption") }}", noOptionNumber]);
                }

                schoolShow.setPieChart("school-chart-target", rowData);

            },

            setChartMethod: function (result) {

                let rowData = [];
                result['data'].forEach(function (item) {
                    rowData.push([item.name, item.total]);
                });

                var noOptionNumber = parseInt(result['totalInquiry']) - parseInt(result['totalSearch']);
                if (noOptionNumber > 0) {
                    rowData.push(["{{ trans("backpack::school.statistic.noOption") }}", noOptionNumber]);
                }

                schoolShow.setPieChart("school-chart-method", rowData);

            },
            setChartClass: function (result) {
                let rowData = [];
                result['data'].forEach(function (item) {
                    rowData.push([item.name, item.total]);
                });

                var noOptionNumber = parseInt(result['totalInquiry']) - parseInt(result['totalSearch']);
                if (noOptionNumber > 0) {
                    rowData.push(["{{ trans("backpack::school.statistic.noOption") }}", noOptionNumber]);
                }

                schoolShow.setPieChart("school-chart-class", rowData);
            },
            setLastTeacher: function (result, teacherNumber) {

                if (result.length == 0) {
                    let _html = '';
                    _html += '<div class="col-12">'
                    _html += '  {{ trans("backpack::school.statistic.noTeacher")  }}'
                    _html += '</div>'

                    $(".lastTeacher").html(_html);

                    return 0;
                }

                let _html = '';
                _html = '<div class="col-12 col-xl-10"><div class="row">';
                result.forEach(function (item) {
                    let teacherUrl = "{{ route("admin.teacher.edit", ["id" => ":teacher_id"]) }}"

                    _html += '<div class="col-12 col-sm-6 col-md-4 col-xl-3">';
                    _html += '  <a class="link" href="' + teacherUrl.replace(':teacher_id', item.id) + '">';

                    // Avatar path
                    _html += '    <div class="avatar_path" style="background-color:white">';
                    _html += '      <i class="la la-user-circle la-3x"></i>';
                    _html += '    </div>';

                    // Name
                    _html += '    <div class="name">';
                    _html += '        ' + item.fullName + "<br/>";
                    _html += '        ' + item.positionLanguage;
                    _html += '    </div>';

                    // End element
                    _html += '  </a>';
                    _html += '</div>';
                });
                _html += '</div>';
                _html += '</div>';

                if(teacherNumber > result.length){
                    _html += '<div class="col-12 col-xl-2">';
                    _html += '<a class="btn btn-normal-comfirm" style="" href="{{ route('admin.teacher.index').'?school_id=["'.$entry->getKey().'"]'  }}">所有老師</a>';
                    _html += '</div>';
                }

                $(".lastTeacher").html(_html);
                $(".lastTeacherWapper .lastTeacherNumber").html(teacherNumber);
            },
            setPieChart: function (element_id, rowData) {
                if (rowData.length == 0) {
                    let _html = '';
                    _html += '<div style="text-align: center; padding:30px;" ">'
                    _html += '  {{ trans("backpack::school.statistic.noChartData")  }}'
                    _html += '</div>'

                    $("#" + element_id).html(_html)

                    return 0;
                }


                // Create the data table.
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Topping');
                data.addColumn('number', 'Slices');
                data.addRows(rowData);

                // Set chart options
                var options = {
                    chartArea: {width: '80%', height: '80%'},
                    height: $("#" + element_id).width() / 2
                };

                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.PieChart(document.getElementById(element_id));
                chart.draw(data, options);
            }
        }
        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages': ['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(schoolShow.drawChart);

        $(document).ready(function () {
            schoolShow.load();
            schoolShow.reloadButton();

            completed_service_datatable.order( [ 3, 'desc' ] )
                .draw();
        });

        //create trigger to resizeEnd event
        $(window).resize(function () {
            if (this.schoolResizeTO) {
                clearTimeout(this.schoolResizeTO);
            }

            this.schoolResizeTO = setTimeout(function () {
                schoolShow.drawChart();
            }, 500);
        });

    </script>
@endpush