@extends('layouts.app-admin')

@section('content')
    <div class="page-header d-print-none">
        <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">

                        @php
                            $routeUrl = route('admin.songs.index');
                            if (request()->query('from') === 'index') {
                                $routeUrl = route('admin.songs.index');
                            }
                            if (request()->query('from') === 'dashboard') {
                                $tab = 'tab-belum-release';
                                if ($song->types == 'belum release') {
                                    $tab = 'tab-belum-release';
                                }
                                if ($song->types == 'sudah release') {
                                    $tab = 'tab-sudah-release';
                                }
                                $routeUrl = route('admin.dashboard', ['tab' => $tab]);
                            }
                        @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">
                            <div class="d-flex flex-wrap">

                                @if ($song->status == 'publish' && $song->types == 'belum release')
                                    <a href="{{ route('admin.reports.dafkomlagu', ['id' => $song->id]) }}"
                                        data-id="{{ $song->id }}" data-status="printreg"
                                        onclick="updateSongStatus(this)" target="_blank"
                                        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-printer-fill" viewBox="0 0 16 16">
                                                <path
                                                    d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1" />
                                                <path
                                                    d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" />
                                            </svg></span>Cetak Reg Komp Lagu </a>
                                @endif


                                @if ($song->status == 'draft')
                                    <a href="{{ route('admin.songs.edit', $song->id) }}" 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> Edit
                                    </a>
                                @endif



                                @if ($song->status == 'publish')
                                    <button data-id="{{ $song->id }}" data-status="registered"
                                        data-createrelease="{{ $song->create_release }}" data-types="{{ $song->types }}"
                                        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-check-circle-fill"
                                                viewBox="0 0 16 16">
                                                <path
                                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                            </svg></span> Register</button>
                                @endif

                                @if ($song->status == 'registered')
                                    <button data-id="{{ $song->id }}" data-createrelease="{{ $song->create_release }}"
                                        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-file-earmark-x-fill" viewBox="0 0 16 16">
                                                <path
                                                    d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.854 7.146 8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 1 1 .708-.708" />
                                            </svg></span> Batal Register</button>
                                @endif

                                @if ($song->status == 'publish')
                                    <button data-id="{{ $song->id }}" data-status="draft"
                                        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-clock-history"
                                                viewBox="0 0 16 16">
                                                <path
                                                    d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z" />
                                                <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z" />
                                                <path
                                                    d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5" />
                                            </svg></span> Batal Publish</button>
                                @endif

                                @if ($song->status == 'draft')
                                    <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>
                                @endif


                                @if ($song->status != 'rejected')
                                    <button data-id="{{ $song->id }}" data-status="rejected"
                                        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-x-circle-fill"
                                                viewBox="0 0 16 16">
                                                <path
                                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" />
                                            </svg></span> Reject</button>
                                @endif

                                @if ($song->status == 'rejected')
                                    <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-arrow-counterclockwise"
                                                viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z" />
                                                <path
                                                    d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466" />
                                            </svg></span> Batal Reject</button>
                                @endif


                                @if ($song->status == 'draft')
                                    <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>
                                @endif

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



                            </div>
                        </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 ?? '-' }}<br>
                                        @php
                                            foreach ($song->songContributors as $row) {
                                                if ($row->role == 'Composer') {
                                                    echo $row->user->email;
                                                }
                                            }
                                        @endphp
                                    </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 {{ $song->files->isEmpty() ? 'd-none' : '' }}">
                        <div class="card-header">
                            <h3 class="card-title">File Audio (WAV)</h3>
                        </div>
                        <div class="card-body">
                            <div class="mt-2 d-flex flex-column">
                                @foreach ($song->files as $row)
                                    @php
                                        $avatarUrl = app(\App\Services\UserServices::class)->getAvatar(
                                            $row->user,
                                            'sm',
                                        );
                                    @endphp
                                    <div class="d-flex align-items-center gap-2 mb-2">

                                        <div class="d-flex flex-column">

                                            <div class="d-flex align-items-center mb-2">
                                                <span class="avatar avatar-sm rounded-circle me-2"
                                                    style="background-image: url({{ $avatarUrl }})">
                                                </span>
                                                <div class="">{{ $row->user->name }} ({{ $row->role }})
                                                </div>
                                            </div>

                                            <audio controls>
                                                <source src="{{ $row->file_path }}" type="audio/wav">
                                                Your browser does not support the audio element.
                                            </audio>

                                            <div class="mt-2">

                                                <a href="{{ $row->file_path }}" target="_blank" download
                                                    class="btn btn-primary me-2">
                                                    <i class="ti ti-download me-1"></i> Download
                                                </a>

                                                <a href="javascript:void(0)"
                                                    onclick="deleteSongAudio('{{ $row->id }}')"
                                                    class="btn btn-danger">
                                                    <i class="ti ti-trash me-1"></i> Hapus
                                                </a>

                                                <form id="form-delete-audio-{{ $row->id }}"
                                                    action="{{ route('admin.songs.audio.delete', $row->id) }}"
                                                    method="POST" style="display:none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>

                                            </div>


                                        </div>





                                    </div>
                                @endforeach
                            </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)
                                        <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">
                                                        @if ($licence->payment_type == 'Beli Harga')
                                                            <div class="badge text-bg-danger">
                                                                {{ $licence->payment_type }}
                                                            </div>
                                                        @else
                                                            <div class="badge text-bg-pink">
                                                                {{ $licence->payment_type }}
                                                            </div>
                                                        @endif
                                                        <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>
