@extends('layouts.app')
@section('title', 'blog')
@section('idname', 'single')
@section('content')

<div  class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
<style>
    @media (max-width: 768px) {
        .metadata2 {
            margin-left: 15%;
        }
    }
    @media (max-width: 768px) {
        .metadata {
            margin-left: 15%;
        }
    }

    @media (min-width: 769px) {
        .metadata {
            margin-left: 39%;
        }
    }
</style>
       <div class="text-center" style="width:100%">

        @isset($data['data'][0])
            @php
                $track = $data['data'][0];
                $shareUrl = route('acrcloud.result', ['id' => $track['isrc']]); // Adjust the route name accordingly
                 $shareUrl = url()->current(); // Adjust the text accordingly
                 $shareText = $track['name'];
            @endphp
            <div style="background-image: url('{{ $track['album']['covers']['large'] }}'); background-size: cover;margin-top: 4%;" class="mb-4 p-4 rounded bg-light">
                <h3>{{ $track['artists'][0]['name'] }}</h3>
                <h4>{{ $track['name'] }}</h4>
                <p><strong>ISRC: {{ $track['isrc'] }}</strong> </p>
                <p><strong>UPC: {{ $track['album']['upc'] }}</strong> </p>
                <p><strong>Release Date: {{ $track['album']['release_date'] }}</strong> </p>

                <!-- Display links as buttons or URLs -->
                <div class="mt-4 metadata">
                    @foreach ($track['external_metadata'] as $source => $links)
                        @foreach ($links as $link)
                            <a href="{{ $link['link'] }}" class="btn btn-primary btn-block mb-2" target="_blank">
                                {{ ucfirst($source) }}
                            </a>
                        @endforeach
                    @endforeach
                </div>
            @php
              $shareText = $track['name'];
              $url2 = url()->current();
              $des =  $track['artists'][0]['name']. ' | ';
              $image = $track['album']['covers']['large'];
            @endphp
                <!-- Display image as background -->
                <!-- Add social share buttons side by side -->
                <div style="margin-top:60px" class=" pl-lg-5 pr-lg-5">
        <div class="alert alert-success text-center " role="alert">
        SHARE WITH YOUR FRIENDS
      </div>
      </div>
               <div class="mt-4  d-flex flex-column flex-md-row justify-content-md-around metadata2">
    <button class="btn btn-light custom-btn-sm" onclick="copyToClipboard('{{ $shareUrl }}')">
        Copy Link
    </button>

    <a href="https://twitter.com/intent/tweet?url={{ $shareUrl }}" class="btn btn-info custom-btn-sm mb-2" target="_blank" rel="noopener noreferrer">
        Twitter
    </a>
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareUrl }}" class="btn btn-primary custom-btn-sm mb-2" target="_blank" rel="noopener noreferrer">
        Facebook
    </a>
    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $shareUrl }}" class="btn btn-secondary custom-btn-sm mb-2" target="_blank" rel="noopener noreferrer">
        LinkedIn
    </a>
    <a href="whatsapp://send?text={{ $shareText }} - {{ $shareUrl }}" class="btn btn-success custom-btn-sm" data-action="share/whatsapp/share" target="_blank" rel="noopener noreferrer">
        WhatsApp
    </a>
</div>



            </div>
        @else
            <p>No matching results found.</p>
        @endisset

    </div>

</div>
<script>
    function copyToClipboard(text) {
        var dummy = document.createElement("textarea");
        document.body.appendChild(dummy);
        dummy.value = text;
        dummy.select();
        document.execCommand("copy");
        document.body.removeChild(dummy);
        alert("Link copied to clipboard: " + text);
    }
</script>
@endsection