@extends('layouts.app-admin')

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Dashboard
                    </h2>
                    <div class="text-muted mt-1">Welcome back, {{ Auth::user()->name }}</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.songs.index') }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-plus me-2"></i>
                            Daftar Lagu
                        </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 class="page-body">
        <div class="container-xl">
            <!-- Stats Cards -->
            <div class="row row-deck row-cards mb-4">
                <div class="col-sm-6 col-lg-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon bg-primary-lt me-3">
                                    <i class="ti ti-users text-primary"></i>
                                </div>
                                <div>
                                    <div class="text-muted fs-5">Total Users</div>
                                    <div class="h3 m-0">{{ $totalUsers }}</div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="d-flex align-items-center">
                                    <span class="text-success d-inline-flex align-items-center lh-1 me-2">
                                        <i class="ti ti-trending-up me-1"></i> {{ $userGrowthPercentage }}%
                                    </span>
                                    <span class="text-muted">this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon bg-success-lt me-3">
                                    <i class="ti ti-music text-success"></i>
                                </div>
                                <div>
                                    <div class="text-muted fs-5">Total Songs</div>
                                    <div class="h3 m-0">{{ $totalSongs }}</div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="d-flex align-items-center">
                                    <span class="text-success d-inline-flex align-items-center lh-1 me-2">
                                        <i class="ti ti-trending-up me-1"></i> {{ $songGrowthPercentage }}%
                                    </span>
                                    <span class="text-muted">this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon bg-warning-lt me-3">
                                    <i class="ti ti-currency-dollar text-warning"></i>
                                </div>
                                <div>
                                    <div class="text-muted fs-5">Revenue</div>
                                    <div class="h3 m-0">Rp. {{ $totalRevenue }}</div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="d-flex align-items-center">
                                    <span class="text-success d-inline-flex align-items-center lh-1 me-2">
                                        <i class="ti ti-trending-up me-1"></i> {{ $revenueGrowthPercentage }}%
                                    </span>
                                    <span class="text-muted">this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon bg-danger-lt me-3">
                                    <i class="ti ti-headphones text-danger"></i>
                                </div>
                                <div>
                                    <div class="text-muted fs-5">Streams</div>
                                    <div class="h3 m-0">{{ $totalStreams }}</div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="d-flex align-items-center">
                                    <span class="text-success d-inline-flex align-items-center lh-1 me-2">
                                        <i class="ti ti-trending-up me-1"></i> {{ $streamGrowthPercentage }}%
                                    </span>
                                    <span class="text-muted">this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->



            <div class="row">
                <div class="col-lg-12">

                    <div class="row">

                        <div class="col-12">
                            <div class="p-2" style="background-color: var(--tblr-white);">
                                @php
                                    $tab = request('tab');
                                @endphp
                                <ul class="nav nav-tabs " id="stepNav" data-tab="{{ $tab ?? '' }}">
                                    <li class="nav-item">
                                        <a class="nav-link fs-4 active" id="tab-belum-release" data-name="step1"
                                            data-bs-toggle="pill" href="#step1">Belum Release</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link fs-4" id="tab-sudah-release" data-name="step2"
                                            data-bs-toggle="pill" href="#step2">
                                            Sudah Release</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link fs-4" id="tab-transaksi" data-name="step2" data-bs-toggle="pill"
                                            href="#step3">
                                            Transaksi</a>
                                    </li>
                                </ul>

                            </div>
                        </div>


                    </div>

                    <div class="row row-cards">
                        <div class="col-12">

                            <div class="tab-content card">
                                <div class="tab-pane fade show active" id="step1">

                                    <div class="card-header">
                                        <h3 class="card-title">Informasi Lagu Belum Release</h3>
                                    </div>
                                    <div class="card-body border-bottom py-3">

                                        <div class="d-flex py-3">
                                            <div class="text-muted">
                                                Show
                                                <div class="mx-2 d-inline-block">
                                                    <select class="form-select form-select-sm">
                                                        <option value="5">5</option>
                                                        <option value="10" selected>10</option>
                                                        <option value="20">20</option>
                                                        <option value="50">50</option>
                                                    </select>
                                                </div>
                                                entries
                                            </div>
                                            <div class="ms-auto text-muted">
                                                Cari:
                                                <div class="ms-2 d-inline-block">
                                                    <input type="text" class="form-control form-control-sm"
                                                        aria-label="Cari lagu">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table table-vcenter card-table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>Title</th>
                                                        <th>Composer</th>
                                                        <th>Status</th>
                                                        <th class="w-1"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($songBeforeRelease as $song)
                                                        <tr style="cursor: pointer;">
                                                            <td data-id="{{ $song->id }}"
                                                                onclick="showSongDetail(this)">
                                                                <div class="d-flex align-items-center">
                                                                    @php
                                                                        $imageUrl = $imageUrl = app(
                                                                            \App\Services\SongServices::class,
                                                                        )->getCoverImageS3($song, 'sm');
                                                                    @endphp

                                                                    <span class="avatar me-2"
                                                                        style="background-image: url({{ $imageUrl }})"></span>
                                                                    <div class="d-flex flex-column">

                                                                        <div>{{ $song->title }}</div>
                                                                        <div class="small text-secondary">
                                                                            @php
                                                                                $genre = \App\Models\Genre::find(
                                                                                    $song->genre_id,
                                                                                );
                                                                            @endphp
                                                                            {{ $genre->name ?? '-' }}
                                                                        </div>

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

                                                                {{ $song->songContributors->pluck('user.name')->filter()->implode(', ') }}
                                                            </td>
                                                            <td style="width:240px;">
                                                                @php
                                                                    $status = $song->status;
                                                                    $types = $song->types;
                                                                @endphp

                                                                <span class="badge bg-danger">{{ $status }}</span>

                                                                <span
                                                                    class="badge bg-danger ms-1">{{ $types }}</span>

                                                            </td>
                                                            <td>
                                                                <div class="dropdown">
                                                                    <button class="btn btn-icon 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('admin.reports.dafkomlagu', ['id' => $song->id]) }}"
                                                                            target="_blank" class="dropdown-item">
                                                                            <i class="ti ti-download me-2"></i>Rep. Daftar
                                                                            Komposisi Lagu
                                                                        </a> --}}
                                                                        {{-- <a href="#" class="dropdown-item">
                                                                            <i class="ti ti-edit me-2"></i>Edit
                                                                        </a> --}}
                                                                        <a href="{{ route('admin.songs.show', ['id' => $song->id, 'from' => 'dashboard']) }}"
                                                                            class="dropdown-item">
                                                                            <i class="ti ti-player-play me-2"></i>Preview
                                                                        </a>

                                                                        {{-- <a href="#"
                                                                            class="dropdown-item text-danger">
                                                                            <i class="ti ti-trash me-2"></i>Delete
                                                                        </a> --}}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach


                                                </tbody>
                                            </table>
                                            <div class="w-100" style="height: 150px;"></div>
                                        </div>


                                    </div>

                                </div>
                                <div class="tab-pane fade " id="step2">

                                    <div class="card-header">
                                        <h3 class="card-title">Informasi Lagu Release</h3>
                                    </div>
                                    <div class="card-body border-bottom py-3">

                                        <div class="d-flex py-3">
                                            <div class="text-muted">
                                                Show
                                                <div class="mx-2 d-inline-block">
                                                    <select class="form-select form-select-sm">
                                                        <option value="5">5</option>
                                                        <option value="10" selected>10</option>
                                                        <option value="20">20</option>
                                                        <option value="50">50</option>
                                                    </select>
                                                </div>
                                                entries
                                            </div>
                                            <div class="ms-auto text-muted">
                                                Cari:
                                                <div class="ms-2 d-inline-block">
                                                    <input type="text" class="form-control form-control-sm"
                                                        aria-label="Cari lagu">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table table-vcenter card-table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>Title</th>
                                                        <th>Composer</th>
                                                        <th>Artist</th>
                                                        <th>Status</th>
                                                        <th class="w-1"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($songRelease as $song)
                                                        <tr style="cursor: pointer;">
                                                            <td data-id="{{ $song->id }}"
                                                                onclick="showSongDetail(this)">
                                                                <div class="d-flex align-items-center">
                                                                    @php
                                                                        $composerName = '';
                                                                        $artistName = '';
                                                                    @endphp
                                                                    @foreach ($song->songContributors as $itemctb)
                                                                        @php
                                                                            $role = $itemctb->role;
                                                                            if ($role == 'Composer') {
                                                                                $composerName = $itemctb->user->name;
                                                                            }

                                                                            if (
                                                                                $role == 'Artist' ||
                                                                                $role == 'Cover Creator'
                                                                            ) {
                                                                                $artistName = $itemctb->user->name;
                                                                            }
                                                                        @endphp
                                                                    @endforeach

                                                                    @php
                                                                        $imageUrl = $imageUrl = app(
                                                                            \App\Services\SongServices::class,
                                                                        )->getCoverImageS3($song, 'sm');
                                                                    @endphp

                                                                    <span class="avatar me-2"
                                                                        style="background-image: url('{{ $imageUrl }}')"></span>
                                                                    <div>{{ $song->title }}</div>
                                                                </div>
                                                            </td>
                                                            <td>{{ $composerName ?? '' }}</td>
                                                            <td>{{ $artistName ?? '' }}</td>
                                                            <td style="width:240px;">
                                                                @php
                                                                    $status = $song->status;
                                                                    $types = $song->types;
                                                                @endphp
                                                                <span class="badge bg-danger">{{ $status }}</span>
                                                                <span
                                                                    class="badge bg-dark ms-1">{{ $types }}</span>

                                                            </td>
                                                            <td>
                                                                <div class="dropdown">
                                                                    <button class="btn btn-icon btn-ghost-secondary"
                                                                        data-bs-toggle="dropdown">
                                                                        <i class="ti ti-dots-vertical"></i>
                                                                    </button>
                                                                    <div class="dropdown-menu dropdown-menu-end">
                                                                        {{-- <a href="#" class="dropdown-item">
                                                                            <i class="ti ti-edit me-2"></i>Edit
                                                                        </a> --}}

                                                                        <a href="{{ route('admin.songs.show', ['id' => $song->id, 'from' => 'dashboard']) }}"
                                                                            class="dropdown-item">
                                                                            <i class="ti ti-player-play me-2"></i>Preview
                                                                        </a>


                                                                        {{-- <a href="#"
                                                                            class="dropdown-item text-danger">
                                                                            <i class="ti ti-trash me-2"></i>Delete
                                                                        </a> --}}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach


                                                </tbody>
                                            </table>
                                            <div class="w-100" style="height: 150px;"></div>
                                        </div>


                                    </div>

                                </div>
                                <div class="tab-pane fade " id="step3">
                                    <div class="card-header">
                                        <h3 class="card-title">Informasi Transaksi</h3>
                                    </div>
                                    <div class="card-body border-bottom py-3">
                                        <div class="d-flex py-3">
                                            <div class="text-muted">
                                                Show
                                                <div class="mx-2 d-inline-block">
                                                    <select class="form-select form-select-sm">
                                                        <option value="5">5</option>
                                                        <option value="10" selected>10</option>
                                                        <option value="20">20</option>
                                                        <option value="50">50</option>
                                                    </select>
                                                </div>
                                                entries
                                            </div>
                                            <div class="ms-auto text-muted">
                                                Cari:
                                                <div class="ms-2 d-inline-block">
                                                    <input type="text" class="form-control form-control-sm"
                                                        aria-label="Cari lagu">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table table-vcenter card-table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>Order</th>
                                                        <th>Client</th>
                                                        <th>Description</th>
                                                        <th>Amount</th>
                                                        <th>Status</th>
                                                        <th class="w-1"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse ($orders as $item)
                                                        @php
                                                            $orderId = $item->id;
                                                            $avatar = app('App\Services\UserServices')->getAvatar(
                                                                $item->user,
                                                                'sm',
                                                            );
                                                            $imgConfirm = app(
                                                                'App\Services\PaymentServices',
                                                            )->getConfirmImageLocal($item, 'sm');
                                                            $coverImage = null;
                                                            $fullName = $item->user->name;
                                                            $phone = $item->user->phone;
                                                            $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
                                                                    ->filter(function ($contributor) {
                                                                        return $contributor->role === 'Composer';
                                                                    })
                                                                    ->pluck('user.name')
                                                                    ->implode(', ');
                                                            @endphp
                                                        @endforeach

                                                        <tr class="small" style="cursor: pointer;">
                                                            <td style="width: 150px;" data-id="{{ $item->id }}"
                                                                onclick="showOrderDetail(this)">
                                                                <div class="d-flex flex-column">
                                                                    <span
                                                                        class="badge text-bg-light mb-1 fs-5">{{ $item->order_no . ' ' }}</span>
                                                                    <span
                                                                        class="badge text-bg-light">{{ $item->created_at->format('d-m-Y H:i') }}</span>


                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="me-1">
                                                                        <img src="{{ $avatar }}"
                                                                            alt="{{ $fullName }}" class="rounded-3"
                                                                            style="width: 32px;">
                                                                    </div>
                                                                    <div class="d-flex flex-column">
                                                                        <div>{{ $fullName }}</div>
                                                                        <div class="small text-muted">+{{ $phone }}
                                                                        </div>



                                                                    </div>



                                                                </div>
                                                                <div class="d-flex mt-1">
                                                                    <div class="me-1" style="width: 32px;">
                                                                    </div>
                                                                    @if (!empty($item->confirm_file))
                                                                        <div class="d-flex flex-column">
                                                                            <div class="small px-1 rounded bg-warning-subtle"
                                                                                style="max-width:200px;">
                                                                                {{ str_limit($item->confirm_message, 250) }}
                                                                            </div>
                                                                            <div class="rounded-3 mt-1"
                                                                                style="width:32px;height:32px;background-image: url('{{ $imgConfirm }}');background-repeat:no-repeat;background-position:center;background-size:cover;margin-right:8px;">
                                                                            </div>

                                                                        </div>
                                                                    @endif

                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="d-flex">
                                                                    <div
                                                                        class="d-flex justify-content-center align-items-center">

                                                                        <div class="rounded-3"
                                                                            style="width:52px;height:52px;background-image: url('{{ $coverImage }}');background-repeat:no-repeat;background-position:center;background-size:cover;margin-right:8px;">
                                                                        </div>

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

                                                                        <div class="fw-bold" style="font-size: 13px;">
                                                                            {{ isset($license_type) ? trim($license_type . ' ' . $time_amount . ' ' . $time_type . '(' . $zone . ')') : '' }}

                                                                        </div>
                                                                        <div style="font-size: 12px;">
                                                                            {{ $songTitle ?? '' }}
                                                                        </div>
                                                                        <div style="font-size: 10px;">Cipt.
                                                                            {{ $composerNames ?? '' }}
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                            </td>
                                                            <td>
                                                                <div class="d-flex justify-content-end">

                                                                    @if (isset($payment_type))
                                                                        @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
                                                                    @endif

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

                                                                <span
                                                                    class="badge text-bg-danger fs-5 mt-1">{{ strtolower($item->payment_method_name) }}</span>
                                                            </td>
                                                            <td>
                                                                <div class="dropdown">
                                                                    <button class="btn btn-icon 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('admin.reports.dafkomlagu', ['id' => $song->id]) }}"
                                                                            target="_blank" class="dropdown-item">
                                                                            <i class="ti ti-download me-2"></i>Rep. Daftar
                                                                            Komposisi Lagu
                                                                        </a> --}}
                                                                        {{-- <a href="#" class="dropdown-item">
                                                                            <i class="ti ti-edit me-2"></i>Edit
                                                                        </a> --}}
                                                                        {{-- <a href="{{ route('admin.songs.show', ['id' => $song->id, 'from' => 'dashboard']) }}"
                                                                            class="dropdown-item">
                                                                            <i class="ti ti-player-play me-2"></i>Preview
                                                                        </a> --}}

                                                                        @if ($item->payment_status != 'paid')
                                                                            <a href="javascript:void(0)"
                                                                                onclick="approveOrder('{{ $orderId }}','tab-transaksi')"
                                                                                data-orderid="{{ $orderId }}"
                                                                                class="dropdown-item">
                                                                                <i class="ti ti-checkbox me-2"></i>
                                                                                Lunaskan
                                                                            </a>
                                                                        @endif

                                                                        <form id="approve-order-form-{{ $orderId }}"
                                                                            action="{{ route('admin.orders.approve', ['id' => $orderId]) }}"
                                                                            method="POST" class="d-none">
                                                                            @csrf
                                                                        </form>

                                                                        <a href="javascript:void(0)"
                                                                            data-orderid="{{ $orderId }}"
                                                                            onclick="confirmCancelOrder('{{ $orderId }}','tab-transaksi')"
                                                                            class="dropdown-item text-danger">
                                                                            <i class="ti ti-flag me-2"></i>Batalkan
                                                                        </a>

                                                                        <form id="cancel-order-form-{{ $orderId }}"
                                                                            action="{{ route('admin.orders.cancel', ['id' => $orderId]) }}"
                                                                            method="POST" class="d-none">
                                                                            @csrf
                                                                            @method('PUT')
                                                                        </form>

                                                                        <a href="javascript:void(0)"
                                                                            data-orderid="{{ $orderId }}"
                                                                            onclick="confirmDeleteOrder('{{ $orderId }}')"
                                                                            class="dropdown-item text-danger">
                                                                            <i class="ti ti-trash me-2"></i>Hapus
                                                                        </a>

                                                                        <form id="delete-order-form-{{ $orderId }}"
                                                                            action="{{ route('admin.orders.destroy', ['id' => $orderId]) }}"
                                                                            method="POST" class="d-none">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                        </form>


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

                                                        </tr>


                                                    @empty
                                                    @endforelse
                                                </tbody>
                                            </table>

                                            <div class="w-100" style="height: 150px;"></div>
                                        </div>

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



                        </div>
                    </div>




                    {{-- <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Recent Songs</h3>
                            <div class="card-actions">
                                <a href="#" class="btn btn-link">View All</a>
                            </div>
                        </div>
                        <div class="card-body border-bottom py-3">
                            <div class="d-flex">
                                <div class="text-muted">
                                    Show
                                    <div class="mx-2 d-inline-block">
                                        <select class="form-select form-select-sm">
                                            <option value="5">5</option>
                                            <option value="10" selected>10</option>
                                            <option value="20">20</option>
                                            <option value="50">50</option>
                                        </select>
                                    </div>
                                    entries
                                </div>
                                <div class="ms-auto text-muted">
                                    Search:
                                    <div class="ms-2 d-inline-block">
                                        <input type="text" class="form-control form-control-sm"
                                            aria-label="Search songs">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-vcenter card-table table-hover">
                                <thead>
                                    <tr>
                                        <th>Title</th>
                                        <th>Artist</th>
                                        <th>Genre</th>
                                        <th>Uploaded</th>
                                        <th>Status</th>
                                        <th class="w-1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recentSongs as $song)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <span class="avatar me-2"
                                                        style="background-image: url(https://picsum.photos/40/40?random=1)"></span>
                                                    <div>{{ $song->title }}</div>
                                                </div>
                                            </td>
                                            <td>{{ $song->name }}</td>
                                            <td>{{ $song->genre }}</td>
                                            <td>{{ $song->uploaded }}</td>
                                            <td>
                                                @php
                                                    $status = $song->status;
                                                    $bgColor = 'bg-success';
                                                    if ($status == 'Active') {
                                                        $bgColor = 'bg-success';
                                                    } elseif ($status == 'Inactive') {
                                                        $bgColor = 'bg-danger';
                                                    } else {
                                                        $bgColor = 'bg-warning';
                                                    }
                                                @endphp
                                                <span class="badge bg-success">{{ $song->status }}</span>
                                            </td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-icon btn-ghost-secondary"
                                                        data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical"></i>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ti ti-edit me-2"></i>Edit
                                                        </a>
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ti ti-player-play me-2"></i>Preview
                                                        </a>
                                                        <a href="#" class="dropdown-item text-danger">
                                                            <i class="ti ti-trash me-2"></i>Delete
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach


                                </tbody>
                            </table>
                        </div>

                        <div class="card-footer d-flex align-items-center">
                            <p class="m-0 text-muted">Showing <span>1</span> to <span>5</span> of <span>25</span> entries
                            </p>
                            <ul class="pagination m-0 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>
                    </div> --}}



                </div>


            </div>

            <div class="row mt-3">
                <div class="col-lg-8">

                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Pending Verifications</h3>
                            </div>
                            <div class="list-group list-group-flush">
                                <a href="{{ route('admin.verifications.index') }}"
                                    class="list-group-item list-group-item-action">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="avatar"
                                                style="background-image: url(https://ui-avatars.com/api/?name=John+Doe&background=e53935&color=fff)"></span>
                                        </div>
                                        <div class="col">
                                            <div class="text-body d-block">John Doe</div>
                                            <div class="d-block text-muted mt-n1">
                                                <span class="badge bg-warning text-dark">Artist Verification</span>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="ti ti-chevron-right text-muted"></i>
                                        </div>
                                    </div>
                                </a>
                                <a href="{{ route('admin.verifications.index') }}"
                                    class="list-group-item list-group-item-action">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="avatar"
                                                style="background-image: url(https://ui-avatars.com/api/?name=Jane+Smith&background=e53935&color=fff)"></span>
                                        </div>
                                        <div class="col">
                                            <div class="text-body d-block">Jane Smith</div>
                                            <div class="d-block text-muted mt-n1">
                                                <span class="badge bg-warning text-dark">Composer Verification</span>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="ti ti-chevron-right text-muted"></i>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Recent Claims</h3>
                                <div class="card-actions">
                                    <a href="{{ route('admin.claims.index') }}" class="btn btn-link">View All</a>
                                </div>
                            </div>
                            <div class="list-group list-group-flush">
                                @forelse($recentClaims ?? [] as $claim)
                                    <div class="list-group-item">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="avatar"
                                                    style="background-image: url(https://ui-avatars.com/api/?name={{ urlencode($claim->user->name) }}&background=e53935&color=fff)"></span>
                                            </div>
                                            <div class="col">
                                                <div class="d-flex justify-content-between">
                                                    <div>
                                                        <div class="text-body d-block">{{ $claim->song->title }}</div>
                                                        <div class="d-block text-muted mt-n1">
                                                            Claimed by {{ $claim->user->name }}
                                                        </div>
                                                    </div>
                                                    <div>
                                                        @if ($claim->status == 'pending')
                                                            <span class="badge bg-warning text-dark">Pending</span>
                                                        @elseif($claim->status == 'approved')
                                                            <span class="badge bg-success">Approved</span>
                                                        @elseif($claim->status == 'rejected')
                                                            <span class="badge bg-danger">Rejected</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <a href="{{ route('admin.claims.show', $claim) }}"
                                                    class="btn btn-icon btn-ghost-secondary">
                                                    <i class="ti ti-chevron-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="list-group-item">
                                        <div class="text-center py-3">
                                            <span class="text-muted">No recent claims</span>
                                        </div>
                                    </div>
                                @endforelse
                            </div>

                            @if (isset($recentClaims) && count($recentClaims) > 0)
                                <div class="card-footer">
                                    <a href="{{ route('admin.claims.create') }}" class="btn btn-primary w-100">
                                        <i class="ti ti-plus me-2"></i>Create New Claim
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>

                </div>
                <div class="col-lg-4">
                    <div class="row row-cards">

                        <div class="col-12">
                            <div class="card">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                                    <h5 class="mb-0">Top Genres</h5>
                                </div>
                                <div class="card-body">

                                    @php
                                        $bgClasses = [
                                            'bg-primary',
                                            'bg-warning',
                                            'bg-success',
                                            'bg-danger',
                                            'bg-secondary',
                                            'bg-info',
                                            'bg-dark',
                                        ];
                                        $number = 0;
                                    @endphp

                                    @foreach ($topGenres as $genreName => $genreData)
                                        @php
                                            $progressBg = $bgClasses[$number];
                                            if ($number > 6) {
                                                $number = 0;
                                            }
                                            $number++;
                                        @endphp
                                        <div class="mb-3">
                                            <div class="d-flex justify-content-between mb-1">
                                                <span>{{ $genreName }}</span>
                                                <span>{{ $genreData['percentage'] }}%</span>
                                            </div>
                                            <div class="progress" style="height: 8px;">
                                                <div class="progress-bar {{ $progressBg }}" role="progressbar"
                                                    style="width: {{ $genreData['percentage'] }}%"></div>
                                            </div>
                                        </div>
                                    @endforeach

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

                        <div class="col-12">

                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Recent Activities</h3>
                                </div>

                                <div class="list-group list-group-flush">
                                    @foreach ($recentActivities as $activity)
                                        <div class="list-group-item">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                                                    <div class="avatar avatar-rounded bg-primary-lt">
                                                        <i class="ti ti-upload text-primary"></i>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="text-body">{{ $activity->description }}</div>
                                                    <div class="text-muted">
                                                        {{ $activity->created_at->diffForHumans() }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>

                        </div>

                    </div>

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


@section('scripts')
    <script>
        // Additional dashboard-specific JavaScript can be added here
        document.addEventListener('DOMContentLoaded', function() {
            // Example of using SweetAlert for a dashboard action
            // const newSongBtn = document.querySelector('.btn-primary');
            // if (newSongBtn) {
            //     newSongBtn.addEventListener('click', function(e) {
            //         e.preventDefault();
            //         Swal.fire({
            //             title: 'Create New Song',
            //             html: `
        //             <input id="songTitle" class="swal2-input" placeholder="Song Title">
        //             <input id="songArtist" class="swal2-input" placeholder="Artist">
        //             <select id="songGenre" class="swal2-select">
        //                 <option value="">Select Genre</option>
        //                 <option value="pop">Pop</option>
        //                 <option value="rock">Rock</option>
        //                 <option value="hiphop">Hip Hop</option>
        //                 <option value="electronic">Electronic</option>
        //             </select>
        //         `,
            //             showCancelButton: true,
            //             confirmButtonText: 'Create',
            //             confirmButtonColor: '#e53935',
            //             focusConfirm: false,
            //             preConfirm: () => {
            //                 const title = document.getElementById('songTitle').value;
            //                 const artist = document.getElementById('songArtist').value;
            //                 const genre = document.getElementById('songGenre').value;

            //                 if (!title || !artist || !genre) {
            //                     Swal.showValidationMessage('Please fill all fields');
            //                 }

            //                 return {
            //                     title,
            //                     artist,
            //                     genre
            //                 };
            //             }
            //         }).then((result) => {
            //             if (result.isConfirmed) {
            //                 Swal.fire({
            //                     icon: 'success',
            //                     title: 'Song Created!',
            //                     text: `${result.value.title} by ${result.value.artist} has been created.`,
            //                     confirmButtonColor: '#e53935',
            //                 });
            //             }
            //         });
            //     });
            // }

            reloadPage();

        });

        window.reloadPage = function() {
            let tabId = $('#stepNav').attr('data-tab');
            if (tabId != '') {
                console.log('Reloading tab:', tabId);
                let tabEl = $('#' + tabId);
                if (tabEl.length) {
                    let tab = new bootstrap.Tab(tabEl[0]);
                    tab.show();
                }
            }
        }

        window.showSongDetail = function(el) {
            let id = el.dataset.id;
            let baseUrl = `{{ url('/admin/songs') }}`;
            let url = `${baseUrl}/${id}?from=dashboard`;
            window.location.href = url;
        }

        window.showOrderDetail = function(el) {
            let id = el.dataset.id;
            let baseUrl = `{{ url('/admin/order') }}`;
            let url = `${baseUrl}/${id}?from=dashboard`;
            window.location.href = url;
        }

        function confirmCancelOrder(id, tab) {
            Swal.fire({
                title: 'Yakin membatalkan data order ini?',
                html: "status order ini akan dibatalkan .<br> lagu yang berkaitan akan dihapus. <br> saldo yang berkaitan akan dikurangi. ",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Batalkan!'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('cancel-order-form-' + id).submit();
                }
            });

        }

        function approveOrder(id, tab) {
            Swal.fire({
                title: 'Yakin sukseskan data order ini?',
                text: "Status pembayaran dan order akan menjadi sukses. Dan produk menjadi milik user",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Sukseskan!'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('approve-order-form-' + id).submit();
                }
            });
        }

        function confirmDeleteOrder(id) {
            Swal.fire({
                title: 'Yakin menghapus data order ini?',
                text: "Data order dan semua yang berkaitan ini tidak dapat dikembalikan ? ",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus!'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-order-form-' + id).submit();
                }
            });
        }
    </script>
@endsection