@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/register.css') }}">
@endpush

@section('content')
<section class="login-section">
    <div class="login-card">

        {{-- Header --}}
        <div class="login-header">
            <div class="login-logo-wrap">
                <div class="login-logo-box">
                    <img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="login-logo">
                </div>
                <span class="login-brand">SEHATI</span>
            </div>
            <p class="login-subtitle">Buat akun baru Anda</p>
        </div>

        {{-- Error / success --}}
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        {{-- Form --}}
        <form action="{{ route('register.store') }}" method="POST">
            @csrf

            {{-- Email --}}
            <div>
                <label class="login-label" for="email">Email</label>
                <div class="login-input-wrap">
                    <i class="fa-solid fa-envelope login-input-icon"></i>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        class="login-input"
                        placeholder="email@example.com"
                        value="{{ old('email') }}"
                        autocomplete="email"
                    >
                </div>
                @error('email')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            {{-- Password --}}
            <div>
                <label class="login-label" for="password">Password</label>
                <div class="login-input-wrap">
                    <i class="fa-solid fa-lock login-input-icon"></i>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="login-input"
                        placeholder="Minimal 8 karakter"
                        autocomplete="new-password"
                    >
                </div>
                @error('password')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            {{-- Konfirmasi Password --}}
            <div>
                <label class="login-label" for="password_confirmation">Konfirmasi Password</label>
                <div class="login-input-wrap">
                    <i class="fa-solid fa-lock login-input-icon"></i>
                    <input
                        type="password"
                        id="password_confirmation"
                        name="password_confirmation"
                        class="login-input"
                        placeholder="Ulangi password"
                        autocomplete="new-password"
                    >
                </div>
                <small id="pesan-konfirmasi" style="font-size:12px; margin-top:-10px; display:block;"></small>
            </div>

            {{-- Submit --}}
            <button type="submit" class="btn-login">Daftar Sekarang</button>

            {{-- Divider --}}
            <div class="login-divider">
                <span>Atau daftar dengan</span>
            </div>

            {{-- Social --}}
            <div class="d-flex justify-content-center">
                <a href="{{ route('auth.google') }}" class="btn-social">
                    <img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" width="20" alt="Google">
                </a>
            </div>
        </form>

        {{-- Login link --}}
        <div class="login-register">
            Sudah punya akun?
            <a href="{{ route('login') }}">Masuk di sini</a>
        </div>

    </div>
</section>
@endsection

@push('scripts')
<script>
    const password = document.getElementById('password');
    const konfirmasi = document.getElementById('password_confirmation');
    const btnSubmit = document.querySelector('.btn-login');

    function cekPassword() {
        const val = konfirmasi.value;

        if (val === '') {
            konfirmasi.style.borderColor = '';
            document.getElementById('pesan-konfirmasi').textContent = '';
            btnSubmit.disabled = false;
            return;
        }

        if (password.value === val) {
            konfirmasi.style.borderColor = '#2d6a2f';
            document.getElementById('pesan-konfirmasi').textContent = '✓ Password sesuai';
            document.getElementById('pesan-konfirmasi').style.color = '#2d6a2f';
            btnSubmit.disabled = false;
        } else {
            konfirmasi.style.borderColor = '#e53935';
            document.getElementById('pesan-konfirmasi').textContent = '⚠ Password tidak sesuai';
            document.getElementById('pesan-konfirmasi').style.color = '#e53935';
            btnSubmit.disabled = true;
        }
    }

    konfirmasi.addEventListener('input', cekPassword);
    password.addEventListener('input', cekPassword);
</script>
@endpush