@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 create_release = el.dataset.createrelease ?? '0';
            var types = el.dataset.types !== undefined ? el.dataset.types : null;
            var isrc = null;
            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}`;

            if (status == 'printreg') {
                return;
            }

            if (status == 'publish') {

                Swal.fire({
                    title: `Yakin akan update status menjadi "${status}"?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, update!',
                    confirmButtonColor: '#e53935',
                    cancelButtonText: 'Batal',
                    reverseButtons: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        updateStatusAjax(url, token, status, isrc);
                    } else {
                        return;
                    }
                });


            } else if (status == 'registered') {

                if (types == 'belum release') {

                    Swal.fire({
                        title: `Yakin akan update status menjadi "${status}"?`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, update!',
                        confirmButtonColor: '#e53935',
                        cancelButtonText: 'Batal',
                        reverseButtons: false
                    }).then((result) => {
                        if (result.isConfirmed) {
                            updateStatusAjax(url, token, status, isrc);
                        } else {
                            return;
                        }
                    });

                } else {

                    if (create_release == '0' ) {

                        Swal.fire({
                            title: 'Masukkan kode ISRC',
                            input: 'text',
                            inputPlaceholder: 'Contoh: US-S1Z-99-12345',
                            showCancelButton: true,
                            confirmButtonText: 'Submit',
                            confirmButtonColor: '#e53935',
                            cancelButtonText: 'Batal',
                            inputValidator: (value) => {
                                if (!value) {
                                    return 'ISRC wajib diisi!'
                                }
                            }
                        }).then((result) => {
                            if (result.isConfirmed && result.value) {
                                isrc = result.value;
                                updateStatusAjax(url, token, status, isrc);
                            } else {
                                return;
                            }
                        });

                    } else {

                        Swal.fire({
                            title: `Yakin akan update status menjadi "${status}"?`,
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, update!',
                            confirmButtonColor: '#e53935',
                            cancelButtonText: 'Batal',
                            reverseButtons: false
                        }).then((result) => {
                            if (result.isConfirmed) {
                                updateStatusAjax(url, token, status, isrc);
                            } else {
                                return;
                            }
                        });

                    }

                }


            } else {
                // status lain konfirmasi umum
                Swal.fire({
                    title: `Yakin akan update status menjadi "${status}"?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, update!',
                    confirmButtonColor: '#e53935',
                    cancelButtonText: 'Batal',
                    reverseButtons: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        updateStatusAjax(url, token, status, isrc);
                    } else {
                        return;
                    }
                });
            }
        }

        function updateStatusAjax(url, token, status, isrc) {
            fetch(url, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token
                    },
                    body: JSON.stringify({
                        status: status,
                        isrc: isrc
                    })
                })
                .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.error('Error:', error);
                    Swal.fire("Error", "Terjadi kesalahan update status.", "error");
                });
        }


        function updateStatusAjax(url, token, status, isrc) {
            fetch(url, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token
                    },
                    body: JSON.stringify({
                        status: status,
                        isrc: isrc
                    })
                })
                .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.error('Error:', error);
                    Swal.fire("Error", "Terjadi kesalahan update status.", "error");
                });
        }

        function confirmDelete(id) {
            Swal.fire({
                title: 'Yakin hapus data ini?',
                text: "Data Lagu ini dan semua data yang berkaitan (order,pembayaran,saldo,saldo user) 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();
                }
            });
        }

        function deleteSongAudio(id) {
            Swal.fire({
                title: 'Yakin ingin menghapus audio ini?',
                text: 'Tindakan ini tidak dapat dibatalkan.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus!',
                confirmButtonColor: '#e53935',
                cancelButtonText: 'Batal',
                reverseButtons: false
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('form-delete-audio-' + id).submit();
                }
            });
        }
    </script>
@endsection