@extends('layout')

@section('styles')
<style>
  .profile-header { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding:3rem 1rem; border-radius:12px; margin-bottom:2rem; }
  .avatar-box { width:120px; height:120px; border-radius:12px; overflow:hidden; border:4px solid rgba(255,255,255,0.2); display:inline-block; }
  .avatar-box img { width:100%; height:100%; object-fit:cover; }
  .card { border:none; box-shadow:0 2px 8px rgba(0,0,0,0.08); border-radius:12px; }
  .card-header { background:#f8f9fa; border-radius:12px 12px 0 0; border:none; font-weight:600; }
  .form-control, .form-select { border-radius:8px; border:1px solid #e0e0e0; }
  .form-control:focus, .form-select:focus { border-color:#667eea; box-shadow:0 0 0 0.2rem rgba(102,126,234,0.15); }
  .btn-primary { background:#667eea; border:none; border-radius:8px; }
  .btn-primary:hover { background:#5568d3; }
  
  /* Photo gallery zoom effect */
  .photo-gallery img { transition: transform 0.2s ease-in-out; }
  .photo-gallery img.zoomed { transform: scale(1.5); }
  .photo-gallery img:hover { opacity: 0.9; }
</style>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        
        <!-- Profile Header with Avatar -->
        <div class="profile-header">
            <div class="d-flex align-items-end gap-3">
                <div class="avatar-box">
                    @if($user->avatar)
                        <img src="{{ asset('storage/'.$user->avatar) }}" alt="{{ $user->name }}">
                    @else
                        <div style="width:100%; height:100%; background:#667eea; display:flex; align-items:center; justify-content:center; font-size:48px;">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </div>
                    @endif
                </div>
                <div>
                    <h2 class="mb-0">{{ $user->name }}</h2>
                    <p class="mb-0 text-white-50">@if($user->username)<strong>{{ $user->username }}</strong> — @endif {{ $user->email }}</p>
                    @php
                        $isTalent = (!empty($user->is_talent) || ($user->role ?? '') === 'talent');
                        $isAdminKota = ($user->role ?? '') === 'admin_kota';
                        $adminKota = $isTalent && $user->admin_kota_id ? \App\Models\User::find($user->admin_kota_id) : null;
                    @endphp
                    @if($isTalent && $adminKota)
                        <p class="mb-0 text-white-50 mt-2">
                            <i class="bi bi-shield-check"></i> <strong>Fasilitator Operasional:</strong> {{ $adminKota->username }}
                        </p>
                    @endif
                    @if($isTalent && $totalRatings > 0)
                        <p class="mb-0 text-white-50 mt-2">
                            <strong style="color: #FFD700;">★ {{ number_format($averageRating, 1) }}/5</strong> 
                            <span style="font-size: 0.9rem;">({{ $totalRatings }} ulasan)</span>
                        </p>
                    @endif
                    @if(!$isTalent)
                        <p class="mb-0 mt-2">
                            @if($isAdminKota)
                                <span class="badge bg-{{ $user->getAdminKotaLevelColor() }}">{{ $user->getAdminKotaLevelIcon() }} {{ $user->admin_kota_level ?? 'Pemula' }}</span>
                            @else
                                <span class="badge bg-{{ $user->getCustomerLevelColor() }}">{{ $user->getCustomerLevelLabel() }}</span>
                            @endif
                        </p>
                    @endif
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @php
            $isTalent = (!empty($user->is_talent) || ($user->role ?? '') === 'talent');
            $isAdminKota = ($user->role ?? '') === 'admin_kota';
        @endphp

        <!-- Non-talent: show Customer Level -->
        @if(!$isTalent)
            @if(!$isAdminKota)
                @php
                    $completedCount = $user->bookings()->where('status', 'completed')->count();
                    $levelColor = $user->customer_level === 'gold' ? '#FFD700' : ($user->customer_level === 'silver' ? '#C0C0C0' : '#CD7F32');
                    $levelIcon = $user->customer_level === 'gold' ? '🥇' : ($user->customer_level === 'silver' ? '🥈' : '🥉');
                    $bgClass = $user->customer_level === 'gold' ? 'bg-warning text-dark' : ($user->customer_level === 'silver' ? 'bg-info text-white' : 'bg-secondary text-white');
                @endphp
                <div class="card mb-4" style="border-left: 5px solid {{ $levelColor }};">
                    <div class="card-header" style="background: linear-gradient(135deg, {{ $levelColor }}20 0%, {{ $levelColor }}10 100%);">
                        <i class="bi bi-award" style="color: {{ $levelColor }};"></i> Status Member
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <p class="text-muted mb-1">Level Anda:</p>
                                <h4>
                                    <span class="badge {{ $bgClass }} p-3" style="font-size: 1.1rem;">
                                        {{ $levelIcon }} {{ $user->getCustomerLevelLabel() }}
                                    </span>
                                </h4>
                            </div>
                            <div class="col-md-6 mb-3">
                                <p class="text-muted mb-1">Mulai Sesi Selesai:</p>
                                <h4>{{ $completedCount }} <small class="text-muted">/ 100</small></h4>
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar" style="background: {{ $levelColor }}; width: {{ min(($completedCount / 100) * 100, 100) }}%;"></div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="small">
                            <div class="mb-2">
                                <span class="badge bg-secondary p-2">🥉 <strong>Bronze</strong></span>
                                <span class="text-muted">0-9 Mulai Sesi selesai</span>
                            </div>
                            <div class="mb-2">
                                <span class="badge bg-info p-2">🥈 <strong>Silver</strong></span>
                                <span class="text-muted">10-99 Mulai Sesi selesai</span>
                            </div>
                            <div>
                                <span class="badge bg-warning text-dark p-2">🥇 <strong>Gold VIP</strong></span>
                                <span class="text-muted">100+ Mulai Sesi selesai - Dapatkan diskon khusus!</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif

        <!-- Update Profile Card -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-pencil-square"></i> Update Profil
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('profile.updateProfile') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Nomor Telepon</label>
                            <input type="text" name="phone" class="form-control" value="{{ $user->phone }}" placeholder="masukkan nomor telepon">
                            @error('phone')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Jenis Kelamin</label>
                            <select name="gender" class="form-select">
                                <option value="">-- Pilih --</option>
                                <option value="male" {{ $user->gender === 'male' ? 'selected' : '' }}>♂ Pria</option>
                                <option value="female" {{ $user->gender === 'female' ? 'selected' : '' }}>♀ Wanita</option>
                                <!-- 'Other' option removed per request -->
                            </select>
                            @error('gender')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Ganti Avatar</label>
                            <input type="file" name="avatar" class="form-control" accept="image/*">
                            @error('avatar')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        @if($isTalent || $isAdminKota)
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Foto KTP (Depan)</label>
                            <input type="file" name="ktp" class="form-control" accept="image/*">
                            @error('ktp')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                            @if($user->ktp_path)
                                <div class="mt-2">
                                    <a href="{{ asset('storage/'.$user->ktp_path) }}" target="_blank">
                                        <img src="{{ asset('storage/'.$user->ktp_path) }}" alt="KTP" style="height:80px; border-radius:6px; object-fit:cover; border:1px solid #ddd;">
                                    </a>
                                </div>
                            @endif
                        </div>
                        @endif
                    </div>

                    @if($isTalent || $isAdminKota)
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Foto Selfie dengan KTP</label>
                            <input type="file" name="ktp_selfie" class="form-control" accept="image/*">
                            @error('ktp_selfie')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                            @if($user->ktp_selfie_path)
                                <div class="mt-2">
                                    <a href="{{ asset('storage/'.$user->ktp_selfie_path) }}" target="_blank">
                                        <img src="{{ asset('storage/'.$user->ktp_selfie_path) }}" alt="Selfie KTP" style="height:80px; border-radius:6px; object-fit:cover; border:1px solid #ddd;">
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                    @endif

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-submit" data-loading-text="Memperbarui...">
                            <i class="bi bi-check-circle"></i> Perbarui Profil
                        </button>
                        <a href="{{ route('profile.show') }}" class="btn btn-outline-secondary">Batal</a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Photo Gallery Section -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-images"></i> Galeri Foto (Max 4)
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-12">
                        <p class="text-muted small mb-2">Upload hingga 4 foto profil</p>
                        <form id="photoUploadForm" method="POST" action="{{ route('profile.uploadPhotos') }}" enctype="multipart/form-data" class="mb-3">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label fw-500">Pilih Foto</label>
                                <input type="file" name="photos[]" id="photoInput" class="form-control" accept="image/*" multiple>
                                <small class="text-muted d-block mt-1">Format: JPG, PNG, GIF. Ukuran max 5MB per foto.</small>
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm" id="uploadPhotoBtn">
                                <i class="bi bi-cloud-upload"></i> Upload Foto
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Display existing photos -->
                <div class="row g-2 photo-gallery">
                    @forelse($user->photos as $photo)
                    <div class="col-6 col-sm-4">
                        <div style="aspect-ratio: 1; overflow: hidden; border-radius: 8px; border: 1px solid #ddd;">
                            <img src="{{ asset('storage/'.$photo->photo_path) }}" alt="Photo" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.2s;">
                        </div>
                        <button type="button" class="btn btn-sm btn-danger w-100 mt-1" onclick="deletePhoto({{ $photo->id }})">
                            <i class="bi bi-trash"></i> Hapus
                        </button>
                    </div>
                    @empty
                    <!-- Dummy photos when empty -->
                    <div class="col-12">
                        <p class="text-muted text-center mb-3">Belum ada foto. Upload foto profil Anda sekarang.</p>
                        <div class="row g-2">
                            @for($i = 1; $i <= 4; $i++)
                            <div class="col-6 col-sm-4">
                                <div style="aspect-ratio: 1; overflow: hidden; border-radius: 8px; border: 2px dashed #ccc; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
                                    <div class="text-center">
                                        <i class="bi bi-image" style="font-size: 2rem; color: #999;"></i>
                                        <p class="text-muted small mt-2">Foto {{ $i }}</p>
                                    </div>
                                </div>
                            </div>
                            @endfor
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        @if($isTalent || $isAdminKota)
        <!-- Bank Details Card (Talent only) -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-bank"></i> Bank Account
            </div>
            <div class="card-body">
                @php
                    $hasBankData = !empty($user->bank_name) && !empty($user->bank_account_name) && !empty($user->bank_account_number);
                @endphp
                <form method="POST" action="{{ route('profile.updateProfile') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Nama Bank</label>
                            <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name', $user->bank_name) }}" placeholder="Contoh: BCA, Mandiri" {{ $hasBankData ? 'disabled' : '' }}>
                            @error('bank_name')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Atas Nama</label>
                            <input type="text" name="bank_account_name" class="form-control" value="{{ old('bank_account_name', $user->bank_account_name) }}" placeholder="Nama pemilik rekening" {{ $hasBankData ? 'disabled' : '' }}>
                            @error('bank_account_name')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Nomor Rekening</label>
                            <input type="text" name="bank_account_number" class="form-control" value="{{ old('bank_account_number', $user->bank_account_number) }}" placeholder="Nomor rekening" {{ $hasBankData ? 'disabled' : '' }}>
                            @error('bank_account_number')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        @if($hasBankData)
                            <button type="button" class="btn btn-primary btn-submit" id="editBankBtn">
                                <i class="bi bi-pencil"></i> Edit Bank
                            </button>
                        @else
                            <button type="submit" class="btn btn-primary btn-submit" data-loading-text="Menyimpan...">
                                <i class="bi bi-check-circle"></i> Simpan Bank
                            </button>
                        @endif
                    </div>
                </form>
                @if($hasBankData)
                    <div class="alert alert-info mt-3 mb-0">
                        <small><i class="bi bi-info-circle"></i> Data bank sudah tersimpan. Untuk mengubah data bank, hubungi admin.</small>
                    </div>
                @endif
            </div>
        </div>

        <!-- Modal for Bank Edit Notification -->
        <div class="modal fade" id="bankEditNotificationModal" tabindex="-1" aria-labelledby="bankEditNotificationModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-info">
                        <h5 class="modal-title" id="bankEditNotificationModalLabel"><i class="bi bi-info-circle"></i> Perubahan Data Bank</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Data bank Anda sudah tersimpan dan tidak dapat diubah oleh Anda sendiri.</p>
                        <p class="mb-0"><strong>Hanya Admin yang dapat mengubah data bank Anda.</strong></p>
                        <p class="text-muted small mt-2">Silahkan hubungi admin jika ingin mengubah data bank Anda.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function(){
                var editBankBtn = document.getElementById('editBankBtn');
                if(editBankBtn){
                    editBankBtn.addEventListener('click', function(e){
                        e.preventDefault();
                        var modal = new bootstrap.Modal(document.getElementById('bankEditNotificationModal'));
                        modal.show();
                    });
                }
            });
        </script>

         <!-- NPWP Details Card (Talent only) -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-file-text"></i> NPWP Details
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('profile.updateProfile') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Nama NPWP</label>
                            <input type="text" name="nama_npwp" class="form-control" value="{{ old('nama_npwp', $user->nama_npwp) }}" placeholder="Nama sesuai NPWP">
                            @error('nama_npwp')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                       
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Nomor NPWP</label>
                            <input type="text" name="nomor_npwp" class="form-control" value="{{ old('nomor_npwp', $user->nomor_npwp) }}" placeholder="Contoh: 12.345.678.9-012.345" inputmode="numeric" maxlength="25">
                            @error('nomor_npwp')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                            @php
                                $npwpInput = old('nomor_npwp', $user->nomor_npwp ?? '');
                                $digits = preg_replace('/\D+/', '', $npwpInput);
                                $formattedNpwp = '';
                                if ($digits !== '') {
                                    $d = $digits;
                                    $p1 = strlen($d) > 0 ? substr($d,0,2) : '';
                                    $p2 = strlen($d) > 2 ? substr($d,2,3) : '';
                                    $p3 = strlen($d) > 5 ? substr($d,5,3) : '';
                                    $p4 = strlen($d) > 8 ? substr($d,8,1) : '';
                                    $p5 = strlen($d) > 9 ? substr($d,9,3) : '';
                                    $p6 = strlen($d) > 12 ? substr($d,12,3) : '';
                                    $out = '';
                                    if($p1 !== '') $out .= $p1;
                                    if($p2 !== '') $out .= '.' . $p2;
                                    if($p3 !== '') $out .= '.' . $p3;
                                    if($p4 !== '') $out .= '.' . $p4;
                                    if($p5 !== '') $out .= '-' . $p5;
                                    if($p6 !== '') $out .= '.' . $p6;
                                    $formattedNpwp = $out;
                                }
                            @endphp
                            @if(!empty($npwpInput))
                                <div class="small text-muted mt-2">Preview: <strong>Orang Pribadi</strong> {{ $formattedNpwp }}</div>
                            @endif
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-submit" data-loading-text="Menyimpan...">
                            <i class="bi bi-check-circle"></i> Simpan NPWP
                        </button>
                    </div>
                </form>
            </div>
        </div>


        @endif

        @if($isAdminKota)
        <!-- Admin Kota Level Card -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-shield-check"></i> Admin Kota Level & Limit Mulai Sesi
            </div>
            <div class="card-body">
                @php
                    $akLevel = $user->admin_kota_level ?? 'Pemula';
                    $akIcon = $user->getAdminKotaLevelIcon();
                    
                    // Get booking limits from settings
                    $bookingLimitPemula = (int) \App\Models\Setting::get('booking_limit_pemula');
                    $bookingLimitProfesional = (int) \App\Models\Setting::get('booking_limit_profesional');
                    
                    // Get subscription fees from settings
                    $profesionalCost = (int) \App\Models\Setting::get('sub_fee_admin_kota_profesional_coins');
                    $prioritasCost = (int) \App\Models\Setting::get('sub_fee_admin_kota_prioritas_coins');
                    $profesionalActive = (bool) (\App\Models\Setting::where('key','sub_fee_admin_kota_profesional_coins')->first()->active ?? true);
                    $prioritasActive = (bool) (\App\Models\Setting::where('key','sub_fee_admin_kota_prioritas_coins')->first()->active ?? true);
                    $subscriptionExpires = $user->subscription_expires_at ? \Carbon\Carbon::parse($user->subscription_expires_at) : null;
                    $isExpired = $subscriptionExpires && $subscriptionExpires->isPast();
                    
                    // Get current wallet/coin balance
                    $wallet = \App\Models\Wallet::where('id_coin', $user->id)->first();
                    $currentCoins = $wallet ? $wallet->coins : 0;
                    
                    // Count bookings completed this month by talents under this admin_kota
                    $currentMonth = \Carbon\Carbon::now()->month;
                    $currentYear = \Carbon\Carbon::now()->year;
                    $bookingCount = \App\Models\Booking::whereHas('talent', function($q) {
                        $q->where('admin_kota_id', auth()->id());
                    })->where('status', 'completed')
                    ->whereMonth('created_at', $currentMonth)
                    ->whereYear('created_at', $currentYear)
                    ->count();
                    
                    // Determine limits based on current level
                    $currentBookingLimit = $akLevel === 'Pemula' ? $bookingLimitPemula : ($akLevel === 'Profesional' ? $bookingLimitProfesional : null);
                    
                    $bookingPercentage = $currentBookingLimit ? min(($bookingCount / $currentBookingLimit) * 100, 100) : 0;
                @endphp

                <div class="mb-3">
                    <p class="mb-1">Level saat ini: <strong>{{ $akIcon }} {{ $akLevel }}</strong>
                        @if($akLevel !== 'Pemula')
                            <span class="badge bg-success ms-2">Aktif</span>
                        @endif
                    </p>
                    
                    <p class="mb-1"><small class="text-muted"><i class="bi bi-coin"></i> <strong>Saldo Coin:</strong> <span id="currentCoins">{{ $currentCoins }}</span> coins</small></p>
                    
                    @if($subscriptionExpires && $akLevel !== 'Pemula')
                        <div class="alert alert-info mt-2 mb-0 small">
                            <i class="bi bi-calendar-event"></i>
                            @if($isExpired)
                                <strong>Langganan telah kadaluarsa</strong> pada {{ $subscriptionExpires->format('d M Y H:i') }}
                            @else
                                <strong>Berlaku sampai:</strong> {{ $subscriptionExpires->format('d M Y H:i') }}
                                <br><small class="text-muted">({{ $subscriptionExpires->diffForHumans() }})</small>
                            @endif
                        </div>
                    @endif
                </div>

                <hr>

                <!-- Current Level Status -->
                @if($akLevel !== 'Prioritas')
                <div class="mb-3">
                    <p class="mb-2"><strong>Status Limit Bulan Ini:</strong></p>
                    
                    <div class="mb-2">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <small><strong>📊 Mulai Sesi Selesai:</strong> {{ $bookingCount }}/{{ $currentBookingLimit }}</small>
                            <small class="text-muted">{{ round($bookingPercentage) }}%</small>
                        </div>
                        <div class="progress" style="height: 12px;">
                            <div class="progress-bar {{ $bookingPercentage >= 100 ? 'bg-danger' : ($bookingPercentage >= 80 ? 'bg-warning' : 'bg-success') }}" style="width: {{ $bookingPercentage }}%;"></div>
                        </div>
                    </div>
                    
                    @if($bookingPercentage >= 100)
                        <div class="alert alert-warning mt-2 mb-0 small">
                            <i class="bi bi-exclamation-triangle"></i> <strong>Limit tercapai!</strong> Komisi tidak akan diterima untuk Mulai Sesi yang melebihi limit bulan ini.
                        </div>
                    @elseif($bookingPercentage >= 80)
                        <div class="alert alert-info mt-2 mb-0 small">
                            <i class="bi bi-info-circle"></i> Anda sudah menggunakan {{ round($bookingPercentage) }}% limit Mulai Sesi.
                        </div>
                    @endif
                </div>

                <hr>
                @endif

                <div class="small text-muted mb-3">
                    <p class="mb-2"><strong>Struktur Level Admin Kota:</strong></p>
                    <ul class="mb-0">
                        <li><strong>Pemula:</strong> {{ $bookingLimitPemula }} Mulai Sesi/bulan - Komisi terbatas</li>
                        <li><strong>Profesional:</strong> {{ $bookingLimitProfesional }} Mulai Sesi/bulan - Komisi lebih besar</li>
                        <li><strong>Prioritas:</strong> Unlimited Mulai Sesi - Komisi penuh tanpa batasan</li>
                    </ul>
                    <div class="mt-2 p-2 bg-light rounded">
                        <small><i class="bi bi-info-circle"></i> <strong>Catatan:</strong> Jika Mulai Sesi melebihi limit bulan ini, komisi TIDAK akan diterima untuk pengiriman yang melebihi.</small>
                    </div>
                </div>

                <div class="d-flex gap-2 flex-wrap">
                    @if($akLevel === 'Pemula')
                        <form id="buy-profesional-form" method="POST" action="{{ route('admin_kota.subscription.buy') }}">
                            @csrf
                            <input type="hidden" name="level" value="Profesional">
                            <button type="button" class="btn btn-outline-primary" data-price="{{ $profesionalCost }}" data-level="Profesional" {{ $profesionalActive ? '' : 'disabled' }}>Upgrade ke Profesional ({{ $profesionalCost }} coins)</button>
                        </form>
                        <form id="buy-prioritas-form" method="POST" action="{{ route('admin_kota.subscription.buy') }}">
                            @csrf
                            <input type="hidden" name="level" value="Prioritas">
                            <button type="button" class="btn btn-outline-warning" data-price="{{ $prioritasCost }}" data-level="Prioritas" {{ $prioritasActive ? '' : 'disabled' }}>Upgrade ke Prioritas ({{ $prioritasCost }} coins)</button>
                        </form>
                    @elseif($akLevel === 'Profesional' && !$isExpired)
                        <form id="buy-prioritas-form" method="POST" action="{{ route('admin_kota.subscription.buy') }}">
                            @csrf
                            <input type="hidden" name="level" value="Prioritas">
                            <button type="button" class="btn btn-outline-warning" data-price="{{ $prioritasCost }}" data-level="Prioritas" {{ $prioritasActive ? '' : 'disabled' }}>Upgrade ke Prioritas ({{ $prioritasCost }} coins)</button>
                        </form>
                        <span class="text-muted small align-self-center">Langganan aktif, tunggu expire untuk turun level</span>
                    @elseif($akLevel === 'Prioritas' && !$isExpired)
                        <div class="alert alert-success mb-0">
                            <i class="bi bi-star-fill"></i> Anda di level tertinggi (Prioritas) - Unlimited Mulai Sesi!
                            <br><small>Langganan berakhir: {{ $subscriptionExpires->format('d M Y H:i') }}</small>
                        </div>
                    @elseif($isExpired)
                        <div class="alert alert-warning mb-0">
                            <i class="bi bi-exclamation-triangle"></i> Langganan Anda telah kadaluarsa
                            <br><small>Level akan kembali ke Pemula, silahkan upgrade kembali jika ingin melanjutkan</small>
                        </div>
                    @endif
                </div>

                <div class="small text-muted mt-3">
                    <i class="bi bi-info-circle"></i> Catatan: Langganan dibeli menggunakan coin dan berlaku per bulan. Setelah kadaluarsa, level kembali ke Pemula.
                </div>
            </div>
        </div>

        <!-- Insufficient Coins Warning Modal for Admin Kota -->
        <div class="modal fade" id="insufficientCoinsModal" tabindex="-1" aria-labelledby="insufficientCoinsModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-warning">
                        <h5 class="modal-title" id="insufficientCoinsModalLabel"><i class="bi bi-exclamation-triangle"></i> Saldo Coin Tidak Cukup</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p id="insufficientCoinsMessage"></p>
                        <div class="alert alert-warning mb-0">
                            <small><i class="bi bi-info-circle"></i> Silahkan tambah saldo coin Anda terlebih dahulu.</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Confirmation Modal for Admin Kota Subscription -->
        <div class="modal fade" id="adminKotaSubscriptionModal" tabindex="-1" aria-labelledby="adminKotaSubscriptionModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="adminKotaSubscriptionModalLabel">Konfirmasi Upgrade Admin Kota Level</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p id="akModalMessage"></p>
                        <p class="text-muted small">Biaya akan dipotong dari saldo coin Anda dan berlaku per bulan.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-primary" id="akConfirmBtn">Konfirmasi & Upgrade</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function(){
                // Get current coins - with fallback
                var coinsElement = document.getElementById('currentCoins');
                var currentCoinsBalance = coinsElement ? parseInt(coinsElement.textContent) : 0;
                
                var akModalElement = document.getElementById('adminKotaSubscriptionModal');
                var insufficientCoinsModalElement = document.getElementById('insufficientCoinsModal');
                
                if(!akModalElement || !insufficientCoinsModalElement){
                    return;
                }
                
                var akModal = new bootstrap.Modal(akModalElement);
                var insufficientCoinsModal = new bootstrap.Modal(insufficientCoinsModalElement);
                var akSelectedForm = null;

                // Handle admin kota subscription buttons specifically - select by form ID pattern
                var adminKotaForms = document.querySelectorAll('form[id*="buy-profesional-form"], form[id*="buy-prioritas-form"]');
                
                adminKotaForms.forEach(function(form, index){
                    var btn = form.querySelector('button[data-level]');
                    
                    if(btn){
                        btn.addEventListener('click', function(e){
                            e.preventDefault();
                            
                            var lvl = btn.getAttribute('data-level');
                            var price = parseInt(btn.getAttribute('data-price'));
                            
                            // Check if coins are sufficient
                            if(currentCoinsBalance < price){
                                document.getElementById('insufficientCoinsMessage').innerHTML = 
                                    'Saldo coin Anda hanya <strong>' + currentCoinsBalance + ' coins</strong>, tapi upgrade ke <strong>' + lvl + '</strong> membutuhkan <strong>' + price + ' coins</strong>.<br>Kurang <strong>' + (price - currentCoinsBalance) + ' coins</strong>.';
                                insufficientCoinsModal.show();
                                return;
                            }
                            
                            document.getElementById('akModalMessage').innerHTML = 
                                'Anda akan upgrade ke level <strong>' + lvl + '</strong> dengan harga <strong>' + price + ' coins</strong> per bulan.';
                            akSelectedForm = form;
                            akModal.show();
                        });
                    }
                });

                document.getElementById('akConfirmBtn').addEventListener('click', function(){
                    if(!akSelectedForm) return;
                    
                    var btn = this;
                    btn.disabled = true;
                    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Memproses...';
                    
                    var formData = new FormData(akSelectedForm);
                    
                    fetch('{{ route('admin_kota.subscription.buy') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: formData
                    }).then(response => {
                        if (!response.ok) {
                            return response.json().then(err => { throw err; });
                        }
                        return response.json();
                    }).then(data => {
                        try { akModal.hide(); } catch(e){}
                        alert(data.message || 'Upgrade berhasil!');
                        setTimeout(() => location.reload(), 1000);
                    }).catch(err => {
                        alert(err.message || 'Gagal melakukan upgrade');
                        btn.disabled = false;
                        btn.innerHTML = 'Konfirmasi & Upgrade';
                    });
                });
            });
        </script>
        @endif

        @if($isTalent)
        <!-- Talent Level / Subscription Card -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-award"></i> Talent Level & Langganan
            </div>
            <div class="card-body">
                @php
                    // Always get talent_level from database
                    $currentTalentLevel = $user->talent_level ?? 'expert';
                    $levelDisplay = $user->getTalentLevelLabel();
                    $levelIcon = $user->getTalentLevelIcon();
                    
                    // Get subscription fees from settings
                    $exclusiveCost = (int) \App\Models\Setting::get('sub_fee_exclusif_coins');
                    $eliteCost = (int) \App\Models\Setting::get('sub_fee_elite_coins');
                    $exclusiveActive = (bool) (\App\Models\Setting::where('key','sub_fee_exclusif_coins')->first()->active ?? true);
                    $eliteActive = (bool) (\App\Models\Setting::where('key','sub_fee_elite_coins')->first()->active ?? true);
                    $subscriptionExpires = $user->subscription_expires_at ? \Carbon\Carbon::parse($user->subscription_expires_at) : null;
                    $isExpired = $subscriptionExpires && $subscriptionExpires->isPast();
                @endphp

                <div class="mb-3">
                    <p class="mb-1">Level saat ini: <strong>{{ $levelIcon }} {{ $levelDisplay }}</strong>
                        @if($currentTalentLevel !== 'expert')
                            <span class="badge bg-success ms-2">Aktif</span>
                        @endif
                    </p>
                    
                    @if($subscriptionExpires && $currentTalentLevel !== 'expert')
                        <div class="alert alert-info mt-2 mb-0 small">
                            <i class="bi bi-calendar-event"></i>
                            @if($isExpired)
                                <strong>Langganan telah kadaluarsa</strong> pada {{ $subscriptionExpires->format('d M Y H:i') }}
                            @else
                                <strong>Berlaku sampai:</strong> {{ $subscriptionExpires->format('d M Y H:i') }}
                                <br><small class="text-muted">({{ $subscriptionExpires->diffForHumans() }})</small>
                            @endif
                        </div>
                    @endif
                </div>

                <div class="d-flex gap-2">
                    @if($currentTalentLevel === 'expert')
                        <form id="buy-exclusif-form" method="POST" action="{{ route('talent.subscription.buy') }}">
                            @csrf
                            <input type="hidden" name="level" value="exclusif">
                            <button type="button" class="btn btn-outline-primary" data-price="{{ $exclusiveCost }}" data-level="exclusif" {{ $exclusiveActive ? '' : 'disabled' }}>Upgrade ke Exclusif ({{ $exclusiveCost }} coins)</button>
                        </form>
                        <form id="buy-elite-form" method="POST" action="{{ route('talent.subscription.buy') }}">
                            @csrf
                            <input type="hidden" name="level" value="elite">
                            <button type="button" class="btn btn-outline-warning" data-price="{{ $eliteCost }}" data-level="elite" {{ $eliteActive ? '' : 'disabled' }}>Upgrade ke Elite ({{ $eliteCost }} coins)</button>
                        </form>
                    @elseif($currentTalentLevel === 'exclusif' && !$isExpired)
                        <form id="buy-elite-form" method="POST" action="{{ route('talent.subscription.buy') }}">
                            @csrf
                            <input type="hidden" name="level" value="elite">
                            <button type="button" class="btn btn-outline-warning" data-price="{{ $eliteCost }}" data-level="elite" {{ $eliteActive ? '' : 'disabled' }}>Upgrade ke Elite ({{ $eliteCost }} coins)</button>
                        </form>
                        <span class="text-muted small align-self-center">Langganan aktif, tunggu expire untuk turun level</span>
                    @elseif($currentTalentLevel === 'elite' && !$isExpired)
                        <div class="alert alert-success mb-0">
                            <i class="bi bi-star-fill"></i> Anda di level tertinggi (Elite)
                            <br><small>Langganan berakhir: {{ $subscriptionExpires->format('d M Y H:i') }}</small>
                        </div>
                    @elseif($isExpired)
                        <div class="alert alert-warning mb-0">
                            <i class="bi bi-exclamation-triangle"></i> Langganan Anda telah kadaluarsa
                            <br><small>Level akan kembali ke Expert, silahkan upgrade kembali jika ingin melanjutkan</small>
                        </div>
                    @endif
                </div>

                <div class="small text-muted mt-3">
                    <i class="bi bi-info-circle"></i> Catatan: Langganan dibeli menggunakan coin dan berlaku per bulan. Setelah kadaluarsa, level kembali ke Expert.
                </div>
            </div>
        </div>

        <!-- Confirmation Modal -->
        <div class="modal fade" id="subscriptionModal" tabindex="-1" aria-labelledby="subscriptionModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="subscriptionModalLabel">Konfirmasi Upgrade Talent Level</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p id="modalMessage"></p>
                        <p class="text-muted small">Biaya akan dipotong dari saldo coin Anda dan berlaku per bulan.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-primary" id="confirmBtn">Konfirmasi & Upgrade</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function(){
                var modal = new bootstrap.Modal(document.getElementById('subscriptionModal'));
                var selectedForm = null;

                // Handle talent subscription buttons (inside talent section)
                document.querySelectorAll('form[id*="buy-exclusif-form"], form[id*="buy-elite-form"]').forEach(function(form){
                    var btn = form.querySelector('button[data-level]');
                    if(btn){
                        btn.addEventListener('click', function(e){
                            e.preventDefault();
                            var lvl = btn.getAttribute('data-level');
                            var price = btn.getAttribute('data-price');
                            var lvlDisplay = lvl === 'exclusif' ? 'EXCLUSIF' : lvl.toUpperCase();
                            document.getElementById('modalMessage').innerHTML = 
                                'Anda akan upgrade ke level <strong>' + lvlDisplay + '</strong> dengan harga <strong>' + price + ' coins</strong> per bulan.';
                            selectedForm = form;
                            modal.show();
                        });
                    }
                });

                document.getElementById('confirmBtn').addEventListener('click', function(){
                    if(!selectedForm) return;
                    
                    var btn = this;
                    btn.disabled = true;
                    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Memproses...';
                    
                    var formData = new FormData(selectedForm);
                    
                    fetch('{{ route('talent.subscription.buy') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: formData
                    }).then(response => {
                        if (!response.ok) {
                            return response.json().then(err => { throw err; });
                        }
                        return response.json();
                    }).then(data => {
                        // Hide modal
                        try { modal.hide(); } catch(e){}
                        
                        // Show success alert
                        alert(data.message || 'Upgrade berhasil!');
                        
                        // Reload page after short delay
                        setTimeout(() => location.reload(), 1000);
                    }).catch(err => {
                        alert(err.message || 'Gagal melakukan upgrade');
                        btn.disabled = false;
                        btn.innerHTML = 'Konfirmasi & Upgrade';
                    });
                });
            });
        </script>
        @endif

        <!-- Change Password Card -->
        <div class="card">
            <div class="card-header">
                <i class="bi bi-lock"></i> Ubah Password
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('profile.updatePassword') }}">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-500">Password Saat Ini</label>
                        <input type="password" name="current_password" class="form-control" placeholder="Masukkan password saat ini" required>
                        @error('current_password')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Password Baru</label>
                            <input type="password" name="password" class="form-control" placeholder="Min. 6 karakter" required>
                            @error('password')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-500">Konfirmasi Password</label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Ulangi password baru" required>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-submit" data-loading-text="Memperbarui...">
                        <i class="bi bi-check-circle"></i> Ubah Password
                    </button>
                </form>
            </div>
        </div>

        <!-- Referral Share Link Card -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-share"></i> Share Link Referral
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">Bagikan link referral Anda untuk mendapatkan komisi 1% dari setiap transaksi yang dilakukan oleh orang yang mendaftar melalui link Anda.</p>
                <p class="text-muted small mb-3">Total user yang daftar via link Anda: <strong>{{ $referralRegistrations }}</strong></p>

                @if($referredUsers->count() > 0)
                <div class="mb-3">
                    <label class="form-label fw-500">User yang telah mendaftar via link Anda:</label>
                    <div class="list-group">
                        @foreach($referredUsers as $referredUser)
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ $referredUser->name }}</strong>
                                @if($referredUser->username)
                                    <small class="text-muted">({{ $referredUser->username }})</small>
                                @endif
                            </div>
                            <small class="text-muted">{{ $referredUser->created_at->format('d M Y') }}</small>
                        </div>
                        @endforeach
                    </div>
                    @if($referredUsers->hasPages())
                    <div class="mt-3 d-flex justify-content-center">
                        {{ $referredUsers->links('pagination::bootstrap-4') }}
                    </div>
                    @endif
                </div>
                @endif

                <div class="mb-3">
                    <label class="form-label fw-500">Link Referral Anda:</label>
                    <div class="input-group">
                        <input type="text" id="referralLink" class="form-control" readonly value="Loading...">
                        <button class="btn btn-outline-secondary" type="button" id="copyLinkBtn">
                            <i class="bi bi-clipboard"></i> Copy
                        </button>
                    </div>
                    <small class="text-muted mt-1 d-block">Pilih tipe pendaftaran untuk link:</small>
                    <div class="d-flex gap-2 mt-1">
                        <button class="btn btn-sm btn-outline-primary" id="setCustomerLink">Customer</button>
                        <button class="btn btn-sm btn-outline-success" id="setTalentLink">Talent</button>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-500">Bagikan ke:</label>
                    <div class="d-flex gap-2">
                        <button class="btn btn-success btn-sm" id="shareWhatsApp">
                            <i class="bi bi-whatsapp"></i> WhatsApp
                        </button>
                        <button class="btn btn-primary btn-sm" id="shareFacebook">
                            <i class="bi bi-facebook"></i> Facebook
                        </button>
                        <button class="btn btn-info btn-sm" id="shareTwitter">
                            <i class="bi bi-twitter"></i> Twitter
                        </button>
                    </div>
                </div>

                <div class="alert alert-info small">
                    <i class="bi bi-info-circle"></i> <strong>Info:</strong> Komisi 1% per transaksi. Setelah limit tercapai, Anda akan mendapat email notifikasi.
                </div>
            </div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
    const form = document.getElementById('photoUploadForm');
    const photoInput = document.getElementById('photoInput');
    const uploadBtn = document.getElementById('uploadPhotoBtn');
    
    if(!form) return;
    
    photoInput.addEventListener('change', function(){
        const files = photoInput.files;
        if(files.length > 4){
            alert('Maksimal 4 foto');
            photoInput.value = '';
            return;
        }
    });
    
    form.addEventListener('submit', function(e){
        e.preventDefault();
        
        const files = photoInput.files;
        if(files.length === 0){
            alert('Pilih minimal 1 foto');
            return;
        }
        
        if(files.length > 4){
            alert('Maksimal 4 foto');
            return;
        }
        
        uploadBtn.disabled = true;
        uploadBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Uploading...';
        
        const fd = new FormData(form);
        fetch(form.action, {
            method: 'POST',
            body: fd,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(r => r.json())
        .then(data => {
            if(data.success){
                alert('Foto berhasil diupload');
                location.reload();
            } else {
                alert(data.message || 'Gagal upload foto');
            }
        })
        .catch(err => {
            alert('Gagal upload foto');
        })
        .finally(() => {
            uploadBtn.disabled = false;
            uploadBtn.innerHTML = '<i class="bi bi-cloud-upload"></i> Upload Foto';
        });
    });

    // Zoom functionality for photos
    document.querySelectorAll('.photo-gallery img').forEach(img => {
        img.addEventListener('click', function(){
            this.classList.toggle('zoomed');
        });
    });
});

