@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="sales">
		<div class="max-width">
			<!-- 기간 조회  -->
			<form action="">
                <div class="site-type flex" style="width:200px;">
                    <button  type="button" @class(['tab', 'active', 'move-only'])>인강</button>
                    <button onclick="location.href='{{url('dashboard/academy-sales')}}'" type="button" @class(['tab', 'move-only'])>어학원</button>
                </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" placeholder="비교대상 날짜 선택하기"><figure class="icon"></figure></div>
					</div>
					<input type="submit" value="조회" class="btn-search">
				</article>

				<div class="refundType">
					<label><input id="type" type="checkbox" value="monthlyCancel"  name="type" @checked(Request::get("type") == "monthlyCancel" )><span>환불액 미반영 버전 (당월 환불건만 반영)</span></label>
				</div>
				<input type="hidden" name="selected_tab" id="selectedTab" value="{{ request('selected_tab') }}">
            </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) 환불액 반영 버전: 실 결제금액 + 취소 금액(부분취소+환불 포함)<br>
                                2) 환불액 미반영 버전:당월 이후 취소 금액 미반영</p>
                        </div>
                        <div class="tooltipBox">

                        </div>
                    </div>
					<div class="bottom">
						<p class="number"><b>{{number_format($summeryStats->sales['total'])}}</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date'])
						<div class="info">
							<div @class(['arrow', $summeryStats->sales['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
							<div @class(['percent', $summeryStats->sales['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$summeryStats->sales['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->sales['total_change_rate']))}}</span>%</b></div>
							<div class="detail">{{$summeryStats->sales['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->sales['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>신규 결제건 수 (취소 발생한 경우 집계에서 제외)</p>
                        </div>
                    </div>
					<div class="bottom">
						<p class="number"><b>{{number_format($summeryStats->count['total'])}}</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date'])
						<div class="info">
							<div @class(['arrow', $summeryStats->count['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
							<div @class(['percent', $summeryStats->count['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$summeryStats->count['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->count['total_change_rate']))}}</span>%</b></div>
							<div class="detail">{{$summeryStats->count['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->count['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>신규 가입건 수 (1계정당 1건으로 집계)</p>
                        </div>
                    </div>
					<div class="bottom">
						<p class="number"><b>{{number_format($summeryStats->user['total'])}}</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date'])
						<div class="info">
							<div @class(['arrow', $summeryStats->user['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                            <div @class(['percent', $summeryStats->user['diff_total'] > 0 ? 'up' : 'down'])>
                                <b><span>{{ $summeryStats->user['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs( $summeryStats->user['total_change_rate']))}}</span>%</b>
                            </div>
							<div class="detail">{{ $summeryStats->user['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($summeryStats->user['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>(결제건 수/ 가입건 수) x 100(%)</p>
                        </div>
                    </div>
					<div class="bottom">
						<p class="number"><b>{{number_format($summeryStats->change['total'])}}%</b></p>
                        @if($data['date']['before_start_date'] && $data['date']['before_end_date'])
                        <div class="info">
                            <div @class(['arrow', $summeryStats->change['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                            <div @class(['percent', $summeryStats->change['diff_total'] > 0 ? 'up' : 'down'])>
                                <b><span>{{ $summeryStats->change['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs( $summeryStats->change['diff_total']))}}</span>%</b>
                            </div>
{{--                            <div class="detail">{{ $totalStats['change']['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($totalStats['change']['diff_total']))}}</div>--}}
                        </div>
                        @endif
					</div>
				</div>
			</article>

			<article class="chart1 flex">
				<div class="left">
					<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>
								<button type="button" class="tab">요일별</button>
							</div>
						</div>
						<div class="info-header flex">
							<p class="info-text">가로축 항목은 조회기간(기본조회값) 기준으로 보여집니다.</p>
							<p>단위(만원)</p>
						</div>
					</div>
					<div class="graph-wrap roundBox">
						<div class="graph active">
{{--							<p>단위(천원)</p>--}}
							<canvas id="chart1Daily"></canvas> <!-- 일자별 chart -->
						</div>
						<div class="graph">
							<canvas id="chart1JoinCompare"></canvas> <!-- 가입대비비 chart -->
						</div>
						<div class="graph">
							<canvas id="chart1Week"></canvas> <!-- 요일별 chart -->
						</div>
					</div>
				</div>

				<div class="right roundBox">
					<p>결제 현황</p>
					<ul class="list list1">
						<li>
							<p class="title">총 결제건 수</p>
							<p class="unit"></p>
							<p class="num-right">{{number_format($data['totalStats']->payment_count)}}</p>
						</li>
						<li>
							<p class="title">쿠폰 사용액</p>
							<p class="unit">₩</p>
							<p class="num-right">{{number_format($data['totalStats']->coupon_usage)}}</p>
						</li>
						<li>
							<p class="title">부분 취소액</p>
							<p class="unit">₩</p>
							<p class="num-right down">{{$data['totalStats']->partial_refund_amount > 0 ? "-" : ""}}{{number_format($data['totalStats']->partial_refund_amount)}}</p>
						</li>
						<li>
							<p class="title">평균객단가(ARPPU)</p>
							<p class="unit">₩</p>
							<p class="num-right">{{number_format($data['totalStats']->average_price)}}</p>
						</li>
						<li>
							<p class="title">결제 취소(전액환불)</p>
							<p class="unit">₩</p>
							<p class="num-right down">{{$data['totalStats']->full_refund_amount > 0 ? "-" : ""}}{{number_format($data['totalStats']->full_refund_amount)}}</p>
						</li>
						<li>
							<p class="title">총 매출액</p>
							<p class="unit">₩</p>
							<p class="num-right">{{number_format($data['totalStats']->total_sales)}}</p>
						</li>
					</ul>
					<p>환급반 현황</p>
					<ul class="list list2">
						<li>
							<p class="title">결제건 수</p>
							<p class="unit"></p>
							<p class="num-right">{{number_format($data['refundData']['user_buy_count'])}}</p>
						</li>
						<li>
							<p class="title">환급건 수 (부분취소건 수)</p>
							<p class="unit"></p>
							<p class="num-right">{{number_format($data['refundData']['refund_count'])}}</p>
						</li>
						<li>
							<p class="title">환급액 (부분취소 합계)</p>
							<p class="unit">₩</p>
							<p class="num-right">{{number_format($data['refundData']['total_refund_price'])}}</p>
						</li>
					</ul>
				</div>
			</article>

			<div class="downloadWrap"><button type="button" class="btn download" onClick="getProductIeltsSalesDown();">다운받기 <i></i></button></div>
			<article class="chart2 roundBox">
				<div class="bar-chart">
					<p class="box-title">상품별 매출</p>
					<div class="info-header flex">
						<p class="info-text">리뉴얼 이전(25.06.20이전)과 이후 기간을 포함하여 조회하는 경우 데이터 정확도가 떨어질 수 있습니다.</p>
						<p>단위(만원)</p>
					</div>
					<div class="graph">
						<canvas id="chart2Products"></canvas> <!-- 상품별 매출 chart -->
					</div>
				</div>
				<table>
					<thead>
						<tr>
							<th>No</th>
							<th>상품명</th>
							<th>옵션명</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>
							<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['productStats'] as $key => $item)
                        @php
                            $rate = $data['productChartData']['growthRates'][$key];
                        @endphp
						<tr>
							<td class="num">{{$key + 1}}</td>
							<td class="left">{{$item->product_name}}</td>
							<td class="left">{{$item->product_option_name}}</td>
							<td>{{ucfirst($item->module)}}</td>
							<td class="num-right">{{number_format($item->coupon_usage) ?? 0}}</td>
							<td class="num-right">{{number_format($item->attempt_count)}}</td>
							<td class="num-right">{{number_format($item->payment_count)}}</td>
							<td class="num-right">{{number_format($item->total_sales)}}</td>
							<td>{{$item->overall_sales_contribution_percent}}%</td>
							<td @class(['num-right','up' => $rate > 0,'down' => $rate < 0]) >{{number_format($rate)}}%</td>
						</tr>
                    @endforeach
					</tbody>
					<tfoot>
						<tr>
							<td colspan="4" class="total">Total</td>
							<td class="num-right">{{number_format($data['productStats']->sum('coupon_usage'))}}</td>
							<td class="num-right">{{number_format($data['productStats']->sum('attempt_count'))}}</td>
							<td class="num-right">{{number_format($data['productStats']->sum('payment_count'))}}</td>
							<td class="num-right">{{number_format($data['productStats']->sum('total_sales'))}}</td>
							<td>{{$data['productStats']->sum('overall_sales_contribution_percent')}}%</td>
							<td>{{array_sum($data['productChartData']['growthRates'])}}%</td>
						</tr>
					</tfoot>
				</table>
			</article>
			<!-- 국가별 매출/ Chat + 통계 table -->
			<article class="chart3">
				<div class="roundBox module">
					<p class="box-title">모듈별 매출비중</p>
					<div class="chart-wrap flex">
						<div class="graph">
							<canvas id="chart3Module"></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['moduleChartData'] as $row)
                                <tr>
                                    <td class="num">{{ $loop->iteration }}</td>
                                    <td>{{ ucfirst($row['module']) }}</td>
                                    <td class="num-right">{{ number_format($row['count']) }}</td>
                                    <td class="num-right">{{ number_format($row['total_sales']) }}</td>
                                    <td>{{ rtrim(rtrim(number_format($row['ratio'], 1), '0'), '.') }}%</td>
                                </tr>
                            @endforeach
                            </tbody>
							<tfoot>
								<tr>
									<td>Total</td>
									<td>-</td>
									<td class="num-right">{{number_format($data['moduleChartData']->sum('count'))}}</td>
									<td class="num-right">{{number_format($data['moduleChartData']->sum('total_sales'))}}</td>
									<td>100%</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>

				<div class="roundBox module">
					<p class="box-title">국내 VS 해외 매출 비중</p>
					<div class="chart-wrap flex">
						<div class="graph">
							<canvas id="chart3Country"></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['areaRatio'] as $key => $row)
								<tr>
									<td class="num">{{ $loop->iteration }}</td>
									<td>{{$key == 'inner' ? "국내" : "해외"}}</td>
									<td class="num-right">{{number_format($row['payment_count'])}}</td>
									<td class="num-right">{{number_format($row['total_sales'])}}</td>
									<td>{{$row['ratio']}}%</td>
								</tr>
                                @endforeach
							</tbody>
							<tfoot>
								<tr>
									<td>Total</td>
									<td>-</td>
									<td class="num-right">{{number_format(collect($data['areaRatio'])->sum('payment_count'))}}</td>
									<td class="num-right">{{number_format(collect($data['areaRatio'])->sum('total_sales'))}}</td>
									<td>100%</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>

				<div class="two-chart flex">
					<div class="roundBox">
						<p class="box-title">국가별 가입비중</p>
						<div class="graph">
							<canvas id="chart3CountryJoin"></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>
								</tr>
							</thead>
							<tbody>
                            @foreach($data['countryJoinStats'] as $row)
                                @if($loop->iteration <= 10)
								<tr>
                                    <td class="num">{{ $loop->iteration }}</td>
									<td>{{$row->country_name}} ({{$row->country_code}})</td>
									<td class="num-right">{{number_format($row->user_count)}}</td>
                                    <td>{{$data['countryJoinRatio']->where('country', $row->country_name)->first()['ratio']}}%</td>
								</tr>
                                @endif
                            @endforeach
							</tbody>
							<tfoot>
								<tr>
									<td>Total</td>
									<td>-</td>
									<td class="num-right">{{number_format($data['countryJoinStats']->sum('user_count'))}}</td>
									<td>100%</td>
								</tr>
							</tfoot>
						</table>
					</div>
					<div class="roundBox">
						<p class="box-title">국가별 매출비중</p>
						<div class="graph">
							<canvas id="chart3CountrySales"></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['countrySalesStats'] as $key => $row)
                                @if($loop->iteration <= 10)
								<tr>
									<td class="num">{{$loop->iteration}}</td>
									<td><a href="javascript:void(0);" onClick="getCountryProductSales({{$row->country_id}})">{{$row->country_name}} ({{$row->country_code}})</a></td>
									<td class="num-right">{{number_format($row->payment_count)}}</td>
									<td class="num-right">{{number_format($row->total_sales)}}</td>
									<td>{{$data['countrySalesRatio']->where('country', $row->country_name)->first()['ratio']}}%</td>
								</tr>
                                @endif
                            @endforeach
							</tbody>
							<tfoot>
								<tr>
									<td>Total</td>
									<td>-</td>
                                    <td class="num-right">{{number_format($data['countrySalesStats']->sum('payment_count'))}}</td>
                                    <td class="num-right">{{number_format($data['countrySalesStats']->sum('total_sales'))}}</td>
									<td>100%</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</article>
		</div>
	</div>

@endsection

@push("script")
	<script>
        let searchBeforeDate = "{{$data['date']['before_range']}}";
        let searchDate = "{{$data['date']['range']}}";

        /****************************************
			chart script
		****************************************/
        //혼합 차트는 단독건으로 별도 공통화 X
        function chart1JoinCompare() {
            const ctx = document.getElementById('chart1JoinCompare').getContext('2d');

            const xLabels = @json($data['userChartData']['labels']);
            // 임의 데이터
            const dataSales = @json($data['userChartData']['data']);
            const dataJoin = @json($data['userChartData']['userData']);

            // 가입자 수 데이터의 최댓값 계산
            const joinValues = dataJoin.filter(val => val !== null && val !== undefined);
            const maxJoinValue = joinValues.length > 0 ? Math.max(...joinValues) : 0;

            // 매출 데이터의 최댓값 계산
            const salesValues = dataSales.filter(val => val !== null && val !== undefined);
            const maxSalesValue = salesValues.length > 0 ? Math.max(...salesValues) : 0;

            const chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: xLabels,
                    datasets: [
                        {
                            label: '가입자 수',
                            data: dataJoin,
                            backgroundColor: 'rgba(100, 149, 237, 0.3)',
                            borderRadius: 0,
                            order: 2,
                            yAxisID: "join"
                        },
                        {
                            label: '매출',
                            data: dataSales,
                            type: 'line',
                            borderColor: '#3CC3DF',
                            backgroundColor: '#fff',
                            fill: false,
                            order: 1,
                            tension: 0.4,
                            pointRadius: 4,
                            pointHoverRadius: 7,
                            pointHoverBackgroundColor: '#fff',
                            yAxisID: "sales"
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    scales: {
                        x: {
                            ticks: {
                                maxRotation: 0
                            }
                        },
                        // 'join' Y축 (가입자 수)
                        join: {
                            type: 'linear',
                            position: 'right', // 왼쪽 축
                            beginAtZero: true,
                            // 가입자 수 데이터의 최댓값 적용
                            max: getSuggestedMax(maxJoinValue),
                            ticks: {
                                // 가입자 수 데이터의 stepSize 조정
                                stepSize: Math.floor(getSuggestedMax(maxJoinValue) / 5),
                            },
                            title: {
                                display: true,
                                text: '가입자 수'
                            }
                        },
                        // 'sales' Y축 (매출)
                        sales: {
                            type: 'linear',
                            position: 'left', // 오른쪽 축
                            beginAtZero: true,
                            // 매출 데이터의 최댓값 적용
                            max: getSuggestedMax(maxSalesValue),
                            ticks: {
                                // 매출 데이터의 stepSize 조정
                                stepSize: Math.floor(getSuggestedMax(maxSalesValue) / 5),
                            },
                            grid: {
                                drawOnChartArea: false // 이 축의 그리드 라인은 그리지 않음
                            },
                            title: {
                                display: true,
                                text: '매출'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 10,
                                boxHeight: 10,
                                pointStyle: 'rect',
                            }
                        },
                        tooltip: {
                            callbacks: {
                                // 툴팁 제목 (X축 값)
                                title: function(context) {
                                    return '' + context[0].label;
                                },
                                // 툴팁 라벨 (dataset별 커스텀)
                                label: function(context) {
                                    let label = context.dataset.label || '';

                                    if (context.dataset.type === 'line') {
                                        let value = context.raw * 10000;
                                        return label + ': ' + value.toLocaleString() + '원';
                                    }

                                    let value = context.raw;
                                    return label + ': ' + value;
                                }
                            }
                        }
                    }
                }
            });
        }
        chart1JoinCompare();

        createLineChart('chart1Daily', @json($data['dailyChartData']['labels']), @json($data['dailyChartData']['beforeLabels']), @json($data['dailyChartData']['data']), @json($data['dailyChartData']['beforeData']), 'sales');
        createBarChart('chart1Week', @json($data['weekChartData']['labels']),@json($data['weekChartData']['data']) ,@json($data['weekChartData']['beforeData']), '#FF928A', '#BFBFBF', ['#1D1D1F', '#1D1D1F', '#1D1D1F', '#1D1D1F', '#1D1D1F', '#FC5555', '#FC5555']);
        createBarChart('chart2Products', @json($data['productChartData']['labels']),@json($data['productChartData']['data']),@json($data['productChartData']['beforeData']),'#A78ACB', '#BFBFBF');
        createDoughnutChart('chart3Module', ['Academic', 'General'], [{{$data['moduleChartData']['academic']['ratio'] ?? 0}}, {{$data['moduleChartData']['general']['ratio'] ?? 0}}]);
        createDoughnutChart('chart3Country', ['국내', '해외'], [{{$data['areaRatio']['inner']['ratio']}}, {{$data['areaRatio']['outer']['ratio']}}])
        createDoughnutChart('chart3CountryJoin',@json($data['countryJoinRatio']->pluck('country')), @json($data['countryJoinRatio']->pluck('ratio')), ['#4C78A8', '#F58518', '#E45756', '#72B7B2', '#54A24B', '#B279A2', '#9D755D'])
        createDoughnutChart('chart3CountrySales', @json($data['countrySalesRatio']->pluck('country')),@json($data['countrySalesRatio']->pluck('ratio')), ['#4C78A8', '#F58518', '#E45756', '#72B7B2', '#54A24B', '#B279A2', '#9D755D'])

        // 탭 메뉴 처리
        document.querySelectorAll('.tab-menu').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');
                                }
                            });
                        }
                    }
                });
            });
        });

        $("input[type='checkbox']").on("change", function () {
            $(this).parents('form').submit();
        });

        async function getCountryProductSales(countryId) {
            const href = "/dashboard/popup/country-sales?country_id=" + countryId + "&start_date={{$data['date']['start_date']}}&end_date={{$data['date']['end_date']}}&type={{Request::get("type", '')}}";
            window.open(href, "_blank", "width=900; height=1000");
        }


	</script>
@endpush