@extends('layouts.app')

@section('content')
    <div class="page-header d-print-none pt-4">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Detil Lagu
                    </h2>
                    <div class="text-muted mt-1">Lihat informasi lagu lengkap</div>

                    <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">

                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        {{-- <a href="{{ route('admin.songs.edit', $song->id) }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-edit me-2"></i>
                            Edit Song
                        </a> --}}

                        @php
                            $routeUrl = route('user.profile.my-assets');
                            if (request()->query('from') === 'my-assets') {
                                $routeUrl = route('user.profile.my-assets');
                            }
                            if (request()->query('from') === 'dashboard') {
                                $routeUrl = route('user.dashboard');
                            }
                        @endphp

                        <a href="{{ $routeUrl }}" class="btn btn-outline-primary d-none d-sm-inline-block">
                            <i class="ti ti-arrow-left me-2"></i>
                            Kembali
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="row row-cards">
                <div class="col-lg-4">

                    <div class="card">
                        <div class="card-body">
                            <div class="text-center mb-4">
                                @php

                                    $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song, 'md');
                                @endphp
                                <img src="{{ $imageUrl }}" class="rounded w-100 h-auto" alt="Cover Image">
                                <h2 class="mt-3 mb-0">{{ $song->title ?? '' }}</h2>
                                <h3 class="mt-1 mb-0">{{ optional($song->album)->title ?? '' }}</h3>
                                <p class="text-muted">{{ '' }}</p>
                            </div>

                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h3 class="card-title">Tindakan </h3>
                        </div>
                        <div class="card-body">
                            @if ($song->status == 'draft')
                                <div class="d-flex flex-wrap">


                                    <button data-id="{{ $song->id }}" data-status="publish"
                                        onclick="updateSongStatus(this)" class="btn btn-primary mb-2 me-2"> <span
                                            class="me-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-box-arrow-up" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z" />
                                                <path fill-rule="evenodd"
                                                    d="M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z" />
                                            </svg>
                                        </span> Publish </button>

                                    @php
                                        $activeRole = session('user_active_role');
                                        $urlUpdate = route('user.profile.my-assets');
                                    @endphp



                                    @switch($activeRole)
                                        @case('Composer')
                                            @php
                                                $urlUpdate = route('user.composer.songs.edit', ['id' => $song->id]);
                                            @endphp

                                            <a href="{{ $urlUpdate }}" class="btn btn-primary mb-2 me-2"> <span class="me-2">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                                                        <path
                                                            d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325" />
                                                    </svg>
                                                </span> Upload </a>
                                        @break

                                        @case('Artist')
                                            @php
                                                $urlUpdate = route('user.artist.songs.edit', ['id' => $song->id]);
                                            @endphp
                                            <a href="{{ $urlUpdate }}" class="btn btn-primary mb-2 me-2"> <span class="me-2">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16">
                                                        <path fill-rule="evenodd"
                                                            d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383" />
                                                        <path fill-rule="evenodd"
                                                            d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708z" />
                                                    </svg>
                                                </span> Upload </a>
                                        @break

                                        @case('Cover Creator')
                                            @php
                                                $urlUpdate = route('user.cover.songs.edit', ['id' => $song->id]);
                                            @endphp

                                            <a href="{{ $urlUpdate }}" class="btn btn-primary mb-2 me-2"> <span class="me-2">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16">
                                                        <path fill-rule="evenodd"
                                                            d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383" />
                                                        <path fill-rule="evenodd"
                                                            d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708z" />
                                                    </svg>
                                                </span> Upload </a>
                                        @break
                                    @endswitch

                                    @if ($activeRole == 'Composer' && ($song->status == 'draft' && $song->is_purchased == '0'))
                                        <a onclick="confirmDelete('{{ $song->id }}')" data-id="{{ $song->id }}"
                                            href="javascript:void(0)" class="btn btn-primary mb-2 me-2"> <span
                                                class="me-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
                                                    <path
                                                        d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
                                                </svg>
                                            </span> Hapus </a>

                                        <form id="delete-song-{{ $song->id }}"
                                            action="{{ route('user.songs.destroy', $song) }}" method="POST"
                                            style="display: none;">
                                            #
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    @endif

                                </div>
                            @else
                                <div>tidak tersedia</div>
                            @endif
                        </div>
                    </div>


                    <div class="card mt-3">
                        <div class="card-header">
                            <h3 class="card-title">Statistik Lagu </h3>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <span class="avatar rounded bg-blue-lt">
                                        <i class="ti ti-eye text-blue"></i>
                                    </span>
                                </div>
                                <div>
                                    <div class="text-muted">Total Plays</div>
                                    <div class="h3 m-0">{{ number_format($song->play_count) }}</div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <span class="avatar rounded bg-green-lt">
                                        <i class="ti ti-download text-green"></i>
                                    </span>
                                </div>
                                <div>
                                    <div class="text-muted">Downloads</div>
                                    <div class="h3 m-0">{{ number_format($song->download_count) }}</div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <span class="avatar rounded bg-purple-lt">
                                        <i class="ti ti-license text-purple"></i>
                                    </span>
                                </div>
                                <div>
                                    <div class="text-muted">Licenses Sold</div>
                                    <div class="h3 m-0">{{ number_format($song->licences_sold) }}</div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <span class="avatar rounded bg-red-lt">
                                        <i class="ti ti-heart text-red"></i>
                                    </span>
                                </div>
                                <div>
                                    <div class="text-muted">Favorites</div>
                                    <div class="h3 m-0">{{ number_format($song->favorites_count) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Informasi Lagu</h3>
                        </div>
                        <div class="card-body">

                            <div class="datagrid pb-4">
                                <div class="datagrid-item">
                                    <div class="datagrid-title">ID Lagu</div>
                                    <div class="datagrid-content">{{ $song->id }}</div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Judul</div>
                                    <div class="datagrid-content">{{ $song->title }}</div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">ISRC</div>
                                    <div class="datagrid-content">{{ $song->isrc_code ?? '-' }}</div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Pencipta</div>
                                    <div class="datagrid-content">
                                        {{ $composerName ?? '-' }}
                                    </div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Artis</div>
                                    <div class="datagrid-content">
                                        {{ $artistName == '' ? 'No Artist' : $artistName }}
                                    </div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Album</div>
                                    <div class="datagrid-content">{{ optional($song->album)->title ?? 'No Album' }}</div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Genre</div>
                                    <div class="datagrid-content">{{ $song->genre->name ?? '' }}</div>
                                </div>
                                @if ($song->types != 'belum release')
                                    <div class="datagrid-item">
                                        <div class="datagrid-title">Release Date</div>
                                        <div class="datagrid-content">
                                            {{ \Carbon\Carbon::parse($song->release_date)->format('F d, Y') }}
                                        </div>
                                    </div>
                                @endif
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Durasi</div>
                                    <div class="datagrid-content">
                                        {{ $song->duration ? gmdate('i:s', $song->duration) : '00:00' }}</div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Status</div>
                                    <div class="datagrid-content">
                                        <span class="badge bg-secondary">{{ $song->status }}</span>
                                        <span class="badge bg-danger">{{ $song->types }}</span>
                                    </div>
                                </div>
                                {{-- <div class="datagrid-item">
                                    <div class="datagrid-title">License Type</div>
                                    <div class="datagrid-content">{{ $licenseType }}</div>
                                </div> --}}
                                {{-- <div class="datagrid-item">
                                    <div class="datagrid-title">License Price</div>
                                    <div class="datagrid-content">
                                        {{ $song->license_price ? 'Rp. ' . number_format($song->license_price, 0, ',', '.') : '-' }}
                                    </div>
                                </div> --}}

                                <div class="datagrid-item">
                                    <div class="datagrid-title">Created At</div>
                                    <div class="datagrid-content">
                                        {{ \Carbon\Carbon::parse($song->created_at)->translatedFormat('j F Y H:i:s') }}
                                    </div>
                                </div>

                                <div class="datagrid-item">
                                    <div class="datagrid-title">Last Updated</div>
                                    <div class="datagrid-content">
                                        {{ \Carbon\Carbon::parse($song->updated_at)->translatedFormat('j F Y H:i:s') }}
                                    </div>
                                </div>
                                <div class="datagrid-item">
                                    <div class="datagrid-title">Created By</div>
                                    <div class="datagrid-content">
                                        {{ $song->create_by->name ?? '' }}
                                    </div>
                                </div>
                                @if ($song->updater)
                                    <div class="datagrid-item">
                                        <div class="datagrid-title">Updated By</div>
                                        <div class="datagrid-content">
                                            {{ $song->updater->name ?? '' }}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>



                    <div class="card mt-3">
                        <div class="card-header">
                            <h3 class="card-title">Link Lagu</h3>
                        </div>
                        <div class="card-body">
                            <div class="container mb-4">

                                <div class="row g-3">
                                    @foreach ($song->links as $rowlink)
                                        @if (session('user_active_role') == 'Cover Creator' && $rowlink->role == 'Composer')
                                            @continue
                                        @endif

                                        <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                                            <div class="d-flex flex-column">
                                                <div class="ratio ratio-16x9">
                                                    <iframe src="{{ convert_youtubev2($rowlink->link) }}"
                                                        title="YouTube video" allowfullscreen>
                                                    </iframe>
                                                </div>
                                                <div class="d-flex">
                                                    <div class="d-flex flex-column p-3">
                                                        <div>Platform : {{ $rowlink->platform }}</div>
                                                        <div class="text-black-50">
                                                            {{ $rowlink->uploader->name }} ({{ $rowlink->role }})
                                                        </div>
                                                    </div>

                                                    <div class="p-3">
                                                        <a href="{{ $rowlink->link }}" target="_blank">
                                                            <span class="badge text-bg-dark">link</span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>


                            </div>

                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h3 class="card-title">Lisensi & Harga</h3>
                        </div>
                        <div class="card-body">

                            <div class="row g-3 d-flex">

                                @foreach ($song->licenses as $licence)
                                    <div class="col-md-4 ">
                                        <div class="card h-100 shadow">
                                            <div class="card-body">
                                                <div class="d-flex flex-column">
                                                    <div class="d-flex align-items-center">

                                                        <div class="me-2 text-danger">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" fill="currentColor"
                                                                class="bi bi-bookmark-check" viewBox="0 0 16 16">
                                                                <path fill-rule="evenodd"
                                                                    d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0">
                                                                </path>
                                                                <path
                                                                    d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z">
                                                                </path>
                                                            </svg>

                                                        </div>
                                                        <div class="fs-5 fw-bold d-flex align-items-center"
                                                            style="min-height: 34.28px;">
                                                            <div>
                                                                {{ $licence->license_type }}
                                                                {{ $licence->time_amount > 0 ? $licence->time_amount : '' }}
                                                                {{ $licence->time_type && $licence->time_type !== 'null' ? $licence->time_type : '' }}
                                                                {{ '(' . $licence->zone . ')' }}

                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="d-flex justify-content-between mt-3 mb-2 small">
                                                        <div>
                                                            {{ $licence->payment_type }}
                                                        </div>
                                                        <div class="fw-bold text-danger">
                                                            {{ $licence->zone }}
                                                        </div>
                                                    </div>

                                                    <div
                                                        class="d-flex flex-grow-1 justify-content-end align-items-end mt-auto">
                                                        <div class="fw-bold text-danger">
                                                            @if ($licence->payment_type == 'Beli Harga')
                                                                {{ 'Rp. ' . number_format($licence->amount, 2, ',', '.') }}
                                                            @else
                                                                {{ $licence->amount . '%' }}
                                                            @endif
                                                        </div>
                                                    </div>



                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach


                            </div>

                            <div class="row g-4 mt-1 ">
                                <div class="col bg-pink-lt p-3 rounded-3">
                                    <h5 class="fs-4">Zona (Lokal)</h5>
                                    <div class="d-flex align-items-center">


                                        <div class="me-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
                                                <path
                                                    d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10" />
                                                <path
                                                    d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
                                            </svg>
                                        </div>

                                        <div>
                                            {{ $song->local_zones }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <div class="d-flex flex-column">
                                <h3 class="card-title">Kontributor & Kredit</h3>
                                <div class="text-muted mt-1 small">Orang - orang dibalik pembuatan lagu</div>

                            </div>
                        </div>
                        <div class="card-body">

                            @foreach ($song->songContributors as $contributor)
                                @php
                                    $avatarUrl = app(\App\Services\UserServices::class)->getAvatar($contributor->user, 'sm');
                                @endphp
                                <div class="d-flex flex-column">
                                    <div class="d-flex align-items-center">
                                        <span class="avatar avatar-md rounded"
                                            style="width: 32px;height:32px;background-image: url('{{$avatarUrl}}')"
                                            data-bs-toggle="tooltip" title="{{ $contributor->user->name }}">
                                        </span>
                                        <div class="d-flex flex-column">
                                            <div class="ms-2">{{ $contributor->user->name }}</div>
                                            <div class="ms-2 text-secondary small">{{ $contributor->role }}</div>
                                        </div>
                                        <div class="ms-4 small text-secondary">{{ $contributor->description }}</div>

                                    </div>
                                </div>
                            @endforeach

                            {{-- @if ($song->composers->count())
                                <div class="mb-3">
                                    <h4 class="mb-2">Composers</h4>
                                    <div class="avatar-list avatar-list-stacked">
                                        @foreach ($song->composers as $composer)
                                            <span class="avatar avatar-md rounded"
                                                style="background-image: url('https://ui-avatars.com/api/?name={{ urlencode($composer->name) }}&background=e53935&color=fff')"
                                                data-bs-toggle="tooltip" title="{{ $composer->name }}">
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div class="mb-3">
                                    <h4 class="mb-2">Composers</h4>
                                    <p class="text-muted">No composers assigned.</p>
                                </div>
                            @endif
                            <div>
                                @if ($song->composers->count())
                                    <h4 class="mb-2">Production Credits</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-1">
                                            <strong>Composer:</strong>
                                            {{ $song->composers->pluck('name')->join(', ') }}
                                        </li>
                                    </ul>
                                @else
                                    <h4 class="mb-2">Production Credits</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-1 text-muted">
                                            <em>No composers assigned.</em>
                                        </li>
                                    </ul>
                                @endif
                            </div> --}}

                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h3 class="card-title">Deskripsi</h3>
                        </div>
                        <div class="card-body">
                            {!! nl2br(e($song->description)) !!}
                        </div>
                    </div>

                    {{-- <div class="card mt-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Cover Versions</h3>
                            <a href="#" class="btn btn-sm btn-primary">View All</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-vcenter card-table">
                                <thead>
                                    <tr>
                                        <th>Cover Artist</th>
                                        <th>Released</th>
                                        <th>Plays</th>
                                        <th>Status</th>
                                        <th class="w-1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($song->coverVersions as $cover)
                                        @php
                                            $artist = $cover->artist;
                                            $name = $artist?->name ?? 'Unknown';
                                            $avatarUrl = 'https://ui-avatars.com/api/?name=' . urlencode($name) . '&background=e53935&color=fff';
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <span class="avatar me-2"
                                                        style="background-image: url({{ $avatarUrl }})"></span>
                                                    <div>{{ $name }}</div>
                                                </div>
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($cover->release_date)->format('M d, Y') }}</td>
                                            <td>{{ number_format($cover->play_count ?? 0) }}</td>
                                            <td>
                                                <span
                                                    class="badge
                                                    {{ $cover->status == 'Active'
                                                        ? 'bg-success'
                                                        : ($cover->status == 'Inactive'
                                                            ? 'bg-danger'
                                                            : ($cover->status == 'Pending'
                                                                ? 'bg-warning'
                                                                : 'bg-secondary')) }}">
                                                    {{ $cover->status }}
                                                </span>
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.songs.show', $cover->id) }}"
                                                    class="btn btn-icon btn-ghost-secondary">
                                                    <i class="ti ti-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">No cover versions available.
                                            </td>
                                        </tr>
                                    @endforelse

                                </tbody>
                            </table>
                        </div>
                    </div> --}}
                </div>

            </div>

        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize tooltips
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        window.updateSongStatus = function(el) {

            var id = el.dataset.id;
            var status = el.dataset.status;
            var token = document.getElementById('csrf_token').value;

            if (!id || !status) {
                Swal.fire("Error", "ID atau status hilang", "error");
                return;
            }

            let baseUrl = `{{ url('/songs/update/status') }}`;
            let url = `${baseUrl}/${id}`;

            // kalau status publish, tanya dulu
            if (status == 'publish') {

                Swal.fire({
                    title: 'Yakin publish lagu ini?',
                    text: 'Lagu akan diproses oleh admin.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, publish!',
                    confirmButtonColor: '#e53935',
                    cancelButtonText: 'Batal',
                    reverseButtons: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        // user klik Ya, baru jalankan AJAX
                        updateStatusAjax(url, token, status);
                    } else {
                        // user batal
                        return;
                    }
                });

            } else {
                // status lain langsung jalan
                updateStatusAjax(url, token, status);
            }
        }

        function updateStatusAjax(url, token, status) {
            fetch(url, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token
                    },
                    body: JSON.stringify({
                        status: status
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire("Success", data.message, "success")
                            .then(() => location.reload());
                    } else {
                        Swal.fire("Failed", "Gagal update status.", "error");
                    }
                })
                .catch((error) => {
                    console.log(error);
                    Swal.fire("Error", "Terjadi kesalahan update status.", "error");
                });
        }

        function confirmDelete(id) {
            Swal.fire({
                title: 'Yakin hapus data ini?',
                text: "Data akan terhapus dan tidak dapat dibatalkan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-song-' + id).submit();
                }
            });
        }
    </script>
@endsection