function deletePhoto(photoId){
    if(!confirm('Hapus foto ini?')) return;
    
    fetch(`/profile/photos/${photoId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(r => r.json())
    .then(data => {
        if(data.success){
            location.reload();
        } else {
            alert(data.message || 'Gagal hapus foto');
        }
    })
    .catch(err => {
        alert('Gagal hapus foto');
    });
}

// Referral Link Functionality
document.addEventListener('DOMContentLoaded', function(){
    const referralLinkInput = document.getElementById('referralLink');
    const copyBtn = document.getElementById('copyLinkBtn');
    const shareWhatsApp = document.getElementById('shareWhatsApp');
    const shareFacebook = document.getElementById('shareFacebook');
    const shareTwitter = document.getElementById('shareTwitter');
    const setCustomerLink = document.getElementById('setCustomerLink');
    const setTalentLink = document.getElementById('setTalentLink');

    let referralLink = '';
    let currentRole = 'customer'; // default

    // Generate referral link on page load
    generateLink();

    function generateLink(role = 'customer') {
        currentRole = role;
        fetch('/generate-referral', {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if(data.referral_link){
                referralLink = data.referral_link + (role !== 'customer' ? '?role=' + role : '');
                referralLinkInput.value = referralLink;
            } else {
                referralLinkInput.value = 'Gagal generate link';
            }
        })
        .catch(err => {
            referralLinkInput.value = 'Error loading link';
        });
    }

    // Set role buttons
    setCustomerLink.addEventListener('click', () => generateLink('customer'));
    setTalentLink.addEventListener('click', () => generateLink('talent'));

    // Copy to clipboard
    copyBtn.addEventListener('click', function(){
        if(referralLink) {
            navigator.clipboard.writeText(referralLink).then(() => {
                copyBtn.innerHTML = '<i class="bi bi-check"></i> Copied!';
                setTimeout(() => {
                    copyBtn.innerHTML = '<i class="bi bi-clipboard"></i> Copy';
                }, 2000);
            });
        }
    });

    // Share functions
    shareWhatsApp.addEventListener('click', function(){
        if(referralLink) {
            const text = encodeURIComponent('Daftar di aplikasi ini dan dapatkan diskon! ');
            const link = encodeURIComponent(referralLink);
            window.open(`https://wa.me/?text=${text}${link}`, '_blank');
        }
    });

    shareFacebook.addEventListener('click', function(){
        if(referralLink) {
            const link = encodeURIComponent(referralLink);
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${link}`, '_blank');
        }
    });

    shareTwitter.addEventListener('click', function(){
        if(referralLink) {
            const text = encodeURIComponent('Daftar di aplikasi ini dan dapatkan diskon! ');
            const link = encodeURIComponent(referralLink);
            window.open(`https://twitter.com/intent/tweet?text=${text}&url=${link}`, '_blank');
        }
    });
});
</script>
@endsection