690 lines
42 KiB
PHP
690 lines
42 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '채권추심 프로세스 관리')
|
|
|
|
@section('content')
|
|
<style>
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
.phase-tab-active { background-color: #4f46e5; color: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
|
|
.fade-in { animation: debtFadeIn 0.4s ease-out forwards; }
|
|
@keyframes debtFadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i class="ri-scales-3-line text-indigo-600"></i>
|
|
채권추심 프로세스 관리
|
|
</h1>
|
|
<div class="flex gap-3">
|
|
<div class="px-4 py-2 bg-emerald-50 border border-emerald-100 rounded-lg">
|
|
<p class="text-[10px] text-emerald-600 font-bold uppercase tracking-wider">회수 성공률</p>
|
|
<p class="text-xl font-bold text-emerald-700">84.2%</p>
|
|
</div>
|
|
<div class="px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-lg">
|
|
<p class="text-[10px] text-indigo-600 font-bold uppercase tracking-wider">평균 회수 기간</p>
|
|
<p class="text-xl font-bold text-indigo-700">62일</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 전체 진행률 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6 mb-6 fade-in">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-base font-bold text-gray-700">전체 공정 진행률</span>
|
|
<span id="progress-text" class="text-lg font-black text-indigo-600">0%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-100 rounded-full h-3 overflow-hidden mb-6">
|
|
<div id="progress-bar" class="bg-gradient-to-r from-indigo-500 to-blue-600 h-full transition-all duration-700 ease-out" style="width: 0%"></div>
|
|
</div>
|
|
|
|
<!-- Phase별 진행률 -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 border-t border-gray-100 pt-5">
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-tighter">Phase 1. 기초조사</span>
|
|
<span id="phase1-text" class="text-xs font-bold text-indigo-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase1-bar" class="bg-indigo-500 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-tighter">Phase 2. 보전처분</span>
|
|
<span id="phase2-text" class="text-xs font-bold text-amber-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase2-bar" class="bg-amber-400 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-tighter">Phase 3. 집행권원</span>
|
|
<span id="phase3-text" class="text-xs font-bold text-blue-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase3-bar" class="bg-blue-400 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-tighter">Phase 4. 강제집행</span>
|
|
<span id="phase4-text" class="text-xs font-bold text-emerald-500">0%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 overflow-hidden">
|
|
<div id="phase4-bar" class="bg-emerald-400 h-full transition-all duration-500" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-gray-400 mt-5 text-center italic">* 각 상세 단계의 체크박스를 완료하면 해당 단계 및 전체 진행률에 반영됩니다.</p>
|
|
</div>
|
|
|
|
<!-- 탭 네비게이션 -->
|
|
<div class="flex gap-2 mb-6 overflow-x-auto pb-2">
|
|
<button onclick="showTab('phase1')" id="tab-phase1" class="tab-btn px-5 py-2.5 rounded-lg font-semibold text-sm transition-all whitespace-nowrap phase-tab-active flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center text-[10px]">1</span>
|
|
기초조사 및 독촉
|
|
</button>
|
|
<button onclick="showTab('phase2')" id="tab-phase2" class="tab-btn px-5 py-2.5 rounded-lg font-semibold text-sm transition-all whitespace-nowrap bg-white text-gray-600 hover:bg-gray-100 flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-[10px]">2</span>
|
|
보전 처분
|
|
</button>
|
|
<button onclick="showTab('phase3')" id="tab-phase3" class="tab-btn px-5 py-2.5 rounded-lg font-semibold text-sm transition-all whitespace-nowrap bg-white text-gray-600 hover:bg-gray-100 flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-[10px]">3</span>
|
|
집행권원 확보
|
|
</button>
|
|
<button onclick="showTab('phase4')" id="tab-phase4" class="tab-btn px-5 py-2.5 rounded-lg font-semibold text-sm transition-all whitespace-nowrap bg-white text-gray-600 hover:bg-gray-100 flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-[10px]">4</span>
|
|
강제집행 및 회수
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- 메인 콘텐츠 -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<div class="bg-white rounded-lg shadow-sm p-6 min-h-[500px]">
|
|
|
|
<!-- Phase 1 -->
|
|
<div id="phase1" class="tab-content active space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-gray-800">Phase 1. 기초 조사 및 독촉</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i class="ri-time-line text-xs"></i> 1~2주 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold">목표: 기초 조사</span>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50 border-b">
|
|
<tr>
|
|
<th class="p-4 text-left font-semibold text-gray-600 w-12">체크</th>
|
|
<th class="p-4 text-left font-semibold text-gray-600">세부 항목</th>
|
|
<th class="p-4 text-center font-semibold text-gray-600">담당</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">원인 서류 확보</span><br><span class="text-xs text-gray-500">계약서, 세금계산서, 거래명세서 등</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-blue-50 text-blue-600 rounded text-[11px] font-bold">기업</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">채무자 소재 조사</span><br><span class="text-xs text-gray-500">사업자 등록증, 휴/폐업 여부 확인</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">신용 상태 조사</span><br><span class="text-xs text-gray-500">주거래은행 및 신용 등급 파악</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">내용증명 발송</span><br><span class="text-xs text-gray-500">최후 독촉 및 증거력 확보</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 2 -->
|
|
<div id="phase2" class="tab-content space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-gray-800">Phase 2. 보전 처분</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i class="ri-time-line text-xs"></i> 1~2주 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold">목표: 자산 은닉 방지</span>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50 border-b">
|
|
<tr>
|
|
<th class="p-4 text-left font-semibold text-gray-600 w-12">체크</th>
|
|
<th class="p-4 text-left font-semibold text-gray-600">절차 항목</th>
|
|
<th class="p-4 text-center font-semibold text-gray-600">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">가압류 대상 목적물 특정</span><br><span class="text-xs text-gray-500">부동산, 채권(은행), 유체동산 등</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-gray-100 text-gray-500 rounded text-[10px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">가압류 신청서 접수</span><br><span class="text-xs text-gray-500">관할 법원 전자 접수</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-gray-100 text-gray-500 rounded text-[10px] font-bold">변호사</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">공탁금 납부 (현금/보증보험)</span><br><span class="text-xs text-gray-500">법원 결정에 따른 담보 제공</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] font-bold">기업</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"></td>
|
|
<td class="p-4"><span class="font-medium text-gray-800">가압류 결정문 수령</span><br><span class="text-xs text-gray-500">결정 통지 및 효력 발생 확인</span></td>
|
|
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-gray-100 text-gray-500 rounded text-[10px] font-bold">변호사</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 3 -->
|
|
<div id="phase3" class="tab-content space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-gray-800">Phase 3. 집행권원 확보</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i class="ri-time-line text-xs"></i> 2주~1년 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">목표: 법적 권리 확정</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="p-5 border rounded-lg hover:border-indigo-300 transition-all group relative">
|
|
<div class="absolute top-4 right-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-1 flex items-center gap-2">
|
|
<i class="ri-flashlight-line text-amber-500"></i>
|
|
지급명령 신청
|
|
</h3>
|
|
<div class="flex items-center gap-1 text-[10px] text-amber-600 font-bold mb-2">
|
|
<i class="ri-timer-line text-[10px]"></i> 평균 2~4주 소요
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-4 pr-8 leading-relaxed">채무자가 빚을 인정할 때 유리. 가장 신속한 집행권원 확보 방법.</p>
|
|
<div class="flex items-center gap-2 text-[10px] font-bold text-indigo-600 uppercase tracking-wider">
|
|
<span class="px-2 py-0.5 bg-indigo-50 rounded">변호사 담당</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-5 border rounded-lg hover:border-indigo-300 transition-all group relative">
|
|
<div class="absolute top-4 right-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-1 flex items-center gap-2">
|
|
<i class="ri-scales-2-line text-gray-600"></i>
|
|
민사소송 접수
|
|
</h3>
|
|
<div class="flex items-center gap-1 text-[10px] text-gray-500 font-bold mb-2">
|
|
<i class="ri-timer-line text-[10px]"></i> 약 6~12개월 소요
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-4 pr-8 leading-relaxed">채권채무 다툼이 있거나 지급명령 이의신청 시 본안 소송 진행.</p>
|
|
<div class="flex items-center gap-2 text-[10px] font-bold text-gray-500 uppercase tracking-wider">
|
|
<span class="px-2 py-0.5 bg-gray-100 rounded">변호사 담당</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 4 -->
|
|
<div id="phase4" class="tab-content space-y-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold text-gray-800">Phase 4. 강제 집행 및 회수</h2>
|
|
<div class="flex gap-2">
|
|
<span class="px-2.5 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<i class="ri-time-line text-xs"></i> 1~3개월 소요
|
|
</span>
|
|
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-bold">목표: 실제 회수 완료</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="p-4 bg-white border border-gray-200 rounded-lg flex items-center justify-between hover:border-indigo-200 transition-colors">
|
|
<div class="flex items-center gap-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-0.5">
|
|
<h4 class="text-sm font-bold text-gray-800">재산 명시 및 재산 조회 신청</h4>
|
|
<span class="text-[10px] font-medium text-gray-400 bg-gray-50 px-1.5 rounded">1~2개월</span>
|
|
</div>
|
|
<p class="text-[11px] text-gray-500">법원을 통해 채무자의 숨겨진 재산을 찾아내는 단계</p>
|
|
</div>
|
|
</div>
|
|
<span class="hidden md:block text-[10px] font-bold text-gray-400">Phase 4-1</span>
|
|
</div>
|
|
<div class="p-4 bg-white border border-gray-200 rounded-lg flex items-center justify-between hover:border-indigo-200 transition-colors">
|
|
<div class="flex items-center gap-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-0.5">
|
|
<h4 class="text-sm font-bold text-gray-800">강제 집행 (압류/경매) 실시</h4>
|
|
<span class="text-[10px] font-medium text-gray-400 bg-gray-50 px-1.5 rounded">집행 대상별 상이</span>
|
|
</div>
|
|
<p class="text-[11px] text-gray-500">통장 압류, 유체동산 압류(빨간딱지), 부동산 경매 등</p>
|
|
</div>
|
|
</div>
|
|
<span class="hidden md:block text-[10px] font-bold text-gray-400">Phase 4-2</span>
|
|
</div>
|
|
<div class="p-4 bg-emerald-50 border border-emerald-100 rounded-lg flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-emerald-600 rounded border-gray-300 focus:ring-emerald-500">
|
|
<div>
|
|
<h4 class="text-sm font-bold text-emerald-800">회수 완료 및 성공보수 정산</h4>
|
|
<p class="text-[11px] text-emerald-600">실제 금액 입금 확인 후 사건 최종 종결</p>
|
|
</div>
|
|
</div>
|
|
<i class="ri-trophy-line text-emerald-400 text-lg"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사이드바 -->
|
|
<div class="space-y-6">
|
|
<!-- 채무 및 상환 현황 -->
|
|
<div class="bg-gray-900 rounded-lg p-6 text-white shadow-sm fade-in">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="w-10 h-10 bg-indigo-500/20 rounded-lg flex items-center justify-center text-indigo-400">
|
|
<i class="ri-bank-card-line text-xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">채무 및 상환 현황</h3>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- 금액 정보 -->
|
|
<div class="p-4 bg-white/5 rounded-lg border border-white/10">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs text-gray-400">총 청구 금액 (원금)</span>
|
|
<span class="text-sm font-bold">50,000,000원</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-gray-400">법정 이율 (연 12%)</span>
|
|
<span class="text-sm font-bold text-amber-400">+ 6,000,000원</span>
|
|
</div>
|
|
<div class="mt-3 pt-3 border-t border-white/10 flex justify-between items-center">
|
|
<span class="text-sm font-bold">최종 회수 목표액</span>
|
|
<span class="text-lg font-black text-indigo-400">56,000,000원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상환 방식 설정 -->
|
|
<div class="space-y-4">
|
|
<label class="text-[10px] font-bold text-gray-500 uppercase tracking-widest pl-1">상환 방식 및 시작일 설정</label>
|
|
|
|
<!-- 시작일 -->
|
|
<div class="p-3 bg-white/5 rounded-lg border border-white/10 flex items-center justify-between">
|
|
<span class="text-[11px] text-gray-400">회수 시작일</span>
|
|
<input type="date" id="recovery-start-date" onchange="generateSchedule()"
|
|
class="bg-transparent text-xs font-bold text-indigo-400 border-none outline-none focus:ring-0 p-0 text-right w-28">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button onclick="setPaymentType('full')" id="btn-pay-full" class="p-3 bg-white/5 rounded-lg border border-white/10 flex flex-col items-center gap-1 group transition-all hover:bg-white/10">
|
|
<span class="text-[11px] text-gray-400">일시납</span>
|
|
<span class="text-xs font-bold font-mono">FULL PAID</span>
|
|
</button>
|
|
<button onclick="setPaymentType('split')" id="btn-pay-split" class="p-3 bg-indigo-500/20 rounded-lg border border-indigo-500/30 flex flex-col items-center gap-1 transition-all">
|
|
<span class="text-[11px] text-indigo-300">분할 납부</span>
|
|
<span class="text-xs font-bold font-mono text-white" id="display-months">12회 분할</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 분할 기간 슬라이더 -->
|
|
<div id="slider-container" class="space-y-2 px-1">
|
|
<div class="flex justify-between text-[10px] text-gray-500 font-bold">
|
|
<span>분할 기간 설정</span>
|
|
<span id="slider-val" class="text-indigo-400">12개월</span>
|
|
</div>
|
|
<input type="range" id="months-slider" min="2" max="36" value="12" oninput="updateMonths(this.value)"
|
|
class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
|
|
<div class="flex justify-between text-[9px] text-gray-600">
|
|
<span>2개월</span>
|
|
<span>36개월</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 월 예상 상환액 -->
|
|
<div id="monthly-info" class="p-4 bg-indigo-500/5 rounded-lg border border-indigo-500/10">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-gray-400">월 예상 상환액</span>
|
|
<span id="monthly-amount" class="text-sm font-bold text-indigo-300">4,666,667원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 납부 일정 체크리스트 -->
|
|
<div id="schedule-container" class="space-y-2 mt-4 max-h-[300px] overflow-y-auto pr-2 hidden">
|
|
<label class="text-[10px] font-bold text-gray-500 uppercase tracking-widest pl-1">납부 일정 체크리스트</label>
|
|
<div id="schedule-list" class="space-y-2"></div>
|
|
</div>
|
|
|
|
<!-- 할인 및 합의 -->
|
|
<div class="p-4 bg-amber-500/5 rounded-lg border border-amber-500/20">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i class="ri-hand-heart-line text-amber-400"></i>
|
|
<span class="text-xs font-bold text-amber-200">할인 및 합의 처리</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-[11px] text-gray-400 leading-tight">합의 목표가: <span id="settlement-target-display">51,000,000</span>원<br>수수료 면제 협의 가능</span>
|
|
<button onclick="openSettlementModal()" class="px-3 py-1.5 bg-amber-500/20 text-amber-400 text-[10px] font-bold rounded-lg hover:bg-amber-500/30 transition-colors">
|
|
합의안 작성
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 pt-6 border-t border-white/10">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs text-gray-400">현재 회수 진행 상태</span>
|
|
<span class="text-xs font-bold text-emerald-400 px-2 py-0.5 bg-emerald-500/10 rounded-full">정상 상환 중</span>
|
|
</div>
|
|
<div class="w-full bg-white/5 rounded-full h-1.5 overflow-hidden">
|
|
<div class="bg-emerald-500 w-[45%] h-full rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 도움말 -->
|
|
<div class="bg-white rounded-lg p-6 shadow-sm fade-in">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-500">
|
|
<i class="ri-question-line text-xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800">도움말</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-500 leading-relaxed mb-6">
|
|
설정된 상환 계획은 법적 효력이 있는 합의서를 기반으로 합니다. 분할 납부 지연 시 <span class="font-bold text-rose-500">기한의 이익</span>이 상실되어 즉시 강제집행 절차로 전환될 수 있습니다.
|
|
</p>
|
|
<button class="w-full py-3 border border-gray-200 rounded-lg text-sm font-bold text-gray-600 hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
|
|
채무 합의서 양식 다운로드
|
|
<i class="ri-download-line text-sm"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 인용 카드 -->
|
|
<div class="bg-gray-50 rounded-lg p-6 border border-gray-100 fade-in">
|
|
<p class="text-sm text-gray-600 italic text-center leading-relaxed">
|
|
"성공적인 채권 회수는 철저한<br>
|
|
<span class="font-bold text-indigo-600">심리적 전술</span>과 <span class="font-bold text-indigo-600">법적 타이밍</span>의 결합입니다."
|
|
</p>
|
|
<div class="mt-4 flex items-center justify-center gap-2">
|
|
<div class="w-6 h-6 bg-indigo-100 rounded-full"></div>
|
|
<span class="text-xs font-bold text-gray-400">Antigravity Advisor</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 합의안 모달 -->
|
|
<div id="settlementModal" class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-lg w-full max-w-md shadow-2xl overflow-hidden fade-in">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-lg font-bold text-gray-800">채무 합의안 작성</h3>
|
|
<button onclick="closeSettlementModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<i class="ri-close-line text-2xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-8 space-y-6">
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">현재 최종 목표액</label>
|
|
<div class="text-2xl font-black text-gray-900">56,000,000원</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-bold text-indigo-600 uppercase tracking-wider mb-2">합의 제안 금액 (원)</label>
|
|
<input type="number" id="settlement-input" value="51000000"
|
|
class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg text-lg font-bold focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
|
|
<p class="mt-2 text-[11px] text-gray-400 leading-relaxed">
|
|
* 합의 금액 수정 시 원금 대비 감면율이 자동으로 계산됩니다.<br>
|
|
* 변호사 검토 후 최종 합의안이 발송됩니다.
|
|
</p>
|
|
</div>
|
|
<div class="bg-amber-50 border border-amber-100 p-4 rounded-lg flex items-start gap-3">
|
|
<i class="ri-alert-line text-amber-500 mt-0.5 flex-shrink-0 text-lg"></i>
|
|
<p class="text-xs text-amber-700 leading-relaxed">
|
|
합의 처리 시 법정 이율 전액 감면 및 원금의 일부가 조정될 수 있습니다. 신중하게 결정해 주시기 바랍니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-gray-50 flex gap-3">
|
|
<button onclick="closeSettlementModal()" class="flex-1 py-3 bg-white border border-gray-200 rounded-lg text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">취소</button>
|
|
<button onclick="saveSettlement()" class="flex-1 py-3 bg-indigo-600 text-white rounded-lg text-sm font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-colors">합의안 저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
let currentPaymentType = 'full';
|
|
let currentMonths = 12;
|
|
const totalAmount = 56000000;
|
|
|
|
function setPaymentType(type) {
|
|
currentPaymentType = type;
|
|
const btnFull = document.getElementById('btn-pay-full');
|
|
const btnSplit = document.getElementById('btn-pay-split');
|
|
const sliderCont = document.getElementById('slider-container');
|
|
const monthlyInfo = document.getElementById('monthly-info');
|
|
|
|
if (type === 'full') {
|
|
btnFull.classList.remove('bg-white/5', 'border-white/10');
|
|
btnFull.classList.add('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnFull.querySelector('span:first-child').classList.replace('text-gray-400', 'text-indigo-300');
|
|
|
|
btnSplit.classList.add('bg-white/5', 'border-white/10');
|
|
btnSplit.classList.remove('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnSplit.querySelector('span:first-child').classList.replace('text-indigo-300', 'text-gray-400');
|
|
btnSplit.querySelector('#display-months').classList.replace('text-white', 'text-gray-400');
|
|
|
|
sliderCont.classList.add('opacity-30', 'pointer-events-none');
|
|
monthlyInfo.classList.add('hidden');
|
|
} else {
|
|
btnSplit.classList.remove('bg-white/5', 'border-white/10');
|
|
btnSplit.classList.add('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnSplit.querySelector('span:first-child').classList.replace('text-gray-400', 'text-indigo-300');
|
|
btnSplit.querySelector('#display-months').classList.replace('text-gray-400', 'text-white');
|
|
|
|
btnFull.classList.add('bg-white/5', 'border-white/10');
|
|
btnFull.classList.remove('bg-indigo-500/20', 'border-indigo-500/30');
|
|
btnFull.querySelector('span:first-child').classList.replace('text-indigo-300', 'text-gray-400');
|
|
|
|
sliderCont.classList.remove('opacity-30', 'pointer-events-none');
|
|
monthlyInfo.classList.remove('hidden');
|
|
}
|
|
calculateRepayment();
|
|
}
|
|
|
|
function updateMonths(val) {
|
|
currentMonths = val;
|
|
document.getElementById('slider-val').innerText = val + '개월';
|
|
document.getElementById('display-months').innerText = val + '회 분할';
|
|
calculateRepayment();
|
|
}
|
|
|
|
function generateSchedule() {
|
|
const list = document.getElementById('schedule-list');
|
|
const container = document.getElementById('schedule-container');
|
|
const startDateInput = document.getElementById('recovery-start-date');
|
|
|
|
if (!startDateInput.value) {
|
|
const today = new Date();
|
|
startDateInput.value = today.toISOString().split('T')[0];
|
|
}
|
|
|
|
container.classList.remove('hidden');
|
|
list.innerHTML = '';
|
|
|
|
const baseDate = new Date(startDateInput.value);
|
|
|
|
if (currentPaymentType === 'full') {
|
|
const item = document.createElement('div');
|
|
item.className = 'p-4 bg-indigo-500/10 rounded-lg border border-indigo-500/20 flex items-center justify-between group fade-in';
|
|
item.innerHTML = `
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" onchange="toggleScheduleRow(this)" class="w-5 h-5 rounded border-indigo-400/30 bg-transparent text-indigo-500 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="text-[10px] font-bold text-indigo-300 uppercase tracking-widest">일시납 총액</div>
|
|
<div class="text-sm font-black text-white">${totalAmount.toLocaleString()}원</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-[11px] text-indigo-200 font-mono font-bold">${startDateInput.value}</div>
|
|
<div class="text-[10px] text-indigo-400 font-bold status-label">미납</div>
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
return;
|
|
}
|
|
|
|
const monthly = Math.round(totalAmount / currentMonths);
|
|
|
|
for (let i = 1; i <= currentMonths; i++) {
|
|
const dueDate = new Date(baseDate);
|
|
dueDate.setMonth(baseDate.getMonth() + i);
|
|
|
|
const dateStr = dueDate.toISOString().split('T')[0];
|
|
|
|
const item = document.createElement('div');
|
|
item.className = 'p-3 bg-white/5 rounded-lg border border-white/5 flex items-center justify-between group hover:bg-white/10 transition-all';
|
|
item.innerHTML = `
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" onchange="toggleScheduleRow(this)" class="w-4 h-4 rounded border-white/20 bg-transparent text-indigo-500 focus:ring-indigo-500">
|
|
<div>
|
|
<div class="text-[10px] font-bold text-gray-400">${i}회차</div>
|
|
<div class="text-xs font-mono text-white">${monthly.toLocaleString()}원</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-[10px] text-gray-400 font-mono">${dateStr}</div>
|
|
<div class="text-[9px] text-gray-600 font-bold status-label">미납</div>
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
}
|
|
}
|
|
|
|
function toggleScheduleRow(cb) {
|
|
const row = cb.closest('.group');
|
|
const statusLabel = row.querySelector('.status-label');
|
|
if (cb.checked) {
|
|
row.classList.add('bg-emerald-500/10', 'border-emerald-500/20');
|
|
row.classList.remove('bg-white/5', 'border-white/5');
|
|
statusLabel.innerText = '입금완료';
|
|
statusLabel.classList.add('text-emerald-400');
|
|
statusLabel.classList.remove('text-gray-600');
|
|
} else {
|
|
row.classList.remove('bg-emerald-500/10', 'border-emerald-500/20');
|
|
row.classList.add('bg-white/5', 'border-white/5');
|
|
statusLabel.innerText = '미납';
|
|
statusLabel.classList.remove('text-emerald-400');
|
|
statusLabel.classList.add('text-gray-600');
|
|
}
|
|
}
|
|
|
|
function calculateRepayment() {
|
|
if (currentPaymentType === 'split') {
|
|
const monthly = Math.round(totalAmount / currentMonths);
|
|
document.getElementById('monthly-amount').innerText = monthly.toLocaleString() + '원';
|
|
}
|
|
generateSchedule();
|
|
}
|
|
|
|
function openSettlementModal() {
|
|
document.getElementById('settlementModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeSettlementModal() {
|
|
document.getElementById('settlementModal').classList.add('hidden');
|
|
}
|
|
|
|
function saveSettlement() {
|
|
const newVal = document.getElementById('settlement-input').value;
|
|
document.getElementById('settlement-target-display').innerText = parseInt(newVal).toLocaleString();
|
|
closeSettlementModal();
|
|
|
|
const targetEl = document.getElementById('settlement-target-display').parentElement;
|
|
targetEl.classList.add('text-indigo-400', 'scale-110', 'transition-all');
|
|
setTimeout(() => {
|
|
targetEl.classList.remove('scale-110');
|
|
}, 300);
|
|
}
|
|
|
|
function showTab(tabId) {
|
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
document.getElementById(tabId).classList.add('active');
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.classList.remove('phase-tab-active');
|
|
btn.classList.add('bg-white', 'text-gray-600', 'hover:bg-gray-100');
|
|
const badge = btn.querySelector('span');
|
|
if (badge) {
|
|
badge.classList.remove('bg-white/20');
|
|
badge.classList.add('bg-gray-200');
|
|
}
|
|
});
|
|
|
|
const activeBtn = document.getElementById('tab-' + tabId);
|
|
activeBtn.classList.add('phase-tab-active');
|
|
activeBtn.classList.remove('bg-white', 'text-gray-600', 'hover:bg-gray-100');
|
|
const activeBadge = activeBtn.querySelector('span');
|
|
if (activeBadge) {
|
|
activeBadge.classList.add('bg-white/20');
|
|
activeBadge.classList.remove('bg-gray-200');
|
|
}
|
|
}
|
|
|
|
function updateProgress() {
|
|
const allCheckboxes = document.querySelectorAll('.step-checkbox');
|
|
const total = allCheckboxes.length;
|
|
const checked = Array.from(allCheckboxes).filter(cb => cb.checked).length;
|
|
const overallPercentage = total > 0 ? Math.round((checked / total) * 100) : 0;
|
|
|
|
document.getElementById('progress-bar').style.width = overallPercentage + '%';
|
|
document.getElementById('progress-text').innerText = overallPercentage + '%';
|
|
|
|
['phase1', 'phase2', 'phase3', 'phase4'].forEach(phaseId => {
|
|
const phaseSection = document.getElementById(phaseId);
|
|
const phaseCheckboxes = phaseSection.querySelectorAll('.step-checkbox');
|
|
const pTotal = phaseCheckboxes.length;
|
|
const pChecked = Array.from(phaseCheckboxes).filter(cb => cb.checked).length;
|
|
const pPercentage = pTotal > 0 ? Math.round((pChecked / pTotal) * 100) : 0;
|
|
|
|
const textElem = document.getElementById(phaseId + '-text');
|
|
const barElem = document.getElementById(phaseId + '-bar');
|
|
|
|
if (textElem) textElem.innerText = pPercentage + '%';
|
|
if (barElem) barElem.style.width = pPercentage + '%';
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateProgress();
|
|
setPaymentType('full');
|
|
});
|
|
</script>
|
|
@endpush
|