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

{{-- 대시보드 데이터 컨테이너 (HTMX로 새로고침되는 영역) --}}

{{-- 전체 누적 실적 --}}
@include('sales.dashboard.partials.stats')

{{-- 기간별 조회 --}}
<div class="bg-white rounded-xl shadow-sm p-6">
    <div class="flex items-center gap-3 mb-4">
        <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <h2 class="text-lg font-bold text-gray-800">기간별 조회</h2>
    </div>

    <form id="period-form" class="flex flex-wrap items-center gap-3">
        <div class="inline-flex rounded-lg border border-gray-200 p-1">
            <button type="button"
                id="btn-month"
                hx-get="{{ route('sales.salesmanagement.dashboard.refresh') }}"
                hx-target="#dashboard-data"
                hx-swap="innerHTML"
                hx-vals='{"period": "month"}'
                hx-indicator="#loading-indicator"
                class="px-4 py-2 text-sm font-medium rounded-md transition-colors {{ $period === 'month' ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                당월
            </button>
            <button type="button"
                id="btn-custom"
                class="px-4 py-2 text-sm font-medium rounded-md transition-colors {{ $period === 'custom' ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}"
                onclick="toggleCustomPeriod()">
                기간 설정
            </button>
        </div>

        <!-- 당월 표시 -->
        <div id="month-display" class="{{ $period === 'custom' ? 'hidden' : '' }}">
            <span class="text-sm text-gray-600">{{ $year }}년 {{ $month }}월</span>
        </div>

        <!-- 기간 설정 입력 -->
        <div id="custom-period" class="flex items-center gap-2 {{ $period === 'month' ? 'hidden' : '' }}">
            <input type="date"
                name="start_date"
                id="start-date"
                value="{{ $startDate ?? now()->startOfMonth()->format('Y-m-d') }}"
                class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <span class="text-gray-500">~</span>
            <input type="date"
                name="end_date"
                id="end-date"
                value="{{ $endDate ?? now()->format('Y-m-d') }}"
                class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <button type="button"
                hx-get="{{ route('sales.salesmanagement.dashboard.refresh') }}"
                hx-target="#dashboard-data"
                hx-swap="innerHTML"
                hx-include="#start-date, #end-date"
                hx-vals='{"period": "custom"}'
                hx-indicator="#loading-indicator"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
                조회
            </button>
        </div>

        <!-- 로딩 인디케이터 -->
        <div id="loading-indicator" class="htmx-indicator">
            <svg class="w-5 h-5 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>
        </div>
    </form>
</div>

{{-- 역할별 수당 상세 --}}
@include('sales.dashboard.partials.commission-by-role')

{{-- 실적 데이터 없음 안내 --}}
@include('sales.dashboard.partials.no-data')

{{-- 수익 및 테넌트 관리 --}}
@include('sales.dashboard.partials.tenant-stats')

<script>
function toggleCustomPeriod() {
    const btnMonth = document.getElementById('btn-month');
    const btnCustom = document.getElementById('btn-custom');
    const monthDisplay = document.getElementById('month-display');
    const customPeriod = document.getElementById('custom-period');

    btnCustom.classList.add('bg-blue-600', 'text-white');
    btnCustom.classList.remove('text-gray-600', 'hover:bg-gray-100');
    btnMonth.classList.remove('bg-blue-600', 'text-white');
    btnMonth.classList.add('text-gray-600', 'hover:bg-gray-100');
    customPeriod.classList.remove('hidden');
    monthDisplay.classList.add('hidden');
}
</script>