<?php $__env->startSection('content'); ?>

<style>
/* =========================
   ANIMATION & BASE (FIXED OVERFLOW)
========================= */
.fade-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    will-change: opacity, transform;
}

.fade-section.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   CARDS & CONTAINERS
========================= */
.modern-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
}

@media (min-width: 640px) {
    .modern-card {
        border-radius: 24px;
    }
}

.modern-card:hover {
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
    border-color: rgba(203, 213, 225, 1);
}

.card-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

@media (min-width: 640px) {
    .card-header {
        padding: 1.5rem 1.75rem 1.25rem;
    }
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    color: #2563eb;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }
}

/* =========================
   INPUTS & FORM
========================= */
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.modern-input {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
    transition: all 0.2s ease;
    outline: none;
}

.modern-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.modern-input[readonly] {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

/* =========================
   BUTTONS
========================= */
.btn-primary-blue {
    height: 46px;
    padding: 0 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary-blue:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.btn-success-green {
    height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-success-green:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* =========================
   ALERTS
========================= */
.alert-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
</style>

<div class="max-w-5xl mx-auto px-3 sm:px-6 py-4 sm:py-8 space-y-6 font-['Inter',sans-serif]">

    <!-- NOTIFIKASI ALERTS -->
    <?php if(session('success')): ?>
        <div class="alert-success rounded-2xl px-4 py-3.5 flex items-center gap-3 text-xs sm:text-sm font-semibold shadow-sm fade-section">
            <span class="material-symbols-outlined text-[20px] text-emerald-600">check_circle</span>
            <span><?php echo e(session('success')); ?></span>
        </div>
    <?php elseif(session('error')): ?>
        <div class="alert-error rounded-2xl px-4 py-3.5 flex items-center gap-3 text-xs sm:text-sm font-semibold shadow-sm fade-section">
            <span class="material-symbols-outlined text-[20px] text-rose-600">error</span>
            <span><?php echo e(session('error')); ?></span>
        </div>
    <?php endif; ?>

    <form method="POST" action="<?php echo e(route('profile.update')); ?>" class="space-y-6">
        <?php echo csrf_field(); ?>
        <?php echo method_field('PATCH'); ?>

        <!-- SECTION 1: INFORMASI AKUN -->
        <section class="fade-section">
            <div class="modern-card overflow-hidden">
                <div class="card-header">
                    <div class="card-icon">
                        <span class="material-symbols-outlined text-[22px]">manage_accounts</span>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Informasi Profil</h2>
                        <p class="text-xs text-slate-500 mt-0.5">Detail identitas dan kontak akun kamu</p>
                    </div>
                </div>

                <div class="p-4 sm:p-7 grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5">
                    <!-- NAMA -->
                    <div>
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" value="<?php echo e($user->name); ?>" readonly class="modern-input">
                    </div>

                    <!-- EMAIL -->
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" value="<?php echo e($user->email); ?>" readonly class="modern-input">
                    </div>

                    <!-- NOMOR WHATSAPP -->
                    <div>
                        <label class="form-label">Nomor WhatsApp</label>
                        <input type="text" name="phone" value="<?php echo e(old('phone', $user->phone)); ?>" <?php echo e($user->phone ? 'readonly' : ''); ?> placeholder="08xxxxxxxxxx" class="modern-input">
                    </div>

                    <!-- ID TELEGRAM -->
                    <div>
                        <label class="form-label">ID Telegram</label>
                        <input type="text" name="telegram_id" value="<?php echo e(old('telegram_id', $user->telegram_id)); ?>" <?php echo e($user->telegram_id ? 'readonly' : ''); ?> placeholder="Masukkan ID Telegram" class="modern-input">

                        <?php $__errorArgs = ['telegram_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="text-rose-500 text-xs font-semibold mt-1 flex items-center gap-1">
                                <span class="material-symbols-outlined text-[14px]">error</span>
                                <?php echo e($message); ?>

                            </p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>

                        <a href="https://telegram.me/cekidtelegramn_bot" target="_blank" class="inline-flex items-center gap-1.5 mt-2.5 text-xs font-bold text-blue-600 hover:text-blue-700 transition">
                            <span class="material-symbols-outlined text-[16px]">send</span>
                            <span>Dapatkan ID Telegram</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- SECTION 2: INTEGRASI DEVELOPER (API & WEBHOOK) -->
        <section class="fade-section">
            <div class="modern-card overflow-hidden">
                <div class="card-header">
                    <div class="card-icon">
                        <span class="material-symbols-outlined text-[22px]">code</span>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Pengaturan Developer</h2>
                        <p class="text-xs text-slate-500 mt-0.5">Akses API Key dan konfigurasi Webhook URL</p>
                    </div>
                </div>

                <div class="p-4 sm:p-7 space-y-5">
                    <!-- API KEY -->
                    <div>
                        <label class="form-label">API Key</label>
                        <div class="relative">
                            <input type="password" id="apiKeyInput" value="<?php echo e(Auth::user()->api_key); ?>" readonly class="modern-input font-mono text-xs sm:text-sm pr-14">
                            <div class="absolute top-1/2 right-2 -translate-y-1/2">
                                <button type="button" id="toggleApiKey" class="icon-btn" title="Tampilkan / Salin">
                                    <span id="iconEye" class="material-symbols-outlined text-[18px]">visibility</span>
                                    <span id="iconCopy" class="material-symbols-outlined text-[18px] hidden">content_copy</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- WEBHOOK URL -->
                    <div>
                        <label class="form-label">Webhook URL</label>
                        <div class="flex flex-col sm:flex-row gap-3">
                            <input type="url" id="webhookInput" value="<?php echo e(Auth::user()->webhook_url); ?>" placeholder="https://yourdomain.com/webhook" class="modern-input flex-1">
                            <button type="button" id="saveWebhookBtn" class="btn-success-green shrink-0 w-full sm:w-auto">
                                <span class="material-symbols-outlined text-[18px]">save</span>
                                <span>Simpan Webhook</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- SECTION 3: KEAMANAN & PASSWORD -->
        <section class="fade-section">
            <div class="modern-card overflow-hidden">
                <div class="card-header">
                    <div class="card-icon">
                        <span class="material-symbols-outlined text-[22px]">lock</span>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Ubah Password</h2>
                        <p class="text-xs text-slate-500 mt-0.5">Pembaruan kata sandi untuk keamanan akun</p>
                    </div>
                </div>

                <div class="p-4 sm:p-7 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="form-label">Password Saat Ini</label>
                            <input type="password" name="current_password" placeholder="••••••••" class="modern-input">
                        </div>

                        <div>
                            <label class="form-label">Password Baru</label>
                            <input type="password" name="new_password" placeholder="••••••••" class="modern-input">
                        </div>
                    </div>

                    <div>
                        <label class="form-label">Konfirmasi Password Baru</label>
                        <input type="password" name="new_password_confirmation" placeholder="••••••••" class="modern-input">
                    </div>
                </div>
            </div>
        </section>

        <!-- SUBMIT BUTTON -->
        <div class="fade-section pt-2">
            <button type="submit" class="btn-primary-blue w-full">
                <span class="material-symbols-outlined text-[18px]">save_as</span>
                <span>Simpan Seluruh Perubahan</span>
            </button>
        </div>
    </form>

    <?php echo $__env->make('components.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const apiInput = document.getElementById('apiKeyInput');
    const toggleBtn = document.getElementById('toggleApiKey');
    const iconEye = document.getElementById('iconEye');
    const iconCopy = document.getElementById('iconCopy');

    let revealed = false;

    toggleBtn.addEventListener('click', () => {
        if (!revealed) {
            apiInput.type = 'text';
            iconEye.classList.add('hidden');
            iconCopy.classList.remove('hidden');
            revealed = true;

            setTimeout(() => {
                apiInput.type = 'password';
                iconEye.classList.remove('hidden');
                iconCopy.classList.add('hidden');
                revealed = false;
            }, 10000);
        } else {
            navigator.clipboard.writeText(apiInput.value).then(() => {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil Disalin!',
                    text: 'API Key telah disalin ke clipboard.',
                    timer: 1500,
                    showConfirmButton: false,
                    confirmButtonColor: '#091426',
                    customClass: { popup: 'rounded-2xl' }
                });
            });
        }
    });
});

document.getElementById('saveWebhookBtn').addEventListener('click', function () {
    const url = document.getElementById('webhookInput').value;

    fetch('/api/v2/set-webhook', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer <?php echo e(Auth::user()->api_key); ?>'
        },
        body: JSON.stringify({
            webhook_url: url
        })
    })
    .then(res => res.json())
    .then(res => {
        if (res.success) {
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: 'Webhook URL berhasil disimpan',
                timer: 1500,
                showConfirmButton: false,
                confirmButtonColor: '#091426',
                customClass: { popup: 'rounded-2xl' }
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: res.message || 'Terjadi kesalahan',
                confirmButtonColor: '#091426',
                customClass: { popup: 'rounded-2xl' }
            });
        }
    })
    .catch(() => {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Gagal melakukan request ke server',
            confirmButtonColor: '#091426',
            customClass: { popup: 'rounded-2xl' }
        });
    });
});

/* FADE OBSERVER (FIXED OVERFLOW BUG) */
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/nusaotp/public_html/resources/views/profile/edit.blade.php ENDPATH**/ ?>