<link rel="stylesheet" type="text/css" href="<?= G5_URL; ?>/_PAGE/_MAIN/asset/coin_item.css">

<section class="CoinItem">
    <div class="Coin_Menu" id="long-term" style="display: none;">
        <table cellpadding="0" cellspacing="0" class="Time_Table" style="border-top:0px;">
            <tr class="Title">
                <td>시간</td><td>수익률</td><td>수익금</td><td colspan="3" style="border-left: 1px solid #111;">1 / 2</td>
            </tr>
            <tr>
                <td class="Time">10년</td>
                <td><?= number_format($avg_roi_y*10, 2) ?><span> %</span></td>
                <td><label class="F_color_L3"><?= number_format($avg_pnl_y*10, 2) ?></label><span> KRW</span></td>
                <td class="Time">5년</td>
                <td><?= number_format($avg_roi_y*5, 2) ?><span> %</span></td>
                <td><label class="F_color_L4"><?= number_format($avg_pnl_y*5, 2) ?></label><span> KRW</span></td>
            </tr>
            <tr>
                <td class="Time">1년</td>
                <td><label class="F_color_L2"><?= number_format($avg_roi_y, 2) ?><span> %</span></label></td>
                <td><label class="F_color_L2"><?= number_format($avg_pnl_y, 2) ?></label><span> KRW</span></td>
                <td class="Time">6개월</td>
                <td><?= number_format($avg_roi_y/2, 2) ?><span> %</span></td>
                <td><?= number_format($avg_pnl_y/2, 2) ?><span> KRW</span></td>
            </tr>
            <tr>
                <td class="Time">1월</td>
                <td><?= number_format($avg_roi_m, 2) ?><span> %</span></td>
                <td><label class="F_color_L"><?= number_format($avg_pnl_m, 2) ?></label><span> KRW</span></td>
                <td class="Time">15일</td>
                <td><?= number_format($avg_roi_m/2, 2) ?><span> %</span></td>
                <td><?= number_format($avg_pnl_m/2, 2) ?><span> KRW</span></td>
            </tr>
            <tr>
                <td class="Time">1주</td>
                <td><?= number_format($avg_roi*7, 2) ?><span> %</span></td>
                <td><?= number_format($avg_pnl*7, 2) ?><span> KRW</span></td>
                <td class="Time">3.5일</td>
                <td><?= number_format($avg_roi*3.5, 2) ?><span> %</span></td>
                <td><?= number_format($avg_pnl*3.5, 2) ?><span> KRW</span></td>
            </tr>
        </table>
    </div>
    <div class="Coin_Button">
        <button class="CoinItem-toggle" id="CoinItemToggle"><label class="i">&#8645;</label> <label>장기손익</label></button>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    const content = $('#long-term');
    const storageKey = 'coin_status';

    // 3. 이전 상태 유지 (localStorage 확인)
    if (localStorage.getItem(storageKey) === 'open') {
        content.show();
    }

    // 2. 버튼 클릭 시 슬라이딩 토글
    $('#CoinItemToggle').on('click', function() {
        content.slideToggle(300, function() {
            // 상태 저장
            if (content.is(':visible')) {
                localStorage.setItem(storageKey, 'open');
            } else {
                localStorage.setItem(storageKey, 'closed');
            }
        });
    });
});
</script>