@extends('layouts.app')

@section('title', '영업파트너 승인')

@section('content')
<div class="flex flex-col h-full">
    <!-- 페이지 헤더 -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4 flex-shrink-0">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">영업파트너 승인</h1>
            <p class="text-sm text-gray-500 mt-1">영업파트너 가입 신청을 검토하고 승인/반려합니다</p>
        </div>
    </div>

    <!-- 통계 카드 -->
    <div class="grid grid-cols-3 gap-4 mb-4 flex-shrink-0">
        <div class="bg-yellow-50 rounded-lg shadow-sm p-3">
            <div class="text-xs text-yellow-600">승인 대기</div>
            <div class="text-xl font-bold text-yellow-800">{{ number_format($stats['pending']) }}명</div>
        </div>
        <div class="bg-emerald-50 rounded-lg shadow-sm p-3">
            <div class="text-xs text-emerald-600">오늘 승인</div>
            <div class="text-xl font-bold text-emerald-800">{{ number_format($stats['approved_today']) }}명</div>
        </div>
        <div class="bg-red-50 rounded-lg shadow-sm p-3">
            <div class="text-xs text-red-600">오늘 반려</div>
            <div class="text-xl font-bold text-red-800">{{ number_format($stats['rejected_today']) }}명</div>
        </div>
    </div>

    <!-- 필터 영역 -->
    <div class="flex-shrink-0 mb-4">
        <form method="GET" class="flex flex-wrap gap-2 sm:gap-4 items-center bg-white p-3 rounded-lg shadow-sm">
            <div class="flex-1 min-w-0 w-full sm:w-auto">
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="이름, 아이디, 이메일, 전화번호로 검색..."
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
            </div>
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition text-sm">
                검색
            </button>
        </form>
    </div>

    <!-- 2분할 레이아웃 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-0">
        <!-- 좌측: 승인 대기 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col min-h-0">
            <div class="bg-yellow-500 text-white px-4 py-3 flex items-center gap-2 flex-shrink-0">
                <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="font-semibold">승인 대기</span>
                <span class="ml-auto bg-yellow-600 px-2 py-0.5 rounded-full text-xs">{{ $pendingPartners->total() }}명</span>
            </div>
            <div class="overflow-y-auto flex-1">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50 sticky top-0">
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">신청자</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">역할</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">유치자</th>
                            <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">처리</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="pendingTable">
                        @forelse($pendingPartners as $partner)
                        <tr class="hover:bg-yellow-50" id="pending-row-{{ $partner->id }}">
                            <td class="px-4 py-3">
                                <div class="font-medium text-gray-900 text-sm">{{ $partner->name }}</div>
                                <div class="text-xs text-gray-500">{{ $partner->user_id ?? $partner->email }}</div>
                                <div class="text-xs text-gray-400">{{ $partner->created_at->format('m/d H:i') }}</div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap gap-1">
                                    @foreach($partner->userRoles as $userRole)
                                    @php
                                        $roleColor = match($userRole->role->name ?? '') {
                                            'sales' => 'bg-blue-100 text-blue-800',
                                            'manager' => 'bg-purple-100 text-purple-800',
                                            default => 'bg-gray-100 text-gray-800',
                                        };
                                        $roleLabel = match($userRole->role->name ?? '') {
                                            'sales' => '영업파트너',
                                            'manager' => '상담매니저',
                                            default => $userRole->role->name ?? '-',
                                        };
                                    @endphp
                                    <span class="px-1.5 py-0.5 text-xs font-medium rounded {{ $roleColor }}">
                                        {{ $roleLabel }}
                                    </span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-500">
                                @if($partner->parent)
                                    <span class="text-blue-600">{{ $partner->parent->name }}</span>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <button type="button"
                                            onclick="approvePartner({{ $partner->id }}, '{{ $partner->name }}')"
                                            class="px-2 py-1 bg-emerald-500 hover:bg-emerald-600 text-white text-xs font-medium rounded transition">
                                        승인
                                    </button>
                                    <button type="button"
                                            onclick="openRejectModal({{ $partner->id }}, '{{ $partner->name }}')"
                                            class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-xs font-medium rounded transition">
                                        반려
                                    </button>
                                    <button type="button"
                                            onclick="openDetailModal({{ $partner->id }})"
                                            class="px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white text-xs font-medium rounded transition">
                                        상세
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-4 py-8 text-center text-gray-500 text-sm">
                                <svg class="w-12 h-12 mx-auto text-gray-300 mb-2" 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>
                                승인 대기 중인 파트너가 없습니다.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($pendingPartners->hasPages())
            <div class="px-4 py-2 border-t border-gray-200 flex-shrink-0 bg-gray-50">
                {{ $pendingPartners->withQueryString()->links() }}
            </div>
            @endif
        </div>

        <!-- 우측: 승인 완료 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col min-h-0">
            <div class="bg-emerald-500 text-white px-4 py-3 flex items-center gap-2 flex-shrink-0">
                <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="font-semibold">승인 완료</span>
                <span class="ml-auto bg-emerald-600 px-2 py-0.5 rounded-full text-xs">{{ $approvedPartners->total() }}명</span>
            </div>
            <div class="overflow-y-auto flex-1">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50 sticky top-0">
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">파트너</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">역할</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">유치자</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">승인일</th>
                            <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">상세</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="approvedTable">
                        @forelse($approvedPartners as $partner)
                        <tr class="hover:bg-emerald-50" id="approved-row-{{ $partner->id }}">
                            <td class="px-4 py-3">
                                <div class="font-medium text-gray-900 text-sm">{{ $partner->name }}</div>
                                <div class="text-xs text-gray-500">{{ $partner->user_id ?? $partner->email }}</div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap gap-1">
                                    @foreach($partner->userRoles as $userRole)
                                    @php
                                        $roleColor = match($userRole->role->name ?? '') {
                                            'sales' => 'bg-blue-100 text-blue-800',
                                            'manager' => 'bg-purple-100 text-purple-800',
                                            default => 'bg-gray-100 text-gray-800',
                                        };
                                        $roleLabel = match($userRole->role->name ?? '') {
                                            'sales' => '영업파트너',
                                            'manager' => '상담매니저',
                                            default => $userRole->role->name ?? '-',
                                        };
                                    @endphp
                                    <span class="px-1.5 py-0.5 text-xs font-medium rounded {{ $roleColor }}">
                                        {{ $roleLabel }}
                                    </span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-500">
                                @if($partner->parent)
                                    <span class="text-blue-600">{{ $partner->parent->name }}</span>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-500">
                                @if($partner->approved_at)
                                    {{ $partner->approved_at->format('m/d H:i') }}
                                @else
                                    -
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                <button type="button"
                                        onclick="openDetailModal({{ $partner->id }})"
                                        class="px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white text-xs font-medium rounded transition">
                                    상세
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-gray-500 text-sm">
                                <svg class="w-12 h-12 mx-auto text-gray-300 mb-2" 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 0z" />
                                </svg>
                                승인된 파트너가 없습니다.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($approvedPartners->hasPages())
            <div class="px-4 py-2 border-t border-gray-200 flex-shrink-0 bg-gray-50">
                {{ $approvedPartners->withQueryString()->links() }}
            </div>
            @endif
        </div>
    </div>
