@component('emails.Components.CustomerBody', ['merchant' => $merchant])
    <div>
        <h1 class="h-2 color-site font-medium  mb-4">
            包月方案訂單<br>
            #{{ $data['訂單編號'] }} 已取消通知
        </h1>

        <p class="mb-4">
            {!! html_entity_decode(nl2br($data['自訂內容'])) !!}
        </p>

        <h3 class="h-4 color-primary-dark mb-3">
            [ 訂單#{{ $data['訂單編號']  }} ]
        </h3>
        <table class="style-1 w-100 font-regular mb-custom">
            <tr>
                <td class="w-30">包月方案名稱</td>
                <td>{{ $data['包月方案名稱'] }}</td>
            </tr>
            <tr>
                <td class="w-30">總抵用次數</td>
                <td>
                    {{ $data['總抵用次數'] }}<br>
                </td>
            </tr>
            <tr>
                <td class="w-30">總計金額</td>
                <td>{{ $data['總計金額'] }}</td>
            </tr>
        </table>

        <h3 class="h-4 color-primary-dark mb-3">
            [ 內容說明與注意事項 ]
        </h3>

        <div class="border p-3 mb-custom">
            <h4 class="h-6 color-primary-dark mb-2">方案說明</h4>
            <p class="mb-3">
                {!! $data['方案說明'] !!}
            </p>
            <h4 class="h-6 color-primary-dark mb-2">注意事項</h4>
            <p>
                {!! $data['注意事項'] !!}
            </p>
        </div>

        <h3 class="h-4 color-primary-dark mb-3">
            [ 預付方案使用須知 ]
        </h3>

        <div class="border p-3 mb-custom">
            <ol class="ol">
                <li>我們之於方案有效狀態有最終解釋權。</li>
                <li>如您需取消包月方案，請與我們聯繫。</li>
            </ol>
        </div>
        @if($data['分店類型'] == 'store')
        <h3 class="h-4 color-primary-dark mb-3">
            [ 分店資訊 ]
        </h3>

        <div class="border p-3 mb-custom">
            <ul class="no-style">
                <li>分店：{{$data['分店']}}</li>
                <li>電話：<a class="color-info text-link" href="{{ $data['電話連結'] }}">{{$data['電話']}}</a></li>
                <li>地址：{{$data['地址']}}<a href="{{$data['地圖']}}" class="color-info text-link"><img src="{{asset('/email/images/site/icon-external-link.png')}}" alt=""></a> </li>
            </ul>
        </div>
        @endif
        <div class="mb-5 mt-5">
            <a href="{{$data['訂單連結']}}" class="baseButton isSite isFull isRadius">
                查看訂單完整明細
            </a>
        </div>
        <div class="link-box mb-5 ">
            <p class="h-6">
                若無法點選上方連結，請複製下面的網址到您的瀏覽器中：
            </p>
            <a href="{{$data['訂單連結']}}" class="color-primary mail-link h-6">
                {{$data['訂單連結']}}
            </a>
        </div>
    </div>
@endcomponent