@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_booth')}}">
                            <div class="d-flex">
                                <div>
                                    <select id="set_idx" name="set_idx" class="form-select form-control-light" aria-label="Festival Index">
                                        <option selected>개별 박람회를 선택해주세요.</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="GO!!">
                            </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">일간 부스별 상담 현황</h4>
                        <p class="text-muted font-14">
                            오늘 <code>상담입력 된</code> 부스별 상담인원 입니다.
                        </p>

                        <div class="tab-content">
                            <div class="tab-pane show active" id="small-table-preview">
                                <div class="table-responsive-sm">
                                    <table class="table table-sm table-centered mb-0">
                                        <thead>
                                            <tr>
                                                <th>부스명</th>
                                                <th>담당자</th>
                                                <th>상담인원</th>
                                            </tr>
                                        </thead>
                                        <tbody id="boothCounselCntTableBody">

                                        	<tr><td colspan="3">데이터가 없습니다.</td></tr>

                                            <!--tr>
                                                <td>boothName</td>
                                                <td>boothManager</td>
                                                <td>counselingCnt</td>
                                            </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> <!-- container -->



@endsection




@section('script')

<script>

// 세미나정보 기본스트링
var boothListString = "<tr><td>boothName</td><td>boothManager</td><td>counselingCnt</td></tr>";

var setIdx = $("#set_idx").val();

function sleep (delay) {
   var start = new Date().getTime();
   while (new Date().getTime() < start + delay);
}

$(document).ready( function() {
	startPage();
});


var startPage = function(){
	if(setIdx > 0){
		setCntFunctions();
		intevalSp = setInterval(setCntFunctions, 30000);
	}else{
		$("#timeCntTableBody").html("<tr><td colspan='3'>선택된 박람회가 없습니다.</td></tr>");
		$("#boothCounselCntTableBody").html("<tr><td colspan='3'>선택된 박람회일정이 없습니다.</td></tr>");
	}
}


var setCntFunctions = function(){
    getSeminarListJson();
}


// 부스 상담카운팅 데이터 호출
var getSeminarListJson = function(){
	$("#boothCounselCntTableBody").html("<tr><td colspan='3'><img src='/template/images/ajax-loader.gif' width='100' height='100' /></td></tr>");
    $.ajax({
        url: '/api/v1/statistics/booth/counsel',
        datatype: 'json',
        data : {idx : setIdx, date : '{{date('Y-m-d')}}'},
        success : function(response){
            setBoothCounselCnt(response.datas);
            //setTimeout(setBoothCounselCnt, 1000);
        },
        error : function(xhr, status, error){
			console.log("정보를 확인하는데 문제가 발생했습니다. - getSeminarListJson");
        }
    });
}


// 부스별 정보 및 상담카운트 셋팅
var setBoothCounselCnt = function(boothJson){
    var boothTdString = "";
    //await sleep(1000);
    sleep(700);
    if(boothJson.length){
        $("#boothCounselCntTableBody").html("");
    }else{
        $("#boothCounselCntTableBody").html("<tr><td colspan='3'>선택된 날짜/지역의 부스데이터가 없습니다.</td></tr>");
    }
    $.each(boothJson, function (i, item){
        boothTdString = boothListString;
        boothTdString = boothTdString.replace("boothName", boothJson[i].boothTitle);
        boothTdString = boothTdString.replace("boothManager", boothJson[i].boothManager);
        boothTdString = boothTdString.replace("counselingCnt", boothJson[i].counselCount);
        $("#boothCounselCntTableBody").append(boothTdString);

    });
}
</script>
@endsection