@extends('layouts.app')

@section('title', 'Google Workspace 요금 정책')

@push('styles')
<style>
    .gw-section-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #e5e7eb; overflow: hidden; }
    .gw-section-header { padding: 12px 20px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
    .gw-section-header h2 { font-size: 15px; font-weight: 600; color: #1f2937; }
    .gw-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
    .gw-badge-blue { background: #dbeafe; color: #1e40af; }
    .gw-badge-green { background: #dcfce7; color: #166534; }
    .gw-badge-amber { background: #fef3c7; color: #92400e; }
    .gw-badge-purple { background: #f3e8ff; color: #6b21a8; }
    .gw-badge-gray { background: #f3f4f6; color: #374151; }
    .gw-tier-card { border-radius: 8px; padding: 20px; border: 2px solid #e5e7eb; transition: border-color 0.2s; }
    .gw-tier-card:hover { border-color: #3b82f6; }
    .gw-tier-card.recommended { border-color: #10b981; background: #f0fdf4; }
    .gw-info-box { padding: 12px 16px; border-radius: 8px; font-size: 13px; }
    .gw-check { color: #10b981; }
    .gw-cross { color: #ef4444; }
    .highlight-row { background: #ecfdf5; }
    .highlight-row td { font-weight: 600; }
</style>
@endpush

@section('content')
<div class="space-y-6">

    {{-- 페이지 헤더 --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Google Workspace 요금 정책</h1>
            <p class="mt-1 text-sm text-gray-500">플랜별 비교 및 비용 분석 (2025.03.17 개정 기준)</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-400">(주)코드브릿지엑스 | 2026.03</span>
            <a href="{{ route('google-cloud.workspace-pricing.download') }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors"
               title="상세 PPTX 다운로드">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                PPTX
            </a>
        </div>
    </div>

    {{-- ─── 섹션 1: 요금 티어 비교 ─── --}}
    <div class="gw-section-card">
        <div class="gw-section-header">
            <h2>1. 요금 티어 비교 (2025.03.17 개정)</h2>
        </div>
        <div class="p-5">
            <div class="flex gap-4" style="flex-wrap: wrap;">
                {{-- Starter --}}
                <div class="gw-tier-card" style="flex: 1 1 200px; max-width: 280px;">
                    <div class="text-center mb-3">
                        <span class="gw-badge gw-badge-gray">Business Starter</span>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-gray-900">$7</div>
                        <div class="text-xs text-gray-500">/ 사용자 / 월 (연간 약정)</div>
                    </div>
                    <div class="mt-4 space-y-2 text-sm text-gray-600">
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> 30GB 스토리지/인</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Meet 100명</div>
                        <div class="flex items-center gap-2"><span class="gw-cross font-bold">X</span> Meet 녹화</div>
                        <div class="flex items-center gap-2"><span class="gw-cross font-bold">X</span> Vault / DLP</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Gemini AI 기본</div>
                    </div>
                    <div class="mt-3 text-xs text-gray-400 text-center">최대 300명</div>
                </div>

                {{-- Standard --}}
                <div class="gw-tier-card" style="flex: 1 1 200px; max-width: 280px;">
                    <div class="text-center mb-3">
                        <span class="gw-badge gw-badge-blue">Business Standard</span>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-gray-900">$14</div>
                        <div class="text-xs text-gray-500">/ 사용자 / 월 (연간 약정)</div>
                    </div>
                    <div class="mt-4 space-y-2 text-sm text-gray-600">
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> 2TB 스토리지/인</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Meet 150명</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Meet 녹화</div>
                        <div class="flex items-center gap-2"><span class="gw-cross font-bold">X</span> Vault / DLP</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Gemini AI 기본</div>
                    </div>
                    <div class="mt-3 text-xs text-gray-400 text-center">최대 300명</div>
                </div>

                {{-- Plus --}}
                <div class="gw-tier-card recommended" style="flex: 1 1 200px; max-width: 280px;">
                    <div class="text-center mb-3">
                        <span class="gw-badge gw-badge-green">Business Plus</span>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-emerald-700">$22</div>
                        <div class="text-xs text-gray-500">/ 사용자 / 월 (연간 약정)</div>
                    </div>
                    <div class="mt-4 space-y-2 text-sm text-gray-600">
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> 5TB 스토리지/인</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Meet 500명</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Meet 녹화 + 출석</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> <strong>Vault + DLP 포함</strong></div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Gemini AI 기본</div>
                    </div>
                    <div class="mt-3 text-xs text-emerald-600 text-center font-semibold">최대 300명 | Vault 포함</div>
                </div>

                {{-- Enterprise --}}
                <div class="gw-tier-card" style="flex: 1 1 200px; max-width: 280px;">
                    <div class="text-center mb-3">
                        <span class="gw-badge gw-badge-purple">Enterprise</span>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-gray-900">견적</div>
                        <div class="text-xs text-gray-500">영업팀 문의 (맞춤 가격)</div>
                    </div>
                    <div class="mt-4 space-y-2 text-sm text-gray-600">
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> 무제한 스토리지</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Meet 1,000명</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> 노이즈 캔슬링</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Vault + DLP + 보안센터</div>
                        <div class="flex items-center gap-2"><span class="gw-check font-bold">O</span> Gemini AI 프리미엄</div>
                    </div>
                    <div class="mt-3 text-xs text-gray-400 text-center">사용자 수 무제한</div>
                </div>
            </div>

            <div class="mt-4 gw-info-box bg-blue-50 border border-blue-200 text-blue-800">
                <strong>연간 약정 vs 월정액:</strong> 월정액(Flexible) 요금은 연간 약정 대비 약 <strong>20% 높습니다</strong>.
                예: Starter 월정액 $8.40, Standard $16.80, Plus $26.40. 1년 이상 사용 예정이면 연간 약정이 유리합니다.
            </div>
        </div>
    </div>

    {{-- ─── 섹션 2: 주요 기능 비교 ─── --}}
    <div class="gw-section-card">
        <div class="gw-section-header">
            <h2>2. 주요 기능 비교</h2>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 25%;">기능</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">Starter ($7)</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">Standard ($14)</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">Plus ($22)</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">Enterprise</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $features = [
                            ['name' => '스토리지 (인당)', 'starter' => '30GB', 'standard' => '2TB', 'plus' => '5TB', 'enterprise' => '무제한'],
                            ['name' => 'Meet 최대 참여자', 'starter' => '100명', 'standard' => '150명', 'plus' => '500명', 'enterprise' => '1,000명'],
                            ['name' => 'Meet 녹화', 'starter' => '-', 'standard' => 'O', 'plus' => 'O', 'enterprise' => 'O'],
                            ['name' => 'Google Vault', 'starter' => '-', 'standard' => '-', 'plus' => 'O', 'enterprise' => 'O'],
                            ['name' => 'DLP (데이터 유출 방지)', 'starter' => '-', 'standard' => '-', 'plus' => 'O', 'enterprise' => 'O'],
                            ['name' => '보안 센터', 'starter' => '-', 'standard' => '-', 'plus' => '-', 'enterprise' => 'O'],
                            ['name' => 'Gemini AI', 'starter' => '기본', 'standard' => '기본', 'plus' => '기본', 'enterprise' => '프리미엄'],
                            ['name' => 'AppSheet', 'starter' => '-', 'standard' => '-', 'plus' => '-', 'enterprise' => 'O (Core)'],
                            ['name' => '고급 엔드포인트 관리', 'starter' => '-', 'standard' => '-', 'plus' => 'O', 'enterprise' => 'O'],
                        ];
                    @endphp
                    @foreach($features as $feat)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-2.5 px-3 font-medium text-gray-800">{{ $feat['name'] }}</td>
                            <td class="py-2.5 px-3 text-center {{ $feat['starter'] === '-' ? 'text-gray-300' : 'text-gray-700' }}">{{ $feat['starter'] }}</td>
                            <td class="py-2.5 px-3 text-center {{ $feat['standard'] === '-' ? 'text-gray-300' : 'text-gray-700' }}">{{ $feat['standard'] }}</td>
                            <td class="py-2.5 px-3 text-center {{ $feat['plus'] === '-' ? 'text-gray-300' : 'text-emerald-600 font-semibold' }}">{{ $feat['plus'] }}</td>
                            <td class="py-2.5 px-3 text-center {{ $feat['enterprise'] === '-' ? 'text-gray-300' : 'text-gray-700' }}">{{ $feat['enterprise'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-4 gw-info-box bg-purple-50 border border-purple-200 text-purple-800">
                <strong>Gemini AI 통합 (2025.01.15~):</strong> 모든 Workspace 플랜에 Gemini AI가 기본 포함됩니다.
                Gmail, Docs, Sheets, Slides, Meet에서 AI 기능을 사용할 수 있으며, Enterprise 플랜에서는 프리미엄 AI 기능(고급 보안 분석, NotebookLM Plus 등)이 추가됩니다.
            </div>
        </div>
    </div>

    {{-- ─── 섹션 3: 우리 회사 예상 비용 ─── --}}
    <div class="gw-section-card">
        <div class="gw-section-header">
            <h2>3. 예상 비용 시뮬레이션</h2>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">계정 수</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">Starter ($7)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">Standard ($14)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">Plus ($22)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">비고</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $accountCounts = [5, 10, 15, 20, 30];
                    @endphp
                    @foreach($accountCounts as $count)
                        <tr class="border-b border-gray-100 hover:bg-gray-50 {{ $count === 10 ? 'highlight-row' : '' }}">
                            <td class="py-2.5 px-3 font-medium text-gray-800">
                                {{ $count }}명
                                @if($count === 10) <span class="gw-badge gw-badge-green ml-1">기준</span> @endif
                            </td>
                            <td class="py-2.5 px-3 text-right text-gray-700">${{ number_format($count * 7) }}/월</td>
                            <td class="py-2.5 px-3 text-right text-gray-700">${{ number_format($count * 14) }}/월</td>
                            <td class="py-2.5 px-3 text-right font-semibold text-emerald-600">${{ number_format($count * 22) }}/월</td>
                            <td class="py-2.5 px-3 text-right text-xs text-gray-400">연 ${{ number_format($count * 22 * 12) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="flex gap-4 mt-4" style="flex-wrap: wrap;">
                <div class="p-4 bg-emerald-50 border border-emerald-200 rounded-lg" style="flex: 1 1 280px;">
                    <div class="text-sm text-emerald-700">10명 기준 Plus 선택 시</div>
                    <div class="text-2xl font-bold text-emerald-700 mt-1">월 $220 <span class="text-base font-normal">(약 30만원)</span></div>
                    <div class="text-sm text-emerald-600 mt-1">연 $2,640 | Vault + DLP 포함</div>
                </div>
                <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg" style="flex: 1 1 280px;">
                    <div class="text-sm text-blue-700">10명 기준 Starter 선택 시</div>
                    <div class="text-2xl font-bold text-blue-700 mt-1">월 $70 <span class="text-base font-normal">(약 9.5만원)</span></div>
                    <div class="text-sm text-blue-600 mt-1">연 $840 | 기본 기능만</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 4: 요금 인상 히스토리 ─── --}}
    <div class="gw-section-card">
        <div class="gw-section-header">
            <h2>4. 요금 인상 히스토리</h2>
        </div>
        <div class="p-5">
            <div class="gw-info-box bg-amber-50 border border-amber-200 text-amber-800 mb-4">
                <strong>2025.03.17 인상:</strong> Gemini AI 통합에 따른 가격 변경. 모든 플랜에 AI 기능이 기본 포함되면서 단가가 인상되었습니다.
            </div>

            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 25%;">플랜</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">이전 가격</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">현재 가격</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">인상폭</th>
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium">변경 사유</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $priceHistory = [
                            ['plan' => 'Business Starter', 'before' => 6, 'after' => 7, 'reason' => 'Gemini AI 기본 포함'],
                            ['plan' => 'Business Standard', 'before' => 12, 'after' => 14, 'reason' => 'Gemini AI 기본 포함'],
                            ['plan' => 'Business Plus', 'before' => 18, 'after' => 22, 'reason' => 'Gemini AI + 보안 강화'],
                        ];
                    @endphp
                    @foreach($priceHistory as $row)
                        @php $diff = $row['after'] - $row['before']; $pct = round(($diff / $row['before']) * 100); @endphp
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-2.5 px-3 font-medium text-gray-800">{{ $row['plan'] }}</td>
                            <td class="py-2.5 px-3 text-right text-gray-400 line-through">${{ $row['before'] }}</td>
                            <td class="py-2.5 px-3 text-right font-semibold text-gray-800">${{ $row['after'] }}</td>
                            <td class="py-2.5 px-3 text-right text-red-500 font-semibold">+${{ $diff }} ({{ $pct }}%)</td>
                            <td class="py-2.5 px-3 text-gray-600">{{ $row['reason'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <p class="text-xs text-gray-400 text-center">※ Google Workspace 공식 가격 페이지 기준 (2025.03.17 개정). 실제 청구 금액은 결제 통화 및 세금에 따라 달라질 수 있습니다.</p>

</div>
@endsection
