@extends("common.layout")

@section("header")
	{!! resource('css/dashboard.css') !!}
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ko.js"></script>
    {!! resource('js/dashboard/dashboard-common.js') !!}
@endsection

@section("content")

<div id="dashboard" class="inquiry">
		<div class="max-width">
			<form action="">
				<!-- 인쿼리 타입 선택 -->
				<div class="site-type flex">
					<button type="button" @class(['tab', 'active' => request()->input('services', 'total') == 'total']) data-services="total">전체</button>
					<button type="button" @class(['tab', 'active' => request()->input('services', 'total') == 'ielts']) data-services="ielts">인강</button>
					<button type="button" @class(['tab', 'active' => request()->input('services', 'total') == 'academy']) data-services="academy">어학원</button>
                    <input type="hidden" name="services" id="services" value="{{request()->input('services', 'total')}}">
				</div>
				<!-- 기간 조회  -->
				<article class="date-wrap flex">
					<div class="tab-menu flex">
                        <button type="button" class="tab" data-range="prev">전일</button>
                        <button type="button" class="tab" data-range="7days">지난7일</button>
                        <button type="button" class="tab" data-range="thismonth">이번달</button>
                        <button type="button" class="tab" data-range="lastmonth">지난달</button>
					</div>
					<div class="date flex">
                        <div class="date-input"><input type="text" name="dateRange" id="dateRange"><figure class="icon"></figure></div>
                        <input type="hidden" name="startDate" id="startDate" value="{{$data['date']['start_date'] ?? ""}}">
                        <input type="hidden" name="endDate" id="endDate" value="{{$data['date']['end_date'] ?? ""}}">
                        <input type="hidden" name="beforeStartDate" id="beforeStartDate" value="{{$data['date']['before_start_date'] ?? ""}}">
                        <input type="hidden" name="beforeEndDate" id="beforeEndDate" value="{{$data['date']['before_end_date'] ?? ""}}">
                        <div class="date-input"><input type="text" name="beforeDateRange" id="beforeDateRange"><figure class="icon"></figure></div>
					</div>
					<input type="submit" value="조회" class="btn-search">
                    <input type="hidden" name="selected_tab" id="selectedTab" value="{{ request('selected_tab') }}">
				</article>
			</form>

			<!-- Main summary / card -->
			<article class="summary-card flex">
				<div class="box">
					<div class="title">가입건 수
                        <button type="button" class="tooltipBtn" aria-label="가입회원 수 설명"></button>
                        <div class="tooltipBox">
                            <b><i class="white"></i>가입건 수</b>
                            <p>신규 가입건 수 (1계정당 1건으로 집계)</p>
                        </div>
                    </div>
					<div class="bottom">
                        <p class="number"><b>{{number_format($summeryStats->join['total'])}}</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date'])
                        <div class="info">
                            <div @class(['arrow', $summeryStats->join['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                            <div @class(['percent', $summeryStats->join['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$summeryStats->join['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->join['total_change_rate']))}}</span>%</b></div>
                            <div class="detail">{{$summeryStats->join['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->join['diff_total']))}}</div>
                        </div>
                        @endif
					</div>
				</div>
				<div class="box">
					<div class="title">인쿼리 수</div>
					<div class="bottom">
                        <p class="number"><b>{{number_format($summeryStats->inquiry['total'])}}</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date'])
                        <div class="info">
                            <div @class(['arrow', $summeryStats->inquiry['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                            <div @class(['percent', $summeryStats->inquiry['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$summeryStats->inquiry['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->inquiry['total_change_rate']))}}</span>%</b></div>
                            <div class="detail">{{$summeryStats->inquiry['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->inquiry['diff_total']))}}</div>
                        </div>
                        @endif
					</div>
				</div>
				<div class="box">
					<div class="title">방문자 수 <button type="button" class="tooltipBtn" aria-label="방문자 수 설명"></button>
                        <div class="tooltipBox">
                            <b><i class="white"></i>방문자 수</b>
                            <p>UV (사이트 방문자 수)</p>
                        </div>
                    </div>
					<div class="bottom">
                        <p class="number"><b>{{number_format($summeryStats->views['total'])}}</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date'] && $summeryStats->views['before_total'] > 0)
                        <div class="info">
                            <div @class(['arrow', $summeryStats->views['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                            <div @class(['percent', $summeryStats->views['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$summeryStats->views['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->views['total_change_rate']))}}</span>%</b></div>
                            <div class="detail">{{$summeryStats->views['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->views['diff_total']))}}</div>
                        </div>
                        @endif
					</div>
				</div>
				<div class="box">
					<div class="title">전환율 <button type="button" class="tooltipBtn" aria-label="전환율 설명"></button>
                        <div class="tooltipBox">
                            <b><i class="white"></i>전환율</b>
                            <p>(인쿼리 수/ UV) x 100(%)</p>
                        </div>
                    </div>
					<div class="bottom">
                        <p class="number"><b>{{number_format($summeryStats->conversion_rate['total'])}}%</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date']  && $summeryStats->views['before_total'] > 0)
                        <div class="info">
                            <div @class(['arrow', $summeryStats->conversion_rate['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                            <div @class(['percent', $summeryStats->conversion_rate['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$summeryStats->conversion_rate['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->conversion_rate['total_change_rate']))}}</span>%</b></div>
                            <div class="detail">{{$summeryStats->conversion_rate['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->conversion_rate['diff_total']))}}%</div>
                        </div>
                        @endif
					</div>
				</div>
			</article>
            @if(in_array(request()->input('services', 'total'),['total', 'academy']))
			<article class="chart1 flex academy">
				<p class="article-title">[어학원] 인쿼리 유입경로 및 추이</p>

				<div class="left-top">
					<div class="top flex">
						<div class="tab-menu flex">
							<button type="button" class="tab active">유입경로별</button>
							<button type="button" class="tab">일자별</button>
						</div>
					</div>
				</div>

				<div class="graph-wrap">
					<div class="graph active flex path">
						<div class="roundBox">
							<canvas id="chart1AcademyPath"></canvas> <!-- TODO 유입경로별 chart -->
						</div>
						<!-- TODO TABLE -->
						<table>
							<thead>
								<tr>
									<th>No</th>
									<th>유입경로</th>
									<th><button type="button" class="sort-btn" aria-sort="none">인입건 수</button></th>
									<th><button type="button" class="sort-btn" aria-sort="none">비중</button></th>
									<th><button type="button" class="sort-btn" aria-sort="none">증감</button></th>
								</tr>
							</thead>
							<tbody>
                            @foreach($data['inquiryInflowDailyData']['academy']['table'] as $row)
								<tr>
									<td class="num">{{$row->rank}}</td>
									<td class="text">{{$row->path_name}}</td>
									<td class="num-right">{{number_format($row->count)}}</td>
									<td class="num-right">{{number_format($row->percentage)}}%</td>
									<td @class(['num-right', $row->growth_rate > 0 ? 'up' : ($row->growth_rate == 0 ? '': 'down')])>{{number_format($row->growth_rate)}}%</td>
								</tr>
                            @endforeach
							</tbody>
							<tfoot>
								<tr>
									<td class="total">Total</td>
									<td class="text">-</td>
									<td class="num-right">{{ collect($data['inquiryInflowDailyData']['academy']['table'])->sum('count');}}</td>
									<td class="num-right">100%</td>
									<td>-</td>
								</tr>
							</tfoot>
						</table>
					</div>

					<div class="graph daily">
						<div class="roundBox">
{{--							<p>단위(천원)</p>--}}
							<canvas id="chart1AcademyDaily"></canvas> <!-- TODO 일자별 chart -->
						</div>
					</div>
				</div>

				<p class="info-text">회원가입 항목은 제외<br>삭제, 숨김처리된 인쿼리 포함</p>
			</article>
            @endif
            @if(in_array(request()->input('services', 'total'),['total', 'ielts']))
			<article class="chart1 flex ielts">
				<p class="article-title">[인강] 인쿼리 추이</p>

				<div class="left-top">
					<div class="top flex">
						<div class="tab-menu flex">
							<button type="button" class="tab active">유입경로별</button>
							<button type="button" class="tab">일자별</button>
						</div>
					</div>
				</div>

				<div class="graph-wrap">
					<div class="graph active flex path">
						<div class="roundBox">
							<canvas id="chart1IeltsPath"></canvas>
						</div>
						<table>
							<thead>
								<tr>
									<th>No</th>
									<th>유입경로</th>
									<th><button type="button" class="sort-btn" aria-sort="none">인입건 수</button></th>
									<th><button type="button" class="sort-btn" aria-sort="none">비중</button></th>
									<th><button type="button" class="sort-btn" aria-sort="none">증감</button></th>
								</tr>
							</thead>
							<tbody>
                                @foreach($data['inquiryInflowDailyData']['ielts']['table'] as $row)
                                <tr>
                                    <td class="num">{{$row->rank}}</td>
                                    <td class="text">{{$row->path_name}}</td>
                                    <td class="num-right">{{number_format($row->count)}}</td>
                                    <td class="num-right">{{number_format($row->percentage)}}%</td>
                                    <td @class(['num-right', $row->growth_rate > 0 ? 'up' : ($row->growth_rate == 0 ? '': 'down')])>{{number_format($row->growth_rate)}}%</td>
                                </tr>
                                @endforeach
							</tbody>
							<tfoot>
								<tr>
									<td class="total">Total</td>
									<td class="text">-</td>
									<td class="num-right">{{collect($data['inquiryInflowDailyData']['ielts']['table'])->sum('count')}}</td>
									<td class="num-right">100%</td>
									<td>-</td>
								</tr>
							</tfoot>
						</table>
					</div>
					<div class="graph daily">
						<div class="roundBox">
{{--							<p>단위(천원)</p>--}}
							<canvas id="chart1IeltsDaily"></canvas>
						</div>
					</div>
				</div>

				<p class="info-text">2차 방문경로로 집계 (2차 방문경로 값이 없는 경우 회원가입으로 귀속)<br>삭제, 숨김처리된 인쿼리 포함</p>
			</article>
            @endif
			<article class="chart2 join">
				<p class="article-title">회원가입 추이</p>
				<div class="left-top">
					<div class="top flex">
						<div class="tab-menu flex">
							<button type="button" class="tab active">일자별</button>
							<button type="button" class="tab">요일별</button>
						</div>
					</div>
				</div>
				<div class="graph-wrap roundBox">
					<div class="graph active">
						<p>단위(건수)</p>
						<canvas id="chart2Daily"></canvas> <!-- 일자별 chart -->
					</div>
					<div class="graph">
						<canvas id="chart2Week"></canvas> <!-- 요일별 chart -->
					</div>
				</div>
				<p class="info-text">가로축 항목은 조회기간(기본조회값) 기준으로 보여집니다.</p>
			</article>

			<article class="chart3">
				<p class="article-title">소셜별 회원가입 비중</p>

				<div class="roundBox flex">
					<div class="graph">
						<canvas id="chart3Social"></canvas> <!-- 소셜별 회원가입 비중 chart -->
					</div>
					<ul class="list">
						<li>
							<div class="title">소셜타입</div>
							<div><div class="imgWrap"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/kakao.svg" alt="카카오"></div>카카오</div>
							<div><div class="imgWrap"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/google.svg" alt="구글"></div>구글</div>
							<div><div class="imgWrap"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/naver.svg" alt="네이버"></div>네이버</div>
							<div><div class="imgWrap"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/google.svg" alt="구글"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/kakao.svg" alt="카카오"></div>구글+카카오</div>
							<div><div class="imgWrap"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/google.svg" alt="구글"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/naver.svg" alt="네이버"></div>구글+네이버</div>
							<div><div class="imgWrap"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/naver.svg" alt="네이버"><img src="{{ env('AWS_S3_IMG_URL') }}/dashboard/kakao.svg" alt="카카오"></div>네이버+카카오</div>
							<div>일반(이메일)</div>
							<div>Total</div>
						</li>
						<li>
							<div class="title">가입건 수</div>
							<div>{{$data['userProviderStats']['table']['kakao']['count'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['google']['count'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['naver']['count'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['google|kakao']['count'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['google|naver']['count'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['kakao|naver']['count'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['email']['count'] ?? 0}}</div>
							<div>{{$data['userProviderStats']['total']}}</div>
						</li>
						<li>
							<div class="title">비중</div>
                            <div>{{$data['userProviderStats']['table']['kakao']['ratio'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['google']['ratio'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['naver']['ratio'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['google|kakao']['ratio'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['google|naver']['ratio'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['kakao|naver']['ratio'] ?? 0}}</div>
                            <div>{{$data['userProviderStats']['table']['email']['ratio'] ?? 0}}</div>
							<div>100%</div>
						</li>
					</ul>
				</div>
                <p class="info-text">일반+소셜 가입은 소셜로 집계됩니다.<br>회원 1명당 연동된 소셜매체가 여러 개인 경우 차트 구성에서 제외 (표에서만 집계됩니다.)</p>

			</article>

			<article class="chart4">
				<p class="article-title">전체 인쿼리 대비 신규 가입자 비중</p>

				<div class="flex chart4-wrap">
					<div class="graph">
						<p>전체</p>
						<div class="roundBox">
							<div id="chart4AllNum" class="centerNumber">{{number_format($data['inquiryUserRatio']['total']['inquiry_count'])}}</div>
							<canvas id="chart4All"></canvas>
						</div>
					</div>
					<div class="graph">
						<p>어학원</p>
						<div class="roundBox">
							<div id="chart4AcademyNum" class="centerNumber">{{number_format($data['inquiryUserRatio']['academy']['inquiry_count'])}}</div>
							<canvas id="chart4Academy"></canvas>
						</div>
					</div>
					<div class="graph">
						<p>인강</p>
						<div class="roundBox">
							<div id="chart4IeltsNum" class="centerNumber">{{number_format($data['inquiryUserRatio']['ielts']['inquiry_count'])}}</div>
							<canvas id="chart4Ielts"></canvas>
						</div>
					</div>
				</div>
			</article>

		</div>
	</div>

@endsection

@push("script")
	<script>
        let searchBeforeDate = "{{$data['date']['before_range']}}";
        let searchDate = "{{$data['date']['range']}}";
		// 날짜 선택 플레이스홀더 처리
		document.addEventListener('DOMContentLoaded', function () {
			const dateInputs = document.querySelectorAll('.date-input input[type="date"]');
			dateInputs.forEach(function(input) {
				const placeholder = input.parentElement.querySelector('.fake-placeholder');
				const figure = input.parentElement.querySelector('figure');

				const updateVisibility = () => {
					if (!placeholder || !figure) return;
					if (document.activeElement === input) {
						placeholder.style.opacity = '0';
						figure.style.opacity = '1';
					} else {
						if (input.value) {
							placeholder.style.opacity = '0';
							figure.style.opacity = '1';
						} else {
							placeholder.style.opacity = '1';
							figure.style.opacity = '0';
						}
					}
				};

				input.addEventListener('focus', updateVisibility);
				input.addEventListener('blur', updateVisibility);
				input.addEventListener('input', updateVisibility);
				input.addEventListener('change', updateVisibility);

				// 초기 상태 반영
				updateVisibility();
			});
		});

		// 탭 메뉴 처리
		document.querySelectorAll('.tab-menu, .site-type').forEach(function(tabMenu) {
			const tabs = tabMenu.querySelectorAll('.tab');
			tabs.forEach(function(tab, idx) {
				tab.addEventListener('click', function() {
					// 탭 활성화 처리
					tabs.forEach(function(t) {
						t.classList.remove('active');
					});
					this.classList.add('active');

					// 부모 article 내 graph-wrap 처리
					const article = tabMenu.closest('article');
					if (article) {
						const graphWrap = article.querySelector('.graph-wrap');
						if (graphWrap) {
							const graphs = graphWrap.querySelectorAll('.graph');
							graphs.forEach(function(graph, gidx) {
								if (gidx === idx) {
									graph.classList.add('active');
								} else {
									graph.classList.remove('active');
								}
							});
						}
					}
				});
			});
		});




		/****************************************
			chart script
		****************************************/
        @if(in_array(request()->input('services', 'total'),['total', 'academy']))
        createBarChart('chart1AcademyPath',@json($data['inquiryInflowDailyData']['academy']['inflow']['labels']), @json($data['inquiryInflowDailyData']['academy']['inflow']['data']), @json($data['inquiryInflowDailyData']['academy']['inflow']['before_data']), '#66B6FF', '#D9D9D9', '#1D1D1F','inquiry');
        createLineChart('chart1AcademyDaily', @json($data['inquiryInflowDailyData']['academy']['date']['labels']), @json($data['inquiryInflowDailyData']['academy']['date']['before_data_label']), @json($data['inquiryInflowDailyData']['academy']['date']['data']), @json($data['inquiryInflowDailyData']['academy']['date']['before_data']), 'inquiry');
        @endif

        @if(in_array(request()->input('services', 'total'),['total', 'ielts']))
        createBarChart('chart1IeltsPath', @json($data['inquiryInflowDailyData']['ielts']['inflow']['labels']), @json($data['inquiryInflowDailyData']['ielts']['inflow']['data']), @json($data['inquiryInflowDailyData']['ielts']['inflow']['before_data']), '#4FCB37', '#D9D9D9','#1D1D1F', 'inquiry');
        createLineChart('chart1IeltsDaily', @json($data['inquiryInflowDailyData']['ielts']['date']['labels']),@json($data['inquiryInflowDailyData']['ielts']['date']['before_data_label']), @json($data['inquiryInflowDailyData']['ielts']['date']['data']), @json($data['inquiryInflowDailyData']['ielts']['date']['before_data']), 'inquiry');
        @endif

        createLineChart('chart2Daily', @json($data['userJoinStats']['labels']),[], @json($data['userJoinStats']['data']), @json($data['userJoinStats']['before_data']), 'inquiry');
        createBarChart('chart2Week', @json($data['weekChartData']['labels']), @json($data['weekChartData']['data']), @json($data['weekChartData']['beforeData']),"#FF928A", "#BFBFBF", ['#1D1D1F', '#1D1D1F', '#1D1D1F', '#1D1D1F', '#1D1D1F', '#FC5555', '#FC5555'], 'inquiry');

        createDoughnutChart('chart4All', ['인쿼리 전체', '회원가입'], [{{$data['inquiryUserRatio']['total']['inquiry_ratio']}}, {{$data['inquiryUserRatio']['total']['user_ratio']}}], ['#8979FF', '#FF8888'], 'inquiry')
        createDoughnutChart('chart4Academy', ['인쿼리 전체', '회원가입'], [{{$data['inquiryUserRatio']['academy']['inquiry_ratio']}}, {{$data['inquiryUserRatio']['academy']['user_ratio']}}], ['#339DFF', '#FF8888'], 'inquiry')
        createDoughnutChart('chart4Ielts', ['인쿼리 전체', '회원가입'], [{{$data['inquiryUserRatio']['ielts']['inquiry_ratio']}}, {{$data['inquiryUserRatio']['ielts']['user_ratio']}}], ['#30C214', '#FF8888'], 'inquiry')


        // TODO 소셜별 회원가입 비중
        function chart3Social(){
            const data = {
                labels: ['카카오', '구글', '네이버', '일반(이메일)'],
                datasets: [{
                    label: '가입건 수',
                    data: [{{$data['userProviderStats']['table']['kakao']['count'] ?? 0}}, {{$data['userProviderStats']['table']['google']['count'] ?? 0}}, {{$data['userProviderStats']['table']['naver']['count'] ?? 0}}, {{$data['userProviderStats']['table']['email']['count'] ?? 0}}],
                    backgroundColor: '#A79BFF',
                    borderRadius: 0,
                    barThickness: 26,
                }]
            };

            const allValues = [{{$data['userProviderStats']['table']['kakao']['count'] ?? 0}}, {{$data['userProviderStats']['table']['google']['count'] ?? 0}}, {{$data['userProviderStats']['table']['naver']['count'] ?? 0}}, {{$data['userProviderStats']['table']['email']['count'] ?? 0}}].filter(val => val !== null);
            const maxValue = allValues.length > 0 ? Math.max(...allValues) : 100;



            const customDataLabelPlugin = {
                id: 'customDataLabelPlugin',
                afterDatasetsDraw(chart, args, pluginOptions) {
                    const { ctx } = chart;
                    chart.data.datasets.forEach((dataset, datasetIndex) => {
                        const meta = chart.getDatasetMeta(datasetIndex);
                        meta.data.forEach((bar, index) => {
                            const value = dataset.data[index];
                            ctx.fillStyle = '#1D1D1F';
                            ctx.font = 'normal 11px Pretendard';
                            ctx.textAlign = 'left';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(value, bar.x + 10, bar.y);
                        });
                    });
                }
            };

            const config = {
                type: 'bar',
                data: data,
                options: {
                    indexAxis: 'y', // 가로 막대그래프
                    scales: {
                        x: {
                            beginAtZero: true,
                            max: getSuggestedMax(maxValue),
                            position: 'top',
                            ticks: {
                                stepSize: Math.floor(getSuggestedMax(maxValue) / 5),
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: true
                        }
                    }
                },
                plugins: [customDataLabelPlugin]
            };

            const myChart = new Chart(
                document.getElementById('chart3Social'),
                config
            );
        }
        chart3Social();
	</script>
@endpush