@extends('layouts.app')

@section('title', '영업관리 대시보드')

@push('styles')
<style>
    .htmx-indicator {
        display: none;
    }
    .htmx-request .htmx-indicator {
        display: inline-flex;
    }
    .htmx-request.htmx-indicator {
        display: inline-flex;
    }
    /* 새로고침 버튼 아이콘 상태 */
    .refresh-btn [data-refresh-spin] {
        display: none;
    }
    .refresh-btn [data-refresh-icon] {
        display: inline-block;
    }
    /* 로딩 중: 스피너 표시, 아이콘 숨김 */
    .refresh-btn.htmx-request [data-refresh-spin] {
        display: inline-block;
    }
    .refresh-btn.htmx-request [data-refresh-icon] {
        display: none;
    }
</style>
@endpush

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'my-activity' }">
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center">
        <div class="flex items-center gap-3">
            <h1 class="text-2xl font-bold text-gray-800">영업관리 대시보드</h1>
            <button type="button"
                    hx-get="{{ route('sales.salesmanagement.dashboard.help') }}"
                    hx-target="#help-modal-container"
                    hx-swap="innerHTML"
                    class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors"
                    title="도움말">
                <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </button>
        </div>
    </div>

    <!-- 탭 네비게이션 -->
    <div class="border-b border-gray-200">
        <nav class="flex items-center justify-between" aria-label="Tabs">
            <div class="flex gap-4">
                <button type="button"
                    @click="activeTab = 'my-activity'"
                    :class="activeTab === 'my-activity'
                        ? 'border-blue-500 text-blue-600'
                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2">
                    <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="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>
                    내 활동
                </button>
                @unless($isGroupPartner ?? false)
                <button type="button"
                    @click="activeTab = 'partner-activity'"
                    hx-get="{{ route('sales.salesmanagement.dashboard.partner-activity') }}"
                    hx-target="#partner-activity-content"
                    hx-trigger="click once"
                    hx-swap="innerHTML"
                    :class="activeTab === 'partner-activity'
                        ? 'border-blue-500 text-blue-600'
                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2">
                    <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="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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    유치 파트너 현황
                </button>
                @endunless
            </div>

            <!-- 새로고침 버튼 -->
            <button type="button"
                x-show="activeTab === 'my-activity'"
                hx-get="{{ route('sales.salesmanagement.dashboard.refresh') }}"
                hx-target="#dashboard-data"
                hx-swap="innerHTML"
                class="refresh-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                title="새로고침">
                <svg data-refresh-spin class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                <svg data-refresh-icon 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                <span class="hidden sm:inline">새로고침</span>
            </button>
            @unless($isGroupPartner ?? false)
            <button type="button"
                x-show="activeTab === 'partner-activity'"
                x-cloak
                hx-get="{{ route('sales.salesmanagement.dashboard.partner-activity') }}"
                hx-target="#partner-activity-content"
                hx-swap="innerHTML"
                class="refresh-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                title="새로고침">
                <svg data-refresh-spin class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                <svg data-refresh-icon 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                <span class="hidden sm:inline">새로고침</span>
            </button>
            @endunless
        </nav>
    </div>

    <!-- 탭 콘텐츠: 내 활동 -->
    <div x-show="activeTab === 'my-activity'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div id="dashboard-data" class="space-y-6">
            @include('sales.dashboard.partials.data-container')
        </div>
    </div>

    @unless($isGroupPartner ?? false)
    <!-- 탭 콘텐츠: 유치 파트너 현황 -->
    <div x-show="activeTab === 'partner-activity'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div id="partner-activity-content" class="space-y-6">
            <!-- HTMX로 로드되는 콘텐츠 -->
            <div class="flex items-center justify-center py-12">
                <svg class="w-8 h-8 animate-spin text-blue-600" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="ml-3 text-gray-500">로딩 중...</span>
            </div>
        </div>
    </div>
    @endunless
</div>

{{-- 시나리오 모달용 포털 --}}
<div id="modal-portal"></div>

{{-- 도움말 모달용 컨테이너 --}}
<div id="help-modal-container"></div>
@endsection

@push('scripts')
<script>
// Alpine.js x-collapse 플러그인이 없는 경우를 위한 폴백
if (typeof Alpine !== 'undefined' && !Alpine.directive('collapse')) {
    Alpine.directive('collapse', (el, { expression }, { effect, evaluateLater }) => {
        let isOpen = evaluateLater(expression);

        effect(() => {
            isOpen((value) => {
                if (value) {
                    el.style.height = 'auto';
                    el.style.overflow = 'visible';
                } else {
                    el.style.height = '0px';
                    el.style.overflow = 'hidden';
                }
            });
        });
    });
}
</script>
@endpush
