@php
    $primary = $tenant->primary_color ?: '#155e75';
    $showUrl = route('public.tenant.show', ['tenant' => $tenant->slug]);
    $loginUrl = route('public.tenant.login', ['tenant' => $tenant->slug]);
    $storeUrl = route('public.tenant.register.store', ['tenant' => $tenant->slug]);
@endphp
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Open Account - {{ $tenant->name }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <style>:root{--tenant-primary: {{ $primary }};}</style>
</head>
<body class="tenant-public">
    <main class="container py-5">
        <div class="tenant-form-shell">
            <div>
                <a href="{{ $showUrl }}" class="tenant-public-brand mb-4">
                    @if($tenant->displayLogoUrl())
                        <img src="{{ $tenant->displayLogoUrl() }}" alt="{{ $tenant->name }}">
                    @else
                        <span>{{ strtoupper(substr($tenant->name, 0, 2)) }}</span>
                    @endif
                    <strong>{{ $tenant->name }}</strong>
                </a>
                <h1>Open your member account</h1>
                <p>Register once and use your portal to save, apply for loans, view repayment schedules, and repay online.</p>
                <a class="btn btn-outline-primary" href="{{ $loginUrl }}">Already a member?</a>
            </div>
            <form method="POST" action="{{ $storeUrl }}" class="tenant-public-card row g-3">
                @csrf
                @if($errors->any())
                    <div class="col-12"><div class="alert alert-danger">{{ $errors->first() }}</div></div>
                @endif
                <div class="col-md-4"><label class="form-label">First name</label><input name="first_name" value="{{ old('first_name') }}" class="form-control" required></div>
                <div class="col-md-4"><label class="form-label">Middle name</label><input name="middle_name" value="{{ old('middle_name') }}" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Last name</label><input name="last_name" value="{{ old('last_name') }}" class="form-control" required></div>
                <div class="col-md-6"><label class="form-label">Email</label><input name="email" type="email" value="{{ old('email') }}" class="form-control" required></div>
                <div class="col-md-6"><label class="form-label">Phone</label><input name="phone" value="{{ old('phone') }}" class="form-control" required></div>
                <div class="col-md-6"><label class="form-label">Password</label><input name="password" type="password" class="form-control" required></div>
                <div class="col-md-6"><label class="form-label">Confirm password</label><input name="password_confirmation" type="password" class="form-control" required></div>
                <div class="col-md-6"><label class="form-label">Gender</label><select name="gender" class="form-select"><option value="">Select gender</option><option value="male" @selected(old('gender') === 'male')>Male</option><option value="female" @selected(old('gender') === 'female')>Female</option></select></div>
                <div class="col-md-6"><label class="form-label">Date of birth</label><input name="date_of_birth" type="date" value="{{ old('date_of_birth') }}" class="form-control" data-date-of-birth></div>
                <div class="col-md-6"><label class="form-label">Age</label><input class="form-control bg-light" data-age-field readonly placeholder="Auto calculated"></div>
                <div class="col-md-6"><label class="form-label">Occupation</label><input name="occupation" value="{{ old('occupation') }}" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">ID number</label><input name="id_number" value="{{ old('id_number') }}" class="form-control"></div>
                <div class="col-md-6">
                    <label class="form-label">BVN</label>
                    <div class="input-group">
                        <input name="bvn" value="{{ old('bvn') }}" inputmode="numeric" maxlength="11" placeholder="11 digits" class="form-control" data-identity-number="BVN">
                        <button class="btn btn-outline-primary" type="button" data-verify-identity="bvn">Verify</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">NIN</label>
                    <div class="input-group">
                        <input name="nin" value="{{ old('nin') }}" inputmode="numeric" maxlength="11" placeholder="11 digits" class="form-control" data-identity-number="NIN">
                        <button class="btn btn-outline-primary" type="button" data-verify-identity="nin">Verify</button>
                    </div>
                </div>
                <div class="col-12"><div class="small text-muted" data-identity-feedback>Enter 11 digits, then click Verify for an immediate format check. Full KYC runs after registration.</div></div>
                <div class="col-12"><label class="form-label">Address</label><textarea name="address" class="form-control">{{ old('address') }}</textarea></div>
                <div class="col-md-6"><label class="form-label">City</label><input name="city" value="{{ old('city') }}" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">State</label><input name="state" value="{{ old('state') }}" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Guarantor name</label><input name="guarantor_name" value="{{ old('guarantor_name') }}" class="form-control"></div>
                <div class="col-md-6"><label class="form-label">Guarantor phone</label><input name="guarantor_phone" value="{{ old('guarantor_phone') }}" class="form-control"></div>
                <div class="col-12 d-grid"><button class="btn btn-primary btn-lg">Create account</button></div>
            </form>
        </div>
    </main>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const dob = document.querySelector('[data-date-of-birth]');
        const age = document.querySelector('[data-age-field]');

        const updateAge = () => {
            if (!dob || !age || !dob.value) {
                if (age) age.value = '';
                return;
            }

            const birthDate = new Date(dob.value + 'T00:00:00');
            const today = new Date();
            let years = today.getFullYear() - birthDate.getFullYear();
            const monthDelta = today.getMonth() - birthDate.getMonth();

            if (monthDelta < 0 || (monthDelta === 0 && today.getDate() < birthDate.getDate())) {
                years--;
            }

            age.value = Number.isFinite(years) && years >= 0 ? years : '';
        };

        dob?.addEventListener('change', updateAge);
        updateAge();

        document.querySelectorAll('[data-verify-identity]').forEach((button) => {
            button.addEventListener('click', () => {
                const field = document.querySelector(`[name="${button.dataset.verifyIdentity}"]`);
                const feedback = document.querySelector('[data-identity-feedback]');
                const label = field?.dataset.identityNumber || 'Identity number';
                const value = String(field?.value || '').trim();

                if (/^\d{11}$/.test(value)) {
                    feedback.textContent = `${label} format verified. Registration will run automatic KYC.`;
                    feedback.classList.remove('text-danger', 'text-muted');
                    feedback.classList.add('text-success');
                    return;
                }

                feedback.textContent = `${label} must be exactly 11 digits.`;
                feedback.classList.remove('text-success', 'text-muted');
                feedback.classList.add('text-danger');
                field?.focus();
            });
        });
    });
    </script>
</body>
</html>
