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

<section class="creator_wrap">
    <div class="creater_inner">
        @include('creatorDashboard.sidebar')
        <div class="right_side_wrap">
            <div class="head-crum">
                <h4>
                    Listen
                </h4>
            </div>
            <div class="rating_wrap listing-block">
                <div class="rating_inner">
                    <div class="container">
                        <div class="search_btn">
                            <div class="left ltd">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="free-tab" data-bs-toggle="tab" data-bs-target="#free" type="button" role="tab" aria-controls="free" aria-selected="true">Free ( {{$freeCount}} )</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="paid-tab" data-bs-toggle="tab" data-bs-target="#paid" type="button" role="tab" aria-controls="paid" aria-selected="false">Paid ( {{$paidCount}} )</button>
                                    </li>
                                </ul>
                            </div>
                            <div class="right scd">
                                <div class="lit">
                                    <button type="" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadaudio">Add+</button>
                                </div>
                                @if($freeCount || $paidCount)
                                <div class="search_input_with_btn">
                                    <div class="form-group">
                                        <input type="text" id="listing-search" name="search" class="form-control listing-search" placeholder="Search" autocomplete="off">
                                        <div class="input-group-append">
                                            <a href="javascript:;">
                                                <i class="fas fa-search"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                @include('creatorDashboard.listen.filters')
                                @endif
                            </div>
                        </div>
                        <div class="tab-content" id="myTabContent">
                            @include('user.partials.flash_messages')
                            <div class="tab-pane fade show active" id="free" role="tabpanel" aria-labelledby="free-tab">
                                <div class="listen-mains-wrap scroller listing-table">
                                    <div class="container">
                                        <div class="row appenHtml">
                                            @if(!empty($listing->items()) && $listing->items())
                                            @include('creatorDashboard.listen.listingLoop')
                                            @endif
                                        </div>
                                        @include('admin.partials.pagination', ["pagination" => $listing])
                                    </div>
                                </div>
                                @if(empty($listing->items()))
                                <div class="nodata text-center">
                                    <img src="{{url('assets/frontend/developer/images/nodata.png')}}">
                                </div>
                                @endif
                            </div>
                            <div class="tab-pane fade" id="paid" role="tabpanel" aria-labelledby="paid-tab">
                                <div class="listen-mains-wrap scroller listing-table">
                                    <div class="container">
                                        <div class="row appenHtml">
                                        @if(!empty($listing->items()) && $listing->items())
                                        @include('creatorDashboard.listen.listingLoop')
                                        @endif
                                        </div>
                                        @include('admin.partials.pagination', ["pagination" => $listing])
                                    </div>
                                </div>
                                @if(empty($listing->items()))
                                <div class="nodata text-center">
                                    <img src="{{url('assets/frontend/developer/images/nodata.png')}}">
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @include('frontend.partials.dashboardFooter')
            </div>
        </div>
    </div>
</section>
@include('creatorDashboard.listen.modal')
@endsection