@extends('common.layout')

@section('content')
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex justify-content-between align-items-center">
                    <h4 class="page-title">통계</h4>
                    <div>
                        <form name="searchFrm" method="get" action="{{route('statistics.index')}}">
                            <div class="d-flex">
                                <div>
                                    <select id="set_idx" name="set_idx" class="form-select form-control-light" aria-label="Festival Index">
                                        <option selected>{{ trans('statistics_index.박람회 선택') }}</option>
                                        @foreach ($sets as $set)
                                            <option value="{{$set->set_idx}}" @if (request('set_idx') == $set->set_idx)selected="selected"@endif>{{$set->set_title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <input type="submit" class="btn btn-sm btn-primary" value="search">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title mt-2 mb-3">List</h4>

                        <div class="table-responsive">
                            <div class="dataTables_wrapper dt-bootstrap4 no-footer">
                                <!-- S: Table Data -->
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table class="table table-centered w-100 dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
                                            <thead class="text-center">
                                                <tr>
                                                    <th>No.</th>
                                                    <th>{{ trans('statistics_index.내용') }}</th>
                                                    <th>{{ trans('statistics_index.다운로드') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-center">01</td>
                                                    <td>{{ trans('statistics_index.박람회별 희망 유학시기 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.leaveSetType', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">02</td>
                                                    <td>{{ trans('statistics_index.관심분야 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.studyType', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">03</td>
                                                    <td>{{ trans('statistics_index.박람회별 관심분야 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.studyTypeSetType', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">04</td>
                                                    <td>{{ trans('statistics_index.박람회별 거주지역 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.areaSetType', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">05</td>
                                                    <td>{{ trans('statistics_index.세미나별 참가신청 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.seminars', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">06</td>
                                                    <td>{{ trans('statistics_index.부스별 상담내역 상세정보 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.boothCounsel', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">07</td>
                                                    <td>{{ trans('statistics_index.온/오프라인 신청자 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.onOfflineRegister', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">08</td>
                                                    <td>{{ trans('statistics_index.온라인 세미나별 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.onlineSeminars', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">09</td>
                                                    <td>{{ trans('statistics_index.관심분야 비중 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.studyTypeCount', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">10</td>
                                                    <td>{{ trans('statistics_index.국가 비중 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.countryCount', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">11</td>
                                                    <td>{{ trans('statistics_index.박람회 상세정보 통계') }}</td>
                                                    <td class="text-center"><a href="{{route('statistics.detailInfo', ['set_idx' => request('set_idx')])}}" target="_blank" class="btn btn-sm btn-link p-0">Export<i class="mdi mdi-download ms-1"></i></a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- E: Table Data -->


                            </div>
                        </div> <!-- end table-responsive-->
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>

        <!-- end page title -->
{{--        <div class="row">--}}
{{--            <div class=" col-lg-6 order-lg-1">--}}
{{--                <div class="card">--}}
{{--                    <div class="card-body">--}}
{{--                        <h4 class=" mb-2">Reg Leave Chart<a href="{{route('statistics.categorySeminars.excel',request()->query())}}" target="_blank" class="btn p-0 m-0 btn-link float-end">Export All<i class="mdi mdi-download ms-1"></i></a></h4>--}}

{{--                        <div id="leave_set_type_chart"></div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <div class=" col-lg-6 order-lg-2">--}}
{{--                <div class="card">--}}
{{--                    <div class="card-body">--}}
{{--                        <h4>Total Sales <a href="{{route('statistics.categorySeminars.excel',request()->query())}}" target="_blank" class="btn p-0 m-0 btn-link float-end">Export All<i class="mdi mdi-download ms-1"></i></a></h4>--}}
{{--                        <div  id="study_type_chart"></div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="row">--}}
{{--            <div class="col-lg-6 order-lg-1">--}}
{{--                <div class="card">--}}
{{--                    <div class="card-body">--}}
{{--                        <h4 class="mb-2">Reg Study Type Chart <a href="{{route('statistics.categorySeminars.excel',request()->query())}}" target="_blank" class="btn p-0 m-0 btn-link float-end">Export All<i class="mdi mdi-download ms-1"></i></a></h4>--}}
{{--                        <div id="study_type_set_type_chart"></div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="col-lg-6 order-lg-2">--}}
{{--                <div class="card">--}}
{{--                    <div class="card-body">--}}
{{--                        <h4>Area Chart <a href="{{route('statistics.categorySeminars.excel',request()->query())}}" target="_blank" class="btn p-0 m-0 btn-link float-end">Export All<i class="mdi mdi-download ms-1"></i></a></h4>--}}
{{--                        <div id="area_set_type_chart"></div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

@endsection

<!-- 각페이지별 필요한 스크립트 선언 -->
@section('script')

    <!-- third party js -->
    <script src="/template/js/vendor/apexcharts.min.js"></script>
    <!-- third party js ends -->

    <!-- demo app -->
    <!-- end demo js-->
    <script>
        $(function () {
            var set_idx = $("#set_idx option:selected").val()
            $.ajax({
                method: 'get',
                url: '/statistics/leaveSetType',
                dataType: 'json',
                data: {
                  set_idx : set_idx
                },
                success: function (data) {
                    var leaveSetType = {
                        series: [{
                            name: "SAF",
                            data: data.data['SAF']
                        }, {
                            name: "UKF",
                            data: data.data['UKF']
                        }],
                        chart: {
                            toolbar: {
                                show: false
                            },
                            type: 'bar',
                            height: 420
                        },
                        dataLabels: {
                            enabled: false
                        },
                        markers: {
                            hover: {
                                sizeOffset: 4
                            }
                        },
                        xaxis: {
                            categories: data.ptc_leave['ptc_leave']
                        },
                    };
                    var chart = new ApexCharts(document.querySelector("#leave_set_type_chart"), leaveSetType);
                    chart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });


            $.ajax({
                method: 'get',
                url: '/statistics/studyType',
                dataType: 'json',
                success: function (data) {
                    var studyType = {
                        series: data.study_type.cnt,
                        labels: data.study_type.study_type,
                        chart: {
                            type: 'donut'
                        },
                        responsive: [{
                            breakpoint: 480,
                            options: {
                                chart: {
                                    width: "100%",
                                    height: 380,
                                },
                                legend: {
                                    position: 'bottom'
                                }
                            }
                        }]
                    };
                    var chart = new ApexCharts(document.querySelector("#study_type_chart"), studyType);
                    chart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });

            $.ajax({
                method: 'get',
                url: '/statistics/studyTypeSetType',
                dataType: 'json',
                success: function (data) {
                    var studyTypeSetType = {
                        series: [{
                            name: "SAF",
                            data: data.data['SAF']
                        }, {
                            name: "UKF",
                            data: data.data['UKF']
                        }],
                        chart: {
                            toolbar: {
                                show: false
                            },
                            type: 'bar',
                            height: 420
                        },
                        dataLabels: {
                            enabled: false
                        },
                        markers: {
                            hover: {
                                sizeOffset: 4
                            }
                        },
                        xaxis: {
                            categories: data.ptc_studyType['studyType']
                        },
                    };
                    var chart = new ApexCharts(document.querySelector("#study_type_set_type_chart"), studyTypeSetType);
                    chart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });

            $.ajax({
                method: 'get',
                url: '/statistics/areaSetType',
                dataType: 'json',
                success: function (data) {
                    var areaSetType = {
                        series: [{
                            name: "SAF",
                            data: data.data['SAF']
                        }, {
                            name: "UKF",
                            data: data.data['UKF']
                        }],
                        chart: {
                            toolbar: {
                                show: false
                            },
                            type: 'bar',
                            height: 420
                        },
                        dataLabels: {
                            enabled: false
                        },
                        markers: {
                            hover: {
                                sizeOffset: 4
                            }
                        },
                        xaxis: {
                            categories: data.ptc_area['ptc_area']
                        },
                    };
                    var chart = new ApexCharts(document.querySelector("#area_set_type_chart"), areaSetType);
                    chart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });
    </script>

@endsection