@extends('user.artist_single')

@section('artist_content')
<link href="{{ asset('public/css/singleartist/philantrophy.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<section class="bai-celebrity-data-tiles bai-celebrity-container bai-celebrity-data-tiles-js" data-should-be-toggled="">
    <div class="bai-celebrity-data-tiles__title">
        <div class="bai-celebrity-data-tiles__heading">
            <div class="bai-celebrity-data-tiles__title-number">{{count($philanthropy)}}</div>
            <h2 class="bai-celebrity-title">{{$artist->name}} <span class="bai-celebrity-title--bold">Charity Work</span></h2>
        </div>
        <div class="bai-celebrity-data-tiles__subtitle">
            {!! $artist->charity_summary !!}
        </div>
    </div>
    <ul class="bai-celebrity-data-tiles__tiles bai-celebrity-data-tiles-items-js">
        
        @if($user->hasActiveMembership($artist->id))
        
        @forelse($philanthropy as $phi)
        <li class="bai-celebrity-data-tiles__tile">
            <a href="{{url('charity/'.$phi->charity?->slug)}}" class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__image-wrapper">
                    <img src="{{secure_url('charity')}}/{{$phi->charity?->image}}" height="80" alt="{{$phi->charity?->name}}" class="bai-celebrity-data-tiles__image" />
                </div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--with-image">{{$phi->charity?->name}}</div>
            </a>
        </li>
        @empty
        <li class="bai-celebrity-data-tiles__tile">
            <a href="{{url('charity/'.$phi->charity?->slug)}}" class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__image-wrapper">
                    <img src="{{secure_url('charity')}}/{{$phi->charity?->image}}" height="80" alt="{{$phi->charity?->name}}" class="bai-celebrity-data-tiles__image" />
                </div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--with-image">{{$phi->charity?->name}}</div>
            </a>
        </li>
        @endforelse
        @else
        
        @if(count($philanthropy) > 0)
        @php
        $phi = $philanthropy->first()
        @endphp
        <li class="bai-celebrity-data-tiles__tile">
            <a href="{{url('charity/'.$phi->charity?->slug)}}" class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__image-wrapper">
                    <img src="{{secure_url('charity')}}/{{$phi->charity?->image}}" height="80" alt="{{$phi->charity?->name}}" class="bai-celebrity-data-tiles__image" />
                </div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--with-image">{{$phi->charity?->name}}</div>
            </a>
        </li>
        @endif
    
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name"><span class="bai-blurred real-length" data-content="Xxxxxx-Xxxxx Xxxxxxx Xxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name"><span class="bai-blurred real-length" data-content="Xxxxxxx Xxxx Xxxxxxxxxx"></span></div>
            </div>
        </li>
     
     <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name"><span class="bai-blurred real-length" data-content="Xxxxxx-Xxxxx Xxxxxxx Xxxxxx"></span></div>
            </div>
        </li>
        <div class="bai-celebrity-data-tiles__concealed bai-celebrity-data-tiles__concealed--over">
           
            {!! __getButtonTypeForArtist($artist) !!}
        </div>
        @endif
    </ul>
</section>

<section class="bai-celebrity-data-tiles bai-celebrity-data-tiles--second-style bai-celebrity-container bai-celebrity-data-tiles-js" data-should-be-toggled="">
    <div class="bai-celebrity-data-tiles__title">
        <div class="bai-celebrity-data-tiles__heading">
            <div class="bai-celebrity-data-tiles__title-number">{{$causescount}}</div>
            <h2 class="bai-celebrity-title">{{$artist->name}} <span class="bai-celebrity-title--bold">Causes</span></h2>
        </div>
        <div class="bai-celebrity-data-tiles__subtitle">
            {!!artist_cause_summary($artist->name , $causes)!!}
        </div>
    </div>
    <ul class="bai-celebrity-data-tiles__tiles bai-celebrity-data-tiles-items-js">
        @if($user->hasActiveMembership($artist->id))
        @forelse($causes as $cause)
        
        <li class="bai-celebrity-data-tiles__tile">
            <a href="{{route('user.causes.show', $cause->slug)}}" class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__image-wrapper">
                    <img src="{{secure_url('causes')}}/{{$cause->images}}" height="24" alt="{{$cause->name}}" class="bai-celebrity-data-tiles__image" />
                </div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--with-image bai-celebrity-data-tiles__name--second-style">{{$cause->name}}</div>
            </a>
        </li>
        
        @empty
        
        @endforelse
        @else
        @if(count($causes) > 0)
        @php
        $firstCause = $causes->first()
        @endphp
        <li class="bai-celebrity-data-tiles__tile">
            <a  class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__image-wrapper">
                    <img src="{{secure_url('causes')}}/{{$firstCause->images}}" height="24" alt="{{$firstCause->name}}" class="bai-celebrity-data-tiles__image" />
                </div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--with-image bai-celebrity-data-tiles__name--second-style">{{$firstCause->name}}</div>
            </a>
        </li>
        @endif
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxx"></span></div>
            </div>
        </li>
        
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xx-Xxxx/Xxxxxxxxxxxxx Xxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxx Xxxxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxxx Xxxxxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxxx Xxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxxx"></span></div>
            </div>
        </li>
        <li class="bai-celebrity-data-tiles__tile bai-celebrity-data-tiles__tile--concealed">
            <div class="bai-celebrity-data-tiles__tile-item">
                <div class="bai-celebrity-data-tiles__concealed-logo bai-blurred">logo</div>
                <div class="bai-celebrity-data-tiles__name bai-celebrity-data-tiles__name--second-style"><span class="bai-blurred real-length" data-content="Xxxxxxxx Xxxxxx"></span></div>
            </div>
        </li>
        <div class="bai-celebrity-data-tiles__concealed bai-celebrity-data-tiles__concealed--over">
            {!! __getButtonTypeForArtist($artist) !!} 
        </div>
        @endif
    </ul>
</section>


@endsection