@extends('layouts.tomchat', [
    'pageTitle' => 'Daftar tomCHAT',
    'pageDescription' => 'Buat akun tomCHAT untuk mulai mengirim pesan dari browser dan PWA mobile.',
    'bodyClass' => 'tomchat-register-page',
])

@push('head')
    <style>
        body.tomchat-register-page {
            min-height: 100dvh;
            overflow-x: hidden;
            color: #101828;
            background:
                radial-gradient(circle at 20% 8%, rgba(1, 145, 215, 0.18), transparent 34%),
                linear-gradient(180deg, #f7fbff 0%, #edf6ff 100%);
        }

        .register-shell {
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
        }

        .register-topbar {
            position: sticky;
            top: 0;
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 14px;
            color: #fff;
            background: linear-gradient(135deg, #d9031f 0%, #ef233c 100%);
            box-shadow: 0 16px 34px rgba(217, 3, 31, 0.22);
        }

        .register-back {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 16px;
            color: #fff;
            text-decoration: none;
            background: rgba(255, 255, 255, 0.12);
        }

        .register-title {
            min-width: 0;
        }

        .register-title span {
            display: block;
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0.78;
        }

        .register-title strong {
            display: block;
            font-size: clamp(1.08rem, 5vw, 1.35rem);
            line-height: 1.1;
        }

        .register-content {
            width: min(100%, 520px);
            margin: 0 auto;
            padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
            flex: 1;
        }

        .register-card {
            border: 1px solid rgba(255, 255, 255, 0.75);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 24px 60px rgba(15, 35, 70, 0.12);
            overflow: hidden;
            backdrop-filter: blur(18px);
        }

        .register-card-head {
            padding: 22px 20px 12px;
        }

        .register-card-head h1 {
            margin: 0;
            color: #101828;
            font-size: 1.45rem;
            line-height: 1.14;
        }

        .register-card-head p {
            margin: 8px 0 0;
            color: #667085;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .register-alert {
            margin: 0 20px 16px;
            padding: 12px 14px;
            border: 1px solid rgba(217, 3, 31, 0.18);
            border-radius: 18px;
            color: #9f1239;
            background: rgba(255, 241, 242, 0.92);
            font-size: 0.86rem;
            line-height: 1.45;
        }

        .register-form {
            display: grid;
            gap: 13px;
            padding: 0 20px 20px;
        }

        .register-avatar {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px;
            border: 1px dashed rgba(1, 145, 215, 0.28);
            border-radius: 22px;
            background: rgba(1, 145, 215, 0.06);
            cursor: pointer;
        }

        .register-avatar-preview {
            width: 62px;
            height: 62px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 22px;
            color: #015d89;
            font-weight: 800;
            background: #dff3ff;
            overflow: hidden;
        }

        .register-avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .register-avatar-text strong,
        .register-field span {
            display: block;
            color: #172033;
            font-size: 0.83rem;
            font-weight: 800;
        }

        .register-avatar-text small,
        .register-field small {
            display: block;
            margin-top: 4px;
            color: #667085;
            font-size: 0.76rem;
            line-height: 1.35;
        }

        .register-field {
            display: grid;
            gap: 7px;
        }

        .register-field input {
            width: 100%;
            min-height: 48px;
            border: 1px solid #d9e2ef;
            border-radius: 17px;
            padding: 0 15px;
            color: #101828;
            background: #f9fbff;
            outline: 0;
            font-size: 0.95rem;
        }

        .register-field input:focus {
            border-color: rgba(1, 145, 215, 0.56);
            box-shadow: 0 0 0 4px rgba(1, 145, 215, 0.12);
            background: #fff;
        }

        .register-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .register-actions {
            position: sticky;
            bottom: 0;
            display: grid;
            gap: 9px;
            margin: 4px -20px -20px;
            padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid rgba(16, 24, 40, 0.07);
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(14px);
        }

        .register-submit,
        .register-login-link {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 17px;
            font-weight: 800;
            text-decoration: none;
            letter-spacing: 0.01em;
        }

        .register-submit {
            border: 0;
            color: #fff;
            background: linear-gradient(135deg, #0191d7 0%, #14a7ef 100%);
            box-shadow: 0 16px 34px rgba(1, 145, 215, 0.2);
        }

        .register-login-link {
            border: 1px solid #d9e2ef;
            color: #172033;
            background: #fff;
        }

        @media (min-width: 760px) {
            .register-shell {
                justify-content: center;
            }

            .register-topbar {
                width: min(100% - 32px, 520px);
                margin: 20px auto 0;
                border-radius: 28px;
            }
        }

        @media (max-width: 420px) {
            .register-content {
                padding-left: 10px;
                padding-right: 10px;
            }

            .register-card {
                border-radius: 26px;
            }

            .register-card-head,
            .register-form {
                padding-left: 16px;
                padding-right: 16px;
            }

            .register-grid {
                grid-template-columns: 1fr;
                gap: 13px;
            }

            .register-actions {
                margin-left: -16px;
                margin-right: -16px;
                padding-left: 16px;
                padding-right: 16px;
            }
        }
    </style>
@endpush

@section('content')
    <main class="register-shell">
        <header class="register-topbar">
            <a href="{{ route('login') }}" class="register-back" aria-label="Kembali ke login">
                <span aria-hidden="true">&larr;</span>
            </a>
            <div class="register-title">
                <span>tomCHAT</span>
                <strong>Daftar akun</strong>
            </div>
        </header>

        <section class="register-content">
            <div class="register-card">
                <div class="register-card-head">
                    <h1>Buat akun baru</h1>
                    <p>Isi data inti saja. Setelah daftar, akun langsung aktif dan masuk ke ruang obrolan.</p>
                </div>

                @if ($errors->any())
                    <div class="register-alert">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form method="POST" action="{{ route('register.store') }}" class="register-form"
                    enctype="multipart/form-data">
                    @csrf

                    <label class="register-avatar">
                        <span class="register-avatar-preview" data-register-avatar-preview>TC</span>
                        <span class="register-avatar-text">
                            <strong>Foto profil</strong>
                            <small>Opsional. Bisa dipilih langsung dari kamera atau galeri HP.</small>
                        </span>
                        <input type="file" name="profile" accept="image/*" data-register-avatar-input hidden>
                    </label>

                    <label class="register-field">
                        <span>Nama lengkap</span>
                        <input type="text" name="name" value="{{ old('name') }}" maxlength="255"
                            autocomplete="name" required data-register-name>
                    </label>

                    <label class="register-field">
                        <span>Nama profil / username</span>
                        <input type="text" name="username" value="{{ old('username') }}" maxlength="255"
                            autocomplete="username" inputmode="text" required data-register-username>
                        <small>Dipakai untuk identitas obrolan. Contoh: densy82 atau tomchat-user.</small>
                    </label>

                    <div class="register-grid">
                        <label class="register-field">
                            <span>Tanggal lahir</span>
                            <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir') }}">
                        </label>

                        <label class="register-field">
                            <span>Nomor Telp/WA</span>
                            <input type="tel" name="whatsapp" value="{{ old('whatsapp') }}" maxlength="32"
                                inputmode="tel" autocomplete="tel" placeholder="08xxxxxxxxxx" required>
                            <small>Bisa dipakai untuk login.</small>
                        </label>
                    </div>

                    <label class="register-field">
                        <span>Email untuk login</span>
                        <input type="email" name="email" value="{{ old('email') }}" maxlength="255"
                            autocomplete="email" required>
                    </label>

                    <div class="register-grid">
                        <label class="register-field">
                            <span>Password</span>
                            <input type="password" name="password" minlength="8" autocomplete="new-password" required>
                        </label>

                        <label class="register-field">
                            <span>Ulangi password</span>
                            <input type="password" name="password_confirmation" minlength="8"
                                autocomplete="new-password" required>
                        </label>
                    </div>

                    <div class="register-actions">
                        <button type="submit" class="register-submit">Daftar dan masuk</button>
                        <a href="{{ route('login') }}" class="register-login-link">Sudah punya akun? Masuk</a>
                    </div>
                </form>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        (() => {
            const nameInput = document.querySelector('[data-register-name]');
            const usernameInput = document.querySelector('[data-register-username]');
            const avatarInput = document.querySelector('[data-register-avatar-input]');
            const avatarPreview = document.querySelector('[data-register-avatar-preview]');
            let usernameTouched = Boolean(usernameInput?.value);

            const slugify = (value) => value
                .toLowerCase()
                .replace(/[^\w ]+/g, '')
                .trim()
                .replace(/\s+/g, '-')
                .replace(/[-_.]+$/g, '')
                .replace(/^[-_.]+/g, '');

            usernameInput?.addEventListener('input', () => {
                usernameTouched = true;
                usernameInput.value = slugify(usernameInput.value);
            });

            nameInput?.addEventListener('input', () => {
                if (!usernameTouched && usernameInput) {
                    usernameInput.value = slugify(nameInput.value);
                }
            });

            avatarInput?.addEventListener('change', () => {
                const file = avatarInput.files?.[0];

                if (!file || !avatarPreview) {
                    return;
                }

                const image = document.createElement('img');
                image.alt = 'Preview foto profil';
                image.src = URL.createObjectURL(file);
                avatarPreview.replaceChildren(image);
            });
        })();
    </script>
@endpush