@extends('layouts.app')

@section('title', 'Artist Information')
@section('idname', 'single')
@section('content')

<div class="container" style="margin-top: 200px;">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }

        h1 {
            text-align: center;
        }

        #results {
            margin-top: 20px;
        }

        .artist-info img {
            max-width: 150px;
            height: auto;
            border-radius: 8px;
        }

        .links a {
            display: block;
            margin-bottom: 5px;
            color: blue; /* Set the color of the links to blue */
            text-decoration: none; /* Remove underline from links */
        }

        .links a:hover {
            text-decoration: underline; /* Underline on hover */
        }

        h5 {
            color: black; /* Set the color of the h3 heading to black */
        }
    </style>
    <h1 class="mt-5">Artist Statistics</h1>

    <!-- Form to input Artist ID -->
    <form method="POST" action="{{ route('artist.fetch') }}">
        @csrf
        <div class="form-group">
            <label for="artistId">Artist ID</label>
            <input type="text" class="form-control" id="artistId" name="artistId" placeholder="Enter Artist ID" required>
        </div>
        <button type="submit" class="btn btn-primary">Get Stats</button>
    </form>

    <div id="results" class="mt-5">
        @if(isset($data) && isset($data['artist_info']))
            @php
                $artist = $data['artist_info'];
            @endphp
            <h2>Artist Information</h2>
            <div class="artist-info">
                <p><strong>Name:</strong> {{ htmlspecialchars($artist['name']) }}</p>
                <p><strong>Avatar:</strong> <img src="{{ htmlspecialchars($artist['avatar']) }}" alt="{{ htmlspecialchars($artist['name']) }}"></p>
                <p><strong>Site:</strong> <a href="{{ htmlspecialchars($artist['site_url']) }}" target="_blank">Visit Artist Page</a></p>
                <p><strong>Genres:</strong> {{ implode(', ', $artist['genres']) }}</p>

                <h5>Social Links:</h5>
                <div class="links">
                    @foreach($artist['links'] as $link)
                        <a href="{{ htmlspecialchars($link['url']) }}" target="_blank">{{ ucfirst($link['source']) }}</a>
                    @endforeach
                </div>
            </div>
        @elseif(session('errors'))
            <p>{{ session('errors')->first() }}</p>
        @else
            <p>No data found for the given Artist ID.</p>
        @endif
    </div>
</div>

@endsection