</div>

<!-- 반려 사유 모달 -->
<div id="rejectModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">반려 사유 입력</h3>
            <p class="text-sm text-gray-600 mb-4">
                <span id="rejectPartnerName" class="font-medium text-red-600"></span>님의 가입 신청을 반려합니다.
            </p>
            <form id="rejectForm" onsubmit="submitReject(event)">
                <input type="hidden" id="rejectPartnerId" name="partner_id">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">반려 사유 <span class="text-red-500">*</span></label>
                    <textarea name="rejection_reason" id="rejectionReason" rows="4" required
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                              placeholder="반려 사유를 입력하세요..."></textarea>
                </div>
                <div class="flex justify-end gap-3">
                    <button type="button" onclick="closeRejectModal()"
                            class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                        취소
                    </button>
                    <button type="submit"
                            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition">
                        반려 처리
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 상세 모달 -->
<div id="detailModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeDetailModal()"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div id="detailModalContent" class="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl">
            <div class="p-6 text-center">
                <svg class="w-8 h-8 animate-spin text-blue-600 mx-auto" 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 12h4z"></path>
                </svg>
                <p class="mt-2 text-gray-500">로딩 중...</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// 승인 처리
function approvePartner(id, name) {
    showConfirm(
        `<strong>${name}</strong>님의 가입 신청을 승인하시겠습니까?`,
        () => {
            fetch(`/sales/managers/approvals/${id}/approve`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'HX-Request': 'true'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    // 페이지 새로고침으로 양쪽 테이블 업데이트
                    window.location.reload();
                } else {
                    showToast(data.message || '승인 처리에 실패했습니다.', 'error');
                }
            })
            .catch(error => {
                showToast('서버 오류가 발생했습니다.', 'error');
                console.error(error);
            });
        },
        { title: '승인 확인', icon: 'question', confirmText: '승인' }
    );
}

