@foreach ($mbPending as $mb)
<div class="listing-data d-lg-flex">
    <h5>{{ $mb->studio->name }}
        @if ($mb->studio->address)
        <p class="text-gray">{{$mb->studio->address}}</p>
        @endif
    </h5>
    <div class="listing-meta">
        <ul class="list-unstyled d-md-flex">
            <li>
                <div>
                    <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16 2H11.82C11.4 0.84 10.3 0 9 0C7.7 0 6.6 0.84 6.18 2H2C0.9 2 0 2.9 0 4V18C0 19.1 0.9 20 2 20H16C17.1 20 18 19.1 18 18V4C18 2.9 17.1 2 16 2ZM9 2C9.55 2 10 2.45 10 3C10 3.55 9.55 4 9 4C8.45 4 8 3.55 8 3C8 2.45 8.45 2 9 2ZM9 6C10.66 6 12 7.34 12 9C12 10.66 10.66 12 9 12C7.34 12 6 10.66 6 9C6 7.34 7.34 6 9 6ZM15 18H3V16.6C3 14.6 7 13.5 9 13.5C11 13.5 15 14.6 15 16.6V18Z" fill="#AEBCD7"></path>
                    </svg>
                    {{ $mb->studio->owner->first_name ?? '' }}  {{ $mb->studio->owner->last_name ?? '' }}
                </div>
                <a  href="mailto:{{ $mb->studio->owner->email }}"  class="autopay_links"> 
                    <div>
                        <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 0H2C0.9 0 0.00999999 0.9 0.00999999 2L0 14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H2V4L10 9L18 4V14ZM10 7L2 2H18L10 7Z" fill="#AEBCD7"></path>
                        </svg>
                        {{ $mb->studio->owner->email ?? '' }}
                    </div>
                </a>
                <div>
                    <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 2H17V0H15V2H5V0H3V2H2C0.9 2 0 2.9 0 4V20C0 21.1 0.9 22 2 22H18C19.1 22 20 21.1 20 20V4C20 2.9 19.1 2 18 2ZM18 20H2V7H18V20Z" fill="#AEBCD7"></path>
                    </svg>
                    Requested: {{ \App\Helpers\Helper::getHumanDate($mb->created_at) }}
                </div>
            </li>
        </ul>
    </div>
    <div class="listing-actions d-md-flex justify-content-between justify-content-md-end mt-3 mt-lg-0" style="min-width: 405.462px;">
        <button class="btn-theme light btn-small shadow-none copy-activation-code" data-code="{{ $mb->activation_code}}" id="copy_btn_{{ $mb->id}}">
            <svg class="no-stroke" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.86654 0.166992H1.86654C1.1332 0.166992 0.533203 0.766992 0.533203 1.50033V10.8337H1.86654V1.50033H9.86654V0.166992ZM9.19987 2.83366L13.1999 6.83366V13.5003C13.1999 14.2337 12.5999 14.8337 11.8665 14.8337H4.52654C3.7932 14.8337 3.19987 14.2337 3.19987 13.5003L3.20654 4.16699C3.20654 3.43366 3.79987 2.83366 4.5332 2.83366H9.19987ZM8.5332 7.50033H12.1999L8.5332 3.83366V7.50033Z"></path>
            </svg>
            Copy Activation Code
        </button>
        <a class="btn-theme light btn-small" href="{{ $mb->activation_link}}" target="_blank" rel=noopener>
            <svg class="no-stroke" width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6667 11.1667H1.33333V1.83333H6V0.5H1.33333C0.593333 0.5 0 1.1 0 1.83333V11.1667C0 11.9 0.593333 12.5 1.33333 12.5H10.6667C11.4 12.5 12 11.9 12 11.1667V6.5H10.6667V11.1667ZM7.33333 0.5V1.83333H9.72667L3.17333 8.38667L4.11333 9.32667L10.6667 2.77333V5.16667H12V0.5H7.33333Z" fill="white"/>
            </svg>
            Open Activation Page
        </a>
        <a class="btn-theme light btn-small mb-confirm-link" 
           data-confirmation="Please confirm that you have activated the Mindbody account of  {{ $mb->studio->name ?? '' }}" 
           data-subconfirmation="We will send an email notification to the studio owner, {{ $mb->studio->owner->first_name ?? '' }}." 
           href="{{ route('corporate.mark_as_activated', ['account' => $mb->id])}}" >
            <img src="{{ asset('images/tick_blue.svg') }}" alt="tick">
                Mark as Activated
        </a>
    </div>
</div>
@endforeach

<style type="text/css">
    .confirmation_msg{
        display: inline !important;
    }
</style>