@extends('common.layout')

@section('content')
    <!-- Start 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.dayStatus_participant')}}">
                            <div class="d-flex">
                                <div>
                                    <select id="bundle_idx" name="bundle_idx" class="form-select form-control-light" aria-label="Festival Index" onchange="searchFrm.submit()">
                                        @foreach ($bundles as $bundle)
                                        <option value="{{$bundle->bundle_idx}}" @if (request('bundle_idx') == $bundle->bundle_idx)selected="selected"@endif>{{$bundle->bundle_title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title">{{ trans('statistics_daystatus_participant.참석자 전체 집계 현황') }}</h4>
                        <p class="text-muted font-14 mb-0">
                            - {{ trans('statistics_daystatus_participant.사전예약자') }} <code><nobr id="gnb_tot1">-</nobr>{{ trans('statistics_daystatus_participant.명') }}</code>,
                            {{ trans('statistics_daystatus_participant.박람회 전체 참석자') }} <code><nobr id="gnb_tot2">-</nobr>{{ trans('statistics_daystatus_participant.명') }}</code>,
                            {{ trans('statistics_daystatus_participant.박람회 참석자(동반인 제외)') }} <code><nobr id="gnb_tot3">-</nobr>{{ trans('statistics_daystatus_participant.명') }}</code>,
                            {{ trans('statistics_daystatus_participant.박람회 상담 인원') }} <code><nobr id="gnb_tot4">-</nobr>{{ trans('statistics_daystatus_participant.명') }}</code>,
                            {{ trans('statistics_daystatus_participant.박람회 상담건수') }} <code><nobr id="gnb_tot5">-</nobr>{{ trans('statistics_daystatus_participant.명') }}</code>,
                            {{ trans('statistics_daystatus_participant.박람회 가등록 건수') }} <code><nobr id="gnb_tot6">-</nobr>{{ trans('statistics_daystatus_participant.명') }}</code>
                        </p>
                        <p class="text-muted font-14">
                            - {{ trans('statistics_daystatus_participant.시간대별 집계 현황에는 재입장 고객 포함') }}
                        </p>

                        <div class="tab-content">
                            <div class="tab-pane show active" id="hoverable-rows-preview">
                                <div class="table-responsive">
                                    <table class="table table-centered mb-0 table-bordered" style="min-width:600px">
                                        <thead>
                                            <tr>
                                                <th width="5%" class="text-center bl br" rowspan="2">{{ trans('statistics_daystatus_participant.입장 시간대') }}</th>
                                                @foreach($group_list as $v)
                                                <th width="15%" class="text-center location_idx_list br" colspan="6" data-idx="{{ $v['location_idx'] }}">{{ $v['location_area'].' '.$v['location_date'] }}</th>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                @foreach($group_list as $v)
                                                <th width="5%" class="text-center">{{ trans('statistics_daystatus_participant.참석자(동반제외)') }}</th>
                                                <th width="5%" class="text-center">{{ trans('statistics_daystatus_participant.동반인') }}</th>
                                                <th width="5%" class="text-center">{{ trans('statistics_daystatus_participant.참석자(동반포함)') }}</th>
                                                <th width="5%" class="text-center">{{ trans('statistics_daystatus_participant.상담 건수') }}</th>
                                                <th width="5%" class="text-center">{{ trans('statistics_daystatus_participant.상담인원') }}</th>
                                                <th width="5%" class="text-center br">{{ trans('statistics_daystatus_participant.가등록 수') }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody id="timeCntTableBody">
                                            <tr>
                                                <td class="text-center bl br">09:00 ~ 09:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}09" data-idx="{{ $v['location_idx'] }}:9:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}09" data-idx="{{ $v['location_idx'] }}:9:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}09" data-idx="{{ $v['location_idx'] }}:9:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}09" data-idx="{{ $v['location_idx'] }}:9:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}09" data-idx="{{ $v['location_idx'] }}:9:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}09" data-idx="{{ $v['location_idx'] }}:9:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">10:00 ~ 10:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}10" data-idx="{{ $v['location_idx'] }}:10:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}10" data-idx="{{ $v['location_idx'] }}:10:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}10" data-idx="{{ $v['location_idx'] }}:10:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}10" data-idx="{{ $v['location_idx'] }}:10:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}10" data-idx="{{ $v['location_idx'] }}:10:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}10" data-idx="{{ $v['location_idx'] }}:10:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">11:00 ~ 11:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}11" data-idx="{{ $v['location_idx'] }}:11:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}11" data-idx="{{ $v['location_idx'] }}:11:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}11" data-idx="{{ $v['location_idx'] }}:11:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}11" data-idx="{{ $v['location_idx'] }}:11:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}11" data-idx="{{ $v['location_idx'] }}:11:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}11" data-idx="{{ $v['location_idx'] }}:11:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">12:00 ~ 12:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}12" data-idx="{{ $v['location_idx'] }}:12:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}12" data-idx="{{ $v['location_idx'] }}:12:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}12" data-idx="{{ $v['location_idx'] }}:12:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}12" data-idx="{{ $v['location_idx'] }}:12:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}12" data-idx="{{ $v['location_idx'] }}:12:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}12" data-idx="{{ $v['location_idx'] }}:12:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">13:00 ~ 13:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}13" data-idx="{{ $v['location_idx'] }}:13:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}13" data-idx="{{ $v['location_idx'] }}:13:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}13" data-idx="{{ $v['location_idx'] }}:13:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}13" data-idx="{{ $v['location_idx'] }}:13:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}13" data-idx="{{ $v['location_idx'] }}:13:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}13" data-idx="{{ $v['location_idx'] }}:13:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">14:00 ~ 14:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}14" data-idx="{{ $v['location_idx'] }}:14:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}14" data-idx="{{ $v['location_idx'] }}:14:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}14" data-idx="{{ $v['location_idx'] }}:14:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}14" data-idx="{{ $v['location_idx'] }}:14:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}14" data-idx="{{ $v['location_idx'] }}:14:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}14" data-idx="{{ $v['location_idx'] }}:14:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">15:00 ~ 15:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}15" data-idx="{{ $v['location_idx'] }}:15:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}15" data-idx="{{ $v['location_idx'] }}:15:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}15" data-idx="{{ $v['location_idx'] }}:15:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}15" data-idx="{{ $v['location_idx'] }}:15:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}15" data-idx="{{ $v['location_idx'] }}:15:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}15" data-idx="{{ $v['location_idx'] }}:15:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">16:00 ~ 16:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}16" data-idx="{{ $v['location_idx'] }}:16:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}16" data-idx="{{ $v['location_idx'] }}:16:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}16" data-idx="{{ $v['location_idx'] }}:16:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}16" data-idx="{{ $v['location_idx'] }}:16:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}16" data-idx="{{ $v['location_idx'] }}:16:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}16" data-idx="{{ $v['location_idx'] }}:16:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br">17:00 ~ 17:59</td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}17" data-idx="{{ $v['location_idx'] }}:17:1">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}17" data-idx="{{ $v['location_idx'] }}:17:4">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}17" data-idx="{{ $v['location_idx'] }}:17:5">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}17" data-idx="{{ $v['location_idx'] }}:17:2">-</td>
                                                <td class="text-center" data-date="{{ $v['location_date_ymd'] }}17" data-idx="{{ $v['location_idx'] }}:17:6">-</td>
                                                <td class="text-center br" data-date="{{ $v['location_date_ymd'] }}17" data-idx="{{ $v['location_idx'] }}:17:3">-</td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br"><b>{{ trans('statistics_daystatus_participant.합계') }}</b></td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-idx="{{ $v['location_idx'] }}:tot:1"><span>-</span></td>
                                                <td class="text-center" data-idx="{{ $v['location_idx'] }}:tot:4"><span>-</span></td>
                                                <td class="text-center" data-idx="{{ $v['location_idx'] }}:tot:5"><span>-</span></td>
                                                <td class="text-center" data-idx="{{ $v['location_idx'] }}:tot:2"><span>-</span></td>
                                                <td class="text-center" data-idx="{{ $v['location_idx'] }}:tot:6"><span>-</span></td>
                                                <td class="text-center br" data-idx="{{ $v['location_idx'] }}:tot:3"><span>-</span></td>
                                                @endforeach
                                            </tr>
                                            <tr>
                                                <td class="text-center bl br"><b>{{ trans('statistics_daystatus_participant.재입장') }}</b></td>
                                                @foreach($group_list as $v)
                                                <td class="text-center" data-idx="{{ $v['location_idx'] }}:rrc:1"><span>-</span></td>
                                                <td class="text-center"></td>
                                                <td class="text-center"></td>
                                                <td class="text-center"></td>
                                                <td class="text-center"></td>
                                                <td class="text-center br"></td>
                                                @endforeach
                                            </tr>
                                        </tbody>
                                    </table>
                                </div> <!-- end table-responsive-->                     
                            </div> <!-- end preview-->
                        
                        </div> <!-- end tab-content-->

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div><!-- end row-->

    </div> <!-- end container -->
