Sindbad~EG File Manager
<!-- COMPREHENSIVE MEMBERSHIP FORM -->
<!-- This form should replace the simple membership form in membership-issue.php -->
<!-- Starting from line 420 (inside the membershipFormFields div) -->
<div id="membershipFormFields" class="hidden space-y-6 p-6 bg-gray-50 rounded-lg">
<h3 class="text-2xl font-bold text-gray-800 mb-4">
<i class="fas fa-user-plus mr-2 text-blue-500"></i>Comprehensive Membership Application
</h3>
<!-- Personal Information -->
<div class="bg-white p-6 rounded-lg border border-gray-200">
<h4 class="text-lg font-bold text-gray-800 mb-4">
<i class="fas fa-user mr-2 text-blue-500"></i>Personal Information
</h4>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Title</label>
<select name="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
<option value="">Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Rev">Rev</option>
<option value="Pastor">Pastor</option>
<option value="Deacon">Deacon</option>
<option value="Deaconess">Deaconess</option>
<option value="Elder">Elder</option>
<option value="Evangelist">Evangelist</option>
<option value="Prophet">Prophet</option>
<option value="Apostle">Apostle</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">First Name *</label>
<input type="text" name="first_name" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Middle Name</label>
<input type="text" name="middle_name" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Last Name *</label>
<input type="text" name="last_name" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Gender *</label>
<select name="gender" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Date of Birth</label>
<input type="date" name="date_of_birth" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Place of Birth</label>
<input type="text" name="place_of_birth" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Marital Status</label>
<select name="marital_status" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
<option value="">Select</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Widowed">Widowed</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Member Type</label>
<select name="member_type" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
<option value="Full Member" selected>Full Member</option>
<option value="Associate Member">Associate Member</option>
<option value="Youth">Youth</option>
<option value="Children">Children</option>
</select>
</div>
</div>
</div>
<!-- Contact Information -->
<div class="bg-white p-6 rounded-lg border border-gray-200">
<h4 class="text-lg font-bold text-gray-800 mb-4">
<i class="fas fa-address-book mr-2 text-blue-500"></i>Contact Information
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Phone</label>
<input type="tel" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
<input type="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="md:col-span-2">
<label class="block text-sm font-semibold text-gray-700 mb-2">Address Line 1</label>
<textarea name="address_line1" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">GPS Address</label>
<input type="text" name="gps_address" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Street Name</label>
<input type="text" name="street_name" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">City</label>
<input type="text" name="city" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Hometown</label>
<input type="text" name="hometown" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
</div>
</div>
<!-- Church Location -->
<div class="bg-white p-6 rounded-lg border border-gray-200">
<h4 class="text-lg font-bold text-gray-800 mb-4">
<i class="fas fa-church mr-2 text-blue-500"></i>Church Location
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Area *</label>
<select name="area_id" id="areaSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg" onchange="loadDistricts(this.value)">
<option value="">Select Area</option>
<?php
$areasStmt = $db->query("SELECT id, area_name FROM areas WHERE is_active = 1 ORDER BY area_name");
while ($area = $areasStmt->fetch()): ?>
<option value="<?php echo $area['id']; ?>"><?php echo htmlspecialchars($area['area_name']); ?></option>
<?php endwhile; ?>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">District *</label>
<select name="district_id" id="districtSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg" onchange="loadAssemblies(this.value)">
<option value="">Select District</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Assembly *</label>
<select name="assembly_id" id="assemblySelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
<option value="">Select Assembly</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Family ID (Optional)</label>
<input type="text" name="family_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Link to family">
</div>
</div>
</div>
<!-- Spiritual Information -->
<div class="bg-white p-6 rounded-lg border border-gray-200">
<h4 class="text-lg font-bold text-gray-800 mb-4">
<i class="fas fa-cross mr-2 text-blue-500"></i>Spiritual Information
</h4>
<div class="flex flex-wrap gap-6 mb-4">
<label class="flex items-center">
<input type="checkbox" name="water_baptism" class="mr-2 rounded">
<span class="text-sm font-semibold text-gray-700">Water Baptism</span>
</label>
<label class="flex items-center">
<input type="checkbox" name="holyghost_baptism" class="mr-2 rounded">
<span class="text-sm font-semibold text-gray-700">Holy Ghost Baptism</span>
</label>
<label class="flex items-center">
<input type="checkbox" name="communicant" class="mr-2 rounded">
<span class="text-sm font-semibold text-gray-700">Communicant</span>
</label>
<label class="flex items-center">
<input type="checkbox" name="dedicated" class="mr-2 rounded">
<span class="text-sm font-semibold text-gray-700">Dedicated</span>
</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Date of Baptism</label>
<input type="date" name="date_of_baptism" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Date of Holy Spirit Baptism</label>
<input type="date" name="date_of_holyspirit_baptism" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Date of Conversion</label>
<input type="date" name="date_of_conversion" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Date of Joining</label>
<input type="date" name="date_of_joining" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Dedication Date</label>
<input type="date" name="dedication_date" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Place of Baptism</label>
<input type="text" name="place_of_baptism" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Officiating Minister (Baptism)</label>
<input type="text" name="officiating_minister_baptism" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Minister's District/Church</label>
<input type="text" name="officiating_ministers_district" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Officiating Minister (Dedication)</label>
<input type="text" name="name_of_officiating_minister" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Church Where Dedication Done</label>
<input type="text" name="church_where_dedication_done" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
</div>
</div>
<!-- Other Information -->
<div class="bg-white p-6 rounded-lg border border-gray-200">
<h4 class="text-lg font-bold text-gray-800 mb-4">
<i class="fas fa-info-circle mr-2 text-blue-500"></i>Other Information
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Occupation</label>
<input type="text" name="occupation" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Level of Education</label>
<select name="level_of_education" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
<option value="">Select</option>
<option value="Primary">Primary</option>
<option value="JHS">JHS</option>
<option value="SHS">SHS</option>
<option value="Tertiary">Tertiary</option>
<option value="Postgraduate">Postgraduate</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Parent Name</label>
<input type="text" name="parent_name" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Parent Relationship</label>
<input type="text" name="parent_relationship" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="e.g., Father, Mother, Guardian">
</div>
</div>
</div>
</div>
<!-- Add this JavaScript for dynamic dropdowns -->
<script>
function loadDistricts(areaId) {
if (!areaId) {
document.getElementById('districtSelect').innerHTML = '<option value="">Select District</option>';
document.getElementById('assemblySelect').innerHTML = '<option value="">Select Assembly</option>';
return;
}
fetch('<?php echo BASE_URL; ?>api/get-districts.php?area_id=' + areaId)
.then(response => response.json())
.then(data => {
let html = '<option value="">Select District</option>';
data.forEach(district => {
html += `<option value="${district.id}">${district.district_name}</option>`;
});
document.getElementById('districtSelect').innerHTML = html;
document.getElementById('assemblySelect').innerHTML = '<option value="">Select Assembly</option>';
});
}
function loadAssemblies(districtId) {
if (!districtId) {
document.getElementById('assemblySelect').innerHTML = '<option value="">Select Assembly</option>';
return;
}
fetch('<?php echo BASE_URL; ?>api/get-assemblies.php?district_id=' + districtId)
.then(response => response.json())
.then(data => {
let html = '<option value="">Select Assembly</option>';
data.forEach(assembly => {
html += `<option value="${assembly.id}">${assembly.assembly_name}</option>`;
});
document.getElementById('assemblySelect').innerHTML = html;
});
}
</script>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists