<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 팝업 전용 CSS -->
<link rel="stylesheet" type="text/css" href="<c:url value='/resources/xit/xit-popup.css'/>" />

<!-- TXT 파일 업로드 팝업 -->
<div class="popup_wrap">
    <div class="popup_inner">
        <div class="popup_tit">
            <h2 class="tit">과태료 대상 PRN 파일 업로드</h2>
            <a href="#" class="pop-x-btn modalclose" id="btnCloseTop"></a>
        </div>

        <div class="popup_con">
            <form id="uploadForm" name="uploadForm">
                <div class="forms_table_non">
                    <table>
                        <colgroup>
                            <col style="width: 20%;" />
                            <col style="width: 80%;" />
                        </colgroup>
                        <tr>
                            <th class="th"><span class="required">*</span> PRN 파일</th>
                            <td>
                                <div class="file-input-row">
                                    <input type="file" id="txtFile" name="txtFile" accept=".txt,.prn" class="file_input" />
                                    <span class="file-input-text">파일을 선택하세요</span>
                                    <button type="button" id="btnClearFile" class="btn_delete_file" style="display: none;" title="파일 삭제">
                                        <i class="material-icons">close</i>
                                    </button>
                                </div>
                                <div class="file-info" style="margin-top: 10px; color: #666; font-size: 13px;">
                                    ※ TXT, PRN 파일만 업로드 가능합니다. (최대 50MB)
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="file-format-info" style="padding: 15px; background-color: #fff3cd; border: 1px solid #ffc107; border-radius: 4px;">
                                    <ul style="margin: 0; padding-left: 15px; color: #856404; font-size: 13px;">
                                        <li>● 7~10 번째 줄은 헤더 및 라인구분 기호로 간주되어 스킵됩니다.</li>
                                        <li>● UTF-8 -> EUC-KR 변환 후 진행.</li>
                                        <li>● 데이터는 EUC-KR 한글 2Byte으로 구분됩니다.</li>
                                        <li>● 컬럼 순서: 접수일자, 구분, 검사소코드, 검사일자, 차량번호, 소유자명, 주민등록번호, 자동차명, 자동차종류, 자동차용도, 검사종료일자, 일수, 과태료금액, 최종등록일자, 주소, 유효기간만료일자, 매매상품</li>
                                        <li>● 필수 항목: 접수일자, 검사일자, 차량번호, 소유자명, 과태료금액</li>
                                        <li>● 날짜 형식: YYYY-MM-DD (예: 2023-11-13)</li>
                                        <li>● 차량번호 형식: 12가3456 또는 123가4567</li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>

            <!-- 중요로직: 로딩 표시 영역 -->
            <div class="loading" id="loading" style="display: none; text-align: center; padding: 20px;">
                <div class="spinner" style="border: 4px solid #f3f3f3; border-top: 4px solid #4CAF50; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 10px;"></div>
                <div>파일 업로드 중입니다. 잠시만 기다려주세요...</div>
            </div>
        </div>

        <div class="popup_foot">
            <button type="button" id="btnUpload" class="newbtns bg1">파일 업로드</button>
            <button type="button" id="btnClose" class="newbtns bg2 modalclose">닫기</button>
        </div>
    </div>
</div>

<style>
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .loading.active {
        display: block !important;
    }

    /* 파일 입력 스타일 */
    .file-input-row {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 15px;
        background-color: #f8f9fa;
        border: 2px dashed #dee2e6;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .file-input-row:hover {
        background-color: #e9ecef;
        border-color: #4CAF50;
    }

    .file-input-row.has-file {
        background-color: #e7f3ff;
        border-color: #4CAF50;
        border-style: solid;
    }

    .file_input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .file-input-text {
        flex: 1;
        color: #666;
        font-size: 14px;
        pointer-events: none;
        display: flex;
        align-items: center;
    }

    .file-input-text i.material-icons {
        font-size: 18px;
        margin-right: 8px;
        color: #4CAF50;
    }

    .btn_delete_file {
        padding: 4px;
        background-color: #dc3545;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        z-index: 10;
        position: relative;
    }

    .btn_delete_file:hover {
        background-color: #c82333;
    }

    .btn_delete_file i.material-icons {
        font-size: 18px;
    }
</style>

<script type="text/javascript">
/**
 * TXT 파일 업로드 팝업 JavaScript
 * 중요로직: 과태료 대상 TXT 파일을 업로드하고 검증한다.
 */
$(document).ready(function() {

    /**
     * 파일 업로드 버튼 클릭 이벤트
     * 중요로직: 파일 선택 후 검증을 거쳐 서버로 업로드한다.
     */
    $("#btnUpload").on('click', function() {
        uploadFile();
    });

    /**
     * 닫기 버튼 클릭 이벤트
     */
    $("#btnClose, #btnCloseTop").on('click', function() {
        closePopup();
    });

    /**
     * 파일 선택 시 파일 정보 표시
     */
    $("#txtFile").on('change', function() {
        handleFileSelect(this);
    });

    /**
     * 파일 삭제 버튼 클릭 이벤트
     */
    $("#btnClearFile").on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        clearFileInput();
    });
});

