@extends('layouts.admin')

@section('title', 'Apply for Scheme')

@section('content')
<div class="card mb-4">
    <div class="card-header">
        <strong>New Scheme Application</strong>
    </div>
    <div class="card-body">
        <form action="{{ route('center.applications.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label">Target Family</label>
                    <input
                        type="text"
                        id="family_search"
                        class="form-control mb-2"
                        placeholder="Search by head name or ration card number"
                        oninput="filterFamilyOptions()"
                    >
                    <select name="family_id" id="family_id" class="form-select" onchange="onFamilyChanged()" required>
                        <option value="">-- Choose Family --</option>
                        @foreach($families as $family)
                            <option value="{{ $family->id }}" data-citizens='@json($family->citizens)'
                                {{ (string) old('family_id') === (string) $family->id ? 'selected' : '' }}>
                                {{ $family->head_name }} ({{ $family->ration_card_number }})
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Schemes are auto-suggested after selecting a family.</div>
                </div>

                <div class="col-12" id="scheme_suggestion_box" style="display:none;">
                    <div class="alert alert-success py-2 px-3 mb-0">
                        <i class="ti ti-bulb me-1"></i>
                        <strong>Eligible scheme suggestions:</strong>
                        <span id="scheme_suggestion_text" class="ms-1"></span>
                    </div>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Select Scheme</label>
                    <select name="scheme_id" id="scheme_id" class="form-select" onchange="renderDynamicFields()" required>
                        <option value="">-- Choose Scheme --</option>
                        @foreach($schemes as $scheme)
                            <option value="{{ $scheme->id }}"
                                data-fields='@json($scheme->dynamic_fields)'
                                data-min-age="{{ $scheme->min_age ?? '' }}"
                                data-max-age="{{ $scheme->max_age ?? '' }}"
                                data-max-income="{{ $scheme->max_income ?? '' }}"
                                data-base-name="{{ $scheme->name }}"
                                {{ (string) old('scheme_id') === (string) $scheme->id ? 'selected' : '' }}>
                                {{ $scheme->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6" id="citizen_container" style="display:none;">
                    <label class="form-label">Target Citizen</label>
                    <select name="user_id" id="user_id" class="form-select" required>
                        <option value="">-- Select Member --</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Application Status</label>
                    <select name="status" class="form-select">
                        <option value="Draft" {{ old('status') === 'Draft' ? 'selected' : '' }}>Draft</option>
                        <option value="Submitted" {{ old('status', 'Submitted') === 'Submitted' ? 'selected' : '' }}>Submitted</option>
                        <option value="Under Verification" {{ old('status') === 'Under Verification' ? 'selected' : '' }}>Under Verification</option>
                        <option value="Approved" {{ old('status') === 'Approved' ? 'selected' : '' }}>Approved</option>
                        <option value="Declined" {{ old('status') === 'Declined' ? 'selected' : '' }}>Declined</option>
                        <option value="Closed" {{ old('status') === 'Closed' ? 'selected' : '' }}>Closed</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Renewal Date (Optional)</label>
                    <input type="date" name="renewal_date" class="form-control" value="{{ old('renewal_date') }}">
                </div>
            </div>

            <hr class="my-4">
            <div id="dynamic-form-fields"></div>

            <div class="d-flex gap-2 mt-3">
                <button type="submit" class="btn btn-primary">Submit Application</button>
                <a href="{{ route('center.applications.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
    const oldDynamicFields = @json(old('dynamic_fields', []));

    function getAgeFromDob(dob) {
        if (!dob) return null;
        const dobDate = new Date(dob);
        if (isNaN(dobDate.getTime())) return null;

        const today = new Date();
        let age = today.getFullYear() - dobDate.getFullYear();
        const monthDiff = today.getMonth() - dobDate.getMonth();
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dobDate.getDate())) {
            age--;
        }
        return age;
    }

    function parseIncome(value) {
        if (value === null || value === undefined) return null;
        const cleaned = String(value).replace(/,/g, '').trim();
        if (cleaned === '') return null;
        const parsed = Number(cleaned);
        return Number.isFinite(parsed) ? parsed : null;
    }

    function escapeHtml(value) {
        return String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function filterFamilyOptions() {
        const searchInput = document.getElementById('family_search');
        const familySelect = document.getElementById('family_id');
        const query = (searchInput.value || '').toLowerCase().trim();

        let visibleCount = 0;
        for (let i = 1; i < familySelect.options.length; i++) {
            const option = familySelect.options[i];
            const text = (option.textContent || '').toLowerCase();
            const isMatch = query === '' || text.includes(query);
            option.hidden = !isMatch;
            if (isMatch) visibleCount++;
        }

        if (familySelect.selectedIndex > 0 && familySelect.options[familySelect.selectedIndex].hidden) {
            familySelect.value = '';
            onFamilyChanged();
        }

        if (visibleCount === 0) {
            familySelect.value = '';
            onFamilyChanged();
        }
    }

    function updateCitizenList() {
        const familySelect = document.getElementById('family_id');
        const selectedOption = familySelect.options[familySelect.selectedIndex];
        const citizenSelect = document.getElementById('user_id');
        const citizenContainer = document.getElementById('citizen_container');
        const oldUserId = '{{ old('user_id') }}';

        citizenSelect.innerHTML = '<option value="">-- Select Member --</option>';

        if(selectedOption.value) {
            const citizens = JSON.parse(selectedOption.getAttribute('data-citizens') || '[]');
            citizens.forEach(c => {
                const selected = String(c.id) === String(oldUserId) ? 'selected' : '';
                citizenSelect.innerHTML += `<option value="${c.id}" ${selected}>${c.name}</option>`;
            });
            citizenContainer.style.display = 'block';
        } else {
            citizenContainer.style.display = 'none';
        }
    }

    function getEligibleSchemeIds(citizens) {
        const schemeSelect = document.getElementById('scheme_id');
        const eligibleIds = [];

        for (let i = 0; i < schemeSelect.options.length; i++) {
            const option = schemeSelect.options[i];
            if (!option.value) continue;

            const minAgeRaw = option.getAttribute('data-min-age');
            const maxAgeRaw = option.getAttribute('data-max-age');
            const maxIncomeRaw = option.getAttribute('data-max-income');

            const minAge = minAgeRaw !== '' ? Number(minAgeRaw) : null;
            const maxAge = maxAgeRaw !== '' ? Number(maxAgeRaw) : null;
            const maxIncome = maxIncomeRaw !== '' ? Number(maxIncomeRaw) : null;

            const hasEligibleMember = citizens.some(citizen => {
                const age = getAgeFromDob(citizen.dob);

                if (minAge !== null && (age === null || age < minAge)) {
                    return false;
                }

                if (maxAge !== null && (age === null || age > maxAge)) {
                    return false;
                }

                if (maxIncome !== null) {
                    const income = parseIncome(citizen.income_certificate_no);
                    if (income !== null && income > maxIncome) {
                        return false;
                    }
                }

                return true;
            });

            if (hasEligibleMember) {
                eligibleIds.push(String(option.value));
            }
        }

        return eligibleIds;
    }

    function updateSchemeSuggestions() {
        const familySelect = document.getElementById('family_id');
        const selectedOption = familySelect.options[familySelect.selectedIndex];
        const schemeSelect = document.getElementById('scheme_id');
        const suggestionBox = document.getElementById('scheme_suggestion_box');
        const suggestionText = document.getElementById('scheme_suggestion_text');

        for (let i = 0; i < schemeSelect.options.length; i++) {
            const option = schemeSelect.options[i];
            if (!option.value) continue;
            option.textContent = option.getAttribute('data-base-name') || option.textContent;
        }

        if (!selectedOption.value) {
            suggestionBox.style.display = 'none';
            return;
        }

        const citizens = JSON.parse(selectedOption.getAttribute('data-citizens') || '[]');
        const eligibleIds = getEligibleSchemeIds(citizens);
        const eligibleNames = [];

        for (let i = 0; i < schemeSelect.options.length; i++) {
            const option = schemeSelect.options[i];
            if (!option.value) continue;

            const isEligible = eligibleIds.includes(String(option.value));
            const baseName = option.getAttribute('data-base-name') || option.textContent;
            option.textContent = isEligible ? `${baseName} (Recommended)` : baseName;

            if (isEligible) {
                eligibleNames.push(baseName);
            }
        }

        if (eligibleNames.length) {
            suggestionText.textContent = eligibleNames.join(', ');
            suggestionBox.style.display = 'block';

            if (!eligibleIds.includes(String(schemeSelect.value))) {
                schemeSelect.value = eligibleIds[0];
                renderDynamicFields();
            }
        } else {
            suggestionText.textContent = 'No exact match found by age/income criteria. You can still choose a scheme manually.';
            suggestionBox.style.display = 'block';
        }
    }

    function onFamilyChanged() {
        updateCitizenList();
        updateSchemeSuggestions();
    }

    function renderDynamicFields() {
        const schemeSelect = document.getElementById('scheme_id');
        const selectedOption = schemeSelect.options[schemeSelect.selectedIndex];
        const container = document.getElementById('dynamic-form-fields');
        
        container.innerHTML = '';

        if(selectedOption.value) {
            const fields = JSON.parse(selectedOption.getAttribute('data-fields') || '[]');
            
            if(fields && fields.length > 0) {
                container.innerHTML = '<h5 class="mb-3 mt-4">Scheme Requirements</h5>';
                fields.forEach(f => {
                    const label = f.label || 'Field';
                    const key = (f.key && String(f.key).trim() !== '')
                        ? String(f.key).trim()
                        : String(label).toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');

                    const type = f.type || 'text';
                    const placeholder = escapeHtml(f.placeholder || '');
                    const helpText = escapeHtml(f.help_text || '');
                    const options = Array.isArray(f.options) ? f.options : [];
                    let inputHtml = '';
                    
                    const isRequired = f.required ? 'required' : '';
                    const reqStar = f.required ? '<span class="text-danger">*</span>' : '';
                    const oldValue = oldDynamicFields[key] ?? '';
                    const oldValueEscaped = escapeHtml(oldValue);

                    if(type === 'file') {
                        inputHtml = `<input type="file" class="form-control" name="dynamic_fields_files[${key}]" ${isRequired}>`;
                    } else if (type === 'date') {
                        inputHtml = `<input type="date" class="form-control" name="dynamic_fields[${key}]" value="${oldValueEscaped}" ${isRequired}>`;
                    } else if (type === 'number') {
                        inputHtml = `<input type="number" class="form-control" name="dynamic_fields[${key}]" value="${oldValueEscaped}" placeholder="${placeholder}" ${isRequired}>`;
                    } else if (type === 'textarea') {
                        inputHtml = `<textarea class="form-control" rows="3" name="dynamic_fields[${key}]" placeholder="${placeholder}" ${isRequired}>${oldValueEscaped}</textarea>`;
                    } else if (type === 'select') {
                        let optionsHtml = '<option value="">-- Select --</option>';
                        options.forEach(opt => {
                            const selected = String(oldValue) === String(opt) ? 'selected' : '';
                            optionsHtml += `<option value="${escapeHtml(opt)}" ${selected}>${escapeHtml(opt)}</option>`;
                        });
                        inputHtml = `<select class="form-select" name="dynamic_fields[${key}]" ${isRequired}>${optionsHtml}</select>`;
                    } else if (type === 'checkbox') {
                        const checked = ['1', 1, true, 'true', 'on', 'yes'].includes(oldValue) ? 'checked' : '';
                        inputHtml = `
                            <div class="form-check">
                                <input type="hidden" name="dynamic_fields[${key}]" value="0">
                                <input type="checkbox" class="form-check-input" name="dynamic_fields[${key}]" value="1" id="field_${key}" ${checked} ${isRequired}>
                                <label class="form-check-label" for="field_${key}">Yes</label>
                            </div>
                        `;
                    } else {
                        inputHtml = `<input type="text" class="form-control" name="dynamic_fields[${key}]" value="${oldValueEscaped}" placeholder="${placeholder}" ${isRequired}>`;
                    }

                    container.innerHTML += `
                        <div class="mb-3">
                            <label class="form-label">${label} ${reqStar}</label>
                            ${inputHtml}
                            ${helpText ? `<div class="form-text">${helpText}</div>` : ''}
                        </div>
                    `;
                });
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        filterFamilyOptions();
        onFamilyChanged();
        renderDynamicFields();
    });
</script>
@endsection