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

        .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;
        }

        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="2">
                <img src="{{ asset('images/mail/header-bg-ar.png')}}" alt="yajny mail head"/>
            </td>
        </tr>

        <tr>
            <td class="mail-message" colspan="2">
                <p class="mail-text">أهلاً {{$user->first_name}}</p>
                <p class="mail-text">
                    برافو! أتممت {{$program_data['next_program']['number_of_purchases']}} معاملات تسوق بقيمة
                    {{$program_data['next_program']['total_amount_formatted']}}.
                </p>
                <h2 class="mail-title">
                    لم يتبق سوى خطوة بسيطة للفوز بمكافأة يجنى بلس
                    {{$program_data['next_program']['program']['name']['ar'] }}.
                </h2>
                <p class="mail-text">
                    حتى يكون فيك تربح {{$program_data['next_program']['program']['bonus_amount_formatted'] }}
                    وتترقى لبطاقة يجنى بلس {{$program_data['next_program']['program']['name']['ar'] }}
                    ، قم
                    بعمل {{($program_data['next_program']['program']['min_sale_count'] - $program_data['next_program']['number_of_purchases'])}}
                    عملية شراء بقيمة {{$program_data['next_program']['program']['min_sale_amount_formatted']}}.
                </p>
            </td>
        </tr>

        <tr>
            <td class="container-center" colspan="2">
                <a
                    class="mail-cta"
                    href="{{config('website.cnf_appurl')}}/ar/all-stores"
                    target="_blank"
                >انطلق الآن</a
                >
            </td>
        </tr>

        <tr>
            <td class="yajny-plus">
                <img src="{{ asset('images/mail/crown.png')}}" alt="yajny plus"/>
            </td>

            <td class="yajny-counter">
                <div class="counter">
                    <div class="counter-left">
                        <p class="counter-number">{{(\Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse('next friday'))+1)}}</p>
                    </div>
                    <div class="counter-right">
                        <p class="counter-title">أيام</p>
                        <p class="mail-text">ينتهي في {{\Carbon\Carbon::parse('next friday')->toDateString()}}</p>
                    </div>
                </div>

                <div class="counter">
                    <div class="counter-left">
                        <p class="counter-number">{{($program_data['next_program']['program']['min_sale_count'] - $program_data['next_program']['number_of_purchases'])}}</p>
                    </div>
                    <div class="counter-right">
                        <p class="counter-title">طلبات</p>
                        <p class="mail-text">طلبات متبقية</p>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <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"
                    />
                </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