@component('emails.Components.CustomerBody', ['merchant' => $merchant])
    <div>
        <h1 class="h-2 color-{{ config('app.type') }}-site font-medium  mb-4">
            {!! html_entity_decode(nl2br($data['標題'])) !!}
        </h1>

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

        <h3 class="h-4 color-{{ config('app.type') }}-primary-dark mb-3">訂單資訊 [#{{ $data['訂單編號'] }}]</h3>

        @include('emails.Order.Components.SectionOrderInfo', ['data' => $data])

        <h3 class="h-4 color-{{ config('app.type') }}-primary-dark mb-3">付款資訊</h3>
        <div class="border p-3 mb-custom">
            <ul class="no-style">
                <li>付款方式：{{$data['付款方式']}}</li>
            </ul>
        </div>

        <h3 class="h-4 color-{{ config('app.type') }}-primary-dark mb-3">預約資訊</h3>

        <div class="border p-3 mb-custom">
            <ul class="no-style">
                <li>預約姓名：{{$data['預約姓名']}}</li>
                <li>電子郵件：{{$data['電子郵件']}}</li>
                <li>手機號碼：{{$data['手機號碼']}}</li>
                <li>備註：{{$data['備註']}}</li>
            </ul>
        </div>

        @if(count( (array)$data['預約相關問答']))
        <h3 class="h-4 color{{ config('app.type') }}--primary-dark mb-3">預約相關問答</h3>

        <div class="border p-3 mb-custom" style="padding-bottom: 10px;">
            @foreach($data['預約相關問答'] as $field)
                <div class="color-ingo">{{$field->title}}</div>
                <div class="mb-3">{{$field->value}}</div>
            @endforeach
        </div>
        @endif

        @if($data['分店類型'] == 'store')
        <h3 class="h-4 color-{{ config('app.type') }}-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

        <h3 class="h-4 color-{{ config('app.type') }}-primary-dark mb-3">
            [ 定型化契約 ]
        </h3>
        <table class="style-1 w-100 font-regular mb-custom">
            <tr>
                <td class="w-100">{!! html_entity_decode(nl2br($data['定型化契約'])) !!}</td>
            </tr>
        </table>
        <div class="mb-5 mt-5">
            <a href="{{$data['訂單連結']}}" class="baseButton {{config('app.type')}}-isSite isFull {{ config('app.type') == 'ipetbooking' ? 'isRadius' : '' }}">
                查看訂單完整明細
            </a>
        </div>
        <div class="link-box mb-5 ">
            <p class="h-6">
                若無法點選上方連結，請複製下面的網址到您的瀏覽器中：
            </p>
            <a href="{{$data['訂單連結']}}" class="color-{{config('app.type')}}-primary mail-link h-6">
                {{$data['訂單連結']}}
            </a>
        </div>
    </div>
@endcomponent