467 lines
18 KiB
PHP
467 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '영업파트너 고객관리')
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* 새로고침 버튼 아이콘 상태 */
|
|
.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="flex flex-col h-full">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6 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>
|
|
<!-- 새로고침 버튼 -->
|
|
<button type="button"
|
|
hx-get="{{ route('sales.admin-prospects.refresh', request()->query()) }}"
|
|
hx-target="#admin-prospects-content"
|
|
hx-swap="innerHTML"
|
|
class="refresh-btn inline-flex items-center gap-1.5 px-4 py-2 text-sm text-gray-600 hover:text-blue-600 bg-white hover:bg-blue-50 border border-gray-300 rounded-lg transition-colors shadow-sm"
|
|
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>새로고침</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 콘텐츠 영역 (HTMX로 새로고침) -->
|
|
<div id="admin-prospects-content" class="flex-1 flex flex-col min-h-0">
|
|
@include('sales.admin-prospects.partials.content')
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 삭제 확인 모달 -->
|
|
@if(auth()->user()->isSuperAdmin())
|
|
<div id="deleteModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeDeleteModal()"></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">
|
|
<div class="text-center">
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
|
|
<svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2">가망고객 삭제</h3>
|
|
<p class="text-sm text-gray-500 mb-1">다음 가망고객을 삭제하시겠습니까?</p>
|
|
<p id="deleteTargetName" class="text-base font-semibold text-red-600 mb-4"></p>
|
|
<p class="text-xs text-gray-400 mb-6">관련된 시나리오 체크리스트, 관리 정보, 수당 정보가 함께 삭제됩니다.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button type="button" onclick="closeDeleteModal()" class="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
|
|
취소
|
|
</button>
|
|
<button type="button" id="confirmDeleteBtn" onclick="confirmDelete()" class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition">
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 상세 모달 -->
|
|
<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"></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-3xl">
|
|
<div class="p-12 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<p class="mt-2 text-gray-500">로딩 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// 상태 토글 팝오버
|
|
let activePopover = null;
|
|
|
|
function toggleProspectStatus(prospectId, e) {
|
|
e = e || window.event;
|
|
closeStatusPopover();
|
|
|
|
const btn = document.getElementById(`status-btn-${prospectId}`);
|
|
const currentLabel = btn.textContent.trim();
|
|
const newLabel = currentLabel === '영업중' ? '완료' : '영업중';
|
|
const newColor = currentLabel === '영업중'
|
|
? 'bg-emerald-600 hover:bg-emerald-700'
|
|
: 'bg-blue-600 hover:bg-blue-700';
|
|
|
|
const popover = document.createElement('div');
|
|
popover.id = 'status-popover';
|
|
popover.className = 'fixed z-[60] bg-white rounded-lg shadow-xl border border-gray-200 p-3 w-48';
|
|
popover.innerHTML = `
|
|
<p class="text-xs text-gray-500 mb-2.5 text-center">
|
|
<span class="font-medium text-gray-800">${currentLabel}</span>
|
|
<span class="mx-1">→</span>
|
|
<span class="font-bold text-gray-900">${newLabel}</span>
|
|
</p>
|
|
<div class="flex gap-2">
|
|
<button onclick="closeStatusPopover()" class="flex-1 px-2 py-1.5 text-xs font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-md transition">취소</button>
|
|
<button onclick="executeToggle(${prospectId})" class="flex-1 px-2 py-1.5 text-xs font-medium text-white ${newColor} rounded-md transition">변경</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(popover);
|
|
activePopover = popover;
|
|
|
|
// 클릭 위치 기준 배치
|
|
const rect = btn.getBoundingClientRect();
|
|
let top = rect.bottom + 6;
|
|
let left = rect.left + (rect.width / 2) - 96;
|
|
|
|
// 화면 밖으로 나가지 않도록 보정
|
|
if (left < 8) left = 8;
|
|
if (left + 192 > window.innerWidth - 8) left = window.innerWidth - 200;
|
|
if (top + popover.offsetHeight > window.innerHeight - 8) top = rect.top - popover.offsetHeight - 6;
|
|
|
|
popover.style.top = top + 'px';
|
|
popover.style.left = left + 'px';
|
|
|
|
// 바깥 클릭 시 닫기
|
|
setTimeout(() => document.addEventListener('click', onOutsideClick), 0);
|
|
}
|
|
|
|
function onOutsideClick(e) {
|
|
const popover = document.getElementById('status-popover');
|
|
if (popover && !popover.contains(e.target) && !e.target.closest('[id^="status-btn-"]')) {
|
|
closeStatusPopover();
|
|
}
|
|
}
|
|
|
|
function closeStatusPopover() {
|
|
const popover = document.getElementById('status-popover');
|
|
if (popover) popover.remove();
|
|
document.removeEventListener('click', onOutsideClick);
|
|
activePopover = null;
|
|
}
|
|
|
|
function executeToggle(prospectId) {
|
|
const btn = document.getElementById(`status-btn-${prospectId}`);
|
|
const popoverBtn = document.querySelector('#status-popover button:last-child');
|
|
if (popoverBtn) { popoverBtn.disabled = true; popoverBtn.textContent = '...'; }
|
|
|
|
fetch(`/sales/admin-prospects/${prospectId}/toggle-status`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
closeStatusPopover();
|
|
if (result.success) {
|
|
btn.textContent = result.status_label;
|
|
btn.className = `px-2 py-1 text-xs font-medium rounded-full cursor-pointer hover:opacity-80 transition ${result.status_color}`;
|
|
} else {
|
|
alert(result.message || '상태 변경에 실패했습니다.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
closeStatusPopover();
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
function updateHqStatus(prospectId, status) {
|
|
const selectEl = event.target;
|
|
const originalValue = selectEl.dataset.originalValue || selectEl.value;
|
|
|
|
fetch(`/sales/admin-prospects/${prospectId}/hq-status`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ hq_status: status })
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
// 성공 시 색상 클래스 업데이트
|
|
selectEl.className = 'text-xs font-medium rounded-lg px-2 py-1 border cursor-pointer ';
|
|
if (status === 'handover') {
|
|
selectEl.className += 'bg-emerald-100 text-emerald-700 border-emerald-300';
|
|
} else if (status === 'pending') {
|
|
selectEl.className += 'bg-gray-100 text-gray-600 border-gray-300';
|
|
} else {
|
|
selectEl.className += 'bg-purple-100 text-purple-700 border-purple-300';
|
|
}
|
|
selectEl.dataset.originalValue = status;
|
|
|
|
// 인계일 셀 동적 업데이트
|
|
const handoverCell = document.getElementById(`handover-cell-${prospectId}`);
|
|
if (handoverCell) {
|
|
if (status === 'handover' && result.handover_at) {
|
|
handoverCell.innerHTML = `<input type="date"
|
|
id="handover-date-${prospectId}"
|
|
class="w-28 h-7 text-xs px-1 border-2 border-emerald-300 rounded cursor-pointer hover:border-emerald-400 focus:outline-none focus:border-emerald-500 text-emerald-600 font-medium bg-emerald-50"
|
|
value="${result.handover_at}"
|
|
onchange="saveHandoverDate(${prospectId}, this.value)">`;
|
|
} else {
|
|
handoverCell.innerHTML = `<span class="text-sm text-gray-400">-</span>`;
|
|
}
|
|
}
|
|
} else {
|
|
alert('상태 변경에 실패했습니다.');
|
|
selectEl.value = originalValue;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('상태 변경 중 오류가 발생했습니다.');
|
|
selectEl.value = originalValue;
|
|
});
|
|
}
|
|
|
|
function openDetailModal(id) {
|
|
const modal = document.getElementById('detailModal');
|
|
const content = document.getElementById('detailModalContent');
|
|
|
|
modal.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
content.innerHTML = `
|
|
<div class="p-12 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<p class="mt-2 text-gray-500">로딩 중...</p>
|
|
</div>
|
|
`;
|
|
|
|
fetch(`/sales/admin-prospects/${id}/modal-show`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'text/html'
|
|
}
|
|
})
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
content.innerHTML = html;
|
|
})
|
|
.catch(error => {
|
|
content.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() {
|
|
const modal = document.getElementById('detailModal');
|
|
modal.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeDetailModal();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('[data-close-modal]')) {
|
|
e.preventDefault();
|
|
closeDetailModal();
|
|
}
|
|
});
|
|
|
|
// 삭제 모달
|
|
let deleteProspectId = null;
|
|
|
|
function openDeleteModal(id, companyName) {
|
|
deleteProspectId = id;
|
|
document.getElementById('deleteTargetName').textContent = companyName;
|
|
document.getElementById('deleteModal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeDeleteModal() {
|
|
document.getElementById('deleteModal').classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
deleteProspectId = null;
|
|
}
|
|
|
|
function confirmDelete() {
|
|
if (!deleteProspectId) return;
|
|
|
|
const btn = document.getElementById('confirmDeleteBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = '삭제 중...';
|
|
|
|
fetch(`/sales/admin-prospects/${deleteProspectId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
closeDeleteModal();
|
|
window.location.reload();
|
|
} else {
|
|
alert(result.message || '삭제에 실패했습니다.');
|
|
btn.disabled = false;
|
|
btn.textContent = '삭제';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('삭제 중 오류가 발생했습니다.');
|
|
btn.disabled = false;
|
|
btn.textContent = '삭제';
|
|
});
|
|
}
|
|
|
|
// 인계일 저장
|
|
function saveHandoverDate(prospectId, date) {
|
|
if (!date) return;
|
|
|
|
fetch(`/sales/admin-prospects/${prospectId}/handover-date`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ handover_at: date })
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (!result.success) {
|
|
alert(result.message || '인계일 저장에 실패했습니다.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('인계일 저장 중 오류가 발생했습니다.');
|
|
});
|
|
}
|
|
|
|
// 납입 날짜 저장 (date input에서 호출)
|
|
function saveCommissionDate(prospectId, field, date) {
|
|
const input = document.querySelector(`input[data-prospect-id="${prospectId}"][data-field="${field}"]`);
|
|
|
|
// 날짜가 비어있으면 삭제 처리
|
|
if (!date) {
|
|
clearCommissionDate(prospectId, field, input);
|
|
return;
|
|
}
|
|
|
|
fetch(`/sales/admin-prospects/${prospectId}/commission-date`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ field: field, date: date })
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.success && input) {
|
|
updateInputStyle(input, field, true);
|
|
|
|
// 납입일 저장 시 수당지급일 자동 반영
|
|
if (result.auto_field && result.auto_date) {
|
|
const autoInput = document.querySelector(`input[data-prospect-id="${prospectId}"][data-field="${result.auto_field}"]`);
|
|
if (autoInput) {
|
|
autoInput.value = result.auto_date;
|
|
updateInputStyle(autoInput, result.auto_field, true);
|
|
}
|
|
}
|
|
} else {
|
|
alert(result.message || '날짜 저장에 실패했습니다.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('날짜 저장 중 오류가 발생했습니다.');
|
|
});
|
|
}
|
|
|
|
// 수당 날짜 삭제
|
|
function clearCommissionDate(prospectId, field, input) {
|
|
fetch(`/sales/admin-prospects/${prospectId}/commission-date`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ field: field })
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.success && input) {
|
|
updateInputStyle(input, field, false);
|
|
|
|
// 납입일 삭제 시 수당지급일도 함께 초기화
|
|
if (result.auto_field) {
|
|
const autoInput = document.querySelector(`input[data-prospect-id="${prospectId}"][data-field="${result.auto_field}"]`);
|
|
if (autoInput) {
|
|
autoInput.value = '';
|
|
updateInputStyle(autoInput, result.auto_field, false);
|
|
}
|
|
}
|
|
} else if (!result.success) {
|
|
alert(result.message || '날짜 삭제에 실패했습니다.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('날짜 삭제 중 오류가 발생했습니다.');
|
|
});
|
|
}
|
|
|
|
// 입력 스타일 업데이트
|
|
function updateInputStyle(input, field, hasValue) {
|
|
// 기본 클래스
|
|
input.className = 'commission-date-input w-24 text-xs px-1 py-1 border border-gray-200 rounded text-center focus:outline-none focus:ring-1';
|
|
|
|
if (hasValue) {
|
|
input.className += ' text-emerald-600 font-medium bg-emerald-50 focus:ring-emerald-500 focus:border-emerald-500';
|
|
} else {
|
|
input.className += ' text-gray-400 bg-white focus:ring-emerald-500 focus:border-emerald-500';
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|