@endsection

@section('script')
<script src="/template/js/jquery.number.min.js"></script>
<script>
    function getData(){
        let location_idxs = '';
        $('.location_idx_list').each(function(){
            if(location_idxs != '') location_idxs += '|';
            location_idxs += $(this).attr('data-idx');
        });

        if(location_idxs == ''){
            //조회할 데이터가 없는 경우
            $('div[class="table-responsive"]').html('<div class="text-center p-5">No Data</div>');
        }else{
            $('div[class="table-responsive"] table').css('width',parseInt($('div[class="table-responsive"] table').css('min-width').replace('px','')) * $('.location_idx_list').length);
            $.ajax({
                url: '/api/v1/statistics/entrance/hourly?location_idxs='+location_idxs,
                datatype: 'json',
                success : function(res){
                    let gnb_tot2 = 0; //박람회 전체 참석자
                    let gnb_tot3 = 0; //박람회 참석자(동반인 제외)
                    let gnb_tot4 = 0; //박람회 상담 인원
                    let gnb_tot5 = 0; //박람회 상담건수
                    let gnb_tot6 = 0; //박람회 가등록 건수
                    $('.location_idx_list').each(function(){
                        let idx = $(this).attr('data-idx');
                        let tt = res.datas[idx].time_table;
                        let rrc = res.datas[idx].re_register_cnt;
                        
                        let tot1 = 0; //참석자(총합)
                        let tot2 = 0; //동반인(총합)
                        let tot3 = 0; //전체(총합)
                        let tot4 = 0; //삼담건수(총합)
                        let tot5 = 0; //상담인원(총합)
                        let tot6 = 0; //가등록수(총합)
                        for(var i=9; i<=17; i++){
                            let t1 = $.number(tt[i][0]); //참석자 (동반인) / 전체
                            let t2 = $.number(tt[i][3]); //상담 건수
                            let t3 = $.number(tt[i][5]); //가등록 수
                            let t4 = $.number(tt[i][1]);
                            let t5 = $.number(tt[i][2]);
                            let t6 = $.number(tt[i][4]); //상담인원
                            tot1 += parseInt(tt[i][0]);
                            tot2 += parseInt(tt[i][1]);
                            tot3 += parseInt(tt[i][2]);
                            tot4 += parseInt(tt[i][3]);
                            tot5 += parseInt(tt[i][4]);
                            tot6 += parseInt(tt[i][5]);
                            $('td[data-idx="'+idx+':'+i+':1"]').text(t1);
                            $('td[data-idx="'+idx+':'+i+':4"]').text(t4);
                            $('td[data-idx="'+idx+':'+i+':5"]').text(t5);
                            $('td[data-idx="'+idx+':'+i+':2"]').text(t2);
                            $('td[data-idx="'+idx+':'+i+':3"]').text(t3);
                            $('td[data-idx="'+idx+':'+i+':6"]').text(t6);
                            
                            gnb_tot2 += parseInt(tt[i][2]);
                            gnb_tot3 += parseInt(tt[i][0]);
                            gnb_tot4 += parseInt(tt[i][4]);
                            gnb_tot5 += parseInt(tt[i][3]);
                            gnb_tot6 += parseInt(tt[i][5]);
                        }
                        $('td[data-idx="'+idx+':tot:1"] span').text($.number(tot1));
                        $('td[data-idx="'+idx+':tot:4"] span').text($.number(tot2));
                        $('td[data-idx="'+idx+':tot:5"] span').text($.number(tot3));
                        $('td[data-idx="'+idx+':rrc:1"] span').text($.number(rrc));
                        $('td[data-idx="'+idx+':tot:2"] span').text($.number(tot4));
                        $('td[data-idx="'+idx+':tot:6"] span').text($.number(tot5));
                        $('td[data-idx="'+idx+':tot:3"] span').text($.number(tot6));
                    });
                    //최상단 총합 셋팅
                    $('#gnb_tot1').text($.number(res.datas['participant_cnt']));
                    $('#gnb_tot2').text($.number(gnb_tot2));
                    $('#gnb_tot3').text($.number(gnb_tot3));
                    $('#gnb_tot4').text($.number(gnb_tot4));
                    $('#gnb_tot5').text($.number(gnb_tot5));
                    $('#gnb_tot6').text($.number(gnb_tot6));

                    var ymdh = getCurrentYmdH();
                    $('.blinking').removeClass('blinking');
                    $('[data-date='+ymdh+']').addClass('blinking');
                },
                error : function(xhr, status, error){
                    console.log(status+" : "+error);
                }
            });
        }
    }

    getData(); 

    //최근 데이터만 자동갱신
    if($('select[name=bundle_idx] option:eq(0)').val() == $('select[name=bundle_idx] option:selected').val()){
        setInterval(getData, 30000);
    }

    function getCurrentYmdH() {
        var now = new Date();
        var year = now.getFullYear();
        var month = String(now.getMonth() + 1).padStart(2, '0');
        var day = String(now.getDate()).padStart(2, '0');
        var hours = String(now.getHours()).padStart(2, '0');
        return `${year}${month}${day}${hours}`;
    }
</script>
@endsection