/**
 * 파일 업로드 함수
 * 중요로직: 파일 검증 후 FormData를 사용하여 파일을 서버로 전송한다.
 */
function uploadFile() {
    var fileInput = document.getElementById('txtFile');
    var file = fileInput.files[0];
    
    // 중요로직: 파일 선택 여부 검증
    if (!file) {
        alert("파일을 선택해주세요.");
        return;
    }
    
    // 중요로직: 파일 확장자 검증
    var fileName = file.name;
    var fileExt = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
    if (fileExt !== 'txt' && fileExt !== 'prn') {
        alert("TXT, PRN 파일만 업로드 가능합니다.");
        return;
    }
    
    // 중요로직: 파일 크기 검증 (50MB)
    if (file.size > 50 * 1024 * 1024) {
        alert("파일 크기는 50MB를 초과할 수 없습니다.");
        return;
    }
    
    // 확인 메시지
    if (!confirm("선택한 파일을 업로드하시겠습니까?")) {
        return;
    }
    
    // 중요로직: FormData를 사용하여 파일 데이터 구성
    var formData = new FormData();
    formData.append('file', file);
    
    // 로딩 표시
    $("#loading").addClass('active');
    $("#btnUpload").prop('disabled', true);
    
    // 중요로직: AJAX로 파일 업로드
    $.ajax({
        url: '<c:url value="/carInspectionPenalty/registration/upload.ajax"/>',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            // 로딩 숨김
            $("#loading").removeClass('active');
            $("#btnUpload").prop('disabled', false);
            
            if (response.success) {
                alert(response.message);

                // 중요로직: 부모 창의 목록 새로고침
                if (window.opener && window.opener.CarFfnlgTrgtList) {
                    window.opener.CarFfnlgTrgtList.grid.reload();
                }

                closePopup();
            } else {
                alert(response.message || '파일 업로드에 실패했습니다.');
            }
        },
        error: function(xhr, status, error) {
            // 로딩 숨김
            $("#loading").removeClass('active');
            $("#btnUpload").prop('disabled', false);
            
            console.error("업로드 오류:", error);
        }
    });
}

/**
 * 파일 선택 처리 함수
 * 선택된 파일명을 화면에 표시합니다.
 */
function handleFileSelect(fileInput) {
    var $fileRow = $('.file-input-row');
    var $fileText = $('.file-input-text');
    var $btnClear = $('#btnClearFile');

    if (fileInput.files && fileInput.files.length > 0) {
        var file = fileInput.files[0];
        var fileName = file.name;
        var fileSize = file.size;

        // 파일 크기를 읽기 쉬운 형태로 변환
        var fileSizeText = formatFileSize(fileSize);

        // 파일명과 크기를 표시
        $fileText.html(
            '<i class="material-icons" style="font-size: 18px; margin-right: 8px;">insert_drive_file</i>' +
            '<span style="color: #333; font-weight: 500;">' + fileName + '</span>' +
            '<span style="color: #666; font-size: 12px; margin-left: 8px;">(' + fileSizeText + ')</span>'
        );
        $fileText.attr('title', fileName);

        // 파일이 선택된 상태 표시
        $fileRow.addClass('has-file');
        $btnClear.show();

        // 파일 정보도 업데이트
        $('.file-info').html(
            /*'선택된 파일: <strong>' + fileName + '</strong> ' +*/
            '파일 크기: ' + fileSizeText
        );
    } else {
        clearFileInput();
    }
}

/**
 * 파일 크기를 읽기 쉬운 형태로 변환
 */
function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';

    var k = 1024;
    var sizes = ['Bytes', 'KB', 'MB', 'GB'];
    var i = Math.floor(Math.log(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

/**
 * 파일 입력 초기화
 */
function clearFileInput() {
    var $fileInput = $('#txtFile');
    var $fileRow = $('.file-input-row');
    var $fileText = $('.file-input-text');
    var $btnClear = $('#btnClearFile');

    // 파일 입력 초기화
    $fileInput.val('');

    // 기본 텍스트 표시
    $fileText.html('파일을 선택하세요');
    $fileText.removeAttr('title');

    // 파일 선택 상태 제거
    $fileRow.removeClass('has-file');
    $btnClear.hide();

    // 파일 정보 초기화
    $('.file-info').html('※ TXT, PRN 파일만 업로드 가능합니다. (최대 50MB)');
}

/**
 * 팝업 닫기 함수
 */
function closePopup() {
    window.close();
}
</script>
