@extends('layouts.app')

@section('title', 'Songs to Promote')
@section('idname', 'songs')

@section('content')
<div class="container" style="margin-top: 200px; margin-bottom: 50px;">
    <div class="row">
        <div class="col-12">
            <!-- Top Text Section -->
            <div class="text-center mb-4">
                <h4 style="font-weight: bold; color: black;">SONGS TO PROMOTE</h4>
                <p style="color: #000; font-size: 14px;">
                    SELECT A SONG FROM THE LIST BELOW, MAKE A POST ON YOUR TIKTOK, INSTAGRAM, YOUTUBE AND FACEBOOK PAGE. WHEN YOUR POST ACHIEVES 10.000 VIEWS YOU WILL START EARNING MONEY.
                </p>
                <p style="color: #000; font-size: 14px;">
    <a href="https://abacuos.com/pages/terms-of-use" style="color: blue; text-decoration: underline;"> CLICK HERE TO KNOW THE TERMS AND CONDITIONS</a>
</p>
<p style="color: #000; font-size: 14px;">
    CLICK THE BUTTON BELOW TO SUBMIT THE LINK OF YOUR POST THAT ACHIEVED MORE THAN 10,000 VIEWS
</p>

<a href="https://abacuos.com/links" style="display: inline-block; padding: 10px 20px; background-color: #f44336; color: white; text-align: center; text-decoration: none; border-radius: 5px; font-size: 14px; margin-left: 10px; margin-top: 10px;">Submit The Link</a>

            </div>

            <!-- Table Section -->
            <style>
                table {
                    width: 100%;
                    border-collapse: collapse;
                }

                /* Table Header */
                thead tr {
                    background-color: #005A80;
                    color: #FFFFFF;
                    text-align: center;
                }

                th, td {
                    padding: 12px;
                    border: 1px solid #D0D8DD;
                    font-size: 14px;
                    word-break: break-word; /* Break long text like URLs */
                    white-space: nowrap; /* Prevent text from wrapping */
                }

                /* Alternating Row Colors */
                tbody tr:nth-child(even) {
                    background-color: #E6EAED;
                }

                tbody tr:nth-child(odd) {
                    background-color: #FFFFFF;
                }

                /* Image Styling */
                img {
                    width: 70px;
                    height: 70px;
                    object-fit: cover;
                    border-radius: 5px;
                }

                /* Links Styling */
                a {
                    color: #005A80;
                    text-decoration: none;
                    font-weight: bold;
                }

                a:hover {
                    text-decoration: underline;
                }

                /* Footer Pagination Text */
                .pagination-text {
                    font-size: 12px;
                    color: #444;
                    margin-top: 10px;
                }
            </style>

            <!-- Table -->
            <table class="table table-responsive text-center">
                <thead>
                    <tr>
                        <th>COVER ART</th>
                        <th>ARTIST</th>
                        <th>TITLE</th>
                        <th>TIKTOK LINK</th>
                        <th>INSTAGRAM LINK</th>
                        <th>FACEBOOK LINK</th>
                        <th>YOUTUBE LINK</th>
                        
                    </tr>
                </thead>
                <tbody>
                    @forelse($songs as $song)
                    <tr>
                        <!-- Cover Art -->
                        <td>
                            @if($song->image_link)
                                <a href="{{ $song->image_link }}" target="_blank">
                                    <img src="{{ asset('storage/' . $song->cover_art) }}" alt="Cover Art">
                                </a>
                            @else
                                <img src="{{ asset('storage/' . $song->cover_art) }}" alt="Cover Art">
                            @endif
                        </td>

                        <!-- Artist -->
                        <td>{{ $song->artist_name }}</td>

                        <!-- Title -->
                        <td>{{ $song->song_title }}</td>

                        <!-- TikTok Link -->
                        <td>
                            <a href="{{ $song->tiktok_link }}" target="_blank">
                                {!! nl2br(e(Str::limit($song->tiktok_link, 50, '...'))) !!}
                            </a>
                        </td>

                        <!-- Instagram Link -->
                        <td>
                            <a href="{{ $song->instagram_link }}" target="_blank">
                                {!! nl2br(e(Str::limit($song->instagram_link, 50, '...'))) !!}
                            </a>
                        </td>

                        <!-- Facebook Link -->
                        <td>
                            <a href="{{ $song->facebook_link }}" target="_blank">
                                {!! nl2br(e(Str::limit($song->facebook_link, 50, '...'))) !!}
                            </a>
                        </td>
                        <td>
                            <a href="{{ $song->youtube_1 }}" target="_blank">
                                {!! nl2br(e(Str::limit($song->youtube_1, 50, '...'))) !!}
                            </a>
                        </td>
                      
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6">No songs available at the moment.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>

            <!-- Pagination Links -->
            <div class="d-flex justify-content-center mt-3">
                {{ $songs->links('pagination::bootstrap-4') }}
            </div>

            <!-- Footer Pagination Text -->
            <div class="text-left pagination-text">
                Page {{ $songs->currentPage() }} of {{ $songs->lastPage() }}
            </div>
        </div>
    </div>
</div>
@endsection