@extends('layouts.admin')

@section('title', 'Master Musik Latar')
@section('page_title', 'Master Musik Latar Undangan')

@section('admin_content')
<div>
    <!-- Page Header -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Master Musik Latar Undangan</h1>
                <p class="ax-page-head__subtitle">Kelola katalog pilihan musik latar belakang (audio MP3) eksternal dan petakan ke tier paket yang diizinkan.</p>
            </div>
            <div class="ax-page-head__actions">
                <button type="button" onclick="openAddMusicModal()" class="ax-btn ax-btn--primary ax-btn--sm">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Tambah Musik Baru</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Alert Notifications -->
    @if(session('success'))
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(83,107,91,0.12); border:1px solid var(--ax-accent); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:var(--ax-accent); display:flex; align-items:center; gap:8px;">
            <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if($errors->any())
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.4); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:#b91c1c;">
            <ul style="margin:0; padding-left:16px;">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Filter & Search Toolbar -->
    <section class="ax-card" style="margin-bottom:var(--ax-space-5);">
        <div class="ax-card__body" style="padding:var(--ax-space-4);">
            <form action="{{ route('admin.musics') }}" method="GET" style="display:flex; flex-wrap:wrap; gap:var(--ax-space-3); align-items:center;">
                <!-- Pencarian Kata Kunci -->
                <div style="flex:1; min-width:220px; position:relative;">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari judul lagu, artis / penyanyi..." style="width:100%; padding:8px 12px 8px 32px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                    <i data-lucide="search" style="position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ax-text-muted);"></i>
                </div>

                <!-- Filter Kategori / Nuansa -->
                <div style="min-width:160px;">
                    <select name="category" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                        <option value="">Semua Kategori</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat }}" {{ request('category') === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Filter Tier Paket -->
                <div style="min-width:140px;">
                    <select name="tier" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                        <option value="">Semua Paket</option>
                        <option value="simple" {{ request('tier') === 'simple' ? 'selected' : '' }}>Paket Simple</option>
                        <option value="elegant" {{ request('tier') === 'elegant' ? 'selected' : '' }}>Paket Elegant</option>
                        <option value="premium" {{ request('tier') === 'premium' ? 'selected' : '' }}>Paket VIP</option>
                    </select>
                </div>

                <!-- Tombol Submit & Reset -->
                <div style="display:flex; gap:8px;">
                    <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">
                        <i data-lucide="filter" style="width:13px;height:13px;"></i>
                        <span class="ax-btn__label">Filter</span>
                    </button>
                    @if(request()->anyFilled(['search', 'category', 'tier']))
                        <a href="{{ route('admin.musics') }}" class="ax-btn ax-btn--secondary ax-btn--sm" title="Reset filter">
                            <i data-lucide="rotate-ccw" style="width:13px;height:13px;"></i>
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </section>

    <!-- Music Track Table -->
    <section class="ax-card">
        <div class="ax-card__header">
            <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Daftar Pustaka Musik</span>
                <h3 class="ax-card__title">Koleksi Musik Latar ({{ $musics->total() }} Lagu)</h3>
            </div>
            <div class="ax-card__actions">
                <span style="font-size:11px; color:var(--ax-text-muted);">Format: Link URL Audio MP3 Eksternal (Streaming Direct)</span>
            </div>
        </div>

        <div class="ax-card__body" style="padding:0;">
            <div style="overflow-x:auto;">
                <table style="width:100%; border-collapse:collapse; font-size:var(--ax-text-xs); text-align:left;">
                    <thead>
                        <tr style="border-bottom:1px solid var(--ax-border); background:rgba(83,107,91,0.03); color:var(--ax-text-muted); text-transform:uppercase; font-size:10px; letter-spacing:0.05em;">
                            <th style="padding:12px 16px; width:50px; text-align:center;">Dengar</th>
                            <th style="padding:12px 16px;">Judul &amp; Artis</th>
                            <th style="padding:12px 16px;">Kategori</th>
                            <th style="padding:12px 16px;">Tier Paket Diizinkan</th>
                            <th style="padding:12px 16px;">Status</th>
                            <th style="padding:12px 16px; width:80px; text-align:center;">Urutan</th>
                            <th style="padding:12px 16px; width:130px; text-align:right;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($musics as $item)
                            <tr style="border-bottom:1px solid var(--ax-border); transition:background 0.15s;" onmouseover="this.style.background='rgba(83,107,91,0.03)'" onmouseout="this.style.background='transparent'">
                                <!-- Tombol Dengar Audio Preview -->
                                <td style="padding:12px 16px; text-align:center;">
                                    <button type="button" onclick="playAdminPreview('{{ $item->audio_url }}', this)" class="btn-audio-preview" title="Putar Pratinjau Lagu" style="width:32px; height:32px; border-radius:50%; border:1px solid var(--ax-border); background:var(--ax-surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--ax-accent); transition:all 0.2s;">
                                        <i data-lucide="play" style="width:14px;height:14px; margin-left:2px;"></i>
                                    </button>
                                </td>

                                <!-- Judul & Artis -->
                                <td style="padding:12px 16px;">
                                    <div style="font-weight:700; color:var(--ax-text-strong); font-size:var(--ax-text-sm);">
                                        {{ $item->title }}
                                    </div>
                                    <div style="font-size:11px; color:var(--ax-text-muted); margin-top:2px; display:flex; align-items:center; gap:8px;">
                                        @if($item->artist)
                                            <span><i data-lucide="mic" style="width:11px;height:11px; display:inline-block; vertical-align:middle;"></i> {{ $item->artist }}</span>
                                        @endif
                                        <a href="{{ $item->audio_url }}" target="_blank" style="color:var(--ax-accent); text-decoration:none; display:inline-flex; align-items:center; gap:3px;" title="{{ $item->audio_url }}">
                                            <i data-lucide="external-link" style="width:11px;height:11px;"></i> Link MP3
                                        </a>
                                    </div>
                                </td>

                                <!-- Kategori -->
                                <td style="padding:12px 16px;">
                                    <span class="ax-badge ax-badge--pill" style="background:rgba(83,107,91,0.1); color:var(--ax-accent); font-size:11px; font-weight:600;">
                                        {{ $item->category ?? 'Umum' }}
                                    </span>
                                </td>

                                <!-- Tier Paket Diizinkan -->
                                <td style="padding:12px 16px;">
                                    <div style="display:flex; flex-wrap:wrap; gap:4px;">
                                        @if(empty($item->package_tiers))
                                            <span class="ax-badge ax-badge--pill" style="background:#e0f2fe; color:#0369a1; font-size:10px; font-weight:700;">Semua Paket</span>
                                        @else
                                            @foreach($item->package_tiers as $t)
                                                @php
                                                    $tierName = strtolower($t);
                                                    $bg = $tierName === 'premium' ? '#fef3c7' : ($tierName === 'elegant' ? '#f3e8ff' : '#e0e7ff');
                                                    $tc = $tierName === 'premium' ? '#92400e' : ($tierName === 'elegant' ? '#6b21a8' : '#3730a3');
                                                    $label = $tierName === 'premium' ? 'VIP' : ucfirst($tierName);
                                                @endphp
                                                <span class="ax-badge ax-badge--pill" style="background:{{ $bg }}; color:{{ $tc }}; font-size:10px; font-weight:700;">
                                                    {{ $label }}
                                                </span>
                                            @endforeach
                                        @endif
                                    </div>
                                </td>

                                <!-- Status Aktif & Default Demo -->
                                <td style="padding:12px 16px;">
                                    <div style="display:flex; flex-direction:column; gap:6px; align-items:flex-start;">
                                        <form action="{{ route('admin.musics.toggle', $item->id) }}" method="POST" style="margin:0;">
                                            @csrf
                                            <button type="submit" class="ax-badge ax-badge--pill" style="border:none; cursor:pointer; font-size:11px; font-weight:600; {{ $item->is_active ? 'background:rgba(83,107,91,0.15); color:var(--ax-accent);' : 'background:rgba(156,163,175,0.2); color:#6b7280;' }}" title="Klik untuk ubah status">
                                                {{ $item->is_active ? 'Aktif ✓' : 'Non-Aktif' }}
                                            </button>
                                        </form>

                                        @if($item->is_default)
                                            <span class="ax-badge ax-badge--solid" style="background:#b45309; color:#ffffff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:12px; display:inline-flex; align-items:center; gap:4px;" title="Lagu ini digunakan sebagai musik bawaan untuk semua template demo baru">
                                                <i data-lucide="sparkles" style="width:11px;height:11px;"></i>
                                                <span>Default Demo</span>
                                            </span>
                                        @else
                                            <form action="{{ route('admin.musics.set-default', $item->id) }}" method="POST" style="margin:0;">
                                                @csrf
                                                <button type="submit" class="ax-badge ax-badge--pill" style="border:1px dashed var(--ax-border); background:transparent; color:var(--ax-text-muted); cursor:pointer; font-size:10px; font-weight:600; padding:2px 6px;" title="Klik untuk jadikan lagu ini sebagai default demo semua template">
                                                    + Set Default
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>

                                <!-- Urutan -->
                                <td style="padding:12px 16px; text-align:center; color:var(--ax-text-muted);">
                                    {{ $item->sort_order }}
                                </td>

                                <!-- Aksi -->
                                <td style="padding:12px 16px; text-align:right;">
                                    <div style="display:inline-flex; align-items:center; gap:6px;">
                                        <!-- Edit Modal Trigger -->
                                        <button type="button" onclick="openEditMusicModal({{ json_encode($item) }})" class="ax-icon-btn" title="Edit Lagu" style="color:var(--ax-accent);">
                                            <i data-lucide="edit-3" style="width:15px;height:15px;"></i>
                                        </button>

                                        <!-- Hapus Form -->
                                        <form action="{{ route('admin.musics.delete', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus lagu ini dari pustaka?')" style="margin:0; display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="ax-icon-btn" title="Hapus Lagu" style="color:#ef4444;">
                                                <i data-lucide="trash-2" style="width:15px;height:15px;"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" style="padding:32px; text-align:center; color:var(--ax-text-muted);">
                                    <i data-lucide="music" style="width:36px;height:36px; margin:0 auto 8px; opacity:0.4; display:block;"></i>
                                    <p style="font-size:var(--ax-text-sm); font-weight:600; margin:0;">Belum ada master musik yang sesuai.</p>
                                    <p style="font-size:11px; margin:4px 0 0;">Klik tombol <strong>"Tambah Musik Baru"</strong> di atas untuk menambahkan link lagu.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($musics->hasPages())
                <div style="padding:var(--ax-space-4); border-top:1px solid var(--ax-border);">
                    {{ $musics->appends(request()->query())->links() }}
                </div>
            @endif
        </div>
    </section>

    <!-- MODAL FORM: TAMBAH MUSIK BARU -->
    <div id="addMusicModal" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:16px;">
        <div style="background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:var(--ax-radius-xl); width:100%; max-width:540px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);">
            <div style="padding:var(--ax-space-4) var(--ax-space-5); border-bottom:1px solid var(--ax-border); display:flex; justify-content:space-between; align-items:center;">
                <div>
                    <h3 class="font-heading" style="font-size:1.4rem; font-weight:700; margin:0; color:var(--ax-text-strong);">Tambah Master Musik Baru</h3>
                    <p style="font-size:11px; color:var(--ax-text-muted); margin:2px 0 0;">Masukkan informasi lagu &amp; direct link URL audio eksternal.</p>
                </div>
                <button type="button" onclick="closeAddMusicModal()" class="ax-icon-btn" style="color:var(--ax-text-muted);">
                    <i data-lucide="x" style="width:18px;height:18px;"></i>
                </button>
            </div>

            <form action="{{ route('admin.musics.store') }}" method="POST" style="padding:var(--ax-space-5);">
                @csrf
                <div style="display:flex; flex-direction:column; gap:var(--ax-space-4);">
                    <!-- Judul Lagu -->
                    <div>
                        <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Judul Lagu / Musik <span style="color:#ef4444;">*</span></label>
                        <input type="text" name="title" required placeholder="Contoh: A Thousand Years (Piano Instrumental)" style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                    </div>

                    <!-- Penyanyi & Kategori -->
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--ax-space-3);">
                        <div>
                            <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Penyanyi / Arranger</label>
                            <input type="text" name="artist" placeholder="Contoh: The Piano Guys" style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                        </div>
                        <div>
                            <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Kategori / Nuansa</label>
                            <input type="text" name="category" list="categoryOptions" placeholder="Pilih atau ketik..." style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                            <datalist id="categoryOptions">
                                @foreach($categories as $cat)
                                    <option value="{{ $cat }}"></option>
                                @endforeach
                            </datalist>
                        </div>
                    </div>

                    <!-- Link URL Audio MP3 Eksternal + Live Test Button -->
                    <div>
                        <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Link URL Audio MP3 (Direct Streaming) <span style="color:#ef4444;">*</span></label>
                        <div style="display:flex; gap:8px;">
                            <input type="url" id="addAudioUrlInput" name="audio_url" required placeholder="https://domain.com/path/song.mp3" style="flex:1; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); font-family:var(--ax-font-mono); background:var(--ax-surface); color:var(--ax-text-strong);">
                            <button type="button" onclick="testModalAudio('addAudioUrlInput', this)" class="ax-btn ax-btn--secondary ax-btn--sm" style="shrink:0;">
                                <i data-lucide="play" style="width:13px;height:13px;"></i>
                                <span class="ax-btn__label">Tes Audio</span>
                            </button>
                        </div>
                        <span style="font-size:10px; color:var(--ax-text-muted); display:block; margin-top:4px;">Pastikan link mengarah langsung ke file audio MP3 yang dapat diakses publik via HTTPS.</span>
                    </div>

                    <!-- Pemetaan Tier Paket (Checkboxes) -->
                    <div style="padding:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); background:rgba(83,107,91,0.03);">
                        <label style="display:block; font-size:11px; font-weight:700; margin-bottom:8px; text-transform:uppercase; color:var(--ax-text-muted);">Diizinkan Untuk Paket Tier</label>
                        <div style="display:flex; flex-wrap:wrap; gap:16px;">
                            <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); cursor:pointer;">
                                <input type="checkbox" name="package_tiers[]" value="simple" checked style="accent-color:var(--ax-accent);">
                                <span>Paket Simple</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); cursor:pointer;">
                                <input type="checkbox" name="package_tiers[]" value="elegant" checked style="accent-color:var(--ax-accent);">
                                <span>Paket Elegant</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); cursor:pointer;">
                                <input type="checkbox" name="package_tiers[]" value="premium" checked style="accent-color:var(--ax-accent);">
                                <span>Paket VIP (Premium)</span>
                            </label>
                        </div>
                        <span style="font-size:10px; color:var(--ax-text-muted); display:block; margin-top:6px;">Jika tidak ada yang dicentang, lagu otomatis tersedia untuk seluruh paket.</span>
                    </div>

                    <!-- Urutan & Status Aktif & Default Demo -->
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--ax-space-3); align-items:center;">
                        <div>
                            <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Urutan Tampilan</label>
                            <input type="number" name="sort_order" value="0" style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                        </div>
                        <div style="padding-top:16px; display:flex; flex-direction:column; gap:8px;">
                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer;">
                                <input type="checkbox" name="is_active" value="1" checked style="accent-color:var(--ax-accent); width:16px; height:16px;">
                                <span>Status Musik Aktif</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer; color:#b45309;">
                                <input type="checkbox" name="is_default" value="1" style="accent-color:#b45309; width:16px; height:16px;">
                                <span>Jadikan Default Demo Template</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div style="margin-top:var(--ax-space-5); display:flex; justify-content:flex-end; gap:8px;">
                    <button type="button" onclick="closeAddMusicModal()" class="ax-btn ax-btn--secondary ax-btn--sm">Batal</button>
                    <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">
                        <i data-lucide="check" style="width:14px;height:14px;"></i>
                        <span class="ax-btn__label">Simpan Musik</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL FORM: EDIT MUSIK -->
    <div id="editMusicModal" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:16px;">
        <div style="background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:var(--ax-radius-xl); width:100%; max-width:540px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);">
            <div style="padding:var(--ax-space-4) var(--ax-space-5); border-bottom:1px solid var(--ax-border); display:flex; justify-content:space-between; align-items:center;">
                <div>
                    <h3 class="font-heading" style="font-size:1.4rem; font-weight:700; margin:0; color:var(--ax-text-strong);">Edit Master Musik</h3>
                    <p style="font-size:11px; color:var(--ax-text-muted); margin:2px 0 0;">Perbarui detail lagu &amp; tier paket.</p>
                </div>
                <button type="button" onclick="closeEditMusicModal()" class="ax-icon-btn" style="color:var(--ax-text-muted);">
                    <i data-lucide="x" style="width:18px;height:18px;"></i>
                </button>
            </div>

            <form id="editMusicForm" action="" method="POST" style="padding:var(--ax-space-5);">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="editMusicHiddenId">
                <div style="display:flex; flex-direction:column; gap:var(--ax-space-4);">
                    <!-- Judul Lagu -->
                    <div>
                        <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Judul Lagu / Musik <span style="color:#ef4444;">*</span></label>
                        <input type="text" id="editTitle" name="title" required style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                    </div>

                    <!-- Penyanyi & Kategori -->
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--ax-space-3);">
                        <div>
                            <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Penyanyi / Arranger</label>
                            <input type="text" id="editArtist" name="artist" style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                        </div>
                        <div>
                            <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Kategori / Nuansa</label>
                            <input type="text" id="editCategory" name="category" list="categoryOptions" style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                        </div>
                    </div>

                    <!-- Link URL Audio MP3 Eksternal + Live Test Button -->
                    <div>
                        <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Link URL Audio MP3 (Direct Streaming) <span style="color:#ef4444;">*</span></label>
                        <div style="display:flex; gap:8px;">
                            <input type="url" id="editAudioUrlInput" name="audio_url" required style="flex:1; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); font-family:var(--ax-font-mono); background:var(--ax-surface); color:var(--ax-text-strong);">
                            <button type="button" onclick="testModalAudio('editAudioUrlInput', this)" class="ax-btn ax-btn--secondary ax-btn--sm" style="shrink:0;">
                                <i data-lucide="play" style="width:13px;height:13px;"></i>
                                <span class="ax-btn__label">Tes Audio</span>
                            </button>
                        </div>
                    </div>

                    <!-- Pemetaan Tier Paket (Checkboxes) -->
                    <div style="padding:12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); background:rgba(83,107,91,0.03);">
                        <label style="display:block; font-size:11px; font-weight:700; margin-bottom:8px; text-transform:uppercase; color:var(--ax-text-muted);">Diizinkan Untuk Paket Tier</label>
                        <div style="display:flex; flex-wrap:wrap; gap:16px;">
                            <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); cursor:pointer;">
                                <input type="checkbox" id="editTierSimple" name="package_tiers[]" value="simple" style="accent-color:var(--ax-accent);">
                                <span>Paket Simple</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); cursor:pointer;">
                                <input type="checkbox" id="editTierElegant" name="package_tiers[]" value="elegant" style="accent-color:var(--ax-accent);">
                                <span>Paket Elegant</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); cursor:pointer;">
                                <input type="checkbox" id="editTierPremium" name="package_tiers[]" value="premium" style="accent-color:var(--ax-accent);">
                                <span>Paket VIP (Premium)</span>
                            </label>
                        </div>
                    </div>

                    <!-- Urutan & Status Aktif & Default Demo -->
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--ax-space-3); align-items:center;">
                        <div>
                            <label style="display:block; font-size:11px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--ax-text-muted);">Urutan Tampilan</label>
                            <input type="number" id="editSortOrder" name="sort_order" style="width:100%; padding:9px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); color:var(--ax-text-strong);">
                        </div>
                        <div style="padding-top:16px; display:flex; flex-direction:column; gap:8px;">
                            <input type="hidden" name="is_active" value="0">
                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer;">
                                <input type="checkbox" id="editIsActive" name="is_active" value="1" style="accent-color:var(--ax-accent); width:16px; height:16px;">
                                <span>Status Musik Aktif</span>
                            </label>
                            <input type="hidden" name="is_default" value="0">
                            <label style="display:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer; color:#b45309;">
                                <input type="checkbox" id="editIsDefault" name="is_default" value="1" style="accent-color:#b45309; width:16px; height:16px;">
                                <span>Jadikan Default Demo Template</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div style="margin-top:var(--ax-space-5); display:flex; justify-content:flex-end; gap:8px;">
                    <button type="button" onclick="closeEditMusicModal()" class="ax-btn ax-btn--secondary ax-btn--sm">Batal</button>
                    <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">
                        <i data-lucide="check" style="width:14px;height:14px;"></i>
                        <span class="ax-btn__label">Simpan Perubahan</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Global Audio Player for Admin Previews -->
