<?php
include_once('./_common.php');

if (!defined('_GNUBOARD_')) exit;

$g5['title'] = "회사 연혁";
add_stylesheet('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">', 0);
include_once(G5_THEME_PATH.'/head.php');

function render_history_slider($year) {
    $image_files = glob(G5_PATH . '/files/' . $year . '_*.jpg');
    ?>
    <div class="history-image">
        <div class="image-slider">
            <?php if (!empty($image_files)): ?>
                <?php foreach ($image_files as $index => $file): ?>
                    <?php $image_url = G5_URL . '/files/' . basename($file); ?>
                    <img src="<?php echo $image_url; ?>" alt="<?php echo $year; ?>년 이미지 <?php echo $index + 1; ?>" class="slider-image <?php echo $index === 0 ? 'active' : ''; ?>">
                <?php endforeach; ?>
                <?php if (count($image_files) > 1): ?>
                    <button class="slider-prev"><i class="fas fa-chevron-left"></i></button>
                    <button class="slider-next"><i class="fas fa-chevron-right"></i></button>
                <?php endif; ?>
            <?php else: ?>
                <img src="https://source.unsplash.com/800x500/?business,office,corporate,meeting" alt="<?php echo $year; ?>년 이미지">
                <!--<img src="https://picsum.photos/seed/business<?php echo $year; ?>/800/500" alt="<?php echo $year; ?>년 이미지">-->
                <!--<img src="https://picsum.photos/800/500?random=<?php echo rand(1, 1000); ?>" alt="<?php echo $year; ?>년 이미지">-->
            <?php endif; ?>
        </div>
    </div>
    <?php
}
?>

<div class="history-container">
    <h2 class="history-title"><i class="fas fa-building-columns"></i> 회사 연혁</h2>
    <div class="history-timeline">
        
        <div class="history-item">
            <div class="history-year"><i class="fas fa-calendar-alt"></i> 2025</div>
            <div class="history-content">
                <?php render_history_slider("2025"); ?>
                <div class="history-text">
                    <h3>4월</h3>
                    <p>Community Website Launching -- Atlanta.Infinityfreeapp.com</p>
                    <h3>3월</h3>
                    <p>KORUSA SOLUTIONS LLC 사명 변경</p>
                    <h3>1월</h3>
                    <p>E-commerce Pestrong.com 분리독립</p>                     
                </div>
            </div>
        </div>

        <div class="history-item">
            <div class="history-year"><i class="fas fa-calendar-alt"></i> 2021</div>
            <div class="history-content">
                <?php render_history_slider("2021"); ?>
                <div class="history-text">
                    <h3>12월</h3>
                    <p>Yearly Gross $3,200,000</p>                    
                </div>
            </div>
        </div>

        <div class="history-item">
            <div class="history-year"><i class="fas fa-calendar-alt"></i> 2010</div>
            <div class="history-content">
                <?php render_history_slider("2010"); ?>
                <div class="history-text">
                    <h3>12월</h3>
                    <p>Yearly Gross $489,000</p>
                    <h3>05월</h3>
                    <p>E-Commerce Website Launching (Pestrong.com) - DIY Pest Control Supply Store</p>
                </div>
            </div>
        </div>

        <div class="history-item">
            <div class="history-year"><i class="fas fa-calendar-alt"></i> 2007</div>
            <div class="history-content">
                <?php render_history_slider("2007"); ?>
                <div class="history-text">
                    <h3>12월</h3>
                    <p>1st Year Gross $124,000</p>
                    <h3>04월</h3>
                    <p>KORUSA PEST CONTROL, INC 설립</p>
                </div>
            </div>
        </div>

        <div class="history-item">
            <div class="history-year"><i class="fas fa-calendar-alt"></i> 2004</div>
            <div class="history-content">
                <?php render_history_slider("2004"); ?>
                <div class="history-text">
                    <h3>03월</h3>
                    <p>KEYSTONE PEST CONTROL, INC. 취업</p>                    
                </div>
            </div>
        </div>

    </div>
</div>

