@extends('layouts.auth')
@section('title', 'Daftar')

@section('content')
<!-- 🔥 TAMBAHAN BACKGROUND BLUR - HANYA INI YANG DITAMBAH -->
<div style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
">
    <img src="{{ asset('storage/images/latarbelakang.png') }}" 
         alt="Background" 
         style="
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(8px) brightness(0.5);
            transform: scale(1.1);
         ">
    <div style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 39, 68, 0.4);
    "></div>
</div>

<!-- 🔥 INI TETAP SAMA PERSIS - TIDAK ADA YANG DIUBAH -->
<div class="auth-card" style="position: relative; z-index: 1;">
    <a href="{{ url('/') }}"
       class="position-absolute top-0 start-0 m-3 d-flex align-items-center justify-content-center"
       style="width:36px; height:36px; background:white; border-radius:50%; text-decoration:none; color:#374151; box-shadow:0 2px 8px rgba(0,0,0,0.08); z-index:10;">
        <i class="bi bi-arrow-left" style="font-size:16px;"></i>
    </a>

    <div class="auth-header">
        <img src="{{ asset('storage/images/logo_pupr.png') }}"
             alt="Logo PUPR"
             style="width:85px; height:auto; margin-bottom:18px;">

        <h4>Daftar Akun Pemohon</h4>

        <p>
            Buat akun untuk mengajukan<br>
            Persetujuan Bangunan Gedung (PBG)
        </p>
    </div>

    <div class="auth-body">
        <form method="POST" action="{{ route('register') }}" autocomplete="off" id="registerForm">
            @csrf

            <div class="mb-3">
                <label class="form-label">Nama Lengkap</label>
                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                       placeholder="Masukkan nama lengkap" required autocomplete="off" value="{{ old('name') }}">
                @error('name')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                       placeholder="Masukkan email" required autocomplete="new-email" value="{{ old('email') }}">
                @error('email')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label class="form-label">
                    No. Telepon
                    <span class="text-muted"></span>
                </label>
                <input type="text" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror"
                       placeholder="08xxxxxxxxxx" minlength="11" maxlength="13" pattern="\d{11,13}"
                       title="Nomor telepon harus 11-13 digit angka" autocomplete="off" value="{{ old('phone') }}">
                <small class="text-muted">Minimal 11 digit, maksimal 13 digit (hanya angka)</small>
                @error('phone')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <!-- Password dengan toggle -->
            <div class="mb-3">
                <label class="form-label">Password</label>
                <div class="input-group">
                    <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror"
                           placeholder="Minimal 8 karakter" required autocomplete="new-password">
                    <button class="btn btn-outline-secondary toggle-password" type="button" data-target="password" style="border-top-right-radius: 12px; border-bottom-right-radius: 12px;">
                        <i class="bi bi-eye-slash"></i>
                    </button>
                </div>
                @error('password')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <!-- Konfirmasi Password dengan toggle -->
            <div class="mb-4">
                <label class="form-label">Konfirmasi Password</label>
                <div class="input-group">
                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control"
                           placeholder="Ulangi password" required autocomplete="new-password">
                    <button class="btn btn-outline-secondary toggle-password" type="button" data-target="password_confirmation" style="border-top-right-radius: 12px; border-bottom-right-radius: 12px;">
                        <i class="bi bi-eye-slash"></i>
                    </button>
                </div>
            </div>

            <button type="submit" class="btn btn-auth">
                <i class="bi bi-person-check-fill me-2"></i>
                Daftar
            </button>
        </form>
    </div>

    <div class="auth-footer">
        Sudah punya akun?
        <a href="{{ route('login') }}">Masuk di sini</a>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle password visibility
        function togglePassword(button) {
            const targetId = button.getAttribute('data-target');
            const input = document.getElementById(targetId);
            if (!input) return;
            const icon = button.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            } else {
                input.type = 'password';
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            }
        }

        // Pasang event listener ke semua tombol toggle
        document.querySelectorAll('.toggle-password').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                togglePassword(btn);
            });
        });

        // Validasi tambahan: memastikan nomor telepon hanya angka dan panjang 11-13 sebelum submit
        const form = document.getElementById('registerForm');
        const phoneInput = document.getElementById('phone');

        if (form && phoneInput) {
            form.addEventListener('submit', function(e) {
                let phoneValue = phoneInput.value.trim();
                if (phoneValue !== '') {
                    const phoneRegex = /^\d{11,13}$/;
                    if (!phoneRegex.test(phoneValue)) {
                        e.preventDefault();
                        alert('Nomor telepon harus 11-13 digit angka (tanpa spasi atau tanda hubung)');
                        phoneInput.focus();
                    }
                }
            });
        }
    });
</script>
@endsection