<audio id="adminGlobalAudioPlayer" style="display:none;"></audio>

<script>
    let currentPlayingBtn = null;
    const globalAudio = document.getElementById('adminGlobalAudioPlayer');

    function playAdminPreview(url, btnElement) {
        if (!url) return;

        if (currentPlayingBtn === btnElement && !globalAudio.paused) {
            // Sedang memutar lagu ini -> jeda
            globalAudio.pause();
            btnElement.innerHTML = '<i data-lucide="play" style="width:14px;height:14px; margin-left:2px;"></i>';
            btnElement.style.background = 'var(--ax-surface)';
            btnElement.style.color = 'var(--ax-accent)';
            lucide.createIcons();
            currentPlayingBtn = null;
            return;
        }

        // Reset tombol yang sebelumnya berputar
        if (currentPlayingBtn) {
            currentPlayingBtn.innerHTML = '<i data-lucide="play" style="width:14px;height:14px; margin-left:2px;"></i>';
            currentPlayingBtn.style.background = 'var(--ax-surface)';
            currentPlayingBtn.style.color = 'var(--ax-accent)';
        }

        // Putar lagu baru
        globalAudio.src = url;
        globalAudio.play().then(() => {
            currentPlayingBtn = btnElement;
            btnElement.innerHTML = '<i data-lucide="pause" style="width:14px;height:14px;"></i>';
            btnElement.style.background = 'var(--ax-accent)';
            btnElement.style.color = '#ffffff';
            lucide.createIcons();
        }).catch(err => {
            alert('Gagal memutar audio: ' + err.message + '\nPastikan link mengarah ke file MP3 yang valid.');
            btnElement.innerHTML = '<i data-lucide="play" style="width:14px;height:14px; margin-left:2px;"></i>';
            lucide.createIcons();
        });

        globalAudio.onended = function() {
            if (currentPlayingBtn) {
                currentPlayingBtn.innerHTML = '<i data-lucide="play" style="width:14px;height:14px; margin-left:2px;"></i>';
                currentPlayingBtn.style.background = 'var(--ax-surface)';
                currentPlayingBtn.style.color = 'var(--ax-accent)';
                lucide.createIcons();
                currentPlayingBtn = null;
            }
        };
    }

    function testModalAudio(inputId, btn) {
        const input = document.getElementById(inputId);
        if (!input || !input.value) {
            alert('Silakan masukkan link URL audio MP3 terlebih dahulu.');
            return;
        }
        playAdminPreview(input.value, btn);
    }

    function openAddMusicModal() {
        document.getElementById('addMusicModal').style.display = 'flex';
        lucide.createIcons();
    }

    function closeAddMusicModal() {
        document.getElementById('addMusicModal').style.display = 'none';
        if (!globalAudio.paused) globalAudio.pause();
    }

    const musicUpdateRouteTemplate = "{{ route('admin.musics.update', ['id' => 'PLACEHOLDER_ID']) }}";

    function openEditMusicModal(item) {
        const form = document.getElementById('editMusicForm');
        form.action = musicUpdateRouteTemplate.replace('PLACEHOLDER_ID', item.id);
        const hiddenId = document.getElementById('editMusicHiddenId');
        if (hiddenId) hiddenId.value = item.id;

        document.getElementById('editTitle').value = item.title || '';
        document.getElementById('editArtist').value = item.artist || '';
        document.getElementById('editCategory').value = item.category || '';
        document.getElementById('editAudioUrlInput').value = item.audio_url || '';
        document.getElementById('editSortOrder').value = item.sort_order || 0;
        document.getElementById('editIsActive').checked = !!item.is_active;
        document.getElementById('editIsDefault').checked = !!item.is_default;

        const tiers = item.package_tiers || [];
        document.getElementById('editTierSimple').checked = tiers.length === 0 || tiers.includes('simple');
        document.getElementById('editTierElegant').checked = tiers.length === 0 || tiers.includes('elegant');
        document.getElementById('editTierPremium').checked = tiers.length === 0 || tiers.includes('premium');

        document.getElementById('editMusicModal').style.display = 'flex';
        lucide.createIcons();
    }

    function closeEditMusicModal() {
        document.getElementById('editMusicModal').style.display = 'none';
        if (!globalAudio.paused) globalAudio.pause();
    }
</script>
@endsection