// 반려 모달 열기
function openRejectModal(id, name) {
    document.getElementById('rejectPartnerId').value = id;
    document.getElementById('rejectPartnerName').textContent = name;
    document.getElementById('rejectionReason').value = '';
    document.getElementById('rejectModal').classList.remove('hidden');
}

// 반려 모달 닫기
function closeRejectModal() {
    document.getElementById('rejectModal').classList.add('hidden');
}

// 반려 제출
function submitReject(event) {
    event.preventDefault();

    const id = document.getElementById('rejectPartnerId').value;
    const reason = document.getElementById('rejectionReason').value;

    fetch(`/sales/managers/approvals/${id}/reject`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'HX-Request': 'true'
        },
        body: JSON.stringify({ rejection_reason: reason })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeRejectModal();
            showToast(data.message, 'success');
            window.location.reload();
        } else {
            showToast(data.message || '반려 처리에 실패했습니다.', 'error');
        }
    })
    .catch(error => {
        showToast('서버 오류가 발생했습니다.', 'error');
        console.error(error);
    });
}

// 상세 모달 열기
function openDetailModal(id) {
    document.getElementById('detailModal').classList.remove('hidden');
    document.getElementById('detailModalContent').innerHTML = `
        <div class="p-6 text-center">
            <svg class="w-8 h-8 animate-spin text-blue-600 mx-auto" 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 12h4z"></path>
            </svg>
            <p class="mt-2 text-gray-500">로딩 중...</p>
        </div>
    `;

    fetch(`/sales/managers/${id}/modal-show`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'text/html'
        }
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('detailModalContent').innerHTML = html;
    })
    .catch(error => {
        document.getElementById('detailModalContent').innerHTML = `
            <div class="p-6 text-center">
                <p class="text-red-500">오류가 발생했습니다.</p>
                <button onclick="closeDetailModal()" class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg">닫기</button>
            </div>
        `;
    });
}

// 상세 모달 닫기
function closeDetailModal() {
    document.getElementById('detailModal').classList.add('hidden');
}

// 수정 모달 열기
function openEditModal(id) {
    document.getElementById('detailModalContent').innerHTML = `
        <div class="p-6 text-center">
            <svg class="w-8 h-8 animate-spin text-blue-600 mx-auto" 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 12h4z"></path>
            </svg>
            <p class="mt-2 text-gray-500">로딩 중...</p>
        </div>
    `;

    fetch(`/sales/managers/${id}/modal-edit`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'text/html'
        }
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('detailModalContent').innerHTML = html;
    })
    .catch(error => {
        document.getElementById('detailModalContent').innerHTML = `
            <div class="p-6 text-center">
                <p class="text-red-500">오류가 발생했습니다.</p>
                <button onclick="closeDetailModal()" class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg">닫기</button>
            </div>
        `;
    });
}

// ESC 키로 모달 닫기
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeRejectModal();
        closeDetailModal();
    }
});
</script>
@endpush