@extends('frontLayout.frontlayout')
@section('content')

<!-- ==== Public Profile Header ==== -->
@include('frontend.creators.partials.publicHeader')
<!-- ==== Public Profile Header ==== -->


<div class="why-join-us-inner" id="listen">
    <div class="container">
        <div class="row">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="why-us-detail lit">
                    <div class="info text-center">
                       <div class="listing-audio-wrap">
                            <form id="filters-form"><input type="hidden" name="type" value="free"></form>
                            <div class="list-tabe">
                                <ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link btn btn-primary active" id="pills-free-tab" data-bs-toggle="pill" data-bs-target="#pills-free" type="button" role="tab" aria-controls="pills-free" aria-selected="true">Free</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link btn btn-primary" id="pills-paid-tab" data-bs-toggle="pill" data-bs-target="#pills-paid" type="button" role="tab" aria-controls="pills-paid" aria-selected="false">Paid</button>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-free" role="tabpanel" aria-labelledby="pills-free-tab">
                                        <div class="list-audio-inner text-start publicProfile listing-table">
                                            @if(!empty($freeListing->items()) && $freeListing->items())
                                            <div class="row appenHtml">
                                                @include('frontend.creators.loops.listenLoop', ["listing" => $freeListing, "type" => 'free','activePlanFeatures' => false])
                                            </div>
                                            @include('admin.partials.pagination', ["pagination" => $freeListing])
                                            @else
                                            <div class="nodata text-center">
                                                    <img src="{{url('assets/frontend/developer/images/nodata.png')}}">
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-paid" role="tabpanel" aria-labelledby="pills-paid-tab">
                                        <div class="tab-pane fade show active" id="pills-free" role="tabpanel" aria-labelledby="pills-free-tab">
                                            @if($id)
                                            <div class="list-audio-inner text-start publicProfile listing-table">
                                                @if(!empty($paidListing->items()) && $paidListing->items())
                                                <div class="row appenHtml">
                                                    @include('frontend.creators.loops.listenLoop', ["listing" => $paidListing, "type" => 'paid','activePlanFeatures' => $activePlanFeatures])
                                                </div>
                                                @include('admin.partials.pagination', ["pagination" => $paidListing])
                                                @else
                                                <div class="nodata text-center">
                                                    <img src="{{url('assets/frontend/developer/images/nodata.png')}}">
                                                </div>
                                                @endif
                                            </div>
                                            @else
                                            <div class="headlines elt text-center">
                                                <h5>
                                                Please sign in first to listen audios!
                                                </h5>
                                                <a href="{{route('user.login')}}" class="btn btn-primary mt-2 mb-2">Sign In</a>
                                                <div class="nodata text-center"> 
                                                        <img src="{{url('/assets/images/poll-emt.png')}}" alt=".." />
                                                </div>
                                            </div> 
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- ==== Public Profile Footer ==== -->
	@include('frontend.creators.partials.publicSidebar')
	<!-- ==== Public Profile Footer ==== -->
</div>

<!-- ==== Public Profile Footer ==== -->
@include('frontend.creators.partials.publicFooter')
<!-- ==== Public Profile Footer ==== -->

@include('frontend.creators.partials.publicShare')

@include('frontend.creators.detail.modals.listen')

@endsection