@extends('admin.layout.app')
@section('content')
    <style>
        .gallery-item {
            width: 100%;
            height: 120px; /* same height for all */
            overflow: hidden;
            border-radius: 8px;
            display: block;
        }

        .gallery-item img,
        .gallery-item video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* image crop hogi but size same rahega */
        }

        .gallery-item {
            aspect-ratio: 1 / 1;
        }

        .activity-media {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

    </style>
    <!-- Font Awesome Free -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>

    <div class="content-inner container-fluid pb-0" id="page_layout">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div class="d-flex flex-wrap align-items-center">
                                <div class="profile-img position-relative me-3 mb-3 mb-lg-0 profile-logo profile-logo1">
                                    <img src="{{$artist->getFirstMediaUrl('profile_images') ? $artist->getFirstMediaUrl('profile_images') : asset('assets/default.jpg')}}" alt="User-Profile"
                                         class="theme-color-default-img img-fluid rounded-pill avatar-100"
                                         loading="lazy">
                                </div>
                                <div class="d-flex flex-wrap align-items-center mb-3 mb-sm-0">
                                    <h4 class="me-2 h4">{{$artist->name ?? ''}}</h4>
                                    @if($artist->hasRole('artist'))
                                        <span> - {{$artist->address ?? ''}}</span>
                                    @endif
                                </div>
                            </div>
                            @if($artist->hasRole('artist'))
                                <ul class="d-flex nav nav-pills mb-0 text-center profile-tab" data-toggle="slider-tab"
                                    id="profile-pills-tab" role="tablist">

                                    <li class="nav-item">
                                        <a class="nav-link active show" data-bs-toggle="tab" href="#profile-profile"
                                           role="tab"
                                           aria-selected="false">Profile</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#profile-activity" role="tab"
                                           aria-selected="false">Media Post</a>
                                    </li>


                                </ul>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-9">
                <div class="profile-content tab-content iq-tab-fade-up">
                    <div id="profile-profile" class="tab-pane fade active show">
                        <div class="card">
                            <div class="card-header">
                                <div class="header-title">
                                    <h4 class="card-title">Profile</h4>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="text-center">
                                    <div>
                                        <img src="{{$artist->getFirstMediaUrl('profile_images') ? $artist->getFirstMediaUrl('profile_images') : asset('assets/default.jpg')}}"
                                             alt="profile-img"
                                             class="rounded-pill avatar-130 img-fluid" loading="lazy">
                                    </div>
                                    <div class="mt-3">
                                        <h3 class="d-inline-block">{{$artist->name ?? ''}}</h3>
                                        @if($artist->hasRole('artist'))
                                            <p class="d-inline-block pl-3"> - {{$artist->address ?? ''}}</p>
                                            <p class="mb-0">{{$artist->description ?? ''}}</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <div class="header-title">
                                    <h4 class="card-title">About @if($artist->hasRole('artist'))Artist @else
                                            User @endif</h4>
                                </div>
                            </div>
                            <div class="card-body">

                                <div class="mt-2">
                                    <h6 class="mb-1">Joined:</h6>
                                    <p>{{ $artist->created_at ? $artist->created_at->format('j/n/Y') : '' }}</p>
                                </div>
                                @if($artist->hasRole('artist'))
                                    <div class="mt-2">
                                        <h6 class="mb-1">Lives:</h6>
                                        <p>{{$artist->address ?? ''}}</p>
                                    </div>
                                @endif
                                <div class="mt-2">
                                    <h6 class="mb-1">Email:</h6>
                                    <p><a href="#" class="text-body"> {{$artist->email ?? ''}}</a></p>
                                </div>
                                @if($artist->hasRole('artist'))
                                    <div class="mt-2">
                                        <h6 class="mb-1">Social Links:</h6>
                                        <div class="d-flex gap-3">
                                            @foreach($artist->socialLinks as $link)
                                                @php
                                                    // map key to icon class
                                                    $icons = [
                                                        'facebook' => 'fab fa-facebook-f',
                                                        'instagram' => 'fab fa-instagram',
                                                        'youtube' => 'fab fa-youtube',
                                                        'website' => 'fas fa-globe',
                                                        'spotify' => 'fab fa-spotify',
                                                        'tiktok' => 'fab fa-tiktok'
                                                    ];

                                                    $iconClass = $icons[$link->key] ?? 'fas fa-link';
                                                @endphp

                                                <a href="{{ $link->value }}" target="_blank" class="text-body fs-5">
                                                    <i class="{{ $iconClass }}"></i>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>

                                @endif
                            </div>
                        </div>
                    </div>
                    @if($artist->hasRole('artist'))
                        <div id="profile-activity" class="tab-pane fade">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Activity</h4>
                                </div>

                                <div class="card-body">

                                    @forelse($artist->mediaPosts as $post)

                                        <div class="card mb-4 border">

                                            {{-- HEADER --}}
                                            <div class="card-body">

                                                <h5 class="mb-1">{{ $post->title }}</h5>

                                                @if($post->description)
                                                    <p class="text-muted mb-2">
                                                        {{ $post->description }}
                                                    </p>
                                                @endif

                                                <strong class="text-primary">
                                                    Rs {{ number_format($post->amount) }}
                                                </strong>

                                            </div>

                                            {{-- MAIN MEDIA --}}
                                            <div class="px-3 pb-3">
                                                <div class="row g-2">

                                                    @foreach($post->media as $media)

                                                        @php
                                                            $url = $media->getUrl();
                                                            $mime = $media->mime_type;
                                                        @endphp

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

                                                            {{-- IMAGE --}}
                                                            @if(Str::startsWith($mime,'image'))
                                                                <a data-fslightbox="activity-gallery-{{ $post->id }}"
                                                                   href="{{ $url }}">
                                                                    <img src="{{ $url }}"
                                                                         class="img-fluid rounded activity-media">
                                                                </a>
                                                            @endif

                                                            {{-- VIDEO --}}
                                                            @if(Str::startsWith($mime,'video'))
                                                                <a data-fslightbox="activity-gallery-{{ $post->id }}"
                                                                   href="{{ $url }}">
                                                                    <video class="img-fluid rounded activity-media">
                                                                        <source src="{{ $url }}" type="{{ $mime }}">
                                                                    </video>
                                                                </a>
                                                            @endif

                                                        </div>

                                                    @endforeach

                                                </div>
                                            </div>

                                            {{-- REVIEW + RATING --}}
                                            @if($post->reviews)
                                                <div class="border-top p-3 bg-light">

                                                    <div class="d-flex justify-content-between">
                                                        <div>
                                                            <strong>Review:</strong>
                                                            <p class="mb-1">
                                                                {{ $post->reviews->review ?? 'No review' }}
                                                            </p>
                                                        </div>

                                                        <div>
                                                            <strong>Rating:</strong>
                                                            ⭐ {{ $post->reviews->rating }}/5
                                                        </div>
                                                    </div>

                                                </div>
                                            @endif

                                        </div>

                                    @empty
                                        <p class="text-center text-muted">No activity found.</p>
                                    @endforelse

                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            @if($artist->hasRole('artist'))
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <div class="header-title">
                                <h4 class="card-title">Gallery</h4>
                            </div>
                            <span>
                {{ $artist->mediaPosts->sum(fn($post) => $post->media->count()) }} items
            </span>
                        </div>

                        <div class="card-body">
                            <div class="d-grid gap-card grid-cols-3">

                                @foreach($artist->mediaPosts as $post)
                                    @foreach($post->media as $media)

                                        @php
                                            $url = $media->getUrl();
                                            $mime = $media->mime_type;
                                        @endphp

                                        <a data-fslightbox="gallery" href="{{ $url }}" class="gallery-item">

                                            @if(Str::startsWith($mime, 'image'))
                                                <img src="{{ $url }}" loading="lazy">
                                            @endif

                                            @if(Str::startsWith($mime, 'video'))
                                                <video muted>
                                                    <source src="{{ $url }}" type="{{ $mime }}">
                                                </video>
                                            @endif

                                        </a>


                                    @endforeach
                                @endforeach

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

            @endif
        </div>

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

@endsection