@extends('frontend.layouts.app')

@section('content')
<div class="py-4 py-lg-5 mt-5">
	<div class="container">
		<div class="row">
			<div class="col-xxl-6 col-xl-6 col-md-8 mx-auto">
				<div class="card">
					<div class="card-body">
						<div class="mb-5 text-center">
							<h1 class="h3 text-primary mb-0">{{ translate('Complete Your Profile') }}</h1>
							<p class="form-subtitle">Family Information</p>
						</div>

                        <form class="form-default family-info-form" enctype="multipart/form-data" role="form" action="{{ route('complete_profile.family_update') }}" method="POST">
							@csrf

                            @php
                                $member = Auth::user();
                            @endphp

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="father">Father <span class="text-danger">*</span></label>
                                        <input type="text" name="father" value="{{ $member->families->father ?? "" }}" class="form-control" placeholder="Father" required="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mother">Mother <span class="text-danger">*</span></label>
                                        <input type="text" name="mother" value="{{ $member->families->mother ?? "" }}" placeholder="Mother" class="form-control" required="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="grand_father">Grand Father <span class="text-danger">*</span></label>
                                        <input type="text" name="grand_father" value="{{ $member->families->grand_father ?? "" }}" class="form-control" placeholder="Grand Father" required="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="grand_mother">Grand Mother <span class="text-danger">*</span></label>
                                        <input type="text" name="grand_mother" value="{{ $member->families->grand_mother ?? "" }}" placeholder="Grand Mother" class="form-control" required="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="father_occupation">Father Occupation</label>
                                        <input type="text" name="father_occupation" value="{{ $member->families->father_occupation ?? "" }}" class="form-control" placeholder="Father Occupation">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mother_occupation">Mother Occupation</label>
                                        <input type="text" name="mother_occupation" value="{{ $member->families->mother_occupation ?? "" }}" placeholder="Mother Occupation" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="father_mobile_no">Father Mobile No.</label>
                                        <input type="text" name="father_mobile_no" value="{{ $member->families->father_mobile_no ?? "" }}" class="form-control" placeholder="Father Mobile No.">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mother_mobile_no">Mother Mobile No.</label>
                                        <input type="text" name="mother_mobile_no" value="{{ $member->families->mother_mobile_no ?? "" }}" placeholder="Mother Mobile No." class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="samaj">Samaj</label>
                                        <input type="text" name="samaj" value="{{ $member->families->samaj ?? "" }}" class="form-control" placeholder="Samaj">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="gotra">Gotra</label>
                                        <input type="text" name="gotra" value="{{ $member->families->gotra ?? "" }}" placeholder="Gotra" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="sibling">No. of Sibling</label>
                                        <input type="number" name="sibling" id="sibling-count" value="{{ $member->families->sibling ?? 0 }}" class="form-control" oninput="generateSiblingFields()" placeholder="No. of siblings">
                                    </div>
                                </div>
                            </div>
                            <div id="sibling-fields-container"></div>

                            <div class="row">
                                <div class="col-lg-12 text-right">
                                    <button type="submit" class="btn btn-sm btn-primary btn-submit">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    const existingSiblings = @json(optional($member->families)->siblings ?? []);

    const noOfSiblings = $('#sibling-count').val();
    let siblingIndex = 0;

    function generateSiblingFields() {
        const container = document.getElementById('sibling-fields-container');
        if (!container) return;

        const count = parseInt(document.getElementById('sibling-count').value);
        container.innerHTML = '';
        siblingIndex = 0;

        if (isNaN(count) || count <= 0) return;

        for (let i = 0; i < count; i++) {
            addSiblingField(existingSiblings[i] || {});
        }

        AIZ.plugins.bootstrapSelect('refresh');
    }

    function addSiblingField(sibling = {}) {
        const container = document.getElementById('sibling-fields-container');
        const id = sibling.id || '';
        const name = sibling.name || '';
        const education = sibling.education || '';
        const occupation = sibling.occupation || '';
        const relation = sibling.relation || '';
        const currentIndex = siblingIndex++;

        const card = document.createElement('div');
        card.className = 'card p-3 mb-3 sibling-card position-relative back-secondary';
        card.innerHTML = `
            <h6>Sibling ${currentIndex + 1}</h6>
            <input type="hidden" name="siblings[${currentIndex}][id]" value="${id}">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="siblings[${currentIndex}][name]" class="form-control" placeholder="Full Name" value="${name}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="siblings[${currentIndex}][education]" class="form-control" placeholder="Education" value="${education}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="siblings[${currentIndex}][occupation]" class="form-control" placeholder="Occupation" value="${occupation}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <select name="siblings[${currentIndex}][relation]" class="form-control aiz-selectpicker" required>
                            <option value="">Select Relation</option>
                            <option value="Younger Brother" ${relation === 'Younger Brother' ? 'selected' : ''}>Younger Brother</option>
                            <option value="Elder Brother" ${relation === 'Elder Brother' ? 'selected' : ''}>Elder Brother</option>
                            <option value="Younger Sister" ${relation === 'Younger Sister' ? 'selected' : ''}>Younger Sister</option>
                            <option value="Elder Sister" ${relation === 'Elder Sister' ? 'selected' : ''}>Elder Sister</option>
                        </select>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 px-1 py-0" onclick="removeSibling(this, '${id}', ${currentIndex})" title="Delete">
                <i class="las la-trash-alt"></i>
            </button>
        `;

        container.appendChild(card);
        AIZ.plugins.bootstrapSelect('refresh');
    }

    function removeSibling(button, siblingId, index) {
        const card = button.closest('.sibling-card');
        card.remove();

        // If sibling has an ID, mark it for deletion
        if (siblingId) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'deleted_siblings[]';
            input.value = siblingId;
            document.getElementById('sibling-fields-container').appendChild(input);
        }

        // Decrease sibling count input if greater than 0
        const siblingCountInput = document.getElementById('sibling-count');
        let currentCount = parseInt(siblingCountInput.value) || 0;
        if (currentCount > 0) {
            siblingCountInput.value = currentCount - 1;
        }

        // Update label numbers after deletion
        updateSiblingLabels();
    }

    function updateSiblingLabels() {
        const cards = document.querySelectorAll('.sibling-card');
        cards.forEach((card, index) => {
            const heading = card.querySelector('h6');
            if (heading) {
                heading.textContent = `Sibling ${index + 1}`;
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        if (existingSiblings.length > 0) {
            document.getElementById('sibling-count').value = existingSiblings.length;
            generateSiblingFields();
        }

        if(noOfSiblings > 0){
            generateSiblingFields();
        }
    });

    function validateFamilyFields() {
        const currentFormStep = document.querySelector('.family-info-form');
		const requiredFields = currentFormStep.querySelectorAll('[required]');
		let isValid = true;

        for (const field of requiredFields) {
			clearError(field);
			const value = field.value.trim();

            // Basic required check
			if (!value) {
				showError(field, 'This field is required.');
				isValid = false;
			}
        }

        return isValid;
    }

    function clearError(field) {
		field.classList.remove('is-invalid');

		const formGroup = field.closest('.form-group');
		if (!formGroup) return;

		const error = formGroup.querySelector('.invalid-feedback.dynamic');
		if (error) {
			error.remove();
		}
	}

	function showError(field, message) {
		field.classList.add('is-invalid');

		// Traverse up to the closest form-group
		const formGroup = field.closest('.form-group');
		if (!formGroup) return;

		let existingError = formGroup.querySelector('.invalid-feedback.dynamic');
		if (!existingError) {
			const errorElement = document.createElement('span');
			errorElement.className = 'invalid-feedback dynamic';
			errorElement.style.display = 'block';
			errorElement.innerText = message;
			formGroup.appendChild(errorElement);
		}
	}

    document.querySelector('.btn-submit').addEventListener('click', function (e) {
        e.preventDefault(); // Prevent default action of button

        if (validateFamilyFields()) {
            const form = document.querySelector('.family-info-form');
            const submitBtn = form.querySelector('.btn-submit');
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Please wait...';

            form.submit(); // Manually submit the form
        }
    });
</script>
@endsection