@extends('frontend.include.layout')

@section('content')

<link rel="stylesheet" href="{{ asset('frontend/css/assetdesign.css') }}">

@if(count($actor_individual_advertisements_tops) != 0)
    <section class="home-slider position-relative mb-30">
        <div class="container">

            <div class="home-slide-cover bg-grey-10 mt-30">
                <div class="hero-slider-1 style-4 dot-style-1 dot-style-1-position-1">
                    @foreach($actor_individual_advertisements_tops as $key => $home_advertisementdetail)
                        @include('frontend.include.advertisementdesign')
                    @endforeach
                </div>

            </div>

        </div>
    </section>
@endif

<section class="mt-50 mb-50">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">

<div class="product-detail accordion-detail">
<div class="row mb-20">
<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-xs-12">
<div class="detail-gallery">
<!-- MAIN SLIDES -->

<div class="product-image-slider">
@if($actor_detail->displayimage)
<figure class="border-radius-10">
    <img src="{{ asset('actor_display_image/'.$actor_detail->displayimage) }}" alt="product image">
</figure>
@endif

@if($actor_detail->portfollo)
    <figure class="border-radius-10">
        <img src="{{ $actor_detail->portfollo }}" alt="product image">
    </figure>
@endif



</div>
<!-- THUMBNAILS -->
<div class="slider-nav-thumbnails pl-15 pr-15">
   <br>

@if($actor_detail->displayimage)
<div><img src="{{ asset('actor_display_image/'.$actor_detail->displayimage) }}" alt="product image" ></div>
@endif

    @if($actor_detail->portfollo)
        <div><img src="{{ $actor_detail->portfollo }}" alt="product image" ></div>
    @endif

</div>


</div>
<!-- End Gallery -->

<br>
<br>
<br>


<div class="tab-style3 assetdetailscontentdisplay">
<ul class="nav nav-tabs">
<li style="padding-left: 0px !important;" class="nav-item col-md-2">
<a class="nav-link active" id="highlight-tab" data-bs-toggle="tab" href="#highlight">Highlight</a>
</li>
<li class="nav-item col-md-2">
<a class="nav-link" id="description-tab" data-bs-toggle="tab" href="#assetlist">Asset</a>
</li>
<li class="nav-item col-md-2" id="click-reviews-tab">
<a class="nav-link" id="reviews-tab" data-bs-toggle="tab" href="#reviews_tab">Reviews</a>
</li>
</ul>


<div class="tab-content shop_info_tab entry-main-content">

<div class="tab-pane fade show active" id="highlight">

<div class="row">
<div class="col-md-12 designcontentallassetdetails">

    {!! $actor_detail->profiledescription !!}

</div>
</div>

</div>

<div class="tab-pane fade" id="assetlist">

    <div class="row">
        @foreach($asset_details as $key => $publish_asset_detail)

            @include('frontend.include.assetsingle')

        @endforeach
    </div>

</div>

<div class="tab-pane fade" id="reviews_tab">


<div class="row">
<div class="col-lg-12">
<h5 class="customerreviewheadingdesign">Overall</h5>
<div class="d-flex mb-30">
<div class="col-12 text-left asset_stars reviewallstardesignheading commentassetstardesign">
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>

<span class="starcountdisplaydesign">1 out of 0</span>

</div>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-5">
<div class="progress">
<span>5 star</span>
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<span>4 star</span>
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<span>3 star</span>
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<span>2 star</span>
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-30">
<span>1 star</span>
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>

</div>
</div>





</div>

</div>



</div>

</div>

<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">

<div class="detail-info">
<div class="row">

<div class="col-md-5">
<h2 class="assetverifiedtextdesign" style=" font-size: 13px; "><i class="fa fa-check-square-o "></i> Actor verified </h2>
</div>

<div class="col-md-7">
<h2 class="title-detail-id"> ID : {{ $actor_detail->actor_id }} </h2>
</div>



<div class="col-md-12">
<div class="product-detail-rating">
<div class="pro-details-brand">

<table class="paddingnone" style="margin: 0px">
<tbody><tr>
<td><div class="profilecircle actorprofilecircledesign">
        @if($actor_detail->profileimage)
            <img src="{{ asset('actor_profile/'.$actor_detail->profileimage) }}">
        @else
            <p>@php echo strtoupper(mb_substr($actor_detail->name, 0, 1)); @endphp</p>
        @endif


    </div></td>
<td><h2 class="title-detail" id="assetnamedesignresponsivecheck"> {{ $actor_detail->name }}</h2></td>
</tr>
</tbody></table>

