@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>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
    {!! 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 onclick="location.href='{{url('dashboard/ielts-sales')}}'" type="button" @class(['tab', 'move-only'])>인강</button>
                    <button type="button" @class(['tab','active', 'move-only'])>어학원</button>
                </div>
				<article class="date-wrap flex">
					<div class="date flex">
						<div class="date-input"><input type="text" name="monthRange" id="monthRange"><figure class="icon"></figure></div>
                        <input type="hidden" name="startMonth" id="startMonth" value="{{$data['date']['startMonth']}}">
                        <input type="hidden" name="endMonth" id="endMonth" value="{{$data['date']['endMonth']}}">
                        <input type="hidden" name="beforeStartMonth" id="beforeStartMonth" value="{{$data['date']['beforeStartMonth']}}">
                        <input type="hidden" name="beforeEndMonth" id="beforeEndMonth" value="{{$data['date']['beforeEndMonth']}}">
                        <div class="date-input"><input type="text" name="beforeMonthRange" id="beforeMonthRange" placeholder="비교대상 날짜 선택하기"><figure class="icon"></figure></div>
					</div>
					<input type="submit" value="조회" class="btn-search">
				</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>실 결제금액 + 취소 금액(부분취소+환불 포함)</p>
                        </div>
                    </div>
					<div class="bottom">
						<p class="number"><b>{{number_format($data['totalSummery']->price['total'])}}</b></p>
                        @if($data['date']['beforeStartMonth'] && $data['date']['beforeEndMonth'])
						<div class="info">
							<div @class(['arrow', $data['totalSummery']->price['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
							<div @class(['percent', $data['totalSummery']->price['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$data['totalSummery']->price['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->price['total_change_rate']))}}</span>%</b></div>
							<div class="detail">{{$data['totalSummery']->price['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->price['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($data['totalSummery']->count['total'])}}</b></p>
                        @if($data['date']['beforeStartMonth'] && $data['date']['beforeEndMonth'])
						<div class="info">
                            <div @class(['arrow', $data['totalSummery']->count['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                            <div @class(['percent', $data['totalSummery']->count['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$data['totalSummery']->count['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->count['total_change_rate']))}}</span>%</b></div>
                            <div class="detail">{{$data['totalSummery']->count['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->count['diff_total']))}}</div>
						</div>
                        @endif
					</div>
				</div>
				<div class="box">
					<div class="title">인쿼리건 수</div>
					<div class="bottom">
                        <p class="number"><b>{{number_format($data['totalSummery']->inquiry['total'])}}</b></p>
                        @if($data['date']['beforeStartMonth'] && $data['date']['beforeEndMonth'])
                            <div class="info">
                                <div @class(['arrow', $data['totalSummery']->inquiry['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                                <div @class(['percent', $data['totalSummery']->inquiry['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$data['totalSummery']->inquiry['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->inquiry['total_change_rate']))}}</span>%</b></div>
                                <div class="detail">{{$data['totalSummery']->inquiry['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->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>(결제건 수/ 인쿼리건 수) x 100(%)</p>
                        </div>
                    </div>
					<div class="bottom">
                        <p class="number"><b>{{number_format($data['totalSummery']->conversion_rate['total'])}}</b></p>
                        @if($data['date']['beforeStartMonth'] && $data['date']['beforeEndMonth'])
                            <div class="info">
                                <div @class(['arrow', $data['totalSummery']->conversion_rate['diff_total'] > 0 ? 'up' : 'down'])><figure></figure></div>
                                <div @class(['percent', $data['totalSummery']->conversion_rate['diff_total'] > 0 ? 'up' : 'down'])><b><span>{{$data['totalSummery']->conversion_rate['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->conversion_rate['total_change_rate']))}}</span>%</b></div>
                                <div class="detail">{{$data['totalSummery']->conversion_rate['diff_total'] > 0 ? "+" : "-"}}{{number_format(abs($data['totalSummery']->conversion_rate['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>
							</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">
							<canvas id="chart1Monthly"></canvas> <!-- 일자별 chart -->
						</div>
						<div class="graph">
							<canvas id="chart1JoinCompare"></canvas> <!-- 인쿼리 대비 chart -->
						</div>
					</div>
				</div>

                <div class="right roundBox">
                    <p>결제 현황</p>
                    <p class="box-info">(단위 : 만원)</p>
                    <ul class="list academy">
                        <li>
                            <b class="title">항목 구분</b>
                            <b class="count">건수</b>
                            <b class="num-right">매출액</b>
                        </li>
                        <li>
                            <p class="title">신규</p>
                            <p class="count">{{ $data['totalTypeStats']['new']['count'] }}</p>
                            <p class="num-right">{{ number_format($data['totalTypeStats']['new']['price']) }}</p>
                        </li>
                        <li>
                            <p class="title">재등록</p>
                            <p class="count">{{ $data['totalTypeStats']['re']['count'] }}</p>
                            <p class="num-right">{{ number_format($data['totalTypeStats']['re']['price']) }}</p>
                        </li>
                        <li>
                            <p class="title">변경</p>
                            <p class="count">{{ $data['totalTypeStats']['change']['count'] }}</p>
                            <p class="num-right">{{ number_format($data['totalTypeStats']['change']['price']) }}</p>
                        </li>
                        <li>
                            <p class="title">기타</p>
                            <p class="count">{{ $data['totalTypeStats']['etc']['count'] }}</p>
                            <p class="num-right">{{ number_format($data['totalTypeStats']['etc']['price']) }}</p>
                        </li>
                        <li>
                            <p class="title">환불</p>
                            <p class="count">{{ abs($data['totalTypeStats']['refund']['count']) }}</p>
                            <p class="num-right down">{{ number_format(-$data['totalTypeStats']['refund']['price']) }}</p>
                        </li>
                        <li>
                            <p class="title bold">총합계</p>
                            <p class="count bold">{{ $data['totalTypeStats']['total']['count'] }}</p>
                            <p class="num-right bold">{{ number_format($data['totalTypeStats']['total']['price']) }}</p>
                        </li>
                    </ul>
                </div>
			</article>

			<div class="downloadWrap"><button type="button" class="btn download" onClick="getProductAcademySalesDown();">다운받기 <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><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>
							<th><button type="button" class="sort-btn" aria-sort="none">증감율</button></th>
						</tr>
					</thead>
					<tbody>
                    @foreach($data['productData'] as $key => $item)
						<tr>
							<td class="num">{{$key + 1}}</td>
							<td class="left">{{$item->product_name}}</td>
							<td class="left">{{$item->product_option_name}}</td>
							<td>{{number_format($item->new_price ?? 0)}}</td>
                            <td class="num-right">{{number_format($item->renew_price) ?? 0}}</td>
							<td class="num-right">{{number_format($item->change_price) ?? 0}}</td>
							<td class="num-right red">{{number_format(-$item->refund_price) ?? 0}}</td>
							<td class="num-right">{{number_format($item->total_price)}}</td>
							<td>{{$item->sales_ratio}}%</td>
							<td @class(['num-right','up' => $item->growth_rate > 0,'down' => $item->growth_rate < 0]) >{{number_format($item->growth_rate)}}%</td>
						</tr>
                    @endforeach
					</tbody>
					<tfoot>
						<tr>
                            <td colspan="3" class="total">Total</td>
                            <td class="num-right">{{number_format($data['productData']->sum('new_price'))}}</td>
                            <td class="num-right">{{number_format($data['productData']->sum('renew_price'))}}</td>
                            <td class="num-right">{{number_format($data['productData']->sum('change_price'))}}</td>
                            <td class="num-right red">{{number_format(-$data['productData']->sum('refund_price'))}}</td>
                            <td class="num-right">{{number_format($data['productData']->sum('total_price'))}}</td>
                            <td>{{$data['productData']->sum('sales_ratio')}}%</td>
                            <td>{{$data['productData']->sum('growth_rate')}}%</td>
						</tr>
					</tfoot>
				</table>
			</article>
            <article class="roundBox">
                <div>
                    <p class="box-title">옵션별 결제건 수 상세</p>
                </div>
                <table>
                    <thead>
                    <tr>
                        <th>No</th>
                        <th>카테고리명</th>
                        <th>상품명</th>
                        <th>1개월(옵션1)</th>
                        <th>2개월(옵션2)</th>
                        <th>3개월(옵션3)</th>
                        <th>4개월(옵션4)</th>
                        <th>전체 결제건 수</th>
                        <th>비중</th>
                        <th>증감율</th>
                    </tr>
                    </thead>
                    <tbody>
                    @php
                        $no = 1;
                        // 전체합계 계산용
                        $grandOptionTotals = [1=>0,2=>0,3=>0,4=>0];
                        $grandTotal = 0;
                    @endphp

                    {{-- 전체 합계 계산용 사전 루프 --}}
                    @foreach($data['productOptionData'] as $category)
                        @foreach($category['products'] as $product)
                            @php
                                for ($i=1; $i<=4; $i++) {
                                    $grandOptionTotals[$i] += $product['options'][$i-1]['cnt'] ?? 0;
                                }
                                $grandTotal += $product['total'];
                            @endphp
                        @endforeach
                    @endforeach

                    {{-- 실제 출력 루프 --}}
                    @foreach($data['productOptionData'] as $category)
                        @php
                            // 카테고리 소계 계산
                            $categoryOptTotals = [1=>0,2=>0,3=>0,4=>0];
                            $categoryTotal = 0;
                            foreach($category['products'] as $p) {
                                for ($i=1; $i<=4; $i++) {
                                    $categoryOptTotals[$i] += $p['options'][$i-1]['cnt'] ?? 0;
                                }
                                $categoryTotal += $p['total'];
                            }
                        @endphp

                        @foreach($category['products'] as $idx=>$product)
                            @php
                                // 옵션별 cnt 배열 만들기
                                $optionCnts = [];
                                for ($i=1; $i<=4; $i++) {
                                    $optionCnts[$i] = $product['options'][$i-1]['cnt'] ?? 0;
                                }
                                $total = $product['total'];

                                // 비중
                                $ratio = $grandTotal > 0 ? round(($total / $grandTotal)*100,1) : 0;

                                // 증감율
                                $beforeTotal = $product['before_total'] ?? 0;
                                $changeRate = ($beforeTotal > 0) ? round((($total - $beforeTotal)/$beforeTotal)*100,1) : null;
                            @endphp
                            <tr>
                                @if($idx === 0)
                                    <td class="category" style="background-color:#F2EFF5"
                                        rowspan="{{ $category['products']->count()+1 }}">{{ $no++ }}</td>
                                    <td class="category" style="background-color:#F2EFF5"
                                        rowspan="{{ $category['products']->count()+1 }}">{{ $category['category_name'] }}</td>
                                @endif
                                <td>{{ $product['product_name'] }}</td>
                                <td>{{ $optionCnts[1] }}</td>
                                <td>{{ $optionCnts[2] }}</td>
                                <td>{{ $optionCnts[3] }}</td>
                                <td>{{ $optionCnts[4] }}</td>
                                <td>{{ $total }}</td>
                                <td>{{ $ratio }}%</td>
                                <td>
                                    @if(!is_null($changeRate))
                                        @if($changeRate > 0)
                                            <span style="color:blue">▲ {{ $changeRate }}%</span>
                                        @elseif($changeRate < 0)
                                            <span style="color:red">▼ {{ $changeRate }}%</span>
                                        @else
                                            {{ $changeRate }}%
                                        @endif
                                    @else
                                        –
                                    @endif
                                </td>
                            </tr>
                        @endforeach

                        {{-- 카테고리 소계 --}}
                        <tr class="bg-gray-50 font-bold" style="background-color:#E5E5EA">
                            <td colspan="1">소계</td>
                            <td>{{ $categoryOptTotals[1] }}</td>
                            <td>{{ $categoryOptTotals[2] }}</td>
                            <td>{{ $categoryOptTotals[3] }}</td>
                            <td>{{ $categoryOptTotals[4] }}</td>
                            <td>{{ $categoryTotal }}</td>
                            <td>
                                {{ $grandTotal>0 ? round($categoryTotal/$grandTotal*100,1).'%' : '0%' }}
                            </td>
                            <td></td>
                        </tr>
                    @endforeach
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="3">합계</td>
                        <td>{{ $grandOptionTotals[1] }}</td>
                        <td>{{ $grandOptionTotals[2] }}</td>
                        <td>{{ $grandOptionTotals[3] }}</td>
                        <td>{{ $grandOptionTotals[4] }}</td>
                        <td>{{ $grandTotal }}</td>
                        <td>100%</td>
                        <td></td>
                    </tr>
                    </tfoot>
                </table>
            </article>
		</div>
	</div>
@endsection

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



        $(document).ready(function() {

            // YYYY-MM 포맷 함수
            const formatMonth = d => {
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                return `${year}-${month}`;
            };

            // 초기값
            const currentStart = $('#startMonth').val();
            const currentEnd = $('#endMonth').val();
            const beforeStart = $('#beforeStartMonth').val();
            const beforeEnd = $('#beforeEndMonth').val();

            // ✅ 현재 기간 flatpickr
            let picker = flatpickr("#monthRange", {
                mode: "range",
                dateFormat: "Y-m",
                altInput: true,
                altFormat: "Y-m",
                locale: "ko",
                allowInput: true,
                plugins: [
                    new monthSelectPlugin({
                        shorthand: true,
                        dateFormat: "Y-m",
                        altFormat: "Y-m",
                        theme: "light"
                    })
                ],
                defaultDate: (currentStart && currentEnd) ? [currentStart, currentEnd] : null,
                onChange: function (selectedDates) {
                    // 탭 초기화
                    if (selectedDates.length === 2) {
                        $('#startMonth').val(formatMonth(selectedDates[0]));
                        $('#endMonth').val(formatMonth(selectedDates[1]));
                        checkAndActivateTab(selectedDates[0], selectedDates[1]); // 탭 체크
                    } else {
                        $('#startMonth').val('');
                        $('#endMonth').val('');
                    }
                }
            });

            $("#monthRange").parent().find('figure').on('click', function () {
                picker.open();
            });

            // ✅ 비교 기간 flatpickr
            let beforePickerOptions = {
                mode: "range",
                dateFormat: "Y-m",
                altInput: true,
                altFormat: "Y-m",
                locale: "ko",
                plugins: [
                    new monthSelectPlugin({
                        shorthand: true,
                        dateFormat: "Y-m",
                        altFormat: "Y-m",
                        theme: "light"
                    })
                ],
                onChange: function (selectedDates) {
                    if (selectedDates.length === 2) {
                        $('#beforeStartMonth').val(formatMonth(selectedDates[0]));
                        $('#beforeEndMonth').val(formatMonth(selectedDates[1]));
                    } else {
                        $('#beforeStartMonth').val('');
                        $('#beforeEndMonth').val('');
                    }
                },
                onReady: function(selectedDates, dateStr, instance) {
                    instance.currentYear = new Date().getFullYear() - 1; // 전년도
                    instance.redraw(); // 달력 UI 새로 그림
                }
            };

            if (beforeStart && beforeEnd) {
                beforePickerOptions.defaultDate = [beforeStart, beforeEnd];
            }

            let beforePicker = flatpickr("#beforeMonthRange", beforePickerOptions);

            $("#beforeMonthRange").parent().find('figure').on('click', function () {
                beforePicker.open();
            });

        });


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

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

            // 가입자 수 데이터의 최댓값 계산
            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();

        function createProductChart() {
            // PHP Collection을 JS 배열로 직렬화
            const productData = @json($data['productData']);

            // labels는 상품명 배열
            const labels = productData.map(item => item.product_name);

            // 올해 데이터 (만원 단위로 변환)
            const newData = productData.map(item => (item.new_price ?? 0) / 10000);
            const changeData = productData.map(item => (item.change_price ?? 0) / 10000);
            const renewData = productData.map(item => (item.renew_price ?? 0) / 10000);

            // 작년(비교) 데이터 (만원 단위로 변환)
            const beforeNewData = productData.map(item => (item.before_new_price ?? 0) / 10000);
            const beforeChangeData = productData.map(item => (item.before_change_price ?? 0) / 10000);
            const beforeRenewData = productData.map(item => (item.before_renew_price ?? 0) / 10000);

            const hasBeforeNew = beforeNewData.some(v => v !== 0);
            const hasBeforeChange = beforeChangeData.some(v => v !== 0);
            const hasBeforeRenew = beforeRenewData.some(v => v !== 0);

            let datasets = [
                {
                    label: '신규',
                    data: newData,
                    backgroundColor: '#8979FF', // 진한 색
                    stack: 'stack',
                },
                {
                    label: '재등록',
                    data: renewData,
                    backgroundColor: '#FF928A',
                    stack: 'stack',
                },
                {
                    label: '변경',
                    data: changeData,
                    backgroundColor: '#51D2ED',
                    stack: 'stack',
                },
            ];

            if (hasBeforeNew) {
                datasets.push({
                    label: '신규',
                    data: beforeNewData,
                    backgroundColor: 'rgba(155, 142, 240, 0.7)',
                    stack: 'beforeStack'
                });
            }

            if (hasBeforeChange) {
                datasets.push({
                    label: '변경',
                    data: beforeChangeData,
                    backgroundColor: 'rgba(92, 207, 230, 0.7)',
                    stack: 'beforeStack'
                });
            }

            if (hasBeforeRenew) {
                datasets.push({
                    label: '재방문',
                    data: beforeRenewData,
                    backgroundColor: 'rgba(248, 150, 150, 0.7)',
                    stack: 'beforeStack'
                });
            }

            const data = {
                labels: labels,
                datasets: datasets
            };

            // ======= 수정된 max 계산 로직 시작 =======
            // 1) 스택 이름 목록 수집 (없으면 '__default'로 처리)
            const stackNames = Array.from(new Set(datasets.map(ds => ds.stack || '__default')));

            // 2) 각 라벨(index)별로, 스택 그룹마다 합계를 계산하고,
            //    그 중 가장 큰 값(=그 라벨에서 가장 높은 스택 막대 높이)을 구함.
            const maxStackSumsPerLabel = labels.map((_, idx) => {
                const sumsForStacks = stackNames.map(stackName => {
                    return datasets
                        .filter(ds => (ds.stack || '__default') === stackName)
                        .reduce((sum, ds) => sum + (Number(ds.data[idx]) || 0), 0);
                });
                return Math.max(...sumsForStacks, 0);
            });

            // 3) 전체 라벨 중 가장 큰 값(만원 단위)
            let maxSalesValue = Math.max(...maxStackSumsPerLabel, 0);

            // 안전장치: max가 0이거나 NaN인 경우 최소값 설정
            if (!isFinite(maxSalesValue) || maxSalesValue <= 0) {
                maxSalesValue = 1;
            }
            // ======= 수정된 max 계산 로직 끝 =======
            const config = {
                type: 'bar',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        datalabels: {
                            color: '#000',
                            formatter: (value, context) => {
                                // 같은 index의 모든 스택 합계를 계산 (만원 단위로 이미 들어왔음)
                                const total = context.chart.data.datasets
                                    .map(ds => ds.data[context.dataIndex] || 0)
                                    .reduce((a, b) => a + b, 0);

                                // value가 0이거나 total이 0이면 라벨 숨김
                                if (total === 0 || value === 0) return '';

                                const percentage = (value / total * 100).toFixed(0) + '%';

                                // value는 이미 만원 단위라서 바로 출력
                                return `${Math.round(value)} (${percentage})`;
                            }
                        },
                        tooltip : {
                            callbacks : {
                                label: function(context) {
                                    // graphValue 그대로 들어옴
                                    const value = context.raw;
                                    // 원 단위로 포맷
                                    return new Intl.NumberFormat('ko-KR').format(value * 10000) + '원';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            stacked: true,
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            max: getSuggestedMax(maxSalesValue),
                            ticks: {
                                // 매출 데이터의 stepSize 조정
                                stepSize: Math.floor(getSuggestedMax(maxSalesValue) / 5),
                            },
                        },

                    }
                },
                plugins: [ChartDataLabels]
            };

            new Chart(
                document.getElementById('chart2Products'),
                config
            );
        }
        createProductChart();



        createLineChart('chart1Monthly', @json($data['monthlyChartData']['labels']), @json($data['monthlyChartData']['beforeLabels']), @json($data['monthlyChartData']['data']), @json($data['monthlyChartData']['beforeData']), 'sales');

        // 탭 메뉴 처리
        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();
        });
	</script>
@endpush