@component('MailYj::new-layout')
    <style>
        .mail-title {
            color: #ff2f1d;
            font-size: 40px;
            font-weight: bold;
            margin: 8px 0;
        }

        .mail-subtitle {
            color: #ff2f1d;
            font-size: 24px;
            font-weight: bold;
            margin: 0;
        }

        .mail-bonus {
            margin: 0;
            font-size: 38px;
            font-weight: bold;
            color: #ff2f1d;
        }

        .mail-shop-title {
            color: #ff2f1d;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 32px;
            text-align: center;
        }

        .mail-refer-title {
            margin: 0;
            color: #ff2f1d;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 8px;
            text-align: center;
        }

        .mail-message {
            padding: 24px 16px;
        }

        .container-center {
            padding: 0 16px 24px 16px;
            text-align: center;
        }

        .mail-cta {
            background-color: #ff2f1d;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            padding: 8px 24px;
            border-radius: 24px;
        }

        .yajny-plus {
            text-align: center;
        }

        .counter {
            border: 1px solid #ededed;
            border-radius: 8px;
            margin: 16px 0;
            padding: 16px 8px;
        }

        .counter-left,
        .counter-right {
            display: inline-block;
        }

        .counter-right {
            margin: 0 8px;
        }

        .counter-number {
            margin: 0;
            width: 64px;
            height: 64px;
            color: #ff2f1d;
            background-color: #fbfbfb;
            font-size: 48px;
            font-weight: bold;
            border: 1px solid #ededed;
            text-align: center;
            line-height: 64px;
            border-radius: 50%;
            display: inline-block;
        }

        .counter-title {
            margin: 0;
            color: #ff2f1d;
            font-size: 32px;
            font-weight: bold;
        }

        .mail-text {
            margin: 0;
            color: #5b5b5b;
            font-size: 16px;
            font-weight: normal;
            line-height: 1.5;
        }

        .mail-program-container {
            width: 100%;
            border: 1px solid #ededed;
            padding: 16px;
        }

        .mail-program-title_container {
            padding: 16px;
            background-color: #fbfbfb;
            border-bottom: 1px solid #c8c8c8;
        }

        .mail-program-title {
            color: #494949;
            font-size: 20px;
            font-weight: normal;
        }

        .program-bonus img,
        .program-bonus p,
        .program-order img,
        .program-order p,
        .program-tier img,
        .program-tier p {
            display: inline-block;
        }

        .program-bonus img,
        .program-order img,
        .program-tier img {
            margin: 0 8px;
        }

        .program-label {
            border-radius: 6px;
        }

        .program-seperator {
            height: 16px;
        }

        .terms-seperator {
            height: 8px;
        }

        .program-seperator hr {
            border: none;
            border-bottom: 1px solid #ededed;
        }

        .program-terms img {
            margin: 0 8px;
        }

        .mail-shop-container {
            width: 100%;
        }

        .mail-footer {
            width: 100%;
            border: 1px solid #ededed;
        }

        .ico-social {
            margin: 0 8px;
        }

        .link-reset {
            text-decoration: none;
        }

        .mail-footer-text {
            color: #7f7f7f;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .mail-footer-container {
            padding: 24px;
            background-color: #fbfbfb;
            border-bottom: 1px solid #c8c8c8;
        }

        .container-badges {
            text-align: center;
        }

        .card-left {
            padding: 0;
            border: 0;
        }

        .card-container {
            display: inline-block;
            margin: 0 8px;
        }

        .card-right {
            border: 0;
            text-align: center;
        }

        table {
            border-spacing: 0 !important;
            width: 500px !important;
            margin: auto !important;
        }

    </style>

    <table dir="rtl" class="mail-head-container" style="border-spacing: 0 !important;
            width: 500px !important;
            margin:auto !important;">
        <tbody>
        <tr>
            <td class="mail-head" colspan="3">
                <img
                    src="{{ asset('images/mail/img-congrats.png')}}"
                    alt="yajny mail congrats"
                />
            </td>
        </tr>

        <tr>
            <td class="mail-message container-center" colspan="3">
                <h2 class="mail-title" style="text-align: center !important;">مبروك!</h2>
            </td>
        </tr>

        <tr>
            <td class="card-left" style="border:none">
                <img height="48px" style="vertical-align: super; margin: 0 8px;"
                     src="{{ $program_data['current_program']['program']['badge']}}"
                     alt="yajny program badge"
                />
            </td>
            <td class="card-container">
                <div>
                    @for($i = 0; $i < $program_data['current_program']['program']['min_sale_count']; $i++)
                        <img src="{{ asset('images/mail/ico-diamond.png')}}" alt="order icon"
                             style="background: {{$program_data['current_program']['program']['landing_text_color']}};"/>
                    @endfor
                </div>

                <p class="mail-subtitle"
                   style="color:{{ $program_data['current_program']['program']['landing_text_color']}}">
                    {{$program_data['current_program']['program']['name']['ar']}}</p>

                <p class="mail-text">
                    تم اضافة {{$program_data['current_program']['program']['bonus_amount_formatted']}} الي حسابك</p>

            </td>
            <td class="card-right"
                style="border:none; color:{{ $program_data['current_program']['program']['landing_text_color']}};width: 40%;">
                <p class="mail-bonus"
                   style="color:{{ $program_data['current_program']['program']['landing_text_color']}}">
                    {{$program_data['current_program']['program']['bonus_amount_formatted']}}</p>
            </td>
        </tr>

        <tr>
            <td class="program-seperator" colspan="3"></td>
        </tr>

        <tr>
            <td colspan="3">
                <a href="{{config('website.cnf_appurl')}}/ar" target="_blank">
                    <img
                        class="yajny-banner"
                        src="{{ asset('images/mail/img-yajny-plus1-ar.png')}}"
                        alt="yajny banner" width="100%"
                    />
                </a>
            </td>
        </tr>
        </tbody>
    </table>

    @component('MailYj::ar.member.loyalty.loyalty-details',['loyalty_programs' =>$loyalty_programs,'loyalty_terms'=>$loyalty_terms['ar']])@endcomponent
    @component('MailYj::ar.member.loyalty.loyalty-footer',['lang' =>$lang,'refer_bonus'=>$refer_bonus])@endcomponent
@endcomponent