sam-manage/resources/views/finance/settlement/index.blade.php

@extends('layouts.app')

@section('title', '정산관리')

@section('content')
<div class="px-4 py-6" x-data="{ activeTab: '{{ $initialTab }}', commissionSubTab: 'partner' }">
    {{-- 페이지 헤더 --}}
    <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">정산관리</h1>
            <p class="text-sm text-gray-500 mt-1">통합 정산 현황</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <button type="button"
                    onclick="exportCurrentTable()"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white 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="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>
                내보내기
            </button>
        </div>
    </div>

    {{-- 통합 통계 카드 --}}
    @include('finance.settlement.partials.summary-stats', ['summaryStats' => $summaryStats])

    {{-- 탭 네비게이션 --}}
    <div class="border-b border-gray-200 mb-6">
        <nav class="flex -mb-px space-x-1 overflow-x-auto">
            <button @click="activeTab = 'commission'"
                    :class="activeTab === 'commission' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="border-b-2 py-3 px-4 text-sm font-medium whitespace-nowrap transition-colors">
                수당 관리
            </button>
            <button @click="activeTab = 'customer'"
                    hx-get="{{ route('finance.settlement.customer') }}"
                    hx-target="#customer-content"
                    hx-trigger="click once"
                    hx-indicator="#customer-loading"
                    :class="activeTab === 'customer' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="border-b-2 py-3 px-4 text-sm font-medium whitespace-nowrap transition-colors">
                고객사정산
            </button>
            <button @click="activeTab = 'subscription'"
                    hx-get="{{ route('finance.settlement.subscription') }}"
                    hx-target="#subscription-content"
                    hx-trigger="click once"
                    hx-indicator="#subscription-loading"
                    :class="activeTab === 'subscription' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="border-b-2 py-3 px-4 text-sm font-medium whitespace-nowrap transition-colors">
                구독관리
            </button>
        </nav>
    </div>

    {{-- 탭 1: 수당 관리 (즉시 렌더링) --}}
    <div x-show="activeTab === 'commission'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        {{-- 통계 카드 --}}
        <div id="commission-stats-container">
            @include('finance.settlement.partials.commission.stats-cards', ['stats' => $stats, 'year' => $year, 'month' => $month])
        </div>

        {{-- 필터 --}}
        @include('finance.settlement.partials.commission.filters', ['filters' => $filters, 'partners' => $partners, 'year' => $year, 'month' => $month])

        {{-- 서브탭 --}}
        <div class="flex items-center gap-2 mb-4">
            <div class="inline-flex rounded-lg bg-gray-100 p-1">
                <button @click="commissionSubTab = 'partner'; clearAllCheckboxes()"
                        :class="commissionSubTab === 'partner' ? 'bg-white text-indigo-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
                        class="px-4 py-1.5 text-sm font-medium rounded-md transition-all">
                    영업파트너 수당
                </button>
                <button @click="commissionSubTab = 'manager'; clearAllCheckboxes()"
                        :class="commissionSubTab === 'manager' ? 'bg-white text-indigo-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
                        class="px-4 py-1.5 text-sm font-medium rounded-md transition-all">
                    매니저 수당
                </button>
            </div>

            {{-- 일괄 처리 버튼 --}}
            <div class="flex items-center gap-2 ml-auto" id="bulk-actions" style="display: none;">
                <span class="text-sm text-gray-600"><span id="selected-count">0</span>건 선택</span>
                <button type="button" onclick="bulkApprove()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition-colors">
                    일괄 승인
                </button>
                <button type="button" onclick="bulkMarkPaid()" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors">
                    일괄 지급완료
                </button>
            </div>
        </div>

        {{-- 서브탭 1: 영업파트너 수당 테이블 --}}
        <div x-show="commissionSubTab === 'partner'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
            <div id="commission-table-container">
                @include('finance.settlement.partials.commission.partner-commission-table', ['commissions' => $commissions])
            </div>
        </div>

        {{-- 서브탭 2: 매니저 수당 테이블 --}}
        <div x-show="commissionSubTab === 'manager'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
            <div id="manager-table-container">
                @include('finance.settlement.partials.commission.manager-commission-table', ['commissions' => $commissions])
            </div>
        </div>
    </div>

    {{-- 탭 2: 고객사정산 (HTMX lazy load) --}}
    <div x-show="activeTab === 'customer'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div id="customer-content">
            <div id="customer-loading" class="flex items-center justify-center py-12">
                <svg class="w-8 h-8 animate-spin text-indigo-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>

    {{-- 탭 3: 구독관리 (HTMX lazy load) --}}
    <div x-show="activeTab === 'subscription'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div id="subscription-content">
            <div id="subscription-loading" class="flex items-center justify-center py-12">
                <svg class="w-8 h-8 animate-spin text-indigo-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>
</div>

