<?php 
// components/forms/basic_info.php 
// Only (re)start the session if it's safe to do so -- see sidebar.php for why.
if (session_status() === PHP_SESSION_NONE && !headers_sent()) {
    session_start();
}

// Role authorization check
$userRole = strtolower(trim($_SESSION['role'] ?? $role ?? ''));
$isSuperAdmin = ($userRole === 'superadmin');
?>
<div class="bg-white border border-slate-300/80 rounded-xl shadow-sm overflow-hidden">
    <div class="px-4 py-3 bg-stone-50/50 border-b border-slate-300/80">
        <h3 class="text-xs font-black text-slate-950 uppercase tracking-tight">1. Basic Information</h3>
    </div>
    
    <div class="p-4 sm:p-5 space-y-5">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Full Legal Name</label>
                <input type="text" 
                       name="name" 
                       value="<?= htmlspecialchars($employee['name'] ?? '') ?>" 
                       placeholder="e.g., John Doe" 
                       <?= $isSuperAdmin ? '' : 'readonly tabindex="-1"' ?>
                       class="w-full border border-slate-300 p-2 rounded text-xs font-bold transition <?= $isSuperAdmin ? 'bg-stone-50/40 text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white' : 'bg-slate-100 text-slate-600 cursor-not-allowed select-none focus:outline-none' ?>">
            </div>
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Profile Image / Avatar</label>
                <input type="file" name="avatar" accept="image/*" class="w-full text-xs text-slate-500 file:mr-2 file:py-1 file:px-2.5 file:rounded file:border file:border-slate-300 file:text-[10px] file:font-black file:uppercase file:tracking-wider file:bg-white file:text-slate-700 hover:file:bg-stone-100 cursor-pointer pt-1 focus:outline-none">
            </div>
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Date of Birth</label>
                <input type="date" name="dob" value="<?= !empty($employee['dob']) ? date('Y-m-d', strtotime($employee['dob'])) : '' ?>" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
            </div>
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Primary Telephone</label>
                <input type="text" name="phone" value="<?= htmlspecialchars($employee['phone'] ?? '') ?>" placeholder="e.g., +234..." class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-mono font-black text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
            </div>
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Gender</label>
                <select name="gender" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                    <option value="">Select Gender</option>
                    <option value="Male" <?= ($employee['gender'] ?? '') === 'Male' ? 'selected' : '' ?>>Male</option>
                    <option value="Female" <?= ($employee['gender'] ?? '') === 'Female' ? 'selected' : '' ?>>Female</option>
                </select>
            </div>
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Marital Status</label>
                <select name="marital_status" id="marital_status_dropdown" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                    <option value="Single" <?= ($employee['marital_status'] ?? 'Single') === 'Single' ? 'selected' : '' ?>>Single</option>
                    <option value="Married" <?= ($employee['marital_status'] ?? '') === 'Married' ? 'selected' : '' ?>>Married</option>
                    <option value="Divorced" <?= ($employee['marital_status'] ?? '') === 'Divorced' ? 'selected' : '' ?>>Divorced</option>
                </select>
            </div>
        </div>

        <div id="nok_details_section" class="border-t border-slate-300 pt-4 space-y-4">
            <div>
                <h4 id="nok_section_title" class="text-[10px] font-black text-slate-950 uppercase tracking-tight">Next of Kin Anchor Parameters</h4>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="space-y-1.5">
                    <label id="nok_name_label" class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Next of Kin Name</label>
                    <input type="text" name="nok_name" value="<?= htmlspecialchars($employee['nok_name'] ?? '') ?>" placeholder="e.g., Jane Doe" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                </div>
                <div class="space-y-1.5">
                    <label id="nok_phone_label" class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Next of Kin Mobile Phone</label>
                    <input type="text" name="nok_phone" value="<?= htmlspecialchars($employee['nok_phone'] ?? '') ?>" placeholder="e.g., +234..." class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-mono font-black text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                </div>
                <div class="sm:col-span-2 space-y-1.5">
                    <label id="nok_address_label" class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Next of Kin Address</label>
                    <textarea name="nok_address" rows="2" placeholder="Residential contact address details..." class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 placeholder-slate-400 focus:outline-none focus:border-indigo-700 focus:bg-white transition resize-none"><?= htmlspecialchars($employee['nok_address'] ?? '') ?></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Run immediately rather than waiting for DOMContentLoaded -- this script
// tag only ever executes once the surrounding markup already exists, whether
// that's on a normal page load or after an AJAX navigation swap
// (DOMContentLoaded only ever fires once per real browser page load).
(function() {
    const maritalDropdown = document.getElementById('marital_status_dropdown');
    const sectionTitle = document.getElementById('nok_section_title');
    const nameLabel = document.getElementById('nok_name_label');
    const phoneLabel = document.getElementById('nok_phone_label');
    const addressLabel = document.getElementById('nok_address_label');

    function updateNokContext() {
        if (maritalDropdown && maritalDropdown.value === 'Married') {
            sectionTitle.textContent = "Spouse / Next of Kin Anchor Parameters";
            nameLabel.textContent = "Spouse Name";
            phoneLabel.textContent = "Spouse Mobile Phone";
            addressLabel.textContent = "Spouse Address";
        } else {
            sectionTitle.textContent = "Next of Kin Anchor Parameters";
            nameLabel.textContent = "Next of Kin Name";
            phoneLabel.textContent = "Next of Kin Mobile Phone";
            addressLabel.textContent = "Next of Kin Address";
        }
    }

    if (maritalDropdown) {
        maritalDropdown.addEventListener('change', updateNokContext);
        updateNokContext();
    }
})();
</script>