
<!DOCTYPE html><html class="light" lang="id"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
     <title>{{ config('app.name', 'Nusa OTP') }}</title>

    <link rel="icon" type="image/png" href="{{ asset('public/assets/icon-nusaotp.ico') }}">
    <link rel="apple-touch-icon" href="{{ asset('public/assets/icon-nusaotp.ico') }}">

    <meta property="og:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta property="og:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta property="og:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nusaotp.com">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta name="twitter:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta name="twitter:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
     <meta name="keywords" content="Nusa OTP, nomor virtual murah, Nusa OTP nokos, Nokos, beli nomor virtual, OTP murah, Nokos Indonesia, OTP Wa, nomor virtual, nomor WhatsApp, nomor Telegram, nomor Gmail, nomor registrasi, layanan verifikasi akun, platform nomor virtual, nomor online, nomor SMS verifikasi, nokos wa, nokos indonesia, nomor kosong, nomor virtual murah, otp murah, nokos wa murah, nokos wa, nomor kosong murah, nomor murah, beli nomor kosong, jasa nomor kosong murah, jasa nomor kosong, jasa otp murah, beli nomor kosong wa, nomor kosong">
    
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "on-tertiary-container": "#3fd298",
                    "on-secondary": "#ffffff",
                    "outline-variant": "#c4c5d5",
                    "on-secondary-fixed": "#001f26",
                    "tertiary-fixed": "#6ffbbe",
                    "outline": "#757684",
                    "surface-container-high": "#dce9ff",
                    "on-tertiary": "#ffffff",
                    "on-primary-container": "#a8b8ff",
                    "surface-container-lowest": "#ffffff",
                    "primary-container": "#1e40af",
                    "primary": "#00288e",
                    "on-background": "#0b1c30",
                    "on-tertiary-fixed-variant": "#005236",
                    "on-secondary-fixed-variant": "#004e5c",
                    "on-error-container": "#93000a",
                    "surface-container-highest": "#d3e4fe",
                    "on-tertiary-fixed": "#002113",
                    "inverse-on-surface": "#eaf1ff",
                    "tertiary-fixed-dim": "#4edea3",
                    "on-error": "#ffffff",
                    "surface-dim": "#cbdbf5",
                    "surface-container": "#e5eeff",
                    "background": "#f8f9ff",
                    "on-primary-fixed-variant": "#173bab",
                    "on-surface-variant": "#444653",
                    "tertiary-container": "#00563a",
                    "primary-fixed": "#dde1ff",
                    "on-secondary-container": "#006172",
                    "inverse-primary": "#b8c4ff",
                    "secondary": "#00687a",
                    "surface-tint": "#3755c3",
                    "on-primary": "#ffffff",
                    "surface-container-low": "#eff4ff",
                    "on-primary-fixed": "#001453",
                    "secondary-fixed-dim": "#4cd7f6",
                    "error-container": "#ffdad6",
                    "surface-bright": "#f8f9ff",
                    "inverse-surface": "#213145",
                    "tertiary": "#003d27",
                    "primary-fixed-dim": "#b8c4ff",
                    "surface": "#f8f9ff",
                    "secondary-fixed": "#acedff",
                    "secondary-container": "#57dffe",
                    "on-surface": "#0b1c30",
                    "surface-variant": "#d3e4fe",
                    "error": "#ba1a1a"
            },
            "borderRadius": {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
            },
            "spacing": {
                    "stack-md": "1rem",
                    "stack-lg": "1.5rem",
                    "section-gap": "2rem",
                    "gutter": "1rem",
                    "container-margin": "1rem",
                    "stack-sm": "0.5rem"
            },
            "fontFamily": {
                    "body-md": ["Inter"],
                    "body-lg": ["Inter"],
                    "label-md": ["Inter"],
                    "headline-lg": ["Inter"],
                    "headline-md": ["Inter"],
                    "number-display": ["Inter"],
                    "headline-lg-mobile": ["Inter"]
            },
            "fontSize": {
                    "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
                    "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                    "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
                    "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                    "headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
                    "number-display": ["24px", {"lineHeight": "32px", "letterSpacing": "0.1em", "fontWeight": "700"}],
                    "headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}]
            }
          },
        },
      }
    </script>
<style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9ff;
            -webkit-tap-highlight-color: transparent;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .custom-card {
            background-color: #ffffff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
            border: 1px solid rgba(0, 40, 142, 0.05);
        }
        .input-group:focus-within label {
            color: #00288e;
        }
        .safe-area-bottom {
            padding-bottom: calc(4rem + env(safe-area-inset-bottom));
        }
    </style>
</head>
<body class="bg-background text-on-surface">
<!-- TopAppBar Shell -->
@include('apk.partials.header')

@php
$user = Auth::user();
@endphp
<main class="pt-4 px-container-margin safe-area-bottom max-w-md mx-auto">
<!-- Profile Header Section -->
<section class="flex flex-col items-center py-6 mb-stack-lg">
<div class="relative group">
<div class="w-24 h-24 rounded-full overflow-hidden border-4 border-surface-container-high shadow-md">
<img class="w-full h-full object-cover" data-alt="A professional close-up studio portrait of a modern tech professional with a friendly smile, set against a clean minimalist blue-tinted gradient background. The lighting is soft and corporate, maintaining a high-contrast and high-clarity aesthetic that fits a secure financial application's profile section." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAWldYfjmBgkgcIgA9IjayLdxeqYAyy3uH1HsYFr-62ir4EAtDX7wMpAuII34H8tzJJM9q5VNEo7hlB_JyHCpSDJtRZ7di6Bx4XMohnPfyyw9gqcksx8nx5xRUWS8L9CF7a5FTmOYE7J_qQZcEp7Xgjs6oBd3-ufG-0SV53QLbjp-KIlHH25PIafOkJodM_qbaFfjllPa2Bs_hnTxKW__SCDkIolE8kSzXVwUMi7XPOer60ZU-TH6fgPdTucAEDQvfdzro2DWgoNDM-">
</div>

