{{-- LINE公式アカウント入れ替え機能 1ヶ月無料開放 campaign modal --}}
<div id="modalCampaignChangebot" class="mcc-modal" style="display: none;" aria-hidden="true">
    <div class="mcc-overlay"></div>
    <div class="mcc-dialog" role="dialog" aria-modal="true" aria-labelledby="mccTitle">
        <button type="button" class="mcc-close" aria-label="Close" onclick="closeModalCampaignChangebot()">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="19" fill="#FFFFFF" stroke="#1F1F1F" stroke-width="1.2"/>
                <path d="M14 14L26 26M26 14L14 26" stroke="#1F1F1F" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
        </button>
        <span id="mccTitle" class="sr-only">LINE公式アカウント 入れ替え機能 1ヶ月無料開放</span>
        <img src="/images/campaign-changebot/modal-body.png"
             alt="LINE公式アカウント 入れ替え機能 1ヶ月無料開放"
             class="mcc-body-image"/>
        <button type="button" class="mcc-cta" onclick="openDetailCampaignChangebot()" aria-label="詳しくはこちら"></button>
    </div>
</div>

<style>
    .mcc-modal {
        position: fixed;
        inset: 0;
        z-index: 10500;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .mcc-modal.show {
        display: flex;
    }
    .mcc-overlay {
        position: absolute;
        inset: 0;
        background: rgba(34, 34, 34, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .mcc-dialog {
        position: relative;
        width: 480px;
        height: 480px;
        background: #ffffff url('/images/campaign-changebot/bg_modal_campaign_change_bot.png') center/cover no-repeat;
        border-radius: 8px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
        overflow: visible;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 11px;
    }
    .mcc-close {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        z-index: 2;
        line-height: 0;
        transition: background-color 0.15s ease;
    }
    .mcc-close:hover {
        background: rgba(0, 0, 0, 0.08);
    }
    .mcc-close:hover svg circle {
        fill: #ececec;
    }
    .mcc-body-image {
        position: absolute;
        top: 11px;
        left: 11px;
        display: block;
        width: 458px;
        height: 458px;
        object-fit: cover;
        pointer-events: none;
        user-select: none;
    }
    .mcc-cta {
        position: absolute;
        left: 24px;
        bottom: 29px;
        width: 432px;
        height: 64px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        z-index: 2;
    }
    .mcc-cta:hover,
    .mcc-cta:focus {
        outline: none;
        background: #f4f1f13b;
    }
</style>

<script>
    function showModalCampaignChangebot() {
        return;

        var el = document.getElementById('modalCampaignChangebot');
        if (!el) return;
        el.classList.add('show');
        el.setAttribute('aria-hidden', 'false');
    }
    function mccStorageKey() {
        var uid = (typeof currentUser !== 'undefined' && currentUser && currentUser.id) ? currentUser.id : 'anon';
        var bid = (typeof botInfo !== 'undefined' && botInfo && botInfo.id) ? botInfo.id : 'nobot';
        return 'mcc_dismissed_' + uid + '_' + bid;
    }
    function mccTodayStr() {
        var d = new Date();
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
    }
    function isModalCampaignChangebotDismissedToday() {
        try {
            return localStorage.getItem(mccStorageKey()) === mccTodayStr();
        } catch (e) {
            return false;
        }
    }
    function closeModalCampaignChangebot() {
        var el = document.getElementById('modalCampaignChangebot');
        if (!el) return;
        el.classList.remove('show');
        el.setAttribute('aria-hidden', 'true');
        el.style.display = 'none';
        try {
            localStorage.setItem(mccStorageKey(), mccTodayStr());
        } catch (e) {}
    }
    function openDetailCampaignChangebot() {
        if (typeof botInfo === 'undefined' || !botInfo || !botInfo.hash_botId) return;
        try {
            localStorage.setItem(mccStorageKey(), mccTodayStr());
        } catch (e) {}
        window.location.href = '/admin/change-bots-new/' + botInfo.hash_botId;
    }
    function shouldShowModalCampaignChangebot() {
        if (typeof botInfo === 'undefined' || !botInfo || !botInfo.created_at) return false;
        if (typeof isModalCampaignChangebotDismissedToday === 'function'
            && isModalCampaignChangebotDismissedToday()) return false;
        var createdAt = new Date(botInfo.created_at);
        if (isNaN(createdAt.getTime())) return false;
        var oneMonthAfter = new Date(createdAt);
        oneMonthAfter.setMonth(oneMonthAfter.getMonth() + 1);
        var withinOneMonth = Date.now() <= oneMonthAfter.getTime();
        var isFreePlan = Number(botInfo.plan_type) === 2 || botInfo.contract_type === 'free';

        return withinOneMonth && isFreePlan;
    }

    $(function () {
        if (typeof showModalCampaignChangebot === 'function' && shouldShowModalCampaignChangebot()) {
            showModalCampaignChangebot();
        }
    });
</script>