@extends('layouts.app')
@section('title', 'Add Person')
@section('content')

{{--
    Unified "Add Person" form.

    Replaces the three separate creation flows:
      • Admin Users → Add User
      • HR          → Add Staff
      • Locum       → Register Locum

    The receptionist / admin picks an Employment Type up top.
    Sections fade in / out based on that choice — Personal Info
    and System Access are always shown, while Statutory & Payroll
    (permanent) and Payment & Rate (locum) appear conditionally.

    Behind the scenes one POST hits PersonOnboardingService which
    writes the right combination of users / staff_records / locums
    rows in a single transaction.
--}}

<div class="max-w-4xl mx-auto">
    @if($errors->any())
    <div class="mb-4 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-xs">
        <p class="font-semibold mb-1">Please fix the following:</p>
        <ul class="list-disc list-inside space-y-0.5">
            @foreach($errors->all() as $err)
                <li>{{ $err }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    @if(session('error'))
    <div class="mb-4 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-xs">{{ session('error') }}</div>
    @endif

    <form method="POST" action="{{ route('people.store') }}">@csrf
        <div class="bg-white rounded-xl border p-6 space-y-6">

            <div>
                <h2 class="text-base font-bold text-gray-800">Add Person</h2>
                <p class="text-xs text-gray-500 mt-0.5">
                    One form for permanent staff, locums, volunteers, and back-office system users.
                    The right records are created for you based on the employment type.
                </p>
            </div>

            {{-- ─── Section 1: Employment Type ─────────────────────────
                 Pivot for the whole form. Changing this hides/shows
                 the conditional sections below. --}}
            <div class="border-t pt-5">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">1. Employment Type <span class="text-red-500">*</span></h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                    @php
                        $types = [
                            'permanent'  => ['label' => 'Permanent Staff',  'hint' => 'Payroll + benefits', 'icon' => '👤'],
                            'locum'      => ['label' => 'Locum',            'hint' => 'Casual, paid per shift', 'icon' => '🧑‍⚕️'],
                            'volunteer'  => ['label' => 'Volunteer',        'hint' => 'Unpaid, light record', 'icon' => '🙋'],
                            'system_user'=> ['label' => 'System User Only', 'hint' => 'Login but no payroll', 'icon' => '💻'],
                        ];
                        $selected = old('employment_type', $defaultType);
                    @endphp
                    @foreach($types as $val => $meta)
                        <label class="cursor-pointer border-2 rounded-lg p-3 hover:bg-gray-50 transition
                                      {{ $selected === $val ? 'border-purple-500 bg-purple-50' : 'border-gray-200' }}"
                               data-type-card="{{ $val }}">
                            <input type="radio" name="employment_type" value="{{ $val }}"
                                   {{ $selected === $val ? 'checked' : '' }}
                                   class="hidden" onchange="onTypeChange(this.value)">
                            <div class="text-2xl mb-1">{{ $meta['icon'] }}</div>
                            <div class="text-sm font-semibold text-gray-800">{{ $meta['label'] }}</div>
                            <div class="text-xs text-gray-500 mt-0.5">{{ $meta['hint'] }}</div>
                        </label>
                    @endforeach
                </div>
            </div>

            {{-- ─── Section 2: Personal Info (always shown) ──────────── --}}
            <div class="border-t pt-5">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">2. Personal Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="form-label">First Name <span class="text-red-500">*</span></label>
                        <input type="text" name="first_name" required class="form-input" value="{{ old('first_name') }}">
                    </div>
                    <div>
                        <label class="form-label">Last Name <span class="for-permanent for-locum text-red-500" data-required-for="permanent locum">*</span></label>
                        <input type="text" name="last_name" class="form-input" value="{{ old('last_name') }}">
                    </div>
                    <div>
                        <label class="form-label">Phone <span class="text-red-500">*</span></label>
                        <input type="text" name="phone" required class="form-input" value="{{ old('phone') }}" placeholder="07XX or 2547XX...">
                    </div>
                    <div>
                        <label class="form-label">
                            Email <span class="when-create-login text-red-500">*</span>
                        </label>
                        <input type="email" name="email" class="form-input" value="{{ old('email') }}">
                    </div>
                    <div class="hidden-for-volunteer">
                        <label class="form-label">ID / Passport No. <span class="for-permanent text-red-500" data-required-for="permanent">*</span></label>
                        <input type="text" name="id_number" class="form-input" value="{{ old('id_number') }}">
                    </div>
                    <div class="hidden-for-system_user hidden-for-volunteer">
                        <label class="form-label">Gender <span class="for-permanent text-red-500" data-required-for="permanent">*</span></label>
                        <select name="gender" class="form-input">
                            <option value="">—</option>
                            @foreach(['male' => 'Male', 'female' => 'Female', 'other' => 'Other', 'prefer_not_to_say' => 'Prefer not to say'] as $v => $l)
                                <option value="{{ $v }}" {{ old('gender') === $v ? 'selected' : '' }}>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="hidden-for-system_user hidden-for-volunteer">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="date_of_birth" class="form-input" value="{{ old('date_of_birth') }}">
                    </div>
                </div>
            </div>

            {{-- ─── Section 3: Role & Department (always shown) ──────── --}}
            <div class="border-t pt-5">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">3. Role &amp; Department</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="form-label">
                            System Role
                        </label>
                        <select name="role" class="form-input">
                            <option value="">— None —</option>
                            @foreach($roles as $r)
                                <option value="{{ $r->name }}" {{ old('role') === $r->name ? 'selected' : '' }}>{{ $r->name }}</option>
                            @endforeach
                        </select>
                        <p class="text-[11px] text-gray-500 mt-1">Permission group. One canonical list used everywhere.</p>
                    </div>
                    <div>
                        <label class="form-label">Designation</label>
                        <input type="text" name="designation" class="form-input" value="{{ old('designation') }}"
                               placeholder="e.g. Medical Officer, Sonographer">
                        <p class="text-[11px] text-gray-500 mt-1">Free-text job title.</p>
                    </div>
                    <div>
                        <label class="form-label">
                            Department
                            <span class="text-red-500">*</span>
                        </label>
                        <select name="department_id" required class="form-input">
                            <option value="">— Select —</option>
                            @include('partials._department-options', ['selected' => old('department_id')])
                        </select>
                    </div>
                </div>
            </div>

            {{-- ─── Section 4: System Access (always shown, conditional content) ─── --}}
            <div class="border-t pt-5">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">4. System Access</h3>
                @php
                    // Compute the initial state of the checkbox: defaults
                    // match what PersonOnboardingService::onboard()
                    // would compute server-side, so the form mirrors
                    // back-end behaviour and the user is never surprised.
                    $createLoginInitial = old('create_login', in_array($selected, ['permanent', 'system_user'], true) ? 1 : 0);
                @endphp
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="create_login" id="create-login-toggle" value="1"
                           {{ $createLoginInitial ? 'checked' : '' }}
                           onchange="onCreateLoginToggle(this.checked)"
                           class="rounded border-gray-300 text-purple-600">
                    <span class="text-sm font-medium text-gray-800">Create a login account for this person</span>
                </label>
                <p class="text-xs text-gray-500 mt-1 ml-6">
                    Tick this for anyone who needs to sign in to the HMIS. Permanent staff and system users default to having a login;
                    locums and volunteers default to no login (their work is logged by the receptionist or admin who books their shifts).
                </p>
                <div id="login-fields" class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3" style="{{ $createLoginInitial ? '' : 'display:none' }}">
                    <div>
                        <label class="form-label">Username</label>
                        <input type="text" name="username" class="form-input" value="{{ old('username') }}"
                               placeholder="auto-generated if blank">
                        <p class="text-[11px] text-gray-500 mt-1">Leave blank to auto-generate.</p>
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Initial Password</label>
                        <input type="text" name="password" class="form-input" value="{{ old('password') }}"
                               placeholder="auto-generated if blank">
                        <p class="text-[11px] text-gray-500 mt-1">
                            Leave blank to auto-generate a 14-character random password.
                            User will be forced to change it on first login.
                            Manual passwords must be ≥10 chars with upper, lower, digit, and symbol.
                        </p>
                    </div>
                </div>
            </div>

            {{-- ─── Section 5: Statutory & Tax (permanent staff only) ── --}}
            <div class="border-t pt-5 only-for-permanent">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">5. Statutory &amp; Tax <span class="text-gray-400 normal-case font-normal">(Permanent staff)</span></h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="form-label">KRA PIN <span class="text-red-500">*</span></label>
                        <input type="text" name="kra_pin" class="form-input font-mono" value="{{ old('kra_pin') }}">
                    </div>
                    <div>
                        <label class="form-label">SHA Number <span class="text-red-500">*</span></label>
                        <input type="text" name="sha_number" class="form-input font-mono" value="{{ old('sha_number') }}">
                    </div>
                    <div>
                        <label class="form-label">NSSF Number <span class="text-red-500">*</span></label>
                        <input type="text" name="nssf_number" class="form-input font-mono" value="{{ old('nssf_number') }}">
                    </div>
                    <div>
                        <label class="form-label">Employment Date</label>
                        <input type="date" name="employment_date" class="form-input" value="{{ old('employment_date', date('Y-m-d')) }}">
                    </div>
                    <div>
                        <label class="form-label">Contract Type</label>
                        <select name="contract_type" class="form-input">
                            @foreach(['permanent' => 'Permanent', 'contract' => 'Contract', 'casual' => 'Casual'] as $v => $l)
                                <option value="{{ $v }}" {{ old('contract_type', 'permanent') === $v ? 'selected' : '' }}>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Staff No.</label>
                        <input type="text" class="form-input bg-gray-100 font-mono" value="{{ $nextStaffNumber }}" disabled>
                        <p class="text-[11px] text-gray-400 mt-1">Auto-generated on save</p>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mt-3">
                    Salary, allowances, and payment method are set after creation from the staff profile or the Payroll module.
                </p>
            </div>

            {{-- ─── Section 6: KRA / Statutory (locum only — minimal) ── --}}
            <div class="border-t pt-5 only-for-locum">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">5. Statutory <span class="text-gray-400 normal-case font-normal">(Locum)</span></h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="form-label">KRA PIN <span class="text-red-500">*</span></label>
                        <input type="text" name="kra_pin" class="form-input font-mono" value="{{ old('kra_pin') }}">
                    </div>
                    <div>
                        <label class="form-label">SHA Number</label>
                        <input type="text" name="sha_number" class="form-input font-mono" value="{{ old('sha_number') }}">
                    </div>
                    <div>
                        <label class="form-label">NSSF Number</label>
                        <input type="text" name="nssf_number" class="form-input font-mono" value="{{ old('nssf_number') }}">
                    </div>
                </div>
            </div>

            {{-- ─── Section 7: Payment & Rate (locum only) ───────────── --}}
            <div class="border-t pt-5 only-for-locum">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">6. Payment &amp; Rate <span class="text-gray-400 normal-case font-normal">(Locum)</span></h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">Rate Type <span class="text-red-500">*</span></label>
                        <select name="rate_type" class="form-input">
                            <option value="per_shift"  {{ old('rate_type','per_shift')==='per_shift' ? 'selected':'' }}>Rate per Shift (Daily Rate)</option>
                            <option value="percentage" {{ old('rate_type')==='percentage' ? 'selected':'' }}>Percentage of Procedure</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Default Rate <span class="text-red-500">*</span></label>
                        <input type="number" step="0.01" name="default_rate" class="form-input" value="{{ old('default_rate', 3000) }}">
                        <p class="text-[11px] text-gray-400 mt-1">KES per shift, or % of procedure</p>
                    </div>
                    <div>
                        <label class="form-label">Payment Mode</label>
                        <select name="payment_mode" class="form-input" onchange="onPaymentModeChange(this.value)" id="payment-mode-select">
                            <option value="mpesa" {{ old('payment_mode', 'mpesa') === 'mpesa' ? 'selected' : '' }}>M-Pesa</option>
                            <option value="bank"  {{ old('payment_mode') === 'bank' ? 'selected' : '' }}>Bank Transfer</option>
                        </select>
                    </div>
                    <div id="mpesa-field">
                        <label class="form-label">M-Pesa Number</label>
                        <input type="text" name="mpesa_no" class="form-input" value="{{ old('mpesa_no') }}">
                    </div>
                    <div id="bank-name-field" style="display:none">
                        <label class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" class="form-input" value="{{ old('bank_name') }}">
                    </div>
                    <div id="bank-account-field" style="display:none">
                        <label class="form-label">Bank Account</label>
                        <input type="text" name="bank_account" class="form-input" value="{{ old('bank_account') }}">
                    </div>
                </div>
            </div>

            {{-- ─── Section 8: License (permanent + locum only) ──────── --}}
            <div class="border-t pt-5 only-for-permanent only-for-locum">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">Professional License <span class="text-gray-400 normal-case font-normal">(optional)</span></h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">License Number</label>
                        <input type="text" name="license_no" id="license-no-input" class="form-input"
                               value="{{ old('license_no') }}" oninput="onLicenseChange()">
                    </div>
                    <div id="license-expiry-wrap" style="{{ old('license_no') ? '' : 'display:none' }}">
                        <label class="form-label">License Expiry <span class="text-red-500">*</span></label>
                        <input type="date" name="license_expiry" id="license-expiry-input" class="form-input"
                               value="{{ old('license_expiry') }}">
                    </div>
                </div>
            </div>

            {{-- ─── Section 9: Emergency Contact (permanent + locum) ── --}}
            <div class="border-t pt-5 only-for-permanent only-for-locum">
                <h3 class="text-xs font-bold text-gray-700 uppercase mb-3">Emergency Contact</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">Contact Name</label>
                        <input type="text" name="emergency_contact_name" class="form-input" value="{{ old('emergency_contact_name') }}">
                    </div>
                    <div>
                        <label class="form-label">Contact Phone</label>
                        <input type="text" name="emergency_contact_phone" class="form-input" value="{{ old('emergency_contact_phone') }}">
                    </div>
                </div>
            </div>

            {{-- Submit --}}
            <div class="border-t pt-5 flex gap-3 justify-end">
                <a href="{{ url()->previous() }}" class="btn-secondary">Cancel</a>
                <button type="submit" class="btn-success">Create Person</button>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
// ─── Section visibility driver ─────────────────────────────────────
//
// Each section that's specific to a subset of employment types
// declares itself with a class like .only-for-permanent or
// .hidden-for-volunteer. This function loops through every such
// element and shows/hides based on the currently-selected type.
//
// Why classes per section instead of one big show/hide table? It
// keeps the rules co-located with the markup — when you add a
// section, the visibility rule lives on the section itself.
function onTypeChange(type) {
    // Visual highlight on the picker cards
    document.querySelectorAll('[data-type-card]').forEach(el => {
        const isSelected = el.dataset.typeCard === type;
        el.classList.toggle('border-purple-500', isSelected);
        el.classList.toggle('bg-purple-50',      isSelected);
        el.classList.toggle('border-gray-200',   !isSelected);
    });

    // .only-for-X — visible ONLY when type === X (or one of Xs)
    document.querySelectorAll('[class*="only-for-"]').forEach(el => {
        const matches = Array.from(el.classList).filter(c => c.startsWith('only-for-'));
        const allowed = matches.map(c => c.replace('only-for-', ''));
        el.style.display = allowed.includes(type) ? '' : 'none';
    });

    // .hidden-for-X — hidden when type === X
    document.querySelectorAll('[class*="hidden-for-"]').forEach(el => {
        const hides = Array.from(el.classList)
            .filter(c => c.startsWith('hidden-for-'))
            .map(c => c.replace('hidden-for-', ''));
        el.style.display = hides.includes(type) ? 'none' : '';
    });

    // .for-X red-asterisks become visible only when type matches
    // (handled via CSS attribute selector below; nothing to do in JS).

    // Default create_login depending on type. We don't override if
    // the user already touched the checkbox manually — but we don't
    // currently track that, so it just gets reset on type change.
    const loginToggle = document.getElementById('create-login-toggle');
    if (loginToggle) {
        loginToggle.checked = (type === 'permanent' || type === 'system_user');
        onCreateLoginToggle(loginToggle.checked);
    }
}

function onCreateLoginToggle(checked) {
    const fields = document.getElementById('login-fields');
    if (fields) fields.style.display = checked ? '' : 'none';

    // Toggle the .when-create-login asterisks
    document.querySelectorAll('.when-create-login').forEach(el => {
        el.style.display = checked ? '' : 'none';
    });
}

function onPaymentModeChange(mode) {
    const isM = mode === 'mpesa';
    document.getElementById('mpesa-field').style.display        = isM ? '' : 'none';
    document.getElementById('bank-name-field').style.display    = isM ? 'none' : '';
    document.getElementById('bank-account-field').style.display = isM ? 'none' : '';
}

function onLicenseChange() {
    const hasLicense = document.getElementById('license-no-input').value.trim().length > 0;
    const wrap = document.getElementById('license-expiry-wrap');
    const input = document.getElementById('license-expiry-input');
    if (!wrap || !input) return;
    wrap.style.display = hasLicense ? '' : 'none';
    if (hasLicense) input.setAttribute('required', 'required');
    else { input.removeAttribute('required'); input.value = ''; }
}

// Bootstrap to the initial state on load.
document.addEventListener('DOMContentLoaded', function () {
    const selected = document.querySelector('input[name="employment_type"]:checked');
    if (selected) onTypeChange(selected.value);

    const pm = document.getElementById('payment-mode-select');
    if (pm) onPaymentModeChange(pm.value);

    onLicenseChange();
});

// ── Inline validation feedback ──────────────────────────────────────
// On a failed submit the server sends back per-field messages. Instead
// of just a summary at the top (easy to miss on a long form), mark each
// offending field, drop its message right beneath it, scroll to the
// first one, and clear the highlight as soon as the user edits it.
(function () {
    const fieldErrors = @json($errors->messages());
    const names = Object.keys(fieldErrors);
    if (!names.length) return;

    document.addEventListener('DOMContentLoaded', function () {
        let firstEl = null;
        names.forEach(function (name) {
            const el = document.querySelector('[name="' + name + '"]');
            if (!el) return;
            el.style.borderColor = '#dc2626';
            el.style.boxShadow = '0 0 0 1px #dc2626';

            const msg = document.createElement('p');
            msg.className = 'field-error-msg';
            msg.style.cssText = 'color:#dc2626;font-size:11px;margin-top:4px';
            msg.textContent = fieldErrors[name][0];
            el.insertAdjacentElement('afterend', msg);

            const clear = function () {
                el.style.borderColor = '';
                el.style.boxShadow = '';
                if (msg.parentNode) msg.remove();
                el.removeEventListener('input', clear);
                el.removeEventListener('change', clear);
            };
            el.addEventListener('input', clear);
            el.addEventListener('change', clear);

            if (!firstEl) firstEl = el;
        });
        if (firstEl) {
            firstEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            try { firstEl.focus({ preventScroll: true }); } catch (e) {}
        }
    });
})();
</script>
@endpush
@endsection