</div>
</div>
</div>

<div class="col-md-12">
<div class="product-detail-rating" style="display:block;padding-top: 5px !important;">
<div class="pro-details-brand asset_details_stars">

<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<span style=" font-size: 12px; ">(
0                                                 )</span> <span style=" color: #9c9c9c; ">|</span>
<span><i class="fa fa-heart" aria-hidden="true" style=" color: #000; "></i></span> <span style=" font-size: 12px; " id="display_count_favourite_asset">(0)</span>

</div>
</div></div>

<div class="col-md-12"><hr></div>

<div class="col-md-12">


<p class="asseteyeviewdesign"><span><i class="fa fa-eye" aria-hidden="true"></i> <b id="displayassetviewcount">2</b> views </span> in the past week</p>

</div>

<div class="col-md-12"><hr></div>

<div class="col-md-12">
<table class="paddingnone assetdesign_table_add_card_design">
<tbody><tr>
<td style="width: 85%;">
<button type="button" style=" background-color: #2790f4; color: #fff; width: 97%; border: 1px solid #2790f4;    display: block; " class="button button-add-to-cart add_cart_text_showhide1">&nbsp;&nbsp;Follow</button>
</td>
<td>&nbsp;&nbsp;<button type="button" class="button  assetdetailsfavdesign clickfavouriteset  displaybgfavouriteset1" onclick="show_favourite_views_asset(1)"><i class="fi-rs-heart mt-1" style=" top: 4px; position: relative; "></i> </button></td>
</tr>
</tbody></table>

</div>



</div>





</div>






<!-- Detail Info -->
</div>
</div>
</div>

            </div>
        </div>
    </div>
</section>

@if(count($actor_individual_advertisements_bottoms) != 0)
    <section class="home-slider position-relative mb-30">
        <div class="container">

            <div class="home-slide-cover bg-grey-10 mt-30">
                <div class="hero-slider-1 style-4 dot-style-1 dot-style-1-position-1">
                    @foreach($actor_individual_advertisements_bottoms as $key => $home_advertisementdetail)
                        @include('frontend.include.advertisementdesign')
                    @endforeach
                </div>

            </div>

        </div>
    </section>
@endif

<style>

    .asset_stars i {
        font-size: 10px;
        position: relative;
        top: -1px;
    }

.btn.btn-rounded {
border-radius: 50px;
}


.btn-outline-facebook {
border: 1px solid #3b579d;
color: #3b579d;
}

.btn-outline-facebook:hover {
background: #3b579d;
color: #ffffff;
}

.btn-outline-youtube {
border: 1px solid #e52d27;
color: #e52d27;
}

.btn-outline-twitter {
border: 1px solid #2caae1;
color: #2caae1;
}

.btn-outline-dribbble {
border: 1px solid #ea4c89;
color: #ea4c89;
}

.btn-outline-linkedin {
border: 1px solid #0177b5;
color: #0177b5;
}

.btn-outline-instagram {
border: 1px solid #dc4a38;
color: #dc4a38;
}

.btn-outline-twitter:hover {
background: #2caae1;
color: #ffffff;
}

.btn-outline-linkedin:hover {
background: #0177b5;
color: #ffffff;
}

.btn-outline-youtube:hover {
background: #e52d27;
color: #ffffff;
}

.btn-outline-instagram:hover{
background: #e52d27;
color: #ffffff;
}


/*Button cover*/

.btn-facebook {
background: #3b579d;
color: #ffffff;
}

.btn-youtube {
background: #e52d27;
color: #ffffff;
}

.btn-twitter {
background: #2caae1;
color: #ffffff;
}
.btn-dribbble {
background: #ea4c89;
color: #ffffff;
}
.btn-linkedin {
background: #0177b5;
color: #ffffff;
}
.btn-instagram {
background: #dc4a38;
color: #ffffff;
}

.btn-facebook:hover, .btn-facebook:focus {
background: #2d4278;
color: #ffffff;
}

.btn-youtube:hover, .btn-youtube:focus {
background: #c21d17;
color: #ffffff;
}
.btn-twitter:hover, .btn-twitter:focus {
background: #1b8dbf;
color: #ffffff;
}
.btn-dribbble:hover, .btn-dribbble:focus {
background: #e51e6b;
color: #ffffff;
}

.btn-linkedin:hover, .btn-linkedin:focus {
background: #015682;
color: #ffffff;
}

.btn-instagram:hover, .btn-instagram:focus {
background: #bf3322;
color: #ffffff;
}
    .btn, .button
    {
        padding: 6px 11px !important;
    }
</style>
@endsection