</div>
<div class="text-center mt-stack-md">
<h2 class="font-headline-md text-headline-md text-on-surface">
    {{ $user->name }}
</h2>

<p class="font-body-md text-body-md text-on-surface-variant">
    {{ $user->email }}
</p>
</div>
</section>
<form
    method="POST"
    action="{{ route('profile.update') }}"
    class="space-y-stack-lg">

    @csrf
    @method('PATCH')
<!-- Personal Information Section -->
<div class="custom-card rounded-xl p-stack-md">
<h3 class="font-label-md text-label-md text-primary mb-stack-md flex items-center gap-2">
<span class="material-symbols-outlined !text-[18px]">person</span>
                    INFORMASI PRIBADI
                </h3>
<div class="space-y-stack-md">
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">Nama Lengkap</label>
<input
name="name"
class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md"
type="text"
value="{{ $user->name }}"
readonly>
</div>
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">Email</label>
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" type="email" value="{{ $user->email }}" readonly>
</div>
<div class="grid grid-cols-2 gap-stack-md">
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">Nomor WhatsApp</label>
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" type="tel" name="phone"
value="{{ old('phone',$user->phone) }}"
{{ $user->phone ? 'readonly' : '' }}
placeholder="08xxxxxxxxxx">
</div>
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">ID Telegram</label>
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" type="text" name="telegram_id"
value="{{ old('telegram_id',$user->telegram_id) }}"
{{ $user->telegram_id ? 'readonly' : '' }}
placeholder="Masukkan Telegram ID">
</div>
</div>
</div>
</div>
<!-- Developer/API Section -->
<div class="custom-card rounded-xl p-stack-md">
<h3 class="font-label-md text-label-md text-primary mb-stack-md flex items-center gap-2">
<span class="material-symbols-outlined !text-[18px]">code</span>
                    DEVELOPER / API
                </h3>
<div class="space-y-stack-md">
<div class="input-group">
    <label class="block font-label-md text-label-md mb-1 text-on-surface-variant">
        API Key
    </label>

    <div class="relative">
        {{-- Yang tampil hanya 10 karakter --}}
        <input
            id="apiKeyInput"
            class="w-full bg-surface-container border-outline-variant rounded-lg px-4 py-3 pr-12 font-body-md text-body-md text-on-surface-variant outline-none"
            type="text"
            readonly
            value="{{ substr($user->api_key, 0, 10) }}********">

        {{-- API Key asli disimpan di hidden input --}}
        <input
            type="hidden"
            id="apiKeyFull"
            value="{{ $user->api_key }}">

        <button
            type="button"
            onclick="copyApiKey(this)"
            class="absolute right-3 top-1/2 -translate-y-1/2 text-primary hover:bg-primary-container/20 p-1 rounded transition-colors">

            <span class="material-symbols-outlined !text-[20px]">
                content_copy
            </span>
        </button>
    </div>
</div>
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">Webhook URL</label>
<input
    id="webhookInput"
    name="webhook_url"
    class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3"
    type="url"
    value="{{ old('webhook_url', $user->webhook_url) }}"
    placeholder="https://your-domain.com/callback">
</div>
</div>
</div>
<!-- Security Section -->
<div class="custom-card rounded-xl p-stack-md">
<h3 class="font-label-md text-label-md text-primary mb-stack-md flex items-center gap-2">
<span class="material-symbols-outlined !text-[18px]">shield</span>
                    KEAMANAN &amp; PASSWORD
                </h3>
<div class="space-y-stack-md">
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">Password Saat Ini</label>
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" placeholder="••••••••" type="password" name="current_password">
</div>
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">Password Baru</label>
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" placeholder="Minimal 8 karakter" type="password" name="new_password">
</div>
<div class="input-group">
<label class="block font-label-md text-label-md mb-1 text-on-surface-variant">Konfirmasi Password Baru</label>
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" placeholder="Ulangi password baru" type="password" name="new_password_confirmation">
</div>
</div>
</div>
<!-- Action Button -->
<div class="pt-stack-lg">
<button class="w-full bg-primary text-on-primary py-4 rounded-xl font-headline-md text-headline-md shadow-lg shadow-primary/20 hover:brightness-110 active:scale-[0.98] transition-all flex justify-center items-center gap-2" type="submit">
<span class="material-symbols-outlined">save</span>
                    Simpan Perubahan
                </button>
<p class="text-center font-body-md text-body-md text-on-surface-variant mt-stack-md">
                    Terakhir diperbarui:
{{ $user->updated_at->format('d M Y H:i') }}
                </p>
</div>
</form>
</main>
<!-- BottomNavBar Shell -->
@include('apk.partials.bar')
<script>

function copyApiKey(btn) {

    const apiKey = document.getElementById('apiKeyFull').value;

    navigator.clipboard.writeText(apiKey);

    const icon = btn.querySelector('.material-symbols-outlined');

    icon.innerText = 'check';

    setTimeout(() => {
        icon.innerText = 'content_copy';
    }, 2000);
}

</script>
</body></html>