{{--
    Alert modal: 配信数が月間上限を超える可能性があります (AI-04)
    Rendered inside the #wrap-modal-preview-broadcast component template,
    so it binds to that component's data/methods (showAlertMessage, alertMessage, ...).
--}}
@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css?v={{config('sns-line.version')}}">
    {{-- <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config('sns-line.version')}}"> --}}
    <link rel="stylesheet" href="/lme-ui/src/css/modal/modal.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tag/tag.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/template_v2/modal/modal-alert-message.css?v={{config('sns-line.version')}}">
    <style>
        .alert-message-modal-host *{
            font-family: "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        }
    </style>
@endpush

<div class="alert-message-modal-host">
<lme-modal v-model="showAlertMessage" :header="false" :width="560">
    <div class="alert-msg">
        {{-- Header --}}
        <div class="alert-msg__header">
            <div class="alert-msg__header-left">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.0003 22.5006C6.21042 22.5006 1.5 17.7902 1.5 12.0003C1.5 6.21042 6.21042 1.5 12.0003 1.5C17.7902 1.5 22.5006 6.21042 22.5006 12.0003C22.5006 17.7902 17.7902 22.5006 12.0003 22.5006ZM12.0003 3.28065C7.19227 3.28065 3.28065 7.19227 3.28065 12.0003C3.28065 16.8076 7.19227 20.7186 12.0003 20.7186C16.8076 20.7186 20.7186 16.8076 20.7186 12.0003C20.7186 7.19227 16.8076 3.28065 12.0003 3.28065Z" fill="#F0A000"/>
                    <path d="M11.9996 17.2503C11.3795 17.2503 10.875 16.7452 10.875 16.1244C10.875 15.5043 11.3795 14.9999 11.9996 14.9999C12.6204 14.9999 13.1255 15.5043 13.1255 16.1244C13.1255 16.7452 12.6204 17.2503 11.9996 17.2503ZM12.5625 13.5H11.4379C11.3345 13.5 11.2503 13.4158 11.2503 13.3124V6.93765C11.2503 6.83418 11.3345 6.75 11.4379 6.75H12.5625C12.666 6.75 12.7502 6.83418 12.7502 6.93765V13.3124C12.7502 13.4141 12.6642 13.5 12.5625 13.5Z" fill="#F0A000"/>
                </svg>
                <span class="alert-msg__title">配信数が月間上限を超える可能性があります</span>
            </div>
            <button type="button" class="alert-msg__close" @click="closeAlertMessage">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.4978 2.59872C12.4982 2.59883 12.4985 2.599 12.4991 2.59964L13.4005 3.50104C13.4012 3.50168 13.4014 3.50198 13.4015 3.50236C13.4016 3.50271 13.4016 3.50308 13.4015 3.50343C13.4014 3.50379 13.4012 3.50409 13.4005 3.50473L8.90518 8.00009L13.4005 12.4955C13.4012 12.4961 13.4014 12.4964 13.4015 12.4967C13.4016 12.4971 13.4016 12.4975 13.4015 12.4978C13.4014 12.4982 13.4012 12.4985 13.4005 12.4991L12.4991 13.4005C12.4985 13.4012 12.4982 13.4014 12.4978 13.4015C12.4975 13.4016 12.4971 13.4016 12.4967 13.4015C12.4964 13.4014 12.4961 13.4012 12.4955 13.4005L8.00009 8.90518L3.50473 13.4005C3.50411 13.4012 3.50379 13.4014 3.50343 13.4015C3.50308 13.4016 3.5027 13.4016 3.50234 13.4015C3.502 13.4014 3.50168 13.4012 3.50104 13.4005L2.59964 12.4991C2.599 12.4985 2.59883 12.4982 2.59872 12.4978C2.59861 12.4975 2.59861 12.4971 2.59872 12.4967C2.59883 12.4964 2.599 12.4961 2.59964 12.4955L7.09498 8.00009L2.59964 3.50473C2.599 3.50411 2.59883 3.50379 2.59872 3.50343C2.59861 3.50308 2.59861 3.5027 2.59872 3.50234C2.59883 3.502 2.599 3.50168 2.59964 3.50104L3.50104 2.59964C3.50168 2.599 3.50198 2.59883 3.50236 2.59872C3.50271 2.59861 3.50308 2.59861 3.50343 2.59872C3.50379 2.59883 3.50409 2.599 3.50473 2.59964L8.00009 7.09498L12.4955 2.59964C12.4961 2.599 12.4964 2.59883 12.4967 2.59872C12.4971 2.59861 12.4975 2.59861 12.4978 2.59872Z" fill="#1F1F1F"/>
                </svg>
            </button>
        </div>

        {{-- Summary note --}}
        <div class="alert-msg__note">
            {{-- Chỉ 1 service vượt limit: hiển thị tên service và số message vượt tối đa --}}
            <template v-if="alertOverServices.length === 1">
                配信対象 <b>@{{ fmtNum(alertMessage.target) }}人</b> に配信すると、<b>@{{ alertOverServices[0].name }}</b> の月間上限を超えるため、最大 <b style="color: #FF4D4F">@{{ fmtNum(alertOverServices[0].over) }}通</b> が配信されない可能性があります。
            </template>
            {{-- Các case khác (cả 2 service vượt): giữ nguyên hiển thị cũ --}}
            <template v-else>
                配信対象 <b>@{{ fmtNum(alertMessage.target) }}人</b> に配信すると、<b>LINE公式アカウント と エルメ</b> の月間上限を超えるため、 上限超過分が配信されない可能性があります。
            </template>
        </div>

        <p class="alert-msg__desc">
            以下のサービスで月間上限を超えます。内容をご確認のうえ、登録を続行するかお選びください。
        </p>

        {{-- Service usage cards --}}
        <template v-for="(s, idx) in alertMessage.services">
        {{-- Plan trả phí: không giới hạn (無制限) --}}
        <div v-if="s.unlimited" class="alert-msg__card-unlimited" :key="'alert-svc-u-' + idx">
            <div class="alert-msg__card-head">
                <div class="alert-msg__service">
                    <img class="alert-msg__service-logo" :src="s.logo" alt="">
                    <span class="alert-msg__service-name">@{{ s.name }}</span>
                    <lme-tag v-if="s.plan" :text="s.plan" type="default" size="md"></lme-tag>
                </div>
                <span class="alert-msg__within-limit">上限内</span>
            </div>
            <div class="alert-msg__summary">
                <span>∞ 月間上限: <b>無制限</b></span>
                <span>/</span>
                <span>今回の配信合計 <b>@{{ fmtNum(s.sendTotal) }}通</b></span>
            </div>
        </div>

        {{-- Vượt giới hạn (over > 0): card cảnh báo vượt --}}
        <div v-else-if="s.over > 0" class="alert-msg__card" :key="'alert-svc-' + idx">
            <div class="alert-msg__card-head">
                <div class="alert-msg__service">
                    <img class="alert-msg__service-logo" :src="s.logo" alt="">
                    <span class="alert-msg__service-name">@{{ s.name }}</span>
                    <lme-tag v-if="s.plan" :text="s.plan" type="default" size="md"></lme-tag>
                </div>
                <span class="alert-msg__over-tag">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.00018 13.1254C3.62274 13.1254 0.875 10.3776 0.875 7.00018C0.875 3.62274 3.62274 0.875 7.00018 0.875C10.3776 0.875 13.1254 3.62274 13.1254 7.00018C13.1254 10.3776 10.3776 13.1254 7.00018 13.1254ZM7.00018 8.75C6.63803 8.75 6.3434 9.04427 6.3434 9.40599C6.3434 9.76813 6.63803 10.0628 7.00018 10.0628C7.36189 10.0628 7.65616 9.76813 7.65616 9.40599C7.65616 9.04427 7.36189 8.75 7.00018 8.75ZM6.67179 3.93759C6.61143 3.93759 6.56233 3.98669 6.56233 4.04705V7.76563C6.56233 7.82598 6.61143 7.87509 6.67179 7.87509H7.32778C7.38813 7.87509 7.43724 7.82598 7.43724 7.76563V4.04705C7.43724 3.98669 7.38813 3.93759 7.32778 3.93759H6.67179Z" fill="white"/>
                    </svg>
                    @{{ fmtNum(s.over) }}通 超過
                </span>
            </div>

            <div class="alert-msg__limit-row">
                <span>月間上限 <b>@{{ fmtNum(s.monthlyLimit) }}通</b></span>
                <span>配信後 <b class="is-error">@{{ fmtNum(s.afterTotal) }}通 (+@{{ fmtNum(s.over) }})</b></span>
            </div>

            {{-- Usage bar: delivered (grey) + current within limit (orange) + over (red), marker at monthly limit --}}
            <div class="alert-msg__bar">
                <div class="alert-msg__bar-seg alert-msg__bar-seg--delivered"
                     :style="{ width: (s.delivered / s.afterTotal * 100) + '%' }"></div>
                <div class="alert-msg__bar-seg alert-msg__bar-seg--current"
                     :style="{ width: (s.current / s.afterTotal * 100) + '%' }"></div>
                <div class="alert-msg__bar-seg alert-msg__bar-seg--over"
                     :style="{ width: (s.over / s.afterTotal * 100) + '%' }"></div>
                <div class="alert-msg__bar-marker"
                     :style="{ left: (s.monthlyLimit / s.afterTotal * 100) + '%' }"></div>
            </div>

            {{-- Legend --}}
            <div class="alert-msg__legend">
                <div class="alert-msg__legend-item">
                    <span class="alert-msg__legend-dot" style="background:#878A92"></span>
                    <span>配信済み <b>@{{ fmtNum(s.delivered) }}通</b></span>
                </div>
                <div class="alert-msg__legend-item">
                    <span class="alert-msg__legend-dot" style="background:#F0A000"></span>
                    <span>今回の配信（上限内） <b>@{{ fmtNum(s.current) }}通</b></span>
                </div>
                <div class="alert-msg__legend-item">
                    <span class="alert-msg__legend-dot" style="background:#FF4D4F"></span>
                    <span>超過 <b class="is-error">@{{ fmtNum(s.over) }}通</b></span>
                </div>
            </div>

            <div class="alert-msg__summary">
                <span>配信可能残り <b>@{{ fmtNum(s.remaining) }}通</b></span>
                <span>/</span>
                <span>今回の配信合計 <b>@{{ fmtNum(s.sendTotal) }}通</b></span>
            </div>
        </div>

        {{-- Trong giới hạn (over <= 0): card xám, không hiển thị phần vượt --}}
        <div v-else class="alert-msg__card-within" :key="'alert-svc-w-' + idx">
            <div class="alert-msg__card-head">
                <div class="alert-msg__service">
                    <img class="alert-msg__service-logo" :src="s.logo" alt="">
                    <span class="alert-msg__service-name">@{{ s.name }}</span>
                    <lme-tag v-if="s.plan" :text="s.plan" type="default" size="md"></lme-tag>
                </div>
                <span class="alert-msg__within-limit">上限内</span>
            </div>

            <div class="alert-msg__limit-row">
                <span>月間上限 <b>@{{ fmtNum(s.monthlyLimit) }}通</b></span>
                <span>配信後 <b>@{{ fmtNum(s.afterTotal) }}通</b></span>
            </div>

            {{-- Usage bar: delivered (grey) + 今回の配信 (orange), trên nền track xám, không có over/marker --}}
            <div class="alert-msg__bar alert-msg__bar--within">
                <div class="alert-msg__bar-seg alert-msg__bar-seg--delivered"
                     :style="{ width: (s.delivered / s.monthlyLimit * 100) + '%' }"></div>
                <div class="alert-msg__bar-seg alert-msg__bar-seg--current"
                     :style="{ width: (s.sendTotal / s.monthlyLimit * 100) + '%' }"></div>
            </div>

            {{-- Legend --}}
            <div class="alert-msg__legend">
                <div class="alert-msg__legend-item">
                    <span class="alert-msg__legend-dot" style="background:#878A92"></span>
                    <span>配信済み <b>@{{ fmtNum(s.delivered) }}通</b></span>
                </div>
                <div class="alert-msg__legend-item">
                    <span class="alert-msg__legend-dot" style="background:#F0A000"></span>
                    <span>今回の配信 <b>@{{ fmtNum(s.sendTotal) }}通</b></span>
                </div>
            </div>

            <div class="alert-msg__summary">
                <span>配信可能残り <b>@{{ fmtNum(s.remaining) }}通</b></span>
                <span>/</span>
                <span>今回の配信合計 <b>@{{ fmtNum(s.sendTotal) }}通</b></span>
            </div>
        </div>
        </template>

        {{-- Upgrade section --}}
        <p class="alert-msg__upgrade-title">プランのアップグレードで上限を引き上げられます</p>

        <div class="alert-msg__upgrade" v-for="(u, idx) in alertMessage.upgrades" :key="'alert-upg-' + idx" v-if="u.show">
            <div class="alert-msg__upgrade-inner">
                <img class="alert-msg__upgrade-logo" :src="u.logo" alt="">
                <div class="alert-msg__upgrade-text">
                    <span class="alert-msg__upgrade-name">@{{ u.title }}</span>
                    <lme-button-default type="primary" size="md" @click="openAlertUpgrade(u.url)">
                        <span>@{{ u.buttonLabel }}</span>
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.625 1.3125H12.6875V4.375M12.0312 1.96875L8.75 5.25M7.4375 2.1875H3.5C3.1519 2.1875 2.81806 2.32578 2.57192 2.57192C2.32578 2.81806 2.1875 3.1519 2.1875 3.5V10.5C2.1875 10.8481 2.32578 11.1819 2.57192 11.4281C2.81806 11.6742 3.1519 11.8125 3.5 11.8125H10.5C10.8481 11.8125 11.1819 11.6742 11.4281 11.4281C11.6742 11.1819 11.8125 10.8481 11.8125 10.5V6.5625" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </lme-button-default>
                </div>
            </div>
        </div>

        {{-- Footer actions --}}
        <div class="alert-msg__footer">
            <lme-button-default type="secondary" size="md" @click="alertReviewTarget">配信対象を見直す</lme-button-default>
            <lme-button-flat type="primary" size="md" @click="alertSaveDraft">下書き保存する</lme-button-flat>
            <lme-button-default type="primary" size="md" @click="alertRegisterAnyway">このまま登録する</lme-button-default>
        </div>
    </div>
</lme-modal>
</div>

@push('js')
    <script src="/lme-ui/src/js/modal/lme-modal.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tag/lme-tag.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-default.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-flat.js?v={{config('sns-line.version')}}"></script>
@endpush