@extends('layouts.front_app')
@section('content')
    <!-- Main Hero Section -->
    <section class="inner-page">
        <div class="container">
            <h2 class="heading">Meet The Comics</h2>
        </div>
    </section>
    <!-- ! Main Hero Section -->

    <!-- Upcoming Show Section -->
    <section class="userDetail-section">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <figure>
                        @if($profileImageUrl = $profile_img ? $profile_img->getUrl() : null)
{{--                            @foreach ($profile_img as $image)--}}

                                <img src="{{ $profileImageUrl }}" alt="Profile Image">
{{--                            @endforeach--}}
                        @else
                            <p class="text-white">No profile images found.</p>
                        @endif
                    </figure>
                </div>
                <div class="col-md-7">
                    <div class="content">
                        <h2 class="">{{ $data->name ?? '' }}</h2>
                        <p class="text-white">{!! $data->detail ?? '' !!}</p>
                        <div>
                            <h5>FOLLOW ME</h5>

                            <ul class="socialLinks">
                                @if(!empty($data->facebook))
                                    <li><a href="{{ $data->facebook }}"><i class="fab fa-facebook-f"></i></a></li>
                                @endif

                                @if(!empty($data->youtube))
                                    <li><a href="{{ $data->youtube }}"><i class="fab fa-youtube"></i></a></li>
                                @endif

                                @if(!empty($data->tiktok))
                                    <li><a href="{{ $data->tiktok }}"><i class="fab fa-tiktok"></i></a></li>
                                @endif

                                @if(!empty($data->instagram))
                                    <li><a href="{{ $data->instagram }}"><i class="fab fa-instagram"></i></a></li>
                                @endif
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @if(isset($shows_img) && $shows_img->isNotEmpty())
                @foreach ($shows_img as $image)
                    <div class="col-md-4">
                        <img src="{{ $image->getUrl() }}" class="img-fluid show-img" alt="">
                    </div>
                @endforeach
                @else
                    <p class="text-white">No profile images found.</p>
                @endif
            </div>
        </div>
    </section>
    <!-- ! Upcoming Show Section -->
@endsection