@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.boothdata')}}">
                            <div class="d-flex">
                                <div>
                                    <select id="set_idx" name="set_idx" class="form-select form-control-light" aria-label="Festival Index" onchange="searchFrm.submit()">
                                        @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>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <div class="row" id="cardInput">
            
            <div class="col-xl-12">
                <div class="card">

                    <div class="card-body">
                        
                        <ul class="nav nav-tabs mb-3">
                            @foreach($tab_list as $k => $v)
                            <li class="nav-item">
                                <a href="#{{ $k }}" data-bs-toggle="tab" aria-expanded="false" class="nav-link{{ (array_key_first($tab_list)==$k) ? ' active' : '' }}" data-id="{{ $v }}">
                                    <span class="d-md-block">{{ $k }}</span>
                                </a>
                            </li>
                            @endforeach
                        </ul>

                        <div class="tab-content">

                            @foreach($tab_list as $k => $v)
                            <div class="tab-pane show{{ (array_key_first($tab_list)==$k) ? ' active' : '' }}" id="{{ $k }}">
                                <div class="alert alert-dark list-inline-item p-1" role="alert">{{ trans('statistics_boothdata.전체 요약') }}</div>
                                <div class="table-responsive mb-4">
                                    <table class="stat_tab_1 table table-centered table-bordered mb-0" style="width:auto">
                                        <thead>
                                            <tr>
                                                <th class="text-center" rowspan="2" style="width:136px">{{ trans('statistics_boothdata.구분') }}</th>
                                                @foreach($group_list as $v2)
                                                @if(strpos('|'.$v.'|','|'.$v2['location_idx'].'|') !== false)
                                                <th class="text-center" colspan="2">{{ $v2['location_date'] }}</th>
                                                @endif
                                                @endforeach
                                                <th class="text-center" colspan="2">{{ trans('statistics_boothdata.합계') }}</th>
                                            </tr>
                                            <tr>
                                                @foreach($group_list as $v2)
                                                @if(strpos('|'.$v.'|','|'.$v2['location_idx'].'|') !== false)
                                                <th class="text-center" style="width:136px">{{ trans('statistics_boothdata.상담 건수') }}</th>
                                                <th class="text-center" style="width:136px">{{ trans('statistics_boothdata.가등록 수') }}</th>
                                                @endif
                                                @endforeach
                                                <th class="text-center" style="width:136px">{{ trans('statistics_boothdata.상담 건수') }}</th>
                                                <th class="text-center" style="width:136px">{{ trans('statistics_boothdata.가등록 수') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(config('var.booth_type_list') as $k2 => $v2)
                                            <tr>
                                                <td class="text-center">{{ $v2 }}</td>
                                                @foreach($group_list as $v2)
                                                @if(strpos('|'.$v.'|','|'.$v2['location_idx'].'|') !== false)
                                                <td class="text-center" id="{{ $v2['location_idx'].'-'.$k2.'-1' }}">-</td>
                                                <td class="text-center" id="{{ $v2['location_idx'].'-'.$k2.'-2' }}">-</td>
                                                @endif
                                                @endforeach
                                                <td class="text-center">-</td>
                                                <td class="text-center">-</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>          

                                <div class="alert alert-dark list-inline-item p-1" role="alert">{{ trans('statistics_boothdata.상세 요약') }}</div>
                                <div class="table-responsive mb-4">
                                    <table class="stat_tab_2 table table-centered mb-0 table-bordered" style="width:auto;--bs-table-accent-bg:none">
                                        <thead>
                                            <tr>
                                                <th class="text-center" rowspan="2" style="width:100px">{{ trans('statistics_boothdata.부스번호') }}</th>
                                                <th class="text-center" rowspan="2" style="width:136px">{{ trans('statistics_boothdata.구분') }}</th>
                                                <th class="text-center" rowspan="2" style="width:172px">{{ trans('statistics_boothdata.부스명') }}</th>
                                                @foreach($group_list as $v2)
                                                @if(strpos('|'.$v.'|','|'.$v2['location_idx'].'|') !== false)
                                                <th class="text-center" colspan="3">{{ $v2['location_date'] }}</th>
                                                @endif
                                                @endforeach
                                                <th class="text-center" colspan="2">{{ trans('statistics_boothdata.합계') }}</th>
                                            </tr>
                                            <tr>
                                                @foreach($group_list as $v2)
                                                @if(strpos('|'.$v.'|','|'.$v2['location_idx'].'|') !== false)
                                                <th class="text-center">{{ trans('statistics_boothdata.담당자') }}</th>
                                                <th class="text-center">{{ trans('statistics_boothdata.상담 건수') }}</th>
                                                <th class="text-center">{{ trans('statistics_boothdata.가등록 수') }}</th>
                                                @endif
                                                @endforeach
                                                <th class="text-center" style="width:135px">{{ trans('statistics_boothdata.상담 건수') }}</th>
                                                <th class="text-center" style="width:135px">{{ trans('statistics_boothdata.가등록 수') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody class="detail_row">
                                            <tr>
                                                <td colspan="99" class="p-4 text-center">No Data</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            @endforeach
                        
                        </div> <!-- end tab-content-->
                    </div> <!-- end card body-->

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

        </div>
        <!-- end row-->

    </div> <!-- container -->

@endsection

@section('script')
<script src="/template/js/jquery.number.min.js"></script>
<script>
    let booth_type_list = {!! json_encode(config('var.booth_type_list')) !!};
    let act_booth_idxs = '';
    let active_chk_intval;

    $('.tab-pane').each(function(){
        $(this).find('.stat_tab_1').css('width', (($(this).find('.stat_tab_1 thead tr:eq(0) th').length - 2) * 272) + 408);
        $(this).find('.stat_tab_2').css('width', (($(this).find('.stat_tab_2 thead tr:eq(0) th').length - 4) * 340) + 678);
    });

    function getData(){
        let location_idxs = $('li[class="nav-item"] .active').attr('data-id');
        
        if(location_idxs != ''){
            let act_el = $('.tab-pane.active');

            $.ajax({
                url: '/api/v1/statistics/booth/dataset?location_idxs='+location_idxs,
                datatype: 'json',
                success : function(res){
                    //전체요약
                    $.each(res.datas['all'], function(k, v){
                        $.each(v, function(k2, v2){
                            $('.stat_tab_1 #'+k+'-'+k2+'-1').text($.number(v2[0]));
                            $('.stat_tab_1 #'+k+'-'+k2+'-2').text($.number(v2[1]));
                        });
                    });
                    //전체요약(합계)
                    $.each(act_el.find('.stat_tab_1 tbody tr'), function(k, v){
                        let td_cnt = $(v).find('td').length;
                        let totsum1 = 0; //상담건수합계
                        let totsum2 = 0; //가등록합계
                        $.each($(v).find('td'), function(k2, v2){
                            if(k2 == 0 || k2 == td_cnt-2 || k2 == td_cnt-1) return true;
                            if(k2 % 2 == 0) totsum2 += parseInt($(this).text());
                            else totsum1 += parseInt($(this).text());
                        });
                        $(v).find('td:eq('+(td_cnt-2)+')').text($.number(totsum1)); //상담건수
                        $(v).find('td:eq('+(td_cnt-1)+')').text($.number(totsum2)); //가등록
                    });

                    //상세요약
                    let location_idxs_arr = location_idxs.split('|');
                    if(res.datas['det'][location_idxs_arr[0]].length > 0){
                        act_el.find('.detail_row').html('');
                        let chk_booth_num = [];
                        $.each(location_idxs_arr, function(k3, location_idx){
                            $.each(res.datas['det'][location_idx], function(k, v){
                                if($.inArray(v.booth_num, chk_booth_num) == -1){
                                    let tr_dom  = '<tr data-bn="'+v.booth_num+'" data-ti="'+v.booth_title+'">';
                                        tr_dom += '<td class="text-center booth_act_chk" data-bn="'+v.booth_num+'">'+v.booth_num+'</td>';
                                        tr_dom += '<td class="text-center">'+ ((typeof booth_type_list[v.booth_type] !== 'undefined') ? booth_type_list[v.booth_type] : '') +'</td>';
                                        tr_dom += '<td class="text-left">'+v.booth_title+'</td>';
                                        $.each(location_idxs_arr, function(k2, v2){
                                            tr_dom += '<td class="text-center" data-po="'+v2+':1">-</td>';
                                            tr_dom += '<td class="text-center counsel_cnt" data-po="'+v2+':2">-</td>';
                                            tr_dom += '<td class="text-center register_cnt" data-po="'+v2+':3">-</td>';
                                        });
                                        tr_dom += '<td class="text-center">-</td>';
                                        tr_dom += '<td class="text-center">-</td>';
                                        tr_dom += '</tr>';
                                    act_el.find('.detail_row').append(tr_dom);
                                    chk_booth_num.push(v.booth_num);
                                }
                            });
                        });
                        
                        //상세요약(나머지)
                        $.each(location_idxs_arr, function(k2, v2){
                            $.each(res.datas['det'][v2], function(k, v){
                                $.each(act_el.find('.detail_row tr'), function(){
                                    if($(this).attr('data-bn') == v.booth_num){
                                        if($(this).find('td[data-po="'+v2+':2"]').text() != '-') console.log(111);
                                        $(this).find('td[data-po="'+v2+':1"]').text(v.manager);
                                        $(this).find('td[data-po="'+v2+':2"]').text($.number(v.counsel_cnt));
                                        $(this).find('td[data-po="'+v2+':3"]').text($.number(v.register_cnt));
                                        return false;
                                    }
                                });
                            });
                        });
                        //상세요약(합계)
                        $.each(act_el.find('.stat_tab_2 tbody tr'), function(k, v){
                            let td_cnt = $(v).find('td').length;
                            let totsum1 = 0; //상담건수합계
                            let totsum2 = 0; //가등록합계
                            $.each($(v).find('td'), function(k2, v2){
                                if($(this).attr('class').indexOf('counsel_cnt') > -1) totsum1 += parseInt($.isNumeric($(this).text()) ? $(this).text() : 0);
                                if($(this).attr('class').indexOf('register_cnt') > -1) totsum2 += parseInt($.isNumeric($(this).text()) ? $(this).text() : 0);
                            });
                            $(v).find('td:eq('+(td_cnt-2)+')').text($.number(totsum1)); //상담건수
                            $(v).find('td:eq('+(td_cnt-1)+')').text($.number(totsum2)); //가등록
                        });
                    }
                    act_booth_idxs = res.datas['act'];
                    if($('select[name=set_idx] option:eq(0)').val() == $('select[name=set_idx] option:selected').val()){
                        act_booth_idxs = res.datas['act'];
                        isActive();
                        if(active_chk_intval) clearInterval(active_chk_intval);
                        active_chk_intval = setInterval(isActive, 5000);
                    }
                },
                error : function(xhr, status, error){
                    console.log(status+" : "+error);
                }
            });
        }
    }

    var sint;
    getData(); 

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

    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 
        if($('select[name=set_idx] option:eq(0)').val() == $('select[name=set_idx] option:selected').val()){
            clearInterval(sint);
            sint = setInterval(getData, 30000);
        }
        getData();
    });

    //부스 활성화여부 확인
    function isActive(){
        if(act_booth_idxs){
            $.ajax({
                url: '/api/v1/statistics/booth/actchk?booth_idxs='+act_booth_idxs,
                datatype: 'json',
                success : function(res){
                    $('.booth_act_chk').addClass('text-light').addClass('bg-danger');
                    $.each(res.datas, function(k, v){
                        $('.booth_act_chk').each(function(){
                            if($(this).attr('data-bn') == v.booth_num){
                                $(this).removeClass('bg-danger').addClass('bg-success');
                                return false;
                            }
                        })
                    });
                },
                error : function(xhr, status, error){
                    console.log(status+" : "+error);
                }
            });
        }
    }
</script>
@endsection