{{-- 상세 모달 --}}
<div id="detail-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-lg shadow-xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div id="detail-modal-content"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let selectedIds = [];

    function clearAllCheckboxes() {
        document.querySelectorAll('.commission-checkbox').forEach(cb => { cb.checked = false; });
        document.querySelectorAll('thead input[type="checkbox"]').forEach(cb => { cb.checked = false; });
        selectedIds = [];
        document.getElementById('bulk-actions').style.display = 'none';
    }

    function updateSelection() {
        const container = document.querySelector('[x-show="commissionSubTab === \'partner\'"]')?.offsetParent !== null
            ? document.querySelector('[x-show="commissionSubTab === \'partner\'"]')
            : document.querySelector('[x-show="commissionSubTab === \'manager\'"]');
        selectedIds = container
            ? Array.from(container.querySelectorAll('.commission-checkbox:checked')).map(cb => parseInt(cb.value))
            : [];

        const bulkActions = document.getElementById('bulk-actions');
        const selectedCount = document.getElementById('selected-count');

        if (selectedIds.length > 0) {
            bulkActions.style.display = 'flex';
            selectedCount.textContent = selectedIds.length;
        } else {
            bulkActions.style.display = 'none';
        }
    }

    function toggleSelectAll(checkbox) {
        const container = checkbox.closest('.bg-white.rounded-lg');
        container.querySelectorAll('.commission-checkbox').forEach(cb => { cb.checked = checkbox.checked; });
        updateSelection();
    }

    function openDetailModal(commissionId) {
        fetch('{{ url("finance/sales-commissions") }}/' + commissionId + '/detail')
            .then(response => response.text())
            .then(html => {
                document.getElementById('detail-modal-content').innerHTML = html;
                document.getElementById('detail-modal').classList.remove('hidden');
            });
    }

    function closeDetailModal() {
        document.getElementById('detail-modal').classList.add('hidden');
    }

    function approveCommission(id) {
        if (!confirm('승인하시겠습니까?')) return;

        fetch('{{ url("finance/sales-commissions") }}/' + id + '/approve', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert(data.message || '오류가 발생했습니다.');
            }
        });
    }

    function bulkApprove() {
        if (selectedIds.length === 0) { alert('선택된 항목이 없습니다.'); return; }
        if (!confirm(selectedIds.length + '건을 승인하시겠습니까?')) return;

        fetch('{{ route("finance.sales-commissions.bulk-approve") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ ids: selectedIds })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) { alert(data.message); location.reload(); }
            else { alert(data.message || '오류가 발생했습니다.'); }
        });
    }

    function markPaidCommission(id) {
        const bankReference = prompt('이체 참조번호를 입력하세요 (선택사항)');
        if (bankReference === null) return;

        fetch('{{ url("finance/sales-commissions") }}/' + id + '/mark-paid', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ bank_reference: bankReference })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) { alert(data.message); location.reload(); }
            else { alert(data.message || '오류가 발생했습니다.'); }
        });
    }

    function bulkMarkPaid() {
        if (selectedIds.length === 0) { alert('선택된 항목이 없습니다.'); return; }
        const bankReference = prompt('이체 참조번호를 입력하세요 (선택사항)');
        if (bankReference === null) return;
        if (!confirm(selectedIds.length + '건을 지급완료 처리하시겠습니까?')) return;

        fetch('{{ route("finance.sales-commissions.bulk-mark-paid") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ ids: selectedIds, bank_reference: bankReference })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) { alert(data.message); location.reload(); }
            else { alert(data.message || '오류가 발생했습니다.'); }
        });
    }

    function unapproveCommission(id) {
        if (!confirm('승인을 취소하시겠습니까?')) return;

        fetch('{{ url("finance/sales-commissions") }}/' + id + '/unapprove', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) { alert(data.message); location.reload(); }
            else { alert(data.message || '오류가 발생했습니다.'); }
        });
    }

    function cancelCommission(id) {
        if (!confirm('취소하시겠습니까?')) return;

        fetch('{{ url("finance/sales-commissions") }}/' + id + '/cancel', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) { alert(data.message); location.reload(); }
            else { alert(data.message || '오류가 발생했습니다.'); }
        });
    }

    function saveSettlementDate(commissionId, field, value) {
        fetch(`{{ url('finance/sales-commissions') }}/${commissionId}/update-date`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ field: field, value: value })
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) {
                alert(data.message || '저장에 실패했습니다.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('저장 중 오류가 발생했습니다.');
        });
    }

    function formatCommissionInput(el) {
        const raw = el.value.replace(/,/g, '').replace(/[^0-9]/g, '');
        el.value = raw ? Number(raw).toLocaleString() : '';
    }

    function exportCurrentTable() {
        let table, filename;
        const today = new Date().toISOString().slice(0, 10).replace(/-/g, '');

        // 현재 보이는 탭의 테이블 감지 (display !== 'none'인 컨테이너)
        const commissionPanel = document.querySelector('#commission-table-container');
        const managerPanel = document.querySelector('#manager-table-container');
        const customerPanel = document.querySelector('#customer-content');
        const subscriptionPanel = document.querySelector('#subscription-content');

        if (customerPanel && customerPanel.closest('[x-show]')?.style.display !== 'none' && customerPanel.querySelector('table')) {
            table = customerPanel.querySelector('table');
            filename = `고객사정산_${today}.csv`;
        } else if (subscriptionPanel && subscriptionPanel.closest('[x-show]')?.style.display !== 'none' && subscriptionPanel.querySelector('table')) {
            table = subscriptionPanel.querySelector('table');
            filename = `구독관리_${today}.csv`;
        } else if (managerPanel && managerPanel.closest('[x-show]')?.style.display !== 'none' && managerPanel.querySelector('table')) {
            table = managerPanel.querySelector('table');
            filename = `매니저수당_${today}.csv`;
        } else if (commissionPanel && commissionPanel.querySelector('table')) {
            table = commissionPanel.querySelector('table');
            filename = `영업파트너수당_${today}.csv`;
        }

        if (!table) {
            alert('내보낼 데이터가 없습니다.');
            return;
        }

        // 제외할 컬럼 인덱스 파악 (체크박스, 액션)
        const skipCols = new Set();
        const ths = table.querySelectorAll('thead th');
        ths.forEach((th, i) => {
            const text = th.textContent.trim();
            if (!text || text === '액션') skipCols.add(i);
        });

        // 헤더 추출
        const rows = [];
        const headerRow = [];
        ths.forEach((th, i) => {
            if (skipCols.has(i)) return;
            headerRow.push(th.textContent.trim());
        });
        rows.push(headerRow);
        const totalCols = headerRow.length;

        // rowspan 추적용 배열: 각 논리 열에 대해 남은 rowspan과 값
        const rowspanTracker = new Array(totalCols).fill(null);

        // 본문 추출 (rowspan 처리)
        const tbody = table.querySelector('tbody');
        if (tbody) {
            tbody.querySelectorAll('tr').forEach(tr => {
                if (tr.querySelector('td[colspan]')) return;

                const tds = tr.querySelectorAll('td');
                const row = new Array(totalCols).fill('');
                let tdIdx = 0; // 실제 DOM td 인덱스
                let logicalIdx = 0; // 논리 열 인덱스 (skip 컬럼 포함)
                let outIdx = 0; // 출력 열 인덱스

                while (outIdx < totalCols && tdIdx <= tds.length) {
                    // 현재 논리 열이 skip 대상인지 확인
                    if (skipCols.has(logicalIdx)) {
                        // skip 컬럼의 td 소비 (rowspan이 아닌 경우)
                        if (!rowspanTracker[logicalIdx] || rowspanTracker[logicalIdx].remaining <= 0) {
                            if (tdIdx < tds.length) tdIdx++;
                        } else {
                            rowspanTracker[logicalIdx].remaining--;
                        }
                        logicalIdx++;
                        continue;
                    }

                    // rowspan이 남아 있으면 이전 값 사용
                    if (rowspanTracker[logicalIdx] && rowspanTracker[logicalIdx].remaining > 0) {
                        row[outIdx] = rowspanTracker[logicalIdx].value;
                        rowspanTracker[logicalIdx].remaining--;
                        outIdx++;
                        logicalIdx++;
                        continue;
                    }

                    // 현재 td에서 값 추출
                    if (tdIdx < tds.length) {
                        const td = tds[tdIdx];
                        const rs = parseInt(td.getAttribute('rowspan') || '1');

                        // 셀 값 추출
                        const dateInput = td.querySelector('input[type="date"]');
                        const textInput = td.querySelector('input[type="text"]');
                        let text;
                        if (dateInput) {
                            text = dateInput.value || '';
                        } else if (textInput) {
                            text = textInput.value || '';
                        } else {
                            text = td.textContent.replace(/\s+/g, ' ').trim();
                        }

                        row[outIdx] = text;

                        // rowspan 기록
                        if (rs > 1) {
                            rowspanTracker[logicalIdx] = { value: text, remaining: rs - 1 };
                        } else {
                            rowspanTracker[logicalIdx] = null;
                        }

                        tdIdx++;
                    }

                    outIdx++;
                    logicalIdx++;
                }

                if (row.some(c => c !== '')) {
                    rows.push(row);
                }
            });
        }

        if (rows.length <= 1) {
            alert('내보낼 데이터가 없습니다.');
            return;
        }

        // CSV 생성 (UTF-8 BOM 포함)
        const BOM = '\uFEFF';
        const csvContent = BOM + rows.map(row =>
            row.map(cell => {
                const escaped = String(cell).replace(/"/g, '""');
                return `"${escaped}"`;
            }).join(',')
        ).join('\n');

        // 다운로드
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();
        URL.revokeObjectURL(link.href);
    }

    document.addEventListener('DOMContentLoaded', function() {
        const initialTab = '{{ $initialTab }}';
        const tabRoutes = {
            'customer': '{{ route("finance.settlement.customer") }}',
            'subscription': '{{ route("finance.settlement.subscription") }}',
        };
        if (tabRoutes[initialTab]) {
            htmx.ajax('GET', tabRoutes[initialTab], {target: '#' + initialTab + '-content'});
        }
    });
</script>
@endpush