@extends('admin.layout.app')
@section('content')
    <style>
        .video-play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.6);
            color: white;
            border-radius: 50%;
            padding: 6px 10px;
            font-size: 12px;
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/fslightbox/index.js"></script>

    <div class="content-inner container-fluid pb-0" id="page_layout">
        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card-header">
                    <div class="header-title">
                        <h4 class="card-title text-capitalize mb-3">Media Posted by Artist</h4>
                    </div>
                </div>
            </div>

            @forelse($latestMedia as $media)
                <div class="col-xl-3 col-md-6 mb-3">
                    <div class="bg-soft-primary position-relative rounded-3 card-box mb-3">
                        <img
                            src="{{ $media->getFirstMediaUrl('main_media') ? $media->getFirstMediaUrl('main_media') : asset('assets/images/dashboard/01.png') }}"
                            class="img-fluid mx-auto d-block rounded-3"
                            style="height: 200px; object-fit: cover; width: 100%;"
                            alt="media-img">
                        <div class="d-flex align-items-center play-list-icon">
                        <span class="ms-2 fw-semibold text-capitalize text-primary">
                            {{ $media->amount ? '$'.$media->amount : 'Free' }}
                        </span>
                        </div>
                    </div>
                    <a href="#" class="text-capitalize h5">{{ $media->title }}</a>
                    <small class="fw-normal line-count-1 text-capitalize">
                        by {{ $media->artist->name ?? 'Unknown' }}
                    </small>
                </div>
            @empty
                <div class="col-12">
                    <p>No media posts available.</p>
                </div>
            @endforelse
        </div>

        <div class="row">
            <div class="col-lg-12 mb-4">
                <div class="card-header  mb-3">
                    <div class="header-title">
                        <h4 class="card-title text-capitalize">Recently Joined Artists</h4>
                    </div>
                </div>

                @if($recentlyJoinedArtists->count() > 0)
                    <div class="swiper overflow-hidden" data-swiper="song-slider">
                        <ul class="swiper-wrapper p-0 list-unstyled mb-0">
                            @foreach($recentlyJoinedArtists as $artist)
                                <li class="swiper-slide card card-slide">
                                    <div class="card-body text-center">
                                        <img
                                            src="{{ $artist->getFirstMediaUrl('profile_images') ? $artist->getFirstMediaUrl('profile_images') : asset('assets/images/dashboard/11.png') }}"
                                            class="mb-3 img-fluid rounded-circle avatar-100"
                                            style="object-fit: cover;"
                                            alt="artist-img">
                                        <a href="{{ route('artist.profile', $artist->id) }}"
                                           class="text-capitalize line-count-1 h5 d-block">{{ $artist->name }}</a>
                                        <small
                                            class="fw-normal text-capitalize line-count-1">Joined {{ $artist->created_at->diffForHumans() }}</small>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @else
                    <p>No artists found.</p>
                @endif
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card-header mb-3">
                    <div class="header-title">
                        <h4 class="card-title text-capitalize">Top Media (Video)</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                @if($latestMedia->count() > 0)

                    @foreach($latestMedia as $media)

                        @php
                            $video = $media->getFirstMedia('gallery_videos');
                        @endphp

                        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
                            <ul class="p-0 list-unstyled mb-0">
                                <li class="pb-3 border-bottom">

                                    <div class="d-flex">

                                        {{-- CLICKABLE THUMBNAIL --}}
                                        <a data-fslightbox="latest-videos"
                                           href="{{ $video ? $video->getUrl() : '#' }}"
                                           class="position-relative me-3">

                                            {{-- PROFILE IMAGE --}}
                                            <img
                                                src="{{ $media->artist->getFirstMediaUrl('profile_images')
                            ? $media->artist->getFirstMediaUrl('profile_images')
                            : asset('assets/images/dashboard/22.png') }}"
                                                class="img-fluid rounded avatar-55"
                                                style="object-fit: cover;"
                                                alt="profile">

                                            {{-- PLAY ICON --}}
                                            <span class="video-play-icon">
                        ▶
                    </span>

                                        </a>

                                        {{-- TEXT CONTENT --}}
                                        <div class="d-flex align-items-center justify-content-between flex-wrap w-100">
                                            <div>
                                                <div>
                            <span class="text-capitalize h5 mt-3">
                                {{ $media->title }}
                            </span>
                                                </div>
                                                <small class="text-capitalize">
                                                    {{ $media->artist->name ?? 'Unknown' }}
                                                </small>
                                            </div>

                                            <div class="d-flex align-items-center heading-color">
                                                <small class="ms-2">
                                                    {{ $media->wishlisted_by_count ?? 0 }} Likes
                                                </small>
                                            </div>
                                        </div>

                                    </div>

                                </li>
                            </ul>
                        </div>

                    @endforeach

                @else
                    <div class="col-12"><p>No video media found.</p></div>
                @endif
            </div>

        </div>

        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card-header mb-3">
                    <div class="header-title">
                        <h4 class="card-title text-capitalize">Top Artists</h4>
                    </div>
                </div>
            </div>

            @if($topArtists->count() > 0)
                <div class="swiper overflow-hidden" data-swiper="artists-slider">
                    <ul class="swiper-wrapper p-0 list-unstyled mb-0">
                        @foreach($topArtists as $artist)
                            <li class="swiper-slide mb-3">
                                <img
                                    src="{{ $artist->getFirstMediaUrl('profile_images') ? $artist->getFirstMediaUrl('profile_images') : asset('assets/images/dashboard/38.png') }}"
                                    class="img-fluid rounded-3 mb-3 mx-auto d-block avatar-100"
                                    style="object-fit: cover;"
                                    alt="artist-img">
                                <a href="{{ route('artist.profile', $artist->id) }}"
                                   class="text-capitalize text-center h5 d-block">{{ $artist->name }}</a>
                                <small
                                    class="fw-normal text-capitalize text-center d-block">{{ $artist->favorited_by_users_count ?? 0 }}
                                    Favorites</small>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @else
                <p>No top artists data available.</p>
            @endif
        </div>

    </div>
@endsection