@extends('layouts.admin')
@section('title', 'Create Member')
@section('page-title', 'Add New Member')
@section('page-subtitle', 'Register a new church member')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="card-royal p-6">
        <form method="POST" action="{{ route('admin.members.store') }}" enctype="multipart/form-data">
            @csrf
            
            <div class="mb-8">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4 flex items-center">
                    <i class="fas fa-user-circle text-gold-500 mr-2"></i> Personal Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="md:col-span-2">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">First Name *</label>
                                <input type="text" name="first_name" value="{{ old('first_name') }}" required class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Last Name *</label>
                                <input type="text" name="last_name" value="{{ old('last_name') }}" required class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email *</label>
                                <input type="email" name="email" value="{{ old('email') }}" required class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Phone</label>
                                <input type="text" name="phone" value="{{ old('phone') }}" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Date of Birth</label>
                                <input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Gender</label>
                                <select name="gender" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                                    <option value="">Select</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Profile Photo</label>
                        <div class="relative">
                            <input type="file" name="profile_photo" id="profilePhotoInput" accept="image/*" class="hidden" onchange="previewImage(this)">
                            <label for="profilePhotoInput" class="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-[var(--border-color)] rounded-lg cursor-pointer hover:bg-[var(--bg-secondary)] transition-colors">
                                <div id="photoPreview" class="flex flex-col items-center justify-center text-[var(--text-secondary)]">
                                    <i class="fas fa-camera text-3xl mb-2"></i>
                                    <span class="text-sm">Click to upload</span>
                                    <span class="text-xs">JPG, PNG (max 2MB)</span>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-8">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4 flex items-center">
                    <i class="fas fa-users text-gold-500 mr-2"></i> Family Information
                </h3>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Does this member have a family?</label>
                    <select name="has_family" id="hasFamilySelect" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]" onchange="toggleFamilySection()">
                        <option value="no">No</option>
                        <option value="yes">Yes</option>
                    </select>
                </div>

                <div id="familySection" style="display:none;">
                    <div class="p-4 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-color)]">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Family Name</label>
                            <input type="text" name="family_name" id="familyNameInput" value="{{ old('family_name') }}" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]" placeholder="Enter family name">
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Number of Family Members to Add</label>
                            <select id="familyCount" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]" onchange="generateFamilyCards()">
                                <option value="0">Select number...</option>
                                <option value="1">1 Person</option>
                                <option value="2">2 People</option>
                                <option value="3">3 People</option>
                                <option value="4">4 People</option>
                                <option value="5">5 People</option>
                                <option value="6">6 People</option>
                                <option value="7">7 People</option>
                                <option value="8">8 People</option>
                            </select>
                        </div>
                        
                        <div id="familyCardsContainer" class="space-y-4">
                        </div>
                        
                        <div class="mt-4">
                            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Family Role</label>
                            <select name="family_role" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                                <option value="">Select role</option>
                                <option value="head">Head</option>
                                <option value="spouse">Spouse</option>
                                <option value="child">Child</option>
                                <option value="relative">Relative</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-8">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Church Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @if($churches->count() > 1)
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Branch *</label>
                        <select name="church_id" required class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            <option value="">Select Branch</option>
                            @foreach($churches as $ch)
                                <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Membership Status</label>
                        <select name="membership_status" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            <option value="prospect">Prospect</option>
                            <option value="new">New</option>
                            <option value="active">Active</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Group</label>
                        <select name="group_id" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                            <option value="">No Group</option>
                            @foreach($groups as $group)
                                <option value="{{ $group->id }}">{{ $group->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-4">
                <a href="{{ route('admin.members.index') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)]">Cancel</a>
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Save Member</button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleFamilySection() {
    var select = document.getElementById('hasFamilySelect');
    var section = document.getElementById('familySection');
    if (select.value === 'yes') {
        section.style.display = 'block';
    } else {
        section.style.display = 'none';
    }
}

function generateFamilyCards() {
    var count = parseInt(document.getElementById('familyCount').value) || 0;
    var container = document.getElementById('familyCardsContainer');
    container.innerHTML = '';
    
    for (var i = 1; i <= count; i++) {
        var card = document.createElement('div');
        card.className = 'bg-[var(--bg-secondary)] p-4 rounded-lg border border-[var(--border-color)]';
        card.innerHTML = '<h4 class="font-semibold text-[var(--text-primary)] mb-3">Family Member ' + i + '</h4>' +
            '<div class="grid grid-cols-1 md:grid-cols-3 gap-4">' +
            '<div>' +
            '<label class="block text-xs text-[var(--text-secondary)] mb-1">Name</label>' +
            '<input type="text" name="family_member_names[]" class="w-full px-3 py-2 rounded border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] text-sm">' +
            '</div>' +
            '<div>' +
            '<label class="block text-xs text-[var(--text-secondary)] mb-1">Relationship</label>' +
            '<select name="family_member_relations[]" class="w-full px-3 py-2 rounded border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] text-sm">' +
            '<option value="">Select</option>' +
            '<option value="spouse">Spouse</option>' +
            '<option value="child">Child</option>' +
            '<option value="relative">Relative</option>' +
            '</select>' +
            '</div>' +
            '<div>' +
            '<label class="block text-xs text-[var(--text-secondary)] mb-1">Date of Birth</label>' +
            '<input type="date" name="family_member_dobs[]" class="w-full px-3 py-2 rounded border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] text-sm">' +
            '</div>' +
            '</div>';
        container.appendChild(card);
    }
}

function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('photoPreview').innerHTML = 
                '<img src="' + e.target.result + '" class="w-full h-full object-cover rounded-lg">';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection