@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">&rarr;</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 saveContractedDate(prospectId, date, inputEl) {
    fetch(`/sales/admin-prospects/${prospectId}/contracted-date`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: JSON.stringify({ contracted_at: date || null })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success && inputEl) {
            if (date) {
                inputEl.className = 'w-28 h-7 text-xs px-1 border-2 border-blue-400 rounded cursor-pointer hover:border-blue-400 focus:outline-none focus:border-blue-500 text-blue-600 font-medium bg-blue-50';
            } else {
                inputEl.className = 'w-28 h-7 text-xs px-1 border-2 border-gray-300 rounded cursor-pointer hover:border-blue-400 focus:outline-none focus:border-blue-500 text-gray-500 bg-gray-50';
            }
        } else if (!result.success) {
            alert(result.message || '계약일 저장에 실패했습니다.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('계약일 저장 중 오류가 발생했습니다.');
    });
}

// 인계일 저장
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
