@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <div class="page-pretitle">Profile</div>
                        <h2 class="page-title">My Songs</h2>
                    </div>
                    <div class="col-auto ms-auto">
                        <div class="btn-list">
                            <a href="{{ route('user.songs.create') }}" class="btn btn-primary d-none d-sm-inline-block">
                                <i class="ti ti-upload me-2"></i>Upload New Song
                            </a>
                            <a href="{{ route('user.profile.my-assets') }}"
                                class="btn btn-outline-primary d-none d-sm-inline-block">
                                <i class="ti ti-arrow-left me-2"></i>Back to Profile
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                <div class="card">
                    <div class="card-header">
                        {{-- <h3 class="card-title">All Songs</h3> --}}
                        <div class="ms-auto d-flex">
                            <select class="form-select form-select-sm me-2" style="width: 150px;">
                                <option value="recent">Recently Added</option>
                                <option value="title">Title (A-Z)</option>
                                <option value="plays">Most Played</option>
                                <option value="oldest">Oldest First</option>
                            </select>
                            <div class="input-icon me-2">
                                <span class="input-icon-addon">
                                    <i class="ti ti-search"></i>
                                </span>
                                <input type="text" class="form-control form-control-sm" placeholder="Search songs...">
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @php
                            $dummySongs = [
                                [
                                    'id' => 1,
                                    'title' => 'Summer Vibes',
                                    'artist' => 'DJ Sunshine',
                                    'album' => 'Beach Party',
                                    'genre' => 'Electronic',
                                    'duration' => 195,
                                    'created_at' => '2 days ago',
                                    'play_count' => 1245,
                                    'cover_image' => null,
                                ],
                                [
                                    'id' => 2,
                                    'title' => 'Midnight Dreams',
                                    'artist' => 'Luna Eclipse',
                                    'album' => 'Night Sky',
                                    'genre' => 'Chill',
                                    'duration' => 242,
                                    'created_at' => '1 week ago',
                                    'play_count' => 3780,
                                    'cover_image' => null,
                                ],
                                [
                                    'id' => 3,
                                    'title' => 'Urban Flow',
                                    'artist' => 'City Beats',
                                    'album' => 'Downtown',
                                    'genre' => 'Hip-Hop',
                                    'duration' => 187,
                                    'created_at' => '2 weeks ago',
                                    'play_count' => 987,
                                    'cover_image' => null,
                                ],
                            ];

                            $hasSongs = count($dummySongs) > 0;
                        @endphp

                        @if ($hasSongs)
                            <div class="table-responsive">
                                <table class="table table-vcenter card-table">
                                    <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Album</th>
                                            <th>Genre</th>
                                            <th>Duration</th>
                                            <th>Uploaded</th>
                                            <th>Plays</th>
                                            <th class="w-1"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($dummySongs as $song)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <span class="avatar me-2 rounded"
                                                            style="background-image: url('https://picsum.photos/40/40?random={{ $song['id'] }}')"></span>
                                                        <div>
                                                            <div class="font-weight-medium">{{ $song['title'] }}</div>
                                                            <div class="text-muted">{{ $song['artist'] }}</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>{{ $song['album'] ?? 'Single' }}</td>
                                                <td>{{ $song['genre'] }}</td>
                                                <td>{{ gmdate('i:s', $song['duration']) }}</td>
                                                <td>{{ $song['created_at'] }}</td>
                                                <td>{{ number_format($song['play_count']) }}</td>
                                                <td>
                                                    <div class="btn-list flex-nowrap">
                                                        <button class="btn btn-icon btn-sm btn-primary"
                                                            data-bs-toggle="tooltip" title="Play">
                                                            <i class="ti ti-player-play"></i>
                                                        </button>
                                                        <div class="dropdown">
                                                            <button class="btn btn-icon btn-sm btn-ghost-secondary"
                                                                data-bs-toggle="dropdown">
                                                                <i class="ti ti-dots-vertical"></i>
                                                            </button>
                                                            <div class="dropdown-menu dropdown-menu-end">
                                                                <a href="#" class="dropdown-item">
                                                                    <i class="ti ti-edit me-2"></i>Edit
                                                                </a>
                                                                <a href="#" class="dropdown-item">
                                                                    <i class="ti ti-share me-2"></i>Share
                                                                </a>
                                                                <a href="#" class="dropdown-item">
                                                                    <i class="ti ti-download me-2"></i>Download
                                                                </a>
                                                                <div class="dropdown-divider"></div>
                                                                <a href="javascript:void(0)"
                                                                    class="dropdown-item text-danger delete-song"
                                                                    onclick="confirmDelete('{{ $song['id'] }}')"
                                                                    data-id="{{ $song['id'] }}">
                                                                    <i class="ti ti-trash me-2"></i>Delete
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-flex mt-4">
                                <ul class="pagination ms-auto">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                                            <i class="ti ti-chevron-left"></i>
                                            prev
                                        </a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">
                                            next
                                            <i class="ti ti-chevron-right"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        @else
                            <div class="empty">
                                <div class="empty-img">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-music"
                                        width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M6 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                                        <path d="M16 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                                        <path d="M9 17l0 -13l10 0l0 13"></path>
                                        <path d="M9 8l10 0"></path>
                                    </svg>
                                </div>
                                <p class="empty-title">No songs found</p>
                                <p class="empty-subtitle text-muted">
                                    You haven't uploaded any songs yet. Start sharing your music with the world!
                                </p>
                                <div class="empty-action">
                                    <a href="#" class="btn btn-primary">
                                        <i class="ti ti-upload"></i> Upload Your First Song
                                    </a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Stats Card -->
                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="subheader">Total Plays</div>
                                </div>
                                <div class="h1 mb-3">{{ number_format(6012) }}</div>
                                <div class="d-flex mb-2">
                                    <div>Last 30 days</div>
                                    <div class="ms-auto">
                                        <span class="text-green d-inline-flex align-items-center lh-1">
                                            8% <i class="ti ti-trending-up ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-primary" style="width: 75%" role="progressbar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="subheader">Avg. Engagement</div>
                                </div>
                                <div class="h1 mb-3">4.2<small class="text-muted">min</small></div>
                                <div class="d-flex mb-2">
                                    <div>Listen Time</div>
                                    <div class="ms-auto">
                                        <span class="text-green d-inline-flex align-items-center lh-1">
                                            12% <i class="ti ti-trending-up ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-primary" style="width: 65%" role="progressbar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="subheader">Downloads</div>
                                </div>
                                <div class="h1 mb-3">158</div>
                                <div class="d-flex mb-2">
                                    <div>Conversion Rate</div>
                                    <div class="ms-auto">
                                        <span class="text-green d-inline-flex align-items-center lh-1">
                                            4.6% <i class="ti ti-trending-up ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-primary" style="width: 55%" role="progressbar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function confirmDelete(songId) {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire(
                        'Deleted!',
                        'Your song has been deleted.',
                        'success'
                    );
                }
            });
        }
    </script>
@endsection