@extends('layouts.app')

@section('title', '수당지급현황통계')

@section('content')
<div class="px-4 py-6" x-data="{ activeTab: 'monthly' }">
    {{-- 페이지 헤더 + 필터 통합 --}}
    <div class="bg-white rounded-lg shadow-sm px-5 pt-4 pb-4 mb-4">
        <div class="flex items-center justify-between mb-3">
            <div>
                <h1 class="text-lg font-bold text-gray-800">수당지급현황통계</h1>
                <p class="text-xs text-gray-400 mt-0.5">
                    @if($filters['startYear'] == $filters['endYear'] && $filters['startMonth'] == $filters['endMonth'])
                        {{ $filters['startYear'] }}년 {{ $filters['startMonth'] }}월 수당 종합 통계
                    @else
                        {{ $filters['startYear'] }}년 {{ $filters['startMonth'] }}월 ~ {{ $filters['endYear'] }}년 {{ $filters['endMonth'] }}월 수당 종합 통계
                    @endif
                </p>
            </div>
            <a href="{{ route('finance.settlement', ['tab' => 'payment']) }}"
               class="inline-flex items-center gap-1 px-3 py-1.5 text-gray-500 hover:text-gray-700 bg-gray-50 hover:bg-gray-100 rounded text-xs transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                정산관리
            </a>
        </div>
        <form method="GET" action="{{ route('finance.settlement.payment-stats') }}">
            <div class="flex flex-wrap items-end gap-x-3 gap-y-2">
                {{-- 기간설정 체크박스 --}}
                <div class="flex items-center self-end pb-1.5">
                    <label class="flex items-center gap-1.5 cursor-pointer select-none">
                        <input type="checkbox" name="date_range" value="1"
                               {{ ($filters['startYear'] != $filters['endYear'] || $filters['startMonth'] != $filters['endMonth']) ? 'checked' : '' }}
                               onchange="togglePaymentDateRange(this.checked)"
                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <span class="text-xs font-medium text-gray-600 whitespace-nowrap">기간설정</span>
                    </label>
                </div>

                {{-- 단일 년/월 (기본) --}}
                <div id="ps-single-date" class="{{ ($filters['startYear'] != $filters['endYear'] || $filters['startMonth'] != $filters['endMonth']) ? 'hidden' : '' }} flex items-end gap-2">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">년도</label>
                        <select name="year" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                            @for ($y = now()->year; $y >= now()->year - 3; $y--)
                                <option value="{{ $y }}" {{ $filters['endYear'] == $y ? 'selected' : '' }}>{{ $y }}년</option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">월</label>
                        <select name="month" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                            @for ($m = 1; $m <= 12; $m++)
                                <option value="{{ $m }}" {{ $filters['endMonth'] == $m ? 'selected' : '' }}>{{ $m }}월</option>
                            @endfor
                        </select>
                    </div>
                </div>

                {{-- 기간 범위 (체크 시 표시) --}}
                <div id="ps-range-date" class="{{ ($filters['startYear'] != $filters['endYear'] || $filters['startMonth'] != $filters['endMonth']) ? '' : 'hidden' }} flex items-end gap-2">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">시작</label>
                        <select name="start_year" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                            @for ($y = now()->year; $y >= now()->year - 3; $y--)
                                <option value="{{ $y }}" {{ $filters['startYear'] == $y ? 'selected' : '' }}>{{ $y }}년</option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">&nbsp;</label>
                        <select name="start_month" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                            @for ($m = 1; $m <= 12; $m++)
                                <option value="{{ $m }}" {{ $filters['startMonth'] == $m ? 'selected' : '' }}>{{ $m }}월</option>
                            @endfor
                        </select>
                    </div>
                    <span class="text-gray-400 pb-2">~</span>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">종료</label>
                        <select name="end_year" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                            @for ($y = now()->year; $y >= now()->year - 3; $y--)
                                <option value="{{ $y }}" {{ $filters['endYear'] == $y ? 'selected' : '' }}>{{ $y }}년</option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">&nbsp;</label>
                        <select name="end_month" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                            @for ($m = 1; $m <= 12; $m++)
                                <option value="{{ $m }}" {{ $filters['endMonth'] == $m ? 'selected' : '' }}>{{ $m }}월</option>
                            @endfor
                        </select>
                    </div>
                </div>

                {{-- 상태 --}}
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">상태</label>
                    <select name="status" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">전체</option>
                        <option value="pending" {{ $filters['status'] === 'pending' ? 'selected' : '' }}>대기</option>
                        <option value="approved" {{ $filters['status'] === 'approved' ? 'selected' : '' }}>승인</option>
                        <option value="paid" {{ $filters['status'] === 'paid' ? 'selected' : '' }}>지급완료</option>
                        <option value="cancelled" {{ $filters['status'] === 'cancelled' ? 'selected' : '' }}>취소</option>
                    </select>
                </div>

                {{-- 지급유형 --}}
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">유형</label>
                    <select name="payment_type" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">전체</option>
                        <option value="deposit" {{ $filters['paymentType'] === 'deposit' ? 'selected' : '' }}>1차</option>
                        <option value="balance" {{ $filters['paymentType'] === 'balance' ? 'selected' : '' }}>2차</option>
                    </select>
                </div>

                {{-- 검색어 --}}
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">검색</label>
                    <input type="text" name="search" value="{{ $filters['search'] }}" placeholder="파트너명, 매니저, 고객사..."
                           class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-3 w-44 focus:border-indigo-500 focus:ring-indigo-500">
                </div>

                {{-- 조회 / 초기화 --}}
                <div class="flex items-end gap-1.5">
                    <button type="submit"
                            class="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-lg transition-colors">
                        조회
                    </button>
                    <a href="{{ route('finance.settlement.payment-stats') }}"
                       class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm rounded-lg transition-colors">
                        초기화
                    </a>
                </div>
            </div>
        </form>
    </div>

    <script>
    function togglePaymentDateRange(checked) {
        document.getElementById('ps-single-date').classList.toggle('hidden', checked);
        document.getElementById('ps-range-date').classList.toggle('hidden', !checked);
        document.querySelectorAll('#ps-single-date select').forEach(s => s.disabled = checked);
        document.querySelectorAll('#ps-range-date select').forEach(s => s.disabled = !checked);
    }
    document.addEventListener('DOMContentLoaded', function() {
        const checked = document.querySelector('input[name="date_range"]')?.checked || false;
        document.querySelectorAll('#ps-single-date select').forEach(s => s.disabled = checked);
        document.querySelectorAll('#ps-range-date select').forEach(s => s.disabled = !checked);
    });
    </script>

    {{-- 통계 카드 8개 --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {{-- 1. 총 수당 발생액 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">총 수당 발생액</p>
                    <p class="text-lg font-bold text-blue-600">{{ number_format($statsCards['total_amount']) }}<span class="text-xs font-normal">원</span></p>
                </div>
                <div class="w-9 h-9 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
        </div>
        {{-- 2. 지급 완료액 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">지급 완료액</p>
                    <p class="text-lg font-bold text-green-600">{{ number_format($statsCards['paid_amount']) }}<span class="text-xs font-normal">원</span></p>
                </div>
                <div class="w-9 h-9 bg-green-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
        </div>
        {{-- 3. 미지급액 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-orange-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">미지급액</p>
                    <p class="text-lg font-bold text-orange-600">{{ number_format($statsCards['unpaid_amount']) }}<span class="text-xs font-normal">원</span></p>
                </div>
                <div class="w-9 h-9 bg-orange-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
        </div>
        {{-- 4. 활성 파트너 수 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-indigo-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">활성 파트너 수</p>
                    <p class="text-lg font-bold text-indigo-600">{{ $statsCards['active_partners'] }}<span class="text-xs font-normal">명</span></p>
                </div>
                <div class="w-9 h-9 bg-indigo-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
            </div>
        </div>
        {{-- 5. 파트너 수당 합계 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-purple-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">파트너 수당</p>
                    <p class="text-lg font-bold text-purple-600">{{ number_format($statsCards['partner_sum']) }}<span class="text-xs font-normal">원</span></p>
                </div>
                <div class="w-9 h-9 bg-purple-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                </div>
            </div>
        </div>
        {{-- 6. 매니저 수당 합계 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-teal-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">매니저 수당</p>
                    <p class="text-lg font-bold text-teal-600">{{ number_format($statsCards['manager_sum']) }}<span class="text-xs font-normal">원</span></p>
                </div>
                <div class="w-9 h-9 bg-teal-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
            </div>
        </div>
        {{-- 7. 유치 수당 합계 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-amber-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">유치 수당</p>
                    <p class="text-lg font-bold text-amber-600">{{ number_format($statsCards['referrer_sum']) }}<span class="text-xs font-normal">원</span></p>
                </div>
                <div class="w-9 h-9 bg-amber-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                </div>
            </div>
        </div>
        {{-- 8. 건당 평균 수당 --}}
        <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-gray-400">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">건당 평균 수당</p>
                    <p class="text-lg font-bold text-gray-700">{{ number_format($statsCards['avg_commission']) }}<span class="text-xs font-normal">원</span></p>
                </div>
                <div class="w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
                </div>
            </div>
        </div>
    </div>

    {{-- 차트 영역 --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        {{-- 차트 1: 월별 지급 추이 (Stacked Bar) --}}
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">월별 수당 추이</h3>
            <div class="relative" style="height: 300px;">
                <canvas id="monthlyTrendChart"></canvas>
            </div>
        </div>

        {{-- 차트 2: 수당 유형별 비율 (Doughnut) --}}
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">수당 유형별 비율</h3>
            <div class="relative" style="height: 300px;">
                <canvas id="typeRatioChart"></canvas>
            </div>
        </div>

        {{-- 차트 3: 파트너별 수당 Top 10 (Horizontal Bar) --}}
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">파트너별 수당 Top 10</h3>
            <div class="relative" style="height: 300px;">
                <canvas id="topPartnersChart"></canvas>
            </div>
        </div>

        {{-- 차트 4: 상태별 건수 분포 (Doughnut) --}}
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">상태별 건수 분포</h3>
            <div class="relative" style="height: 300px;">
                <canvas id="statusCountChart"></canvas>
            </div>
        </div>

        {{-- 차트 5: 상태별 금액 분포 (Bar) --}}
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">상태별 금액 분포</h3>
            <div class="relative" style="height: 300px;">
                <canvas id="statusAmountChart"></canvas>
            </div>
        </div>

        {{-- 차트 6: 파트너 vs 매니저 추이 (Line) --}}
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">파트너 vs 매니저 수당 추이 (지급완료)</h3>
            <div class="relative" style="height: 300px;">
                <canvas id="comparisonChart"></canvas>
            </div>
        </div>
    </div>

    {{-- 테이블 탭 --}}
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="border-b border-gray-200">
            <nav class="flex -mb-px">
                <button @click="activeTab = 'monthly'"
                        :class="activeTab === 'monthly' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
                    월별 요약
                </button>
                <button @click="activeTab = 'partner'"
                        :class="activeTab === 'partner' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
                    파트너별 결산
                </button>
                <button @click="activeTab = 'manager'"
                        :class="activeTab === 'manager' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
                    매니저별 결산
                </button>
            </nav>
        </div>

        {{-- 월별 요약 테이블 --}}
        <div x-show="activeTab === 'monthly'" class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">월</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">파트너수당</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">매니저수당</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">유치수당</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">지급완료</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">미지급</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">건수</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @php $gPartner = 0; $gManager = 0; $gReferrer = 0; $gPaid = 0; $gUnpaid = 0; $gCount = 0; @endphp
                    @forelse ($monthlyTrend as $row)
                        @php
                            $gPartner += $row->partner_total;
                            $gManager += $row->manager_total;
                            $gReferrer += $row->referrer_total;
                            $gPaid += $row->paid_total;
                            $gUnpaid += $row->unpaid_total;
                            $gCount += $row->count;
                        @endphp
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ \Carbon\Carbon::parse($row->month . '-01')->format('Y년 n월') }}</td>
                            <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($row->partner_total) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($row->manager_total) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($row->referrer_total) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-green-600 font-medium">{{ number_format($row->paid_total) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-orange-600 font-medium">{{ number_format($row->unpaid_total) }}원</td>
                            <td class="px-4 py-3 text-sm text-center text-gray-900">{{ $row->count }}건</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-gray-500">해당 기간의 데이터가 없습니다.</td>
                        </tr>
                    @endforelse
                    @if ($monthlyTrend->isNotEmpty())
                    <tr class="bg-gray-50 font-bold">
                        <td class="px-4 py-3 text-sm text-gray-900">합계</td>
                        <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($gPartner) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($gManager) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($gReferrer) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-green-700">{{ number_format($gPaid) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-orange-700">{{ number_format($gUnpaid) }}원</td>
                        <td class="px-4 py-3 text-sm text-center text-gray-900">{{ $gCount }}건</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>

        {{-- 파트너별 결산 테이블 --}}
        <div x-show="activeTab === 'partner'" class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">파트너</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">유형</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">건수</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">1차수당</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">2차수당</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">총수당</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">지급완료</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">미지급</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase" style="min-width:120px">완료율</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @php $pFirst = 0; $pSecond = 0; $pTotal = 0; $pPaid = 0; $pUnpaid = 0; $pCount = 0; @endphp
                    @forelse ($partnerSettlement as $row)
                        @php
                            $pFirst += $row->first_commission;
                            $pSecond += $row->second_commission;
                            $pTotal += $row->total_amount;
                            $pPaid += $row->paid_amount;
                            $pUnpaid += $row->unpaid_amount;
                            $pCount += $row->contract_count;
                        @endphp
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $row->partner_name }}</td>
                            <td class="px-4 py-3 text-sm text-center">
                                <span class="inline-flex px-2 py-0.5 text-xs rounded-full {{ $row->partner_type === 'corporate' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700' }}">
                                    {{ $row->partner_type === 'corporate' ? '법인' : '개인' }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm text-center text-gray-900">{{ $row->contract_count }}건</td>
                            <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($row->first_commission) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($row->second_commission) }}원</td>
                            <td class="px-4 py-3 text-sm text-right font-bold text-gray-900">{{ number_format($row->total_amount) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-green-600 font-medium">{{ number_format($row->paid_amount) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-orange-600 font-medium">{{ number_format($row->unpaid_amount) }}원</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                                        <div class="h-full rounded-full {{ $row->completion_rate >= 80 ? 'bg-green-500' : ($row->completion_rate >= 50 ? 'bg-yellow-500' : 'bg-red-500') }}"
                                             style="width: {{ $row->completion_rate }}%"></div>
                                    </div>
                                    <span class="text-xs text-gray-600 w-10 text-right">{{ $row->completion_rate }}%</span>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="px-4 py-8 text-center text-gray-500">해당 기간의 데이터가 없습니다.</td>
                        </tr>
                    @endforelse
                    @if ($partnerSettlement->isNotEmpty())
                    @php $overallRate = $pTotal > 0 ? round(($pPaid / $pTotal) * 100, 1) : 0; @endphp
                    <tr class="bg-gray-50 font-bold">
                        <td class="px-4 py-3 text-sm text-gray-900">합계</td>
                        <td class="px-4 py-3 text-sm text-center text-gray-500">-</td>
                        <td class="px-4 py-3 text-sm text-center text-gray-900">{{ $pCount }}건</td>
                        <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($pFirst) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($pSecond) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($pTotal) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-green-700">{{ number_format($pPaid) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-orange-700">{{ number_format($pUnpaid) }}원</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="h-full bg-indigo-500 rounded-full" style="width: {{ $overallRate }}%"></div>
                                </div>
                                <span class="text-xs text-gray-600 w-10 text-right">{{ $overallRate }}%</span>
                            </div>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>

        {{-- 매니저별 결산 테이블 --}}
        <div x-show="activeTab === 'manager'" class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">매니저</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">담당건수</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">매니저수당</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">지급완료</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">미지급</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase" style="min-width:120px">완료율</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @php $mTotal = 0; $mPaid = 0; $mUnpaid = 0; $mCount = 0; @endphp
                    @forelse ($managerSettlement as $row)
                        @php
                            $mTotal += $row->total_manager;
                            $mPaid += $row->paid_amount;
                            $mUnpaid += $row->unpaid_amount;
                            $mCount += $row->contract_count;
                        @endphp
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $row->manager_name }}</td>
                            <td class="px-4 py-3 text-sm text-center text-gray-900">{{ $row->contract_count }}건</td>
                            <td class="px-4 py-3 text-sm text-right font-bold text-gray-900">{{ number_format($row->total_manager) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-green-600 font-medium">{{ number_format($row->paid_amount) }}원</td>
                            <td class="px-4 py-3 text-sm text-right text-orange-600 font-medium">{{ number_format($row->unpaid_amount) }}원</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                                        <div class="h-full rounded-full {{ $row->completion_rate >= 80 ? 'bg-green-500' : ($row->completion_rate >= 50 ? 'bg-yellow-500' : 'bg-red-500') }}"
                                             style="width: {{ $row->completion_rate }}%"></div>
                                    </div>
                                    <span class="text-xs text-gray-600 w-10 text-right">{{ $row->completion_rate }}%</span>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-gray-500">해당 기간의 데이터가 없습니다.</td>
                        </tr>
                    @endforelse
                    @if ($managerSettlement->isNotEmpty())
                    @php $mOverallRate = $mTotal > 0 ? round(($mPaid / $mTotal) * 100, 1) : 0; @endphp
                    <tr class="bg-gray-50 font-bold">
                        <td class="px-4 py-3 text-sm text-gray-900">합계</td>
                        <td class="px-4 py-3 text-sm text-center text-gray-900">{{ $mCount }}건</td>
                        <td class="px-4 py-3 text-sm text-right text-gray-900">{{ number_format($mTotal) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-green-700">{{ number_format($mPaid) }}원</td>
                        <td class="px-4 py-3 text-sm text-right text-orange-700">{{ number_format($mUnpaid) }}원</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="h-full bg-indigo-500 rounded-full" style="width: {{ $mOverallRate }}%"></div>
                                </div>
                                <span class="text-xs text-gray-600 w-10 text-right">{{ $mOverallRate }}%</span>
                            </div>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const formatCurrency = (val) => {
            if (val >= 1000000) return (val / 1000000).toFixed(1) + 'M';
            if (val >= 1000) return (val / 1000).toFixed(0) + 'K';
            return val.toString();
        };

        const defaultOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 12, padding: 15, font: { size: 11 } } }
            }
        };

        const statusLabels = { pending: '대기', approved: '승인', paid: '지급완료', cancelled: '취소' };
        const statusColors = {
            pending: 'rgba(251, 191, 36, 0.8)',
            approved: 'rgba(59, 130, 246, 0.8)',
            paid: 'rgba(16, 185, 129, 0.8)',
            cancelled: 'rgba(239, 68, 68, 0.8)'
        };

        // 빈 데이터 플러그인 (doughnut)
        const emptyDoughnutPlugin = {
            id: 'emptyDoughnut',
            afterDraw(chart) {
                const { datasets } = chart.data;
                if (chart.config.type !== 'doughnut') return;
                const hasData = datasets.some(ds => ds.data.some(v => v > 0));
                if (!hasData) {
                    const { ctx, chartArea: { left, top, right, bottom } } = chart;
                    const cx = (left + right) / 2;
                    const cy = (top + bottom) / 2;
                    ctx.save();
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.font = '14px sans-serif';
                    ctx.fillStyle = '#9CA3AF';
                    ctx.fillText('데이터 없음', cx, cy);
                    ctx.restore();
                }
            }
        };
        Chart.register(emptyDoughnutPlugin);

        // === 차트 1: 월별 수당 추이 (Stacked Bar) ===
        const monthlyData = @json($monthlyTrend);
        const months = monthlyData.map(d => {
            const parts = d.month.split('-');
            return parseInt(parts[1]) + '월';
        });

        new Chart(document.getElementById('monthlyTrendChart'), {
            type: 'bar',
            data: {
                labels: months,
                datasets: [
                    { label: '파트너수당', data: monthlyData.map(d => Number(d.partner_total)), backgroundColor: 'rgba(79, 70, 229, 0.8)' },
                    { label: '매니저수당', data: monthlyData.map(d => Number(d.manager_total)), backgroundColor: 'rgba(16, 185, 129, 0.8)' },
                    { label: '유치수당', data: monthlyData.map(d => Number(d.referrer_total)), backgroundColor: 'rgba(245, 158, 11, 0.8)' }
                ]
            },
            options: {
                ...defaultOptions,
                scales: {
                    x: { stacked: true },
                    y: { stacked: true, ticks: { callback: val => formatCurrency(val) } }
                }
            }
        });

        // === 차트 2: 수당 유형별 비율 (Doughnut) ===
        const typeData = @json($typeRatio);
        new Chart(document.getElementById('typeRatioChart'), {
            type: 'doughnut',
            data: {
                labels: ['파트너수당', '매니저수당', '유치수당'],
                datasets: [{
                    data: [
                        Number(typeData?.partner_total || 0),
                        Number(typeData?.manager_total || 0),
                        Number(typeData?.referrer_total || 0)
                    ],
                    backgroundColor: ['rgba(79, 70, 229, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)'],
                    borderWidth: 2, borderColor: '#fff'
                }]
            },
            options: {
                ...defaultOptions,
                plugins: {
                    ...defaultOptions.plugins,
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
                                const pct = total > 0 ? ((ctx.raw / total) * 100).toFixed(1) : 0;
                                return ctx.label + ': ' + Number(ctx.raw).toLocaleString() + '원 (' + pct + '%)';
                            }
                        }
                    }
                }
            }
        });

        // === 차트 3: 파트너별 수당 Top 10 (Horizontal Bar) ===
        const topPartnersData = @json($topPartners['data']);
        const topPartnerNames = @json($topPartners['names']);
        new Chart(document.getElementById('topPartnersChart'), {
            type: 'bar',
            data: {
                labels: topPartnersData.map(d => topPartnerNames[d.partner_id] || 'ID:' + d.partner_id),
                datasets: [{
                    label: '총 수당',
                    data: topPartnersData.map(d => Number(d.total)),
                    backgroundColor: 'rgba(79, 70, 229, 0.7)',
                    borderColor: 'rgba(79, 70, 229, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                ...defaultOptions,
                indexAxis: 'y',
                scales: { x: { ticks: { callback: val => formatCurrency(val) } } },
                plugins: { ...defaultOptions.plugins, legend: { display: false } }
            }
        });

        // === 차트 4: 상태별 건수 분포 (Doughnut) ===
        const statusData = @json($statusDistribution);
        new Chart(document.getElementById('statusCountChart'), {
            type: 'doughnut',
            data: {
                labels: statusData.map(d => statusLabels[d.status] || d.status),
                datasets: [{
                    data: statusData.map(d => Number(d.count)),
                    backgroundColor: statusData.map(d => statusColors[d.status] || 'rgba(156,163,175,0.8)'),
                    borderWidth: 2, borderColor: '#fff'
                }]
            },
            options: {
                ...defaultOptions,
                plugins: {
                    ...defaultOptions.plugins,
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
                                const pct = total > 0 ? ((ctx.raw / total) * 100).toFixed(1) : 0;
                                return ctx.label + ': ' + ctx.raw + '건 (' + pct + '%)';
                            }
                        }
                    }
                }
            }
        });

        // === 차트 5: 상태별 금액 분포 (Bar) ===
        new Chart(document.getElementById('statusAmountChart'), {
            type: 'bar',
            data: {
                labels: statusData.map(d => statusLabels[d.status] || d.status),
                datasets: [{
                    label: '금액',
                    data: statusData.map(d => Number(d.amount)),
                    backgroundColor: statusData.map(d => statusColors[d.status] || 'rgba(156,163,175,0.8)'),
                    borderWidth: 1,
                    borderColor: statusData.map(d => (statusColors[d.status] || 'rgba(156,163,175,1)').replace('0.8', '1'))
                }]
            },
            options: {
                ...defaultOptions,
                scales: { y: { ticks: { callback: val => formatCurrency(val) } } },
                plugins: { ...defaultOptions.plugins, legend: { display: false } }
            }
        });

        // === 차트 6: 파트너 vs 매니저 추이 (Line) ===
        const comparisonData = @json($monthlyComparison);
        const compMonths = comparisonData.map(d => {
            const parts = d.month.split('-');
            return parseInt(parts[1]) + '월';
        });
        new Chart(document.getElementById('comparisonChart'), {
            type: 'line',
            data: {
                labels: compMonths,
                datasets: [
                    {
                        label: '파트너수당',
                        data: comparisonData.map(d => Number(d.partner_total)),
                        borderColor: 'rgba(79, 70, 229, 1)',
                        backgroundColor: 'rgba(79, 70, 229, 0.1)',
                        fill: true, tension: 0.3, pointRadius: 4, pointHoverRadius: 6
                    },
                    {
                        label: '매니저수당',
                        data: comparisonData.map(d => Number(d.manager_total)),
                        borderColor: 'rgba(16, 185, 129, 1)',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        fill: true, tension: 0.3, pointRadius: 4, pointHoverRadius: 6
                    }
                ]
            },
            options: {
                ...defaultOptions,
                scales: { y: { ticks: { callback: val => formatCurrency(val) } } }
            }
        });
    });
</script>
@endpush