sam-manage/resources/views/sales/dashboard/partials/stats.blade.php

{{-- 영업 현황 요약 --}}
@php
    $first = $commissionSummary['first_commission'] ?? ['total' => 0, 'pending' => 0, 'scheduled' => 0, 'paid' => 0];
    $second = $commissionSummary['second_commission'] ?? ['total' => 0, 'pending' => 0, 'scheduled' => 0, 'paid' => 0];
    $totalCommissionAmount = $first['total'] + $second['total'];
    $totalPending = $first['pending'] + $second['pending'];
    $totalScheduled = $first['scheduled'] + $second['scheduled'];
    $totalPaid = $first['paid'] + $second['paid'];
    $paidPercent = $totalCommissionAmount > 0 ? round(($totalPaid / $totalCommissionAmount) * 100) : 0;
@endphp

<div x-data="{ showCommissionModal: false }" class="bg-white rounded-xl shadow-sm p-5">
    {{-- 헤더 --}}
    <div class="flex items-center gap-2 mb-4">
        <div class="p-1.5 bg-blue-100 rounded-lg">
            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
        </div>
        <h2 class="text-lg font-bold text-gray-800">영업 현황</h2>
    </div>

    {{-- 상단 요약 카드 (5개) --}}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
        {{-- 영업 진행중 --}}
        <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
            <div class="flex items-center justify-between">
                <span class="text-xs text-amber-600">영업 진행중</span>
                <svg class="w-4 h-4 text-amber-400" 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>
            <p class="text-xl font-bold text-amber-700 mt-1">{{ $tenantStats['total_prospects'] ?? 0 }}<span class="text-sm font-normal">건</span></p>
        </div>

        {{-- 인계완료 --}}
        <div class="bg-slate-50 border border-slate-200 rounded-lg p-3">
            <div class="flex items-center justify-between">
                <span class="text-xs text-slate-500">인계완료</span>
                <svg class="w-4 h-4 text-slate-400" 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>
            <p class="text-xl font-bold text-slate-800 mt-1">{{ $tenantStats['total_tenants'] ?? 0 }}<span class="text-sm font-normal">건</span></p>
        </div>

        {{-- 총 개발비 --}}
        <div class="bg-slate-50 border border-slate-200 rounded-lg p-3">
            <div class="flex items-center justify-between">
                <span class="text-xs text-slate-500">총 개발비</span>
                <svg class="w-4 h-4 text-slate-400" 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>
            <p class="text-xl font-bold text-slate-800 mt-1">{{ number_format($stats['total_membership_fee'] ?? 0) }}<span class="text-sm font-normal">원</span></p>
        </div>

        {{-- 내 예상 수당 합계 --}}
        <button type="button" @click="showCommissionModal = true"
            class="bg-emerald-50 border border-emerald-200 rounded-lg p-3 text-left hover:bg-emerald-100 transition-colors group">
            <div class="flex items-center justify-between">
                <span class="text-xs text-emerald-600">예상 수당</span>
                <svg class="w-4 h-4 text-emerald-400 group-hover:text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
            </div>
            <p class="text-xl font-bold text-emerald-700 mt-1">{{ number_format($totalCommissionAmount) }}<span class="text-sm font-normal">원</span></p>
        </button>

        {{-- 지급 완료 --}}
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
            <div class="flex items-center justify-between">
                <span class="text-xs text-blue-600">지급완료</span>
                <span class="text-xs font-medium text-blue-500">{{ $paidPercent }}%</span>
            </div>
            <p class="text-xl font-bold text-blue-700 mt-1">{{ number_format($totalPaid) }}<span class="text-sm font-normal">원</span></p>
        </div>
    </div>

    {{-- 1차/2차 수당 지급 현황 (합계표) --}}
    <div class="border border-gray-200 rounded-xl overflow-hidden">
        <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                </svg>
                개발비 수당 지급 현황
                <span class="text-xs text-gray-400 font-normal">(개발비의 50%씩 1차/2차 분할)</span>
            </h3>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-200">
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">구분</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">총액</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-400 uppercase">납입대기</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-amber-600 uppercase">지급예정</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-emerald-600 uppercase">지급완료</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {{-- 1차 수당 --}}
                    <tr class="hover:bg-blue-50/50">
                        <td class="px-4 py-2.5">
                            <div class="flex items-center gap-2">
                                <span class="inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-blue-500 rounded-full">1</span>
                                <span class="font-medium text-gray-800">1차 수당</span>
                            </div>
                        </td>
                        <td class="px-4 py-2.5 text-right font-semibold text-blue-700">{{ number_format($first['total']) }}원</td>
                        <td class="px-4 py-2.5 text-right text-gray-500">{{ number_format($first['pending']) }}원</td>
                        <td class="px-4 py-2.5 text-right text-amber-600">{{ number_format($first['scheduled']) }}원</td>
                        <td class="px-4 py-2.5 text-right text-emerald-600">{{ number_format($first['paid']) }}원</td>
                    </tr>
                    {{-- 2차 수당 --}}
                    <tr class="hover:bg-purple-50/50">
                        <td class="px-4 py-2.5">
                            <div class="flex items-center gap-2">
                                <span class="inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-purple-500 rounded-full">2</span>
                                <span class="font-medium text-gray-800">2차 수당</span>
                            </div>
                        </td>
                        <td class="px-4 py-2.5 text-right font-semibold text-purple-700">{{ number_format($second['total']) }}원</td>
                        <td class="px-4 py-2.5 text-right text-gray-500">{{ number_format($second['pending']) }}원</td>
                        <td class="px-4 py-2.5 text-right text-amber-600">{{ number_format($second['scheduled']) }}원</td>
                        <td class="px-4 py-2.5 text-right text-emerald-600">{{ number_format($second['paid']) }}원</td>
                    </tr>
                </tbody>
                <tfoot>
                    {{-- 합계 --}}
                    <tr class="bg-gray-100 border-t-2 border-gray-300">
                        <td class="px-4 py-2.5">
                            <span class="font-bold text-gray-800">합계</span>
                        </td>
                        <td class="px-4 py-2.5 text-right font-bold text-gray-900">{{ number_format($totalCommissionAmount) }}원</td>
                        <td class="px-4 py-2.5 text-right font-semibold text-gray-600">{{ number_format($totalPending) }}원</td>
                        <td class="px-4 py-2.5 text-right font-semibold text-amber-700">{{ number_format($totalScheduled) }}원</td>
                        <td class="px-4 py-2.5 text-right font-semibold text-emerald-700">{{ number_format($totalPaid) }}원</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        {{-- 수당 지급 안내 --}}
        <div class="px-4 py-2 bg-gray-50 border-t border-gray-200 text-[11px] text-gray-500 flex items-center gap-2">
            <svg class="w-3.5 h-3.5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>
                <span class="text-gray-500">납입대기</span> →
                개발비 입금 →
                <span class="text-amber-600 font-medium">지급예정</span> →
                익월 10일 →
                <span class="text-emerald-600 font-medium">지급완료</span>
            </span>
        </div>
    </div>

    {{-- 역할별 수당 상세 모달 --}}
    <div x-cloak
        x-show="showCommissionModal"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 overflow-y-auto"
        @keydown.escape.window="showCommissionModal = false">
        <div class="fixed inset-0 bg-black/50" @click="showCommissionModal = false"></div>

        <div class="flex min-h-full items-center justify-center p-4">
            <div x-show="showCommissionModal"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                class="relative bg-white rounded-2xl shadow-xl max-w-lg w-full p-5"
                @click.stop>
                {{-- 모달 헤더 --}}
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-gray-800">역할별 수당 상세</h3>
                    <button type="button" @click="showCommissionModal = false"
                        class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                {{-- 역할별 수당 카드 --}}
                <div class="space-y-3 mb-4">
                    @foreach($commissionByRole as $role)
                    <div class="rounded-lg p-3 border flex items-center justify-between
                        @if($role['color'] === 'green') bg-green-50 border-green-200
                        @elseif($role['color'] === 'blue') bg-blue-50 border-blue-200
                        @elseif($role['color'] === 'purple') bg-purple-50 border-purple-200
                        @else bg-gray-50 border-gray-200
                        @endif">
                        <div class="flex items-center gap-3">
                            <svg class="w-5 h-5
                                @if($role['color'] === 'green') text-green-600
                                @elseif($role['color'] === 'blue') text-blue-600
                                @elseif($role['color'] === 'purple') text-purple-600
                                @else text-gray-600
                                @endif" 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>
                                <span class="text-sm font-medium text-gray-800">{{ $role['name'] }}</span>
                                @if($role['rate'] !== null)
                                <span class="text-xs text-gray-500 ml-1">({{ $role['rate'] }}%)</span>
                                @else
                                <span class="text-xs text-gray-400 ml-1">(별도)</span>
                                @endif
                            </div>
                        </div>
                        @if($role['amount'] !== null)
                        <span class="text-lg font-bold
                            @if($role['color'] === 'green') text-green-700
                            @elseif($role['color'] === 'blue') text-blue-700
                            @else text-gray-700
                            @endif">{{ number_format($role['amount']) }}원</span>
                        @else
                        <span class="text-sm text-gray-500">운영팀 산정</span>
                        @endif
                    </div>
                    @endforeach
                </div>

                {{-- 수당 합계 --}}
                <div class="bg-gray-100 rounded-lg p-3 flex items-center justify-between">
                    <span class="text-sm font-medium text-gray-600">수당 합계</span>
                    <span class="text-xl font-bold text-gray-900">{{ number_format($stats['total_commission'] ?? 0) }}원</span>
                </div>
            </div>
        </div>
    </div>
</div>