<style>
/*
.history-title i {
    margin-right: 10px;
    color: #007bff;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
*/
.history-year i {
    margin-right: 8px;
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.history-text h3 {
    color: #007bff;
    font-size: 1.3em;
    margin-bottom: 10px;
    font-weight: 600;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.history-text h3::before {
    content: '\f073';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 8px;
    font-size: 0.9em;
    color: #0056b3;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.history-text p {
    font-size: 1.3em;
    margin-bottom: 20px;
    line-height: 1.6;
    margin-right: 10px;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-wrap: break-word;
    animation: rocketLaunch 2s infinite;
    
}

@keyframes rocketLaunch {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

.history-container {
    max-width: 1200px;
    margin: 0 auto;    
    padding: 50px 20px;
}

.history-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #333;
    font-weight: 700;
}

.history-timeline {
    position: relative;
    padding: 20px 0;
    z-index: 1;
    overflow: hidden;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #e0e0e0;    
}

.history-item {
    margin-bottom: 80px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-year {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #007bff;
    color: white;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 1.5em;
    font-weight: bold;
    z-index: 2;
    transition: all 0.3s ease;
    top: -20px;
    cursor: pointer;
}

.history-year:hover {
    transform: scale(1.2);
}

.history-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 80px;
    gap: 40px;
    position: relative;
    min-height: 300px;
}

.history-image {
    flex: 1;
    border-radius: 15px;
    overflow: hidden;
    /*box-shadow: 0 10px 20px rgba(0,0,0,0.1);*/
    transition: all 1.5s ease-in-out;
    opacity: 0;
    transform: translateX(200%);
    transform-origin: center;
    position: absolute;
    left: 0;
    width: 45%;
    visibility: hidden;
    height: 300px;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.history-image.show {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    pointer-events: auto;
    z-index: 100;
}


.history-image:hover {
    /*transform: scale(1.02);*/
    transform: scale(1.18) translateX(10%);  /* translateX 추가하여 확대 시 왼쪽 잘림 방지 */
}

.history-text {
    flex: 1;
    padding: 30px;
    margin-left: 50%;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.image-slider {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.slider-image {
    display: none;
    width: 100%;
    height: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    padding: 0;
    margin: 0;
}

.slider-image.active {
    display: block;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    position: relative;
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    /*padding: 10px 15px;*/
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    font-size: 1.2em;
}

.slider-prev:hover, .slider-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.slider-prev { left: 30px; }
.slider-next { right: 30px; }
/*
#container::before {
    content: '';
    position: fixed;
    top: 44%;    
    left: 45%;
    transform: translate(-50%, -50%);
    width: 600px; 
    height: 500px;  
    background-image: url('<?php echo G5_URL; ?>/files/logo.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}
*/

#container::before {
    content: '';
    position: fixed;
    top: 50%;
    left: calc(50% - 426px);  /* 로고 너비(213px)의 절반만큼 왼쪽으로 이동 */
    width: 600px;
    height: 500px;
    background-image: url('<?php echo G5_URL; ?>/files/logo.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
    transform: translateY(-50%);        
}

@media screen and (max-width: 768px) {
    .history-container {
        padding: 30px 10px;
        overflow-x: hidden;
    }

    .history-content {
        margin-top: 60px;
        gap: 20px;
    }

    .history-text {
        padding: 30px 10px;
        margin-left: 50%;
    }    

    .history-image {
        width: 42%;
    }

    .history-text h3 {
        font-size: 1.1em;
        margin-bottom: 8px;
    }

    .history-text p {
        font-size: 1em;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .history-year {
        font-size: 1.2em;
        padding: 8px 20px;
    }

    .history-item {
        margin-bottom: 60px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const years = document.querySelectorAll('.history-year');
    /*
    years.forEach(year => {
        year.addEventListener('click', function() {
            const historyItem = this.closest('.history-item');
            const image = historyItem.querySelector('.history-image');
            
            if (image.classList.contains('show')) {
                image.classList.remove('show');
            } else {
                document.querySelectorAll('.history-image').forEach(img => {
                    img.classList.remove('show');
                });
                image.classList.add('show');
            }
        });
    });
    */
    years.forEach(year => {
        year.addEventListener('click', function() {
            const historyItem = this.closest('.history-item');
            const image = historyItem.querySelector('.history-image');
            
            if (image.classList.contains('show')) {
            image.style.pointerEvents = 'none';  // 사라지는 애니메이션 시작 시 마우스 이벤트 비활성화
            image.classList.remove('show');
        } else {
            document.querySelectorAll('.history-image').forEach(img => {
                img.classList.remove('show');
            });
            image.style.pointerEvents = 'none';  // 나타나는 애니메이션 시작 시 마우스 이벤트 비활성화
            image.classList.add('show');
            
            setTimeout(() => {
                image.style.pointerEvents = 'auto';  // 애니메이션 완료 후 마우스 이벤트 활성화
            }, 1500);
        }
    });
});


    document.querySelectorAll('.image-slider').forEach(slider => {
        const images = slider.querySelectorAll('.slider-image');
        const prev = slider.querySelector('.slider-prev');
        const next = slider.querySelector('.slider-next');
        
        if (!prev || !next || images.length <= 1) return;
        
        let currentIndex = 0;
        
        function showImage(index) {
            images.forEach(img => {
                img.style.transition = 'opacity 0.3s ease-in-out';
                img.classList.remove('active');
            });
            images[index].classList.add('active');
        }
        
        prev.addEventListener('click', (e) => {
            e.stopPropagation();
            currentIndex = (currentIndex - 1 + images.length) % images.length;
            showImage(currentIndex);
        });
        
        next.addEventListener('click', (e) => {
            e.stopPropagation();
            currentIndex = (currentIndex + 1) % images.length;
            showImage(currentIndex);
        });

        showImage(0);
    });
});
</script>

<?php include_once(G5_THEME_PATH.'/tail.php'); ?>