@extends('layouts.master')

@section('title') {{__('admin.dashboard')}} -@endsection
@section('css')

<!-- Slick CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>

<link href="{{ asset('public/css/singleartist/automix1.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<link href="{{ asset('public/css/singleartist/automix2.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<link href="{{ asset('public/css/singleartist/automix3.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<link href="{{ asset('public/css/artist/event.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<style>
    .wer{
        padding-top:50px;
    }
    
    .na{
        margin-bottom:30px;
    }
    
</style>

@endsection
@section('content')
<div class="celebrity-template-default single single-celebrity postid-1123706 logged-in affwp-affiliate-area  rcp-not-active wer" >
    <div class="main-body">
    <main id="main" class="bai-single-celebrity">
        <section class="bai-header-search bai-header-search-js na" >
        <div class="bai-header-search__container bai-container">
            <div class="bai-header-search__search">
				                <form class="bai-customSearchForm" action="">
<input type="text" id="bai_headsearch_search-input" placeholder="Search..." autocomplete="off">
<div id="bai_headsearch_results-container"></div>
</form>
            </div>
            <div class="bai-header-search__separator">
            </div>
            <div class="bai-header-search__actions">
                <a href="/browse/" class="bai-header-search__browse">Browse</a>
                <button class="bai-header-search__exit-search bai-header-search-exit-js">Exit Search</button>
            </div>
        </div>
    </section>
        <section class="bai-celebrity-profile bai-celebrity-container">
            <img
                width="200"
                height="200"
                class="bai-celebrity-profile__image"
                src="{{!blank($artist->avatar) ? secure_url('celebrity/' . $artist->avatar): secure_url('celebrity/default-avatar.png')}}"
                alt="{{ucfirst($artist->name)}}"
                srcset="{{!blank($artist->avatar) ? secure_url('celebrity/' . $artist->avatar): secure_url('celebrity/default-avatar.png')}}"
            />
            <div class="bai-celebrity-profile__data">
                <div class="bai-celebrity-profile__chips">
                    <a class="bai-celebrity-profile__chip">{{$artist->categoryType?->name}}</a>
                </div>
                <h1 class="bai-celebrity-profile__name">{{ucfirst($artist->name)}} <span class="bai-celebrity-profile__subtitle">{{$vn}}</span></h1>
                <div class="bai-celebrity-profile__info">
                    <div class="bai-celebrity-profile__info-block">
                        <div class="bai-celebrity-profile__info-block-header bai-tooltip bai-tooltip-js" data-tooltip="Occupation" data-tooltip-initialized="true">
                            <svg width="22" height="22">
                                <use href="#bai-occupation-icon"></use>
                            </svg>
                        </div>
                        <div class="bai-celebrity-profile__info-block-text">{{$artist->categoryType?->name}}</div>
                    </div>
                    <div class="bai-celebrity-profile__info-block">
                        <div class="bai-celebrity-profile__info-block-header">
                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15.125 2.75H6.875C5.78098 2.75 4.73177 3.1846 3.95818 3.95818C3.1846 4.73177 2.75 5.78098 2.75 6.875V15.125C2.75 16.219 3.1846 17.2682 3.95818 18.0418C4.73177 18.8154 5.78098 19.25 6.875 19.25H15.125C16.219 19.25 17.2682 18.8154 18.0418 18.0418C18.8154 17.2682 19.25 16.219 19.25 15.125V6.875C19.25 5.78098 18.8154 4.73177 18.0418 3.95818C17.2682 3.1846 16.219 2.75 15.125 2.75ZM11 14.4375C10.3201 14.4375 9.65552 14.2359 9.09023 13.8582C8.52493 13.4805 8.08434 12.9436 7.82416 12.3155C7.56399 11.6874 7.49591 10.9962 7.62855 10.3294C7.76119 9.66257 8.08858 9.05006 8.56932 8.56932C9.05006 8.08858 9.66257 7.76119 10.3294 7.62855C10.9962 7.49591 11.6874 7.56399 12.3155 7.82416C12.9436 8.08434 13.4805 8.52493 13.8582 9.09023C14.2359 9.65552 14.4375 10.3201 14.4375 11C14.4375 11.9117 14.0753 12.786 13.4307 13.4307C12.786 14.0753 11.9117 14.4375 11 14.4375Z"
                                    fill="#FDCD1C"
                                ></path>
                                <path
                                    d="M15.125 2.0625H6.875C5.59906 2.06386 4.37578 2.57133 3.47356 3.47356C2.57133 4.37578 2.06386 5.59906 2.0625 6.875V15.125C2.06386 16.4009 2.57133 17.6242 3.47356 18.5264C4.37578 19.4287 5.59906 19.9361 6.875 19.9375H15.125C16.4009 19.9361 17.6242 19.4287 18.5264 18.5264C19.4287 17.6242 19.9361 16.4009 19.9375 15.125V6.875C19.9361 5.59906 19.4287 4.37578 18.5264 3.47356C17.6242 2.57133 16.4009 2.06386 15.125 2.0625ZM18.5625 15.125C18.5625 16.0367 18.2003 16.911 17.5557 17.5557C16.911 18.2003 16.0367 18.5625 15.125 18.5625H6.875C5.96332 18.5625 5.08898 18.2003 4.44432 17.5557C3.79966 16.911 3.4375 16.0367 3.4375 15.125V6.875C3.4375 5.96332 3.79966 5.08898 4.44432 4.44432C5.08898 3.79966 5.96332 3.4375 6.875 3.4375H15.125C16.0367 3.4375 16.911 3.79966 17.5557 4.44432C18.2003 5.08898 18.5625 5.96332 18.5625 6.875V15.125ZM11 6.875C10.1842 6.875 9.38663 7.11693 8.70827 7.57019C8.02992 8.02345 7.50121 8.66769 7.189 9.42143C6.87679 10.1752 6.7951 11.0046 6.95426 11.8047C7.11343 12.6049 7.50629 13.3399 8.08318 13.9168C8.66008 14.4937 9.39508 14.8866 10.1953 15.0457C10.9954 15.2049 11.8248 15.1232 12.5786 14.811C13.3323 14.4988 13.9766 13.9701 14.4298 13.2917C14.8831 12.6134 15.125 11.8158 15.125 11C15.1239 9.90633 14.6889 8.85778 13.9156 8.08444C13.1422 7.3111 12.0937 6.87614 11 6.875ZM11 13.75C10.4561 13.75 9.92442 13.5887 9.47218 13.2865C9.01995 12.9844 8.66747 12.5549 8.45933 12.0524C8.25119 11.5499 8.19673 10.9969 8.30284 10.4635C8.40895 9.93005 8.67086 9.44005 9.05546 9.05546C9.44005 8.67086 9.93005 8.40895 10.4635 8.30284C10.9969 8.19673 11.5499 8.25119 12.0524 8.45933C12.5549 8.66747 12.9844 9.01995 13.2865 9.47218C13.5887 9.92442 13.75 10.4561 13.75 11C13.75 11.7293 13.4603 12.4288 12.9445 12.9445C12.4288 13.4603 11.7293 13.75 11 13.75ZM16.5 6.53125C16.5 6.73521 16.4395 6.93459 16.3262 7.10418C16.2129 7.27377 16.0518 7.40595 15.8634 7.484C15.675 7.56205 15.4676 7.58248 15.2676 7.54269C15.0675 7.50289 14.8838 7.40468 14.7395 7.26045C14.5953 7.11623 14.4971 6.93248 14.4573 6.73244C14.4175 6.53239 14.4379 6.32504 14.516 6.13661C14.5941 5.94817 14.7262 5.78711 14.8958 5.6738C15.0654 5.56048 15.2648 5.5 15.4688 5.5C15.7423 5.5 16.0046 5.60865 16.198 5.80205C16.3913 5.99544 16.5 6.25775 16.5 6.53125Z"
                                    fill="#0A0A0A"
                                ></path>
                            </svg>
                        </div>
                        <div class="bai-celebrity-profile__info-block-text">
                        @if(!blank($artist->username('instagram')) && $artist->username('instagram') !='N/A')
                        <a style="color: #0a0a0a;" href="https://www.instagram.com/{{$artist->username('instagram')}}">{{'@'.$artist->username('instagram')}} </a>
                        @else
                        {{$artist->username('instagram')}} 
                        @endif
                        
                        </div>
                    </div>
                </div>
                @include('user.components.artist_single_info')
                
            </div>
            <div class="bai-celebrity-profile__actions">
            
                
                {!! __getButtonTypeForArtist($artist) !!}
            </div>
        </section>

        <svg hidden="">
            <symbol id="bai-occupation-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M19.25 13.0625V17.1875C19.25 17.3698 19.1776 17.5447 19.0486 17.6736C18.9197 17.8026 18.7448 17.875 18.5625 17.875H3.4375C3.25516 17.875 3.0803 17.8026 2.95136 17.6736C2.82243 17.5447 2.75 17.3698 2.75 17.1875V13.0625H19.25Z"
                    fill="#FDCD1C"
                ></path>
                <path
                    d="M18.5625 4.8125H15.125V4.125C15.125 3.57799 14.9077 3.05339 14.5209 2.66659C14.1341 2.2798 13.6095 2.0625 13.0625 2.0625H8.9375C8.39049 2.0625 7.86589 2.2798 7.47909 2.66659C7.0923 3.05339 6.875 3.57799 6.875 4.125V4.8125H3.4375C3.07283 4.8125 2.72309 4.95737 2.46523 5.21523C2.20737 5.47309 2.0625 5.82283 2.0625 6.1875V17.1875C2.0625 17.5522 2.20737 17.9019 2.46523 18.1598C2.72309 18.4176 3.07283 18.5625 3.4375 18.5625H18.5625C18.9272 18.5625 19.2769 18.4176 19.5348 18.1598C19.7926 17.9019 19.9375 17.5522 19.9375 17.1875V6.1875C19.9375 5.82283 19.7926 5.47309 19.5348 5.21523C19.2769 4.95737 18.9272 4.8125 18.5625 4.8125ZM8.25 4.125C8.25 3.94266 8.32243 3.7678 8.45136 3.63886C8.5803 3.50993 8.75516 3.4375 8.9375 3.4375H13.0625C13.2448 3.4375 13.4197 3.50993 13.5486 3.63886C13.6776 3.7678 13.75 3.94266 13.75 4.125V4.8125H8.25V4.125ZM18.5625 6.1875V12.375H3.4375V6.1875H18.5625ZM18.5625 17.1875H3.4375V13.75H18.5625V17.1875Z"
                    fill="#0A0A0A"
                ></path>
            </symbol>
        </svg>

        <section class="bai-celebrity-container bai-celebrity-tabs-wrapper bai-celebrity-tabs-wrapper-js sticky">
            @php
    $currentTab = request()->route('tab') ?? 'contact';
@endphp
            <div class="bai-celebrity-tabs">
            
    {!! __getActiveTabForArtist([
        'id' => $artist->slug,
        'type' => 'contact',
        'name' => 'Contact Info'
    ], $currentTab) !!}

    @if($artist->hasEndorsement())
        {!! __getActiveTabForArtist([
            'id' => $artist->slug,
            'type' => 'endorsements',
            'name' => 'Endorsements'
        ], $currentTab) !!}
    @endif

    @if($artist->hasCharity())
        {!! __getActiveTabForArtist([
            'id' => $artist->slug,
            'type' => 'philanthropy',
            'name' => 'Philanthropy'
        ], $currentTab) !!}
    @endif



    @if($artist->hasEvent())
        {!! __getActiveTabForArtist([
            'id' => $artist->slug,
            'type' => 'events',
            'name' => 'Events & Tours'
        ], $currentTab) !!}
    @endif
</div>
        </section>

        @yield('artist_content')
        @include('user.components.artist_bottom')
      
    </main>

</div>

</div>

@endsection

@section('javascript')

  <script>

      $('body').on('click' ,'.join_membership', function(){
        
        var dataname = $(this).attr('data-name');
        var dataurl = $(this).attr('data-url');
        

        if (confirm('are you sure want to get this artist membership card - '+dataname+'?')) {

            window.location.href = dataurl;
            

        }
      })
  </script>
 <script>
$(document).ready(function () {
    $('.bai-celebrity-tabs span').on('click keypress', function (e) {
        // Allow click OR Enter/Space for keyboard accessibility
        if (e.type === 'click' || e.key === 'Enter' || e.key === ' ') {
            var tabId = $(this).data('tab');

            // Update tabs
            $('.bai-celebrity-tabs span')
                .removeClass('bai-celebrity-tabs__tab--active')
                .attr('aria-selected', 'false')
                .attr('tabindex', '-1');

            $(this)
                .addClass('bai-celebrity-tabs__tab--active')
                .attr('aria-selected', 'true')
                .attr('tabindex', '0')
                .focus();

            // Update panels
            $('.bai-events-table-wrapper')
                .removeClass('bai-celebrity-events-table--active')
                .attr('hidden', true);

            $('#tab-' + tabId)
                .addClass('bai-celebrity-events-table--active')
                .removeAttr('hidden');
        }
    });
});
</script>
<script>
    $(document).ready(function () {
    const bioDiv = $(".bai-celebrity-bio-js > div");
    const fullHtml = bioDiv.html().trim();
    const fullText = bioDiv.text().trim();
    const wordLimit = 70;

    // Split words
    const words = fullText.split(/\s+/);

    if (words.length > wordLimit) {
        // Build truncated version (safe plain text)
        const truncatedText = words.slice(0, wordLimit).join(" ") + "...";
        const truncatedHtml = $("<div>").text(truncatedText).html(); // escape safely

        // Store both versions
        bioDiv.data("full-html", fullHtml);
        bioDiv.data("short-html", truncatedHtml);
        bioDiv.html(truncatedHtml);

        // Show button + toggle
        $(".bai-bio-show-more-js").show().on("click", function () {
            if (bioDiv.html() === truncatedHtml) {
                bioDiv.html(fullHtml);
                $(this).text("Show Less");
            } else {
                bioDiv.html(truncatedHtml);
                $(this).text("Show More");
            }
        });
    }
});


</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
    $(document).ready(function () {
  $(".bai-testimonials-slider-js").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: $(".bai-testimonials-slider-back-js"),
    nextArrow: $(".bai-testimonials-slider-next-js"),
    dots: true,
    appendDots: $(".bai-testimonials-dots-js"),
    adaptiveHeight: true,
    autoplay: true,
    autoplaySpeed: 5000
  });
});

</script>
  @endsection