@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">지난 통계 ( ~ 2020 이전)</h4>
                    <div>
                        <form name="searchFrm"">
                            <div class="d-flex">
                                <div>
                                    <select id="set_idx" name="set_idx" class="form-select form-control-light" aria-label="Festival Index">
                                        <option value="" selected>박람회를 선택하세요. </option>
                                        <option value="saf_008">제 8회 edm세계유학박람회</option>
                                        <option value="saf_007">제 7회 edm세계유학박람회</option>
                                        <option value="saf_006">제 6회 edm세계유학박람회</option>
                                        <option value="saf_005">제 5회 edm세계유학박람회</option>
                                        <option value="saf_004">제 4회 edm세계유학박람회</option>
                                        <option value="saf_003">제 3회 edm세계유학박람회</option>
                                        <option value="saf_002">제 2회 edm세계유학박람회</option>
                                        <option value="saf_001">제 1회 edm세계유학박람회</option>
                                    </select>
                                </div>
                            </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">
                                            </thead>
                                            <tbody>
                                                <td id="statistics-image-none">통계 조회를 위해 우측 상단 리스트에서 박람회를 선택해주세요.</td>
                                                <img id="statistics-image" class="picture" src="#" style='display:none; width: 100%; height: auto;'>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- E: Table Data -->
                            </div>
                        </div> <!-- end table-responsive-->
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>



@endsection

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

    <script>
        $(function(){
        });

        $("#set_idx").change(function(){
            let fileName = $("#set_idx").val();

            if (fileName) {
                $("#statistics-image-none").hide();
                $("#statistics-image").attr("src", "https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/manager/statistics/"+fileName+".png");
                $("#statistics-image").show();
            } else {
                $("#statistics-image-none").show();
                $("#statistics-image").hide();
            }
        });

        $("#statistics-image").click(function(){
            window.open(this.src);
        });
    </script>

@endsection