@extends('layouts.app')

@section('content')

    <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <div class="page-pretitle">Overview</div>
                        <h2 class="page-title">Dashboard</h2>
                        <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                    </div>
                    <div class="col-auto ms-auto">
                        <div class="d-flex align-items-center">

                            <div class="btn-list me-2">
                                <a href="{{ route('user.profile.my-assets') }}"
                                    class="btn btn-primary d-none d-sm-inline-block">
                                    <i class="ti ti-music me-2"></i> My Assets
                                </a>
                                <a href="#" class="btn btn-primary d-sm-none btn-icon">
                                    <i class="ti ti-plus"></i>
                                </a>
                            </div>


                            <div class="btn-list">
                                <a href="#" class="btn btn-primary d-none d-sm-inline-block">
                                    <i class="ti ti-plus me-2"></i>Create Playlist
                                </a>
                                <a href="#" class="btn btn-primary d-sm-none btn-icon">
                                    <i class="ti ti-plus"></i>
                                </a>
                            </div>


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

        <div class="page-body">
            <div class="container-xl">
                <!-- User Info & Search -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card h-100">
                            <div class="card-body p-4 text-center">
                                @php
                                    $avatarUrl = app(\App\Services\UserServices::class)->getAvatar(
                                        auth()->user(),
                                        'md',
                                    );
                                @endphp
                                <span class="avatar avatar-xl mb-3"
                                    style="background-image: url('{{ $avatarUrl }}'); background-size: cover; background-position: center;">
                                </span>
                                <h3 class="m-0 mb-1">{{ auth()->user()->name }}</h3>
                                <div class="text-muted">{{ auth()->user()->email }}</div>
                                <div class="mt-2">
                                    <span class="badge text-bg-light">
                                        <i class="ti ti-phone me-1"></i> {{ auth()->user()->phone ?? 'Not set' }}
                                    </span>
                                    <span class="badge text-bg-light">
                                        <i class="ti ti-calendar me-1"></i> Joined
                                        {{ auth()->user()->created_at->format('M d, Y') }}
                                    </span>
                                </div>
                                <!-- Tambahkan di bagian profil user -->
                                @php
                                    $verification = \App\Models\Verification::where('user_id', auth()->id())
                                        ->where('status', 'approved')
                                        ->latest()
                                        ->first();
                                @endphp

                                @if ($verification)
                                    <span class="badge bg-success">
                                        <i class="ti ti-check me-1"></i> {{ ucfirst($verification->type) }} Terverifikasi
                                    </span>
                                @endif

                                <div class="mt-3">
                                    <a href="{{ route('user.profile.my-assets') }}"
                                        class="btn btn-outline-primary w-100 mb-2">
                                        <i class="ti ti-music me-2"></i> My Music Assets
                                    </a>

                                    @if (session('user_active_role') === 'Artist')
                                        <a href="{{ route('user.bookings.artist-dashboard') }}"
                                            class="btn btn-outline-success w-100">
                                            <i class="ti ti-calendar me-2"></i> Artist Dashboard
                                        </a>
                                    @else
                                        <a href="{{ route('user.bookings.artists') }}" class="btn btn-outline-info w-100">
                                            <i class="ti ti-users me-2"></i> Book Artist
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Cari Lagu</h3>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('user.dashboard') }}" method="GET">
                                    <div class="row d-flex align-items-stretch">

                                        <div class="col-md-10">
                                            <div class="input-icon mb-3">
                                                <input type="text" name="q" value="{{ $query ?? '' }}"
                                                    class="form-control"
                                                    placeholder="Search for songs, artists, or albums...">
                                                <span class="input-icon-addon">
                                                    <i class="ti ti-search"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="d-flex ">
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="ti ti-search me-1"></i> Cari
                                                </button>
                                            </div>

                                        </div>

                                    </div>

                                    <br>
                                </form>

                                @if (isset($results) && count($results) > 0)
                                    <h4 class="mt-4 mb-3">Search Results for "{{ $query }}"</h4>
                                    <div class="card">
                                        <div class="list-group list-group-flush">
                                            @foreach ($results as $song)
                                                <div class="list-group-item">
                                                    <div class="row align-items-center">
                                                        <div class="col-auto">
                                                            <span class="avatar me-2"
                                                                style="background-image: url(https://picsum.photos/40/40?random={{ $loop->iteration }})"></span>
                                                        </div>
                                                        <div class="col">
                                                            <div class="font-weight-medium">{{ $song->title }}</div>
                                                            <div class="text-muted">
                                                                {{ $song->artist ? $song->artist->name : 'Unknown Artist' }}
                                                                - {{ $song->album->title ?? 'Single' }}</div>
                                                        </div>
                                                        <div class="col-auto">
                                                            <div class="btn-list flex-nowrap">
                                                                <div class="dropdown">
                                                                    <button class="btn btn-icon btn-sm btn-ghost-secondary"
                                                                        data-bs-toggle="dropdown">
                                                                        <i class="ti ti-dots-vertical"></i>
                                                                    </button>
                                                                    <div class="dropdown-menu dropdown-menu-end">
                                                                        <a href="{{ route('users.songs.show', ['id' => $song->id, 'from' => 'dashboard']) }}"
                                                                            class="dropdown-item">
                                                                            <i class="ti ti-eye me-2"></i>View
                                                                        </a>
                                                                        <a href="#" class="dropdown-item">
                                                                            <i class="ti ti-credit-card me-2"></i>Add To
                                                                            Cart
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @elseif (isset($query))
                                    <div class="empty mt-4">
                                        <div class="empty-icon">
                                            <i class="ti ti-mood-sad text-muted" style="font-size: 3rem"></i>
                                        </div>
                                        <p class="empty-title">No results found</p>
                                        <p class="empty-subtitle text-muted">
                                            No results found for "{{ $query }}". Try using different keywords.
                                        </p>
                                    </div>
                                @else
                                    <!-- Booking Stats Section -->
                                    @if (session('user_active_role') === 'Artist')
                                        <div class="row mb-4">
                                            <div class="col-12">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h4 class="card-title">Booking Statistics</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <span class="bg-primary text-white avatar">
                                                                            <i class="ti ti-calendar"></i>
                                                                        </span>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <div class="font-weight-medium">12</div>
                                                                        <div class="text-muted">Total Bookings</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <span class="bg-warning text-white avatar">
                                                                            <i class="ti ti-clock"></i>
                                                                        </span>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <div class="font-weight-medium">3</div>
                                                                        <div class="text-muted">Pending</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <span class="bg-success text-white avatar">
                                                                            <i class="ti ti-check"></i>
                                                                        </span>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <div class="font-weight-medium">8</div>
                                                                        <div class="text-muted">Approved</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <span class="bg-info text-white avatar">
                                                                            <i class="ti ti-currency-dollar"></i>
                                                                        </span>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <div class="font-weight-medium">Rp 4.2M</div>
                                                                        <div class="text-muted">Total Earnings</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="row mb-4">
                                            <div class="col-12">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h4 class="card-title">My Bookings</h4>
                                                        <div class="card-actions">
                                                            <a href="{{ route('user.bookings.my-bookings') }}"
                                                                class="btn btn-primary btn-sm">
                                                                <i class="ti ti-list me-1"></i>View All
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <span class="bg-warning text-white avatar">
                                                                            <i class="ti ti-clock"></i>
                                                                        </span>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <div class="font-weight-medium">2</div>
                                                                        <div class="text-muted">Pending Bookings</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <span class="bg-success text-white avatar">
                                                                            <i class="ti ti-check"></i>
                                                                        </span>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <div class="font-weight-medium">3</div>
                                                                        <div class="text-muted">Confirmed Bookings</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-shrink-0">
                                                                        <span class="bg-info text-white avatar">
                                                                            <i class="ti ti-calendar"></i>
                                                                        </span>
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-3">
                                                                        <div class="font-weight-medium">5</div>
                                                                        <div class="text-muted">Total Bookings</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <h3 class="mt-4 mb-3">Semua Lagu</h3>

                                    <div class="mt-3">
                                        <div class="container-fluid">

                                            <div class="row d-flex align-items-stretch">
                                                @foreach ($allSongs as $song)
                                                    @php
                                                        // Ambil composer
                                                        $composer = '';
                                                        foreach ($song->songContributors as $contributor) {
                                                            if ($contributor->role == 'Composer') {
                                                                $composer = $contributor->user->name ?? '';
                                                                break;
                                                            }
                                                        }

                                                        // Proses cover image
                                                        $imageUrl = app(
                                                            \App\Services\SongServices::class,
                                                        )->getCoverImageS3($song, 'md');
                                                    @endphp

                                                    <div class="col-md-3">
                                                        <div class="card shadow rounded-4" style="cursor: pointer;">
                                                            <div class="card-body p-1">
                                                                <div class="d-flex flex-column">
                                                                    <div class="position-relative">
                                                                        <div class="position-absolute top-0 start-0 p-2">
                                                                            <span class="badge text-bg-danger"
                                                                                style="font-size:9px;">
                                                                                {{ $song->created_at->format('j M Y H:i') }}
                                                                            </span>
                                                                        </div>
                                                                        <div class="position-absolute top-0 end-0 p-2">
                                                                            <div class="dropdown">
                                                                                <div class="d-flex justify-content-center align-items-center rounded-circle bg-danger text-white p-1"
                                                                                    style="size:20px;cursor: pointer;"
                                                                                    data-id="{{ $song->id }}"
                                                                                    onclick="openDropdownMenu(this)">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                                        width="16" height="16"
                                                                                        fill="currentColor"
                                                                                        class="bi bi-three-dots-vertical"
                                                                                        viewBox="0 0 16 16">
                                                                                        <path
                                                                                            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
                                                                                    </svg>
                                                                                </div>

                                                                                <ul class="dropdown-menu dropdown-menu-song"
                                                                                    style="width: 80px;">
                                                                                    <li><a class="dropdown-item"
                                                                                            href="{{ route('users.songs.show', ['id' => $song->id, 'from' => 'dashboard']) }}">
                                                                                            <span class="me-2">
                                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                    width="16"
                                                                                                    height="16"
                                                                                                    fill="currentColor"
                                                                                                    class="bi bi-eye"
                                                                                                    viewBox="0 0 16 16">
                                                                                                    <path
                                                                                                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" />
                                                                                                    <path
                                                                                                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
                                                                                                </svg>
                                                                                            </span>
                                                                                            View
                                                                                        </a>
                                                                                    </li>
                                                                                    <li><a data-id="{{ $song->id }}"
                                                                                            data-status="publish"
                                                                                            class="dropdown-item"
                                                                                            onclick="updateSongStatus(this)"
                                                                                            href="javascript:void(0)">
                                                                                            <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
                                                                                        </a>
                                                                                    </li>
                                                                                    {{-- <li><a data-id="{{ $song->id }}"
                                                                                            class="dropdown-item"
                                                                                            href="{{ route('user.conposer.songs.edit', ['id' => $song->id]) }}">Edit</a>
                                                                                    </li>
                                                                                    <li><a onclick="confirmDelete('{{ $song->id }}')"
                                                                                            data-id="{{ $song->id }}"
                                                                                            class="dropdown-item"
                                                                                            href="javascript:void(0)">Hapus</a>
                                                                                        <form
                                                                                            id="delete-song-{{ $song->id }}"
                                                                                            action="{{ route('user.songs.destroy', $song) }}"
                                                                                            method="POST"
                                                                                            style="display: none;">
                                                                                            @csrf
                                                                                            @method('DELETE')
                                                                                        </form>
                                                                                    </li> --}}
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <a
                                                                        href="{{ route('users.songs.show', ['id' => $song->id, 'from' => 'dashboard']) }}">
                                                                        <img class="rounded-4" src="{{ $imageUrl }}"
                                                                            style="width:100%;aspect-ratio:1/1;"
                                                                            alt="">
                                                                    </a>
                                                                    <div class="flex flex-column p-2">
                                                                        <div
                                                                            class="fw-bold fs-4 d-flex justify-content-center mb-1 clamp-2">
                                                                            {{ $song->title }}
                                                                        </div>
                                                                        <div class="text-center text-secondary mb-2"
                                                                            style="font-size: 10px;">
                                                                            cipt. {{ $composer }}
                                                                        </div>
                                                                        <div class="d-flex justify-content-between">
                                                                            <span class="badge text-bg-danger"
                                                                                style="font-size: 9px;">
                                                                                {{ $song->status }}
                                                                            </span>

                                                                            @php
                                                                                $bgTypes = 'text-bg-danger';
                                                                                if ($song->types == 'sudah release') {
                                                                                    $bgTypes = 'text-bg-dark';
                                                                                }
                                                                            @endphp

                                                                            <span class="badge {{ $bgTypes }}"
                                                                                style="font-size: 9px;">
                                                                                {{ $song->types }}
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>


                                        </div>
                                    </div>

                                    {{-- <div class="table-responsive">
                                        <table class="table table-vcenter card-table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Title</th>
                                                    <th>Artist</th>
                                                    <th>Albums</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @foreach ($allSongs ?? [] as $index => $song)
                                                    @php

                                                        $coverImages = explode(',', $song->cover_image ?? '');
                                                        $smallCoverFile = $coverImages[2] ?? null;
                                                        $filename = $smallCoverFile ? basename($smallCoverFile) : null;
                                                        $imageUrl = $filename ? route('user.songs.image', ['filename' => $filename]) : 'https://via.placeholder.com/40';
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <span class="avatar me-2"
                                                                    style="background-image: url('{{ $imageUrl }}')"></span>
                                                                <div>{{ $song->title }}</div>
                                                            </div>
                                                        </td>
                                                        <td>{{ $song->artist ? $song->artist->name : 'Unknown Artist' }}
                                                        </td>
                                                        <td>{{ $song->album->title ?? 'Single' }}</td>
                                                        <td>
                                                            <div class="btn-list flex-nowrap">
                                                                <div class="dropdown">
                                                                    <button class="btn btn-icon btn-sm btn-ghost-secondary"
                                                                        data-bs-toggle="dropdown">
                                                                        <i class="ti ti-dots-vertical"></i>
                                                                    </button>
                                                                    <div class="dropdown-menu dropdown-menu-end">
                                                                        <a href="{{ route('user.songs.show', $song->id) }}"
                                                                            class="dropdown-item">
                                                                            <i class="ti ti-eye me-2"></i>View
                                                                        </a>
                                                                        <a href="#" class="dropdown-item">
                                                                            <i class="ti ti-credit-card me-2"></i>Add To
                                                                            Cart
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div> --}}

                                    <div class="d-flex mt-4">

                                        {{ $allSongs->links() }}

                                        {{-- <ul class="pagination ms-auto">
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                                                    <i class="ti ti-chevron-left"></i>
                                                    prev
                                                </a>
                                            </li>
                                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item">
                                                <a class="page-link" href="#">
                                                    next
                                                    <i class="ti ti-chevron-right"></i>
                                                </a>
                                            </li>
                                        </ul> --}}
                                    </div>
                                @endif

                                <audio id="audio-player" controls style="display: none;"></audio>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Order Cards -->
                <div class="row mb-4" id="orderCtr">
                    <div class="col">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-music me-2 text-primary"></i>Transaksi Anda
                                </h3>
                                <div class="card-actions">
                                    <a href="{{ route('users.orders') }}" class="btn btn-link">View All</a>
                                </div>
                            </div>
                            <div class="card-body">

                                <div class="row">
                                    @forelse ($orders as $item)
                                        @php
                                            $payment_status = $item->payment_status;
                                            $bgClass = 'text-bg-success';

                                            $resultCode = '01';
                                            if (
                                                $payment_status == 'pending' ||
                                                $payment_status == 'unpaid' ||
                                                $payment_status == 'failed'
                                            ) {
                                                $payment_status =
                                                    $payment_status == 'pending' || $payment_status == 'unpaid'
                                                        ? 'unpaid'
                                                        : $payment_status;

                                                $resultCode = '01';
                                                if ($payment_status == 'failed') {
                                                    $resultCode = '02';
                                                }

                                                $bgClass = 'text-bg-danger';
                                            } else {
                                                $resultCode = '00';
                                            }

                                        @endphp
                                        @foreach ($item->orderItem as $orderItem)
                                            @php
                                                $lcsPrice = $orderItem->price;
                                                $songId = $orderItem->songLicense->song_id;
                                                $license_type = $orderItem->songLicense->license_type;
                                                $payment_type = $orderItem->songLicense->payment_type;
                                                $time_amount = $orderItem->songLicense->time_amount;
                                                $time_amount =
                                                    $time_amount && $time_amount !== 'null' && $time_amount !== 0
                                                        ? $time_amount
                                                        : '';

                                                $time_type = $orderItem->songLicense->time_type;
                                                $time_type = $time_type && $time_type !== 'null' ? $time_type : '';

                                                $zone = $orderItem->songLicense->zone;
                                                $songTitle = $orderItem->songLicense->song->title;
                                                $coverImage = app(\App\Services\SongServices::class)->getCoverImageS3(
                                                    $orderItem->songLicense->song,
                                                    'sm',
                                                );
                                                $composerNames = $orderItem->songLicense->song->songContributors
                                                    ->pluck('user.name')
                                                    ->implode(', ');
                                            @endphp
                                        @endforeach

                                        <div class="col-md-3 orderItemCtr" style="cursor: pointer;">


                                            <div class="card h-100 orderItem shadow-sm">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col">
                                                            <div data-url="{{ route('users.orders.show', $item->id) }}"
                                                                onclick="showOrder(this)"
                                                                class="d-flex justify-content-center align-items-center w-100  rounded-3 bg-dark"
                                                                style="aspect-ratio:1/1;">
                                                                <img src="{{ $coverImage }}" alt="{{ $songTitle }}"
                                                                    class="rounded-3 w-100">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <div class="d-flex flex-column small">
                                                                <h5>{{ $item->order_no }}</h5>
                                                                <div style="font-size: 10px;">
                                                                    {{ $item->created_at->format('d-m-Y H:i') }} </div>
                                                                <div class="" style="font-size: 13px;">Lisensi
                                                                    {{ trim($license_type . ' ' . $time_amount . ' ' . $time_type . '(' . $zone . ')') }}

                                                                </div>
                                                                <div style="font-size: 12px;">{{ $songTitle }}
                                                                </div>
                                                                <div style="font-size: 10px;">Cipt. {{ $composerNames }}
                                                                </div>
                                                                @if ($payment_type == 'Beli Harga')
                                                                    <div class="fw-bold" style="font-size: 13px;">
                                                                        Rp.{{ number_format($lcsPrice) }}
                                                                    </div>
                                                                @else
                                                                    <div class="fw-bold" style="font-size: 13px;">
                                                                        {{ number_format($lcsPrice) }}%
                                                                    </div>
                                                                @endif
                                                                <div class="d-flex justify-content-end">

                                                                    <span id="paybadge-{{ $item->order_no }}"
                                                                        class="badge {{ $bgClass }} fs-5 paybadge"
                                                                        data-baseUrl="{{ url('/') }}"
                                                                        data-orderno="{{ $item->order_no }}"
                                                                        data-resultcode="{{ $resultCode }}"
                                                                        data-ref="{{ $item->payment_ref }}"
                                                                        onclick="showPaymentStatus(this)">{{ $payment_status }}</span>

                                                                </div>

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



                                        </div>

                                    @empty
                                    @endforelse
                                </div>
                                <div class="row mt-3">
                                    <div class="col">
                                        <div>
                                            {{ $orders->links() }}
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>



                <!-- Stats Cards -->
                <div class="row mb-4 d-none sembunyi">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="subheader">Total Plays</div>
                                    <div class="ms-auto lh-1">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle text-muted" href="#"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="ti ti-dots-vertical"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item" href="#">Last 7 days</a>
                                                <a class="dropdown-item" href="#">Last 30 days</a>
                                                <a class="dropdown-item" href="#">Last 3 months</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="h1 mb-3">2,845</div>
                                <div class="d-flex mb-2">
                                    <div>Conversion rate</div>
                                    <div class="ms-auto">
                                        <span class="text-green d-inline-flex align-items-center lh-1">
                                            7% <i class="ti ti-trending-up ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-primary" style="width: 70%" role="progressbar"
                                        aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
                                        aria-label="70% Complete">
                                        <span class="visually-hidden">70% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="subheader">Playlists</div>
                                </div>
                                <div class="h1 mb-3">8</div>
                                <div class="d-flex mb-2">
                                    <div>Growth</div>
                                    <div class="ms-auto">
                                        <span class="text-green d-inline-flex align-items-center lh-1">
                                            9% <i class="ti ti-trending-up ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-primary" style="width: 75%" role="progressbar"
                                        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
                                        aria-label="75% Complete">
                                        <span class="visually-hidden">75% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="subheader">Followers</div>
                                </div>
                                <div class="h1 mb-3">1,253</div>
                                <div class="d-flex mb-2">
                                    <div>Growth</div>
                                    <div class="ms-auto">
                                        <span class="text-green d-inline-flex align-items-center lh-1">
                                            12% <i class="ti ti-trending-up ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-primary" style="width: 60%" role="progressbar"
                                        aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                        aria-label="60% Complete">
                                        <span class="visually-hidden">60% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="subheader">Downloads</div>
                                </div>
                                <div class="h1 mb-3">452</div>
                                <div class="d-flex mb-2">
                                    <div>Growth</div>
                                    <div class="ms-auto">
                                        <span class="text-red d-inline-flex align-items-center lh-1">
                                            -2% <i class="ti ti-trending-down ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-primary" style="width: 40%" role="progressbar"
                                        aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                        aria-label="40% Complete">
                                        <span class="visually-hidden">40% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Popular Songs & Artists -->
                <div class="row g-4 mb-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-music me-2 text-primary"></i>Popular Songs
                                </h3>
                                <div class="card-actions">
                                    <a href="#" class="btn btn-link">View All</a>
                                </div>
                            </div>
                            <div class="list-group list-group-flush">
                                @foreach ($popularSongs ?? [] as $song)
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="avatar">{{ $loop->iteration }}</span>
                                            </div>
                                            <div class="col-auto">
                                                <span class="avatar"
                                                    style="background-image: url(https://picsum.photos/40/40?random={{ $loop->iteration + 10 }})"></span>
                                            </div>
                                            <div class="col text-truncate">
                                                <a href="#" class="text-reset d-block">{{ $song->title }}</a>
                                                <div class="text-muted text-truncate mt-n1">
                                                    {{ $song->artist ? $song->artist->name : 'Unknown Artist' }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <span class="badge bg-primary-lt">
                                                    <i class="ti ti-headphones me-1"></i>
                                                    {{ $song->stream_count ?? rand(1000, 9999) }}
                                                </span>
                                            </div>
                                            <div class="col-auto">
                                                <button
                                                    class="btn btn-icon btn-sm btn-primary popular-play-button-{{ $song->id }}"
                                                    data-bs-toggle="tooltip" title="Play">
                                                    <i class="ti ti-player-play "></i>

                                                    @php
                                                        $filename = $song->file_path
                                                            ? basename($song->file_path)
                                                            : null;
                                                        $audioUrl = $filename
                                                            ? route('songs.audio', ['filename' => $filename])
                                                            : null;
                                                    @endphp

                                                    @if ($audioUrl)
                                                        <audio controls
                                                            class="w-100 mb-3 d-none populaar-audio-{{ $song->id }}">
                                                            <source src="{{ $audioUrl }}" type="audio/mpeg">
                                                            Your browser does not support the audio element.
                                                        </audio>
                                                    @endif

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

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-users me-2 text-primary"></i>Popular Artists
                                </h3>
                                <div class="card-actions">
                                    <a href="#" class="btn btn-link">View All</a>
                                </div>
                            </div>
                            <div class="list-group list-group-flush">
                                @foreach ($popularArtists ?? [] as $artist)
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="avatar">{{ $loop->iteration }}</span>
                                            </div>
                                            <div class="col-auto">
                                                <span class="avatar"
                                                    style="background-image: url(https://ui-avatars.com/api/?name={{ $artist->name }}&background=e53935&color=fff)"></span>
                                            </div>
                                            <div class="col text-truncate">
                                                <a href="#" class="text-reset d-block">{{ $artist->name }}</a>
                                                <div class="text-muted text-truncate mt-n1">Artist</div>
                                            </div>
                                            <div class="col-auto">
                                                <span class="badge bg-primary-lt">
                                                    <i class="ti ti-headphones me-1"></i>
                                                    {{ $artist->stream_count ?? rand(10000, 99999) }}
                                                </span>
                                            </div>
                                            <div class="col-auto">
                                                <button class="btn btn-icon btn-sm btn-outline-primary"
                                                    data-bs-toggle="tooltip" title="Follow">
                                                    <i class="ti ti-user-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Popular Composers & Cover Creators -->
                <div class="row g-4 mb-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-pencil me-2 text-primary"></i>Popular Composers
                                </h3>
                                <div class="card-actions">
                                    <a href="#" class="btn btn-link">View All</a>
                                </div>
                            </div>
                            <div class="list-group list-group-flush">
                                @foreach ($popularComposers ?? [] as $composer)
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="avatar">{{ $loop->iteration }}</span>
                                            </div>
                                            <div class="col-auto">
                                                <span class="avatar"
                                                    style="background-image: url(https://ui-avatars.com/api/?name={{ $composer->name }}&background=e53935&color=fff)"></span>
                                            </div>
                                            <div class="col text-truncate">
                                                <a href="#" class="text-reset d-block">{{ $composer->name }}</a>
                                                <div class="text-muted text-truncate mt-n1">Composer</div>
                                            </div>
                                            <div class="col-auto">
                                                <span class="badge bg-primary-lt">
                                                    <i class="ti ti-headphones me-1"></i>
                                                    {{ $composer->stream_count ?? rand(10000, 99999) }}
                                                </span>
                                            </div>
                                            <div class="col-auto">
                                                <button class="btn btn-icon btn-sm btn-outline-primary"
                                                    data-bs-toggle="tooltip" title="Follow">
                                                    <i class="ti ti-user-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-microphone-2 me-2 text-primary"></i>Popular Cover Creators
                                </h3>
                                <div class="card-actions">
                                    <a href="#" class="btn btn-link">View All</a>
                                </div>
                            </div>
                            <div class="list-group list-group-flush">
                                @foreach ($popularCoverCreators ?? [] as $coverCreator)
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="avatar">{{ $loop->iteration }}</span>
                                            </div>
                                            <div class="col-auto">
                                                <span class="avatar"
                                                    style="background-image: url(https://ui-avatars.com/api/?name={{ $coverCreator->name }}&background=e53935&color=fff)"></span>
                                            </div>
                                            <div class="col text-truncate">
                                                <a href="#"
                                                    class="text-reset d-block">{{ $coverCreator->name }}</a>
                                                <div class="text-muted text-truncate mt-n1">Cover Creator</div>
                                            </div>
                                            <div class="col-auto">
                                                <span class="badge bg-primary-lt">
                                                    <i class="ti ti-headphones me-1"></i>
                                                    {{ $coverCreator->stream_count ?? rand(10000, 99999) }}
                                                </span>
                                            </div>
                                            <div class="col-auto">
                                                <button class="btn btn-icon btn-sm btn-outline-primary"
                                                    data-bs-toggle="tooltip" title="Follow">
                                                    <i class="ti ti-user-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Your Playlists -->
                <div class="card mb-4 d-none sembunyi">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ti ti-playlist me-2 text-primary"></i>Your Playlists
                        </h3>
                        <div class="card-actions">
                            <button class="btn btn-primary">
                                <i class="ti ti-plus me-2"></i>New Playlist
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-sm-6 col-lg-3">
                                <div class="card card-sm">
                                    <a href="#" class="d-block">
                                        <img src="https://picsum.photos/300/150?random=20" class="card-img-top"
                                            alt="Playlist">
                                    </a>
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div>
                                                <div class="font-weight-medium">My Favorites</div>
                                                <div class="text-muted">15 songs</div>
                                            </div>
                                            <div class="ms-auto">
                                                <button class="btn btn-icon btn-primary" data-bs-toggle="tooltip"
                                                    title="Play">
                                                    <i class="ti ti-player-play"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="card card-sm">
                                    <a href="#" class="d-block">
                                        <img src="https://picsum.photos/300/150?random=21" class="card-img-top"
                                            alt="Playlist">
                                    </a>
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div>
                                                <div class="font-weight-medium">Workout Mix</div>
                                                <div class="text-muted">12 songs</div>
                                            </div>
                                            <div class="ms-auto">
                                                <button class="btn btn-icon btn-primary" data-bs-toggle="tooltip"
                                                    title="Play">
                                                    <i class="ti ti-player-play"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="card card-sm">
                                    <a href="#" class="d-block">
                                        <img src="https://picsum.photos/300/150?random=22" class="card-img-top"
                                            alt="Playlist">
                                    </a>
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div>
                                                <div class="font-weight-medium">Chill Vibes</div>
                                                <div class="text-muted">8 songs</div>
                                            </div>
                                            <div class="ms-auto">
                                                <button class="btn btn-icon btn-primary" data-bs-toggle="tooltip"
                                                    title="Play">
                                                    <i class="ti ti-player-play"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="card card-sm card-link border-dashed d-flex flex-column justify-content-center align-items-center"
                                    style="min-height: 100%;">
                                    <div class="text-center p-4">
                                        <span class="avatar avatar-md bg-primary-lt mb-3">
                                            <i class="ti ti-plus text-primary"></i>
                                        </span>
                                        <div class="font-weight-medium">Create New Playlist</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recently Played -->
                <div class="card mb-4 d-none sembunyi">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ti ti-history me-2 text-primary"></i>Recently Played
                        </h3>
                        <div class="card-actions">
                            <a href="#" class="btn btn-link">View History</a>
                        </div>
                    </div>
                    <div class="card-body border-bottom-0 table-responsive">
                        <table class="table table-vcenter card-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>Artist</th>
                                    <th>Album</th>
                                    <th>Duration</th>
                                    <th>Played</th>
                                    <th class="w-1"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($allSongs ?? [] as $index => $song)
                                    @php

                                        $coverImages = explode(',', $song->cover_image ?? '');
                                        $smallCoverFile = $coverImages[2] ?? null;
                                        $filename = $smallCoverFile ? basename($smallCoverFile) : null;
                                        $imageUrl = $filename
                                            ? route('user.songs.image', ['filename' => $filename])
                                            : 'https://via.placeholder.com/40';
                                    @endphp
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="avatar me-2"
                                                    style="background-image: url('{{ $imageUrl }}')"></span>
                                                <div>{{ $song->title }}</div>
                                            </div>
                                        </td>
                                        <td>{{ $song->artist ? $song->artist->name : 'Unknown Artist' }}</td>
                                        <td>{{ $song->album->title ?? 'Single' }}</td>
                                        <td>3:45</td>
                                        <td>{{ now()->subHours(rand(1, 24))->diffForHumans() }}</td>
                                        <td>
                                            <div class="btn-list flex-nowrap">

                                                <button
                                                    class="btn btn-icon btn-sm btn-primary recently-play-btn-{{ $song->id }}"
                                                    data-bs-toggle="tooltip" title="Play">
                                                    <i class="ti ti-player-play"></i>

                                                    @php
                                                        $filename = $song->file_path
                                                            ? basename($song->file_path)
                                                            : null;
                                                        $audioUrl = $filename
                                                            ? route('songs.audio', ['filename' => $filename])
                                                            : null;
                                                    @endphp

                                                    @if ($audioUrl)
                                                        <audio controls
                                                            class="w-100 mb-3 d-none recently-play-audio-{{ $song->id }}">
                                                            <source src="{{ $audioUrl }}" type="audio/mpeg">
                                                            Your browser does not support the audio element.
                                                        </audio>
                                                    @endif

                                                </button>

                                                <div class="dropdown">
                                                    <button class="btn btn-icon btn-sm btn-ghost-secondary"
                                                        data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical"></i>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ti ti-plus me-2"></i>Add to playlist
                                                        </a>
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ti ti-download me-2"></i>Download
                                                        </a>
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ti ti-share me-2"></i>Share
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <style>
        .clamp-2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* batas 2 baris */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dropdown-menu-song {
            width: 110px !important;
            min-width: 110px !important;
            position: absolute;
            z-index: 1055;
            right: -8px;
        }
    </style>
@endpush
@section('scripts')
    <script>
        function openDropdownMenu(el) {
            let dropdown = el.closest('.dropdown').querySelector('.dropdown-menu');
            dropdown.classList.toggle('show');
        }

        // Optionally close if click outside
        document.addEventListener('click', function(event) {
            if (!event.target.closest('.dropdown')) {
                document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
                    menu.classList.remove('show');
                });
            }
        });
    </script>
    <script>
        // Additional dashboard-specific scripts
        document.addEventListener('DOMContentLoaded', function() {
            // Example of using SweetAlert for a welcome message

        });

        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.error('Error:', error);
                    Swal.fire("Error", "Terjadi kesalahan update status.", "error");
                });
        }

        function showPaymentStatus(el) {
            const orderNo = el.dataset.orderno;
            const resultCode = el.dataset.resultcode;
            const reference = el.dataset.ref;
            const baseUrl = el.dataset.baseurl;
            const url =
                `${baseUrl}/payment/status?merchantOrderId=${encodeURIComponent(orderNo)}&resultCode=${encodeURIComponent(resultCode)}&reference=${encodeURIComponent(reference)}`;

            window.location.href = url;
        }

        function showOrder(el) {
            const url = el.getAttribute('data-url');
            window.location.href = url;
        }
    </script>

    <script>
        const csrfToken = getCsrfTokenMeta();
        const POLLING_INTERVAL = 10000; // 10 detik
        const MAX_POLLING_TIME = 15 * 60 * 1000; // 15 menit
        let elapsedTime = 0;

        const intervalId = setInterval(() => {
            elapsedTime += POLLING_INTERVAL;

            // Ambil semua element dengan class 'paybadge'
            const badges = document.querySelectorAll('.paybadge');

            badges.forEach(badge => {
                const order_no = badge.dataset.orderno;

                fetch("/payment/status", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": csrfToken
                        },
                        body: JSON.stringify({
                            order_no: order_no
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        const status = data?.data?.payment_status?.toLowerCase();
                        if (status === "paid") {
                            badge.dataset.resultcode = "00";
                            badge.textContent = "paid";
                            badge.classList.remove("text-bg-danger", "badge-danger");
                            badge.classList.add("text-bg-success");
                        } else if (status === "failed") {
                            badge.dataset.resultcode = "02";
                            badge.textContent = "failed";
                            badge.classList.remove("badge-warning", "badge-success");
                            badge.classList.add("badge-danger");
                        } else {
                        }
                    })
                    .catch(error => {
                        console.error("❌ Error:", error);
                    });
            });

            // Stop polling setelah 15 menit
            if (elapsedTime >= MAX_POLLING_TIME) {
                clearInterval(intervalId);
            }
        }, POLLING_INTERVAL);
    </script>
@endsection