@extends('layouts.app')

@section('title', isset($lead) ? 'Edit Lead' : 'Add Lead')

@section('content')
    <div class="min-h-screen bg-gray-50 py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white shadow-lg rounded-lg">
                <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                    <h2 class="text-2xl font-bold text-gray-900">
                        @if(isset($lead))
                            Edit Lead
                        @else
                            Add Lead
                        @endif
                    </h2>
                    <a href="{{ route('leads.index') }}"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        <i class="fas fa-arrow-left mr-2"></i>Back to List
                    </a>
                </div>
                <div class="p-6">
                    <form action="{{ isset($lead) ? route('leads.update', $lead) : route('leads.store') }}" method="POST"
                        id="leadForm">
                        @csrf
                        @if(isset($lead))
                            @method('PUT')
                        @endif

                        <!-- Basic Information -->
                        <div class="mb-8">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Basic Information</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="company_name" class="block text-sm font-medium text-gray-700 mb-2">Company
                                        Name</label>
                                    <input type="text" id="company_name" name="company_name"
                                        value="{{ old('company_name', $lead->company_name ?? '') }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 @error('company_name') border-red-500 @enderror">
                                    @error('company_name')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="contact_person_name"
                                        class="block text-sm font-medium text-gray-700 mb-2">Contact Person</label>
                                    <input type="text" id="contact_person_name" name="contact_person_name"
                                        value="{{ old('contact_person_name', $lead->contact_person_name ?? '') }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 @error('contact_person_name') border-red-500 @enderror">
                                    @error('contact_person_name')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                                    <input type="email" id="email" name="email"
                                        value="{{ old('email', $lead->email ?? '') }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 @error('email') border-red-500 @enderror">
                                    @error('email')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="mobile_number" class="block text-sm font-medium text-gray-700 mb-2">Mobile
                                        Number</label>
                                    <input type="tel" id="mobile_number" name="mobile_number"
                                        value="{{ old('mobile_number', $lead->mobile_number ?? '') }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 @error('mobile_number') border-red-500 @enderror">
                                    @error('mobile_number')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Location Information -->
                        <div class="bg-white rounded-lg shadow p-6">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-4 border-b">Location Information</h2>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="address"
                                        class="block text-sm font-medium text-gray-700 mb-2">Address</label>
                                    <input type="text" name="address" id="address"
                                        value="{{ old('address', $lead->address ?? '') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                </div>

                                <div>
                                    <label for="city" class="block text-sm font-medium text-gray-700 mb-2">City</label>
                                    <input type="text" name="city" id="city" value="{{ old('city', $lead->city ?? '') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                </div>

                                <div>
                                    <label for="state" class="block text-sm font-medium text-gray-700 mb-2">State</label>
                                    <input type="text" name="state" id="state"
                                        value="{{ old('state', $lead->state ?? '') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                </div>

                                <div>
                                    <label for="postal_code" class="block text-sm font-medium text-gray-700 mb-2">Postal
                                        Code</label>
                                    <input type="text" name="postal_code" id="postal_code"
                                        value="{{ old('postal_code', $lead->postal_code ?? '') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                </div>

                                <div>
                                    <label for="country"
                                        class="block text-sm font-medium text-gray-700 mb-2">Country</label>
                                    <input type="text" name="country" id="country"
                                        value="{{ old('country', $lead->country ?? 'India') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                </div>

                            </div>
                        </div>

                        <!-- Service Requirements -->
                        <div class="bg-white rounded-lg shadow p-6">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-4 border-b">Service Requirements</h2>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="questionnaire_template_id"
                                        class="block text-sm font-medium text-gray-700 mb-2">Questionnaire Template</label>
                                    <select name="questionnaire_template_id" id="questionnaire_template_id"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-primary-500 focus:border-primary-500 @error('questionnaire_template_id') border-red-500 @enderror">
                                        <option value="">-- Select Questionnaire Template --</option>
                                        @if(isset($templates))
                                            @foreach($templates as $template)
                                                <option value="{{ $template->id }}" {{ old('questionnaire_template_id', $lead->questionnaire_template_id ?? '') == $template->id ? 'selected' : '' }}>
                                                    {{ $template->name }} ({{ $template->serviceType->type ?? 'Unknown Service' }})
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('questionnaire_template_id')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                    <p class="text-xs text-gray-500 mt-1">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        Select a questionnaire template to load relevant questions and inventory items
                                    </p>
                                </div>

                                <!-- Hidden field for service_type_id -->
                                <input type="hidden" name="service_type_id" id="hidden_service_type_id"
                                    value="{{ old('service_type_id', $lead->service_type_id ?? '') }}">
                            </div>
                        </div>

                        <!-- Questionnaire Section -->
                        <div class="bg-white rounded-lg shadow p-6">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-4 border-b">Questionnaire</h2>

                            <div id="questionnaireContainer">
                                <div class="text-center py-8" id="questionnaireLoading">
                                    <i class="fas fa-spinner fa-spin text-3xl text-gray-300 mb-3 block"></i>
                                    <p class="text-gray-500">Loading questionnaire...</p>
                                </div>

                                <div id="questionnaireContent" class="hidden">
                                    <!-- Questionnaire questions will be loaded here dynamically -->
                                </div>

                                <div id="noQuestionnaire" class="hidden text-center py-8">
                                    <i class="fas fa-clipboard-question text-3xl text-gray-300 mb-3 block"></i>
                                    <p class="text-gray-500">No questionnaire available for this service type</p>
                                </div>
                            </div>
                        </div>

                        <!-- Inventory Selection -->
                        <div class="bg-white rounded-lg shadow p-6">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-4 border-b">Inventory Selection</h2>

                            <div id="inventoryContainer">
                                <div class="text-center py-8" id="inventoryLoading">
                                    <i class="fas fa-spinner fa-spin text-3xl text-gray-300 mb-3 block"></i>
                                    <p class="text-gray-500">Loading inventory options...</p>
                                </div>

                                <div id="inventoryContent" class="hidden">
                                    <!-- Inventory items will be loaded here dynamically -->
                                </div>

                                <div id="noInventory" class="hidden text-center py-8">
                                    <i class="fas fa-box-open text-3xl text-gray-300 mb-3 block"></i>
                                    <p class="text-gray-500">No inventory items available for this service type</p>
                                </div>
                            </div>
                        </div>

                        <!-- Lead Status -->
                        @if(isset($lead))
                            <div class="bg-white rounded-lg shadow p-6">
                                <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-4 border-b">Lead Status</h2>

                                <div>
                                    <label for="lead_status" class="block text-sm font-medium text-gray-700 mb-2">Current Status
                                        *</label>
                                    <select name="lead_status" id="lead_status" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-primary-500 focus:border-primary-500">
                                        <option value="new" {{ old('lead_status', $lead->lead_status ?? '') === 'new' ? 'selected' : '' }}>New</option>
                                        <option value="contacted" {{ old('lead_status', $lead->lead_status ?? '') === 'contacted' ? 'selected' : '' }}>Contacted</option>
                                        <option value="qualified" {{ old('lead_status', $lead->lead_status ?? '') === 'qualified' ? 'selected' : '' }}>Qualified</option>
                                        <option value="proposal_sent" {{ old('lead_status', $lead->lead_status ?? '') === 'proposal_sent' ? 'selected' : '' }}>Proposal Sent</option>
                                        <option value="negotiation" {{ old('lead_status', $lead->lead_status ?? '') === 'negotiation' ? 'selected' : '' }}>Negotiation</option>
                                        <option value="closed_won" {{ old('lead_status', $lead->lead_status ?? '') === 'closed_won' ? 'selected' : '' }}>Closed Won</option>
                                        <option value="closed_lost" {{ old('lead_status', $lead->lead_status ?? '') === 'closed_lost' ? 'selected' : '' }}>Closed Lost</option>
                                    </select>
                                </div>
                            </div>
                        @endif

                        <!-- Form Actions -->
                        <div class="flex justify-end space-x-3">
                            <a href="{{ route('leads.index') }}"
                                class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                Cancel
                            </a>
                            <button type="submit" id="submitBtn"
                                class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                <i class="fas fa-save mr-2"></i>
                                <span id="submitBtnText">
                                    @if(isset($lead))
                                        Update Lead
                                    @else
                                        Create Lead
                                    @endif
                                </span>
                            </button>
                        </div>

                        <!-- Error/Success Messages -->
                        <div id="formMessages" class="mt-4 hidden">
                            <div id="messageContent" class="p-4 rounded-md"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    // Pass existing data from server to JavaScript for edit mode
    @if(isset($existingQuestionnaireResponses))
        window.existingQuestionnaireResponses = @json($existingQuestionnaireResponses);
    @else
        window.existingQuestionnaireResponses = { };
    @endif

    @if(isset($existingInventorySelections))
        window.existingInventorySelections = @json($existingInventorySelections);
    @else
        window.existingInventorySelections =[];
    @endif

    document.addEventListener('DOMContentLoaded', function () {
        console.log('Lead form script loaded');
        console.log('Existing questionnaire responses:', window.existingQuestionnaireResponses);
        console.log('Existing inventory selections:', window.existingInventorySelections);

        const form = document.getElementById('leadForm');
        const submitBtn = document.getElementById('submitBtn');
        const submitBtnText = document.getElementById('submitBtnText');
        const formMessages = document.getElementById('formMessages');
        const messageContent = document.getElementById('messageContent');
        const questionnaireTemplateSelect = document.getElementById('questionnaire_template_id');
        const questionnaireContainer = document.getElementById('questionnaireContainer');
        const inventoryContainer = document.getElementById('inventoryContainer');
        const hiddenServiceTypeInput = document.getElementById('hidden_service_type_id');

        console.log('Elements found:', {
            form: !!form,
            questionnaireTemplateSelect: !!questionnaireTemplateSelect,
            questionnaireContainer: !!questionnaireContainer,
            inventoryContainer: !!inventoryContainer,
            hiddenServiceTypeInput: !!hiddenServiceTypeInput
        });

        let questionnaireData = [];
        let selectedInventoryItems = window.existingInventorySelections || [];

        function showMessage(message, type = 'error') {
            formMessages.classList.remove('hidden');
            messageContent.classList.remove('bg-red-50', 'text-red-800', 'bg-green-50', 'text-green-800', 'bg-yellow-50', 'text-yellow-800');

            if (type === 'error') {
                messageContent.classList.add('bg-red-50', 'text-red-800');
            } else if (type === 'success') {
                messageContent.classList.add('bg-green-50', 'text-green-800');
            } else if (type === 'warning') {
                messageContent.classList.add('bg-yellow-50', 'text-yellow-800');
            }

            messageContent.innerHTML = message;

            if (type === 'success') {
                setTimeout(() => {
                    formMessages.classList.add('hidden');
                }, 5000);
            }
        }

        function setLoading(loading) {
            submitBtn.disabled = loading;
            if (loading) {
                submitBtnText.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Saving...';
                submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
            } else {
                submitBtnText.innerHTML = submitBtnText.getAttribute('data-original-text') ||
                    '{{ isset($lead) ? "Update Lead" : "Create Lead" }}';
                submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
            }
        }

        function loadQuestionnaire(templateId) {
            console.log('Loading questionnaire for template:', templateId);

            if (!templateId) {
                console.log('No template ID provided');
                document.getElementById('questionnaireLoading').classList.add('hidden');
                document.getElementById('questionnaireContent').classList.add('hidden');
                document.getElementById('noQuestionnaire').classList.remove('hidden');
                return;
            }

            document.getElementById('questionnaireLoading').classList.remove('hidden');
            document.getElementById('questionnaireContent').classList.add('hidden');
            document.getElementById('noQuestionnaire').classList.add('hidden');

            const apiUrl = `/api/v1/questionnaires/templates/${templateId}`;
            console.log('Fetching questionnaire from:', apiUrl);

            fetch(apiUrl)
                .then(response => {
                    console.log('Questionnaire response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Questionnaire data received:', data);
                    document.getElementById('questionnaireLoading').classList.add('hidden');

                    if (data.success && data.data && data.data.questions && data.data.questions.length > 0) {
                        questionnaireData = data.data.questions;
                        // Pass existing responses when editing
                        renderQuestionnaire(data.data.questions, window.existingQuestionnaireResponses);

                        // Update hidden service type field
                        if (data.data.service_type_id && hiddenServiceTypeInput) {
                            hiddenServiceTypeInput.value = data.data.service_type_id;
                            console.log('Updated service type ID to:', data.data.service_type_id);
                        }
                    } else {
                        console.log('No questionnaire questions found');
                        document.getElementById('noQuestionnaire').classList.remove('hidden');
                    }
                })
                .catch(error => {
                    console.error('Error loading questionnaire:', error);
                    document.getElementById('questionnaireLoading').classList.add('hidden');
                    document.getElementById('noQuestionnaire').classList.remove('hidden');
                });
        }

        function renderQuestionnaire(questions, existingResponses) {
            console.log('Rendering questionnaire with questions:', questions);
            console.log('Existing responses:', existingResponses);

            const content = document.getElementById('questionnaireContent');
            content.innerHTML = '';

            questions.forEach((question, index) => {
                console.log('Rendering question:', question);

                // Check if there's an existing response for this question
                const existingResponse = existingResponses && existingResponses[question.id];
                console.log('Existing response for question', question.id, ':', existingResponse);

                const questionDiv = document.createElement('div');
                questionDiv.className = 'mb-6 p-4 border border-gray-200 rounded-lg';

                const label = document.createElement('label');
                label.className = 'block text-sm font-medium text-gray-700 mb-2';
                // Use 'text' field instead of 'question_text'
                label.innerHTML = `${question.text} ${question.is_mandatory ? '<span class="text-red-500">*</span>' : ''}`;
                questionDiv.appendChild(label);

                if (question.help_text) {
                    const helpText = document.createElement('p');
                    helpText.className = 'text-xs text-gray-500 mb-2';
                    helpText.innerHTML = `<i class="fas fa-info-circle mr-1"></i>${question.help_text}`;
                    questionDiv.appendChild(helpText);
                }

                const input = createQuestionInput(question, index, existingResponse ? existingResponse.answer : null);
                questionDiv.appendChild(input);

                content.appendChild(questionDiv);
            });

            content.classList.remove('hidden');
            console.log('Questionnaire rendering completed');
        }

        // Helper function to parse options (handles both JSON array and comma-separated string)
        function parseOptions(options) {
            if (!options) return [];

            // If already an array, return it
            if (Array.isArray(options)) return options;

            // Try parsing as JSON first
            if (typeof options === 'string') {
                try {
                    const parsed = JSON.parse(options);
                    if (Array.isArray(parsed)) return parsed;
                } catch (e) {
                    // Not valid JSON, treat as comma-separated
                }

                // Parse as comma-separated string
                return options.split(',').map(opt => opt.trim()).filter(opt => opt.length > 0);
            }

            return [];
        }

        function createQuestionInput(question, index, existingValue) {
            console.log('Creating input for question type:', question.type, 'with existing value:', existingValue);

            const container = document.createElement('div');

            // Helper function to set value if exists
            const setValue = (input, value) => {
                if (value !== null && value !== undefined && value !== '') {
                    input.value = value;
                }
            };

            // Use 'type' field instead of 'question_type'
            switch (question.type) {
                case 'text':
                    const textInput = document.createElement('input');
                    textInput.type = 'text';
                    textInput.name = `questionnaire_responses[${index}][answer]`;
                    textInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500';
                    textInput.required = question.is_mandatory;
                    setValue(textInput, existingValue);
                    container.appendChild(textInput);
                    break;

                case 'textarea':
                    const textarea = document.createElement('textarea');
                    textarea.name = `questionnaire_responses[${index}][answer]`;
                    textarea.rows = 3;
                    textarea.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500';
                    textarea.required = question.is_mandatory;
                    setValue(textarea, existingValue);
                    container.appendChild(textarea);
                    break;

                case 'email':
                    const emailInput = document.createElement('input');
                    emailInput.type = 'email';
                    emailInput.name = `questionnaire_responses[${index}][answer]`;
                    emailInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500';
                    emailInput.required = question.is_mandatory;
                    setValue(emailInput, existingValue);
                    container.appendChild(emailInput);
                    break;

                case 'number':
                    const numberInput = document.createElement('input');
                    numberInput.type = 'number';
                    numberInput.name = `questionnaire_responses[${index}][answer]`;
                    numberInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500';
                    numberInput.required = question.is_mandatory;
                    setValue(numberInput, existingValue);
                    container.appendChild(numberInput);
                    break;

                case 'date':
                    const dateInput = document.createElement('input');
                    dateInput.type = 'date';
                    dateInput.name = `questionnaire_responses[${index}][answer]`;
                    dateInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500';
                    dateInput.required = question.is_mandatory;
                    setValue(dateInput, existingValue);
                    container.appendChild(dateInput);
                    break;

                case 'file':
                    const fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.name = `questionnaire_responses[${index}][answer]`;
                    fileInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500';
                    fileInput.required = question.is_mandatory;
                    // Note: Cannot pre-populate file inputs for security reasons
                    // Show existing file name if available
                    if (existingValue && existingValue !== '') {
                        const fileInfo = document.createElement('p');
                        fileInfo.className = 'text-xs text-gray-500 mt-1';
                        fileInfo.innerHTML = `<i class="fas fa-paperclip mr-1"></i>Existing file: ${existingValue}`;
                        container.appendChild(fileInput);
                        container.appendChild(fileInfo);
                    } else {
                        container.appendChild(fileInput);
                    }
                    break;

                case 'dropdown':
                    const dropdownOptions = parseOptions(question.options);
                    console.log('Dropdown options:', dropdownOptions);

                    const select = document.createElement('select');
                    select.name = `questionnaire_responses[${index}][answer]`;
                    select.className = 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500';
                    select.required = question.is_mandatory;

                    // Add default empty option
                    const defaultOption = document.createElement('option');
                    defaultOption.value = '';
                    defaultOption.textContent = '-- Select an option --';
                    select.appendChild(defaultOption);

                    dropdownOptions.forEach(option => {
                        const opt = document.createElement('option');
                        opt.value = option;
                        opt.textContent = option;
                        // Select if matches existing value
                        if (existingValue === option) {
                            opt.selected = true;
                        }
                        select.appendChild(opt);
                    });

                    container.appendChild(select);
                    break;

                case 'mcq':
                    console.log('MCQ options raw:', question.options, 'existingValue:', existingValue);
                    const mcqOptions = parseOptions(question.options);
                    console.log('Parsed MCQ options:', mcqOptions);

                    mcqOptions.forEach(option => {
                        const optionDiv = document.createElement('div');
                        optionDiv.className = 'flex items-center mb-2';

                        const radio = document.createElement('input');
                        radio.type = 'radio';
                        radio.name = `questionnaire_responses[${index}][answer]`;
                        radio.value = option;
                        radio.className = 'mr-2';
                        radio.required = question.is_mandatory;
                        // Check if matches existing value
                        if (existingValue === option) {
                            radio.checked = true;
                        }

                        const label = document.createElement('label');
                        label.className = 'text-sm text-gray-700';
                        label.textContent = option;

                        optionDiv.appendChild(radio);
                        optionDiv.appendChild(label);
                        container.appendChild(optionDiv);
                    });
                    break;

                case 'checkbox':
                    console.log('Checkbox options raw:', question.options, 'existingValue:', existingValue);
                    const checkboxOptions = parseOptions(question.options);
                    console.log('Parsed checkbox options:', checkboxOptions);

                    // Parse existing checkbox values (could be JSON array or comma-separated)
                    let selectedCheckboxValues = [];
                    if (existingValue) {
                        try {
                            selectedCheckboxValues = JSON.parse(existingValue);
                            if (!Array.isArray(selectedCheckboxValues)) {
                                selectedCheckboxValues = [existingValue];
                            }
                        } catch (e) {
                            // Not JSON, treat as single value or comma-separated
                            selectedCheckboxValues = existingValue.toString().split(',').map(v => v.trim());
                        }
                    }
                    console.log('Selected checkbox values:', selectedCheckboxValues);

                    checkboxOptions.forEach(option => {
                        const optionDiv = document.createElement('div');
                        optionDiv.className = 'flex items-center mb-2';

                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.name = `questionnaire_responses[${index}][answer][]`;
                        checkbox.value = option;
                        checkbox.className = 'mr-2';
                        // Check if this option is in selected values
                        if (selectedCheckboxValues.includes(option)) {
                            checkbox.checked = true;
                        }

                        const label = document.createElement('label');
                        label.className = 'text-sm text-gray-700';
                        label.textContent = option;

                        optionDiv.appendChild(checkbox);
                        optionDiv.appendChild(label);
                        container.appendChild(optionDiv);
                    });
                    break;
            }

            // Hidden input for question ID
            const questionIdInput = document.createElement('input');
            questionIdInput.type = 'hidden';
            questionIdInput.name = `questionnaire_responses[${index}][question_id]`;
            questionIdInput.value = question.id;
            container.appendChild(questionIdInput);

            console.log('Created input container for question:', question.text);
            return container;
        }

        function loadInventory(templateId) {
            console.log('Loading inventory for template:', templateId);

            if (!templateId) {
                console.log('No template ID provided');
                document.getElementById('inventoryLoading').classList.add('hidden');
                document.getElementById('inventoryContent').classList.add('hidden');
                document.getElementById('noInventory').classList.remove('hidden');
                return;
            }

            document.getElementById('inventoryLoading').classList.remove('hidden');
            document.getElementById('inventoryContent').classList.add('hidden');
            document.getElementById('noInventory').classList.add('hidden');

            const apiUrl = `/api/v1/inventory/by-template/${templateId}`;
            console.log('Fetching inventory from:', apiUrl);

            fetch(apiUrl)
                .then(response => {
                    console.log('Inventory response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Inventory data received:', data);
                    document.getElementById('inventoryLoading').classList.add('hidden');

                    if (data.success && data.data && data.data.length > 0) {
                        // Pass existing selections when editing
                        renderInventory(data.data, window.existingInventorySelections);
                    } else {
                        console.log('No inventory items found');
                        document.getElementById('noInventory').classList.remove('hidden');
                    }
                })
                .catch(error => {
                    console.error('Error loading inventory:', error);
                    document.getElementById('inventoryLoading').classList.add('hidden');
                    document.getElementById('noInventory').classList.remove('hidden');
                });
        }

        function renderInventory(items, existingSelections = []) {
            console.log('Rendering inventory with items:', items);
            console.log('Existing inventory selections:', existingSelections);

            const content = document.getElementById('inventoryContent');
            content.innerHTML = '';

            items.forEach(item => {
                // Check if this item has an existing selection
                const existingSelection = existingSelections.find(
                    sel => sel.template_inventory_item_id === item.template_inventory_item_id
                );
                const existingQuantity = existingSelection ? existingSelection.quantity : 0;
                console.log(`Item ${item.name}: existing quantity = ${existingQuantity}`);

                const itemDiv = document.createElement('div');
                itemDiv.className = 'mb-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50';

                const header = document.createElement('div');
                header.className = 'flex items-center justify-between mb-2';

                const title = document.createElement('h4');
                title.className = 'font-medium text-gray-900';
                title.textContent = item.name;

                const price = document.createElement('span');
                price.className = 'text-sm text-gray-600';
                price.textContent = `₹${item.selling_price}`;

                header.appendChild(title);
                header.appendChild(price);

                const description = document.createElement('p');
                description.className = 'text-sm text-gray-600 mb-3';
                description.textContent = item.description;

                const controls = document.createElement('div');
                controls.className = 'flex items-center space-x-4';

                const quantityDiv = document.createElement('div');
                quantityDiv.className = 'flex items-center space-x-2';

                const quantityLabel = document.createElement('label');
                quantityLabel.className = 'text-sm text-gray-600';
                quantityLabel.textContent = 'Quantity:';

                const quantityInput = document.createElement('input');
                quantityInput.type = 'number';
                quantityInput.min = '0';
                quantityInput.value = existingQuantity > 0 ? existingQuantity : '0';
                quantityInput.className = 'w-20 px-2 py-1 border border-gray-300 rounded';
                quantityInput.dataset.inventoryItemId = item.id;
                quantityInput.dataset.templateInventoryItemId = item.template_inventory_item_id;
                quantityInput.dataset.price = item.selling_price;

                quantityDiv.appendChild(quantityLabel);
                quantityDiv.appendChild(quantityInput);

                const selectBtn = document.createElement('button');
                selectBtn.type = 'button';
                selectBtn.className = 'px-3 py-1 bg-primary-600 text-white text-sm rounded hover:bg-primary-700';
                selectBtn.textContent = 'Select';
                selectBtn.onclick = () => selectInventoryItem(item, quantityInput);

                // If already selected, show selected indicator
                if (existingQuantity > 0) {
                    const selectedIndicator = document.createElement('span');
                    selectedIndicator.className = 'text-xs text-green-600 font-medium';
                    selectedIndicator.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Selected';
                    controls.appendChild(quantityDiv);
                    controls.appendChild(selectBtn);
                    controls.appendChild(selectedIndicator);
                } else {
                    controls.appendChild(quantityDiv);
                    controls.appendChild(selectBtn);
                }

                itemDiv.appendChild(header);
                itemDiv.appendChild(description);
                itemDiv.appendChild(controls);

                content.appendChild(itemDiv);
            });

            content.classList.remove('hidden');
        }

        function selectInventoryItem(item, quantityInput) {
            const quantity = parseInt(quantityInput.value) || 0;

            if (quantity <= 0) {
                showMessage('Please enter a valid quantity', 'warning');
                return;
            }

            const existingIndex = selectedInventoryItems.findIndex(
                selected => selected.template_inventory_item_id === item.template_inventory_item_id
            );

            if (existingIndex >= 0) {
                selectedInventoryItems[existingIndex].quantity = quantity;
            } else {
                selectedInventoryItems.push({
                    template_inventory_item_id: item.template_inventory_item_id,
                    quantity: quantity,
                    is_approved: false
                });
            }

            showMessage(`Added ${quantity} × ${item.name} to selection`, 'success');
        }

        function collectFormData() {
            const formData = new FormData(form);

            console.log('Collecting form data...');

            // Add questionnaire responses
            questionnaireData.forEach((question, index) => {
                console.log(`Processing question ${index}:`, question);

                // Check for different input types
                let answerValue = '';

                // For radio buttons
                const radioInputs = form.querySelectorAll(`input[name="questionnaire_responses[${index}][answer]"]:checked`);
                if (radioInputs.length > 0) {
                    answerValue = radioInputs[0].value;
                    console.log(`Radio answer found: ${answerValue}`);
                }

                // For text/textarea
                const textInput = form.querySelector(`input[name="questionnaire_responses[${index}][answer]"]`);
                if (textInput) {
                    answerValue = textInput.value;
                    console.log(`Text answer found: ${answerValue}`);
                }

                // For checkboxes
                const checkboxInputs = form.querySelectorAll(`input[name="questionnaire_responses[${index}][answer][]"]:checked`);
                if (checkboxInputs.length > 0) {
                    answerValue = Array.from(checkboxInputs).map(cb => cb.value);
                    console.log(`Checkbox answers found:`, answerValue);
                }

                if (answerValue) {
                    formData.append(`questionnaire_responses[${index}][question_id]`, question.id);
                    formData.append(`questionnaire_responses[${index}][answer]`, answerValue);
                    console.log(`Added questionnaire response: question_id=${question.id}, answer=${answerValue}`);
                } else {
                    console.log(`No answer found for question ${index}`);
                }
            });

            // Add selected inventory items
            selectedInventoryItems.forEach((item, index) => {
                formData.append(`selected_inventory_items[${index}][template_inventory_item_id]`, item.template_inventory_item_id);
                formData.append(`selected_inventory_items[${index}][quantity]`, item.quantity);
                formData.append(`selected_inventory_items[${index}][is_approved]`, item.is_approved);
            });

            // Debug: Log all form data
            console.log('Form data entries:');
            for (let [key, value] of formData.entries()) {
                console.log(`${key}: ${value}`);
            }

            return formData;
        }

        function validateForm() {
            // All fields are now optional, but validate email format if provided
            const email = document.getElementById('email').value.trim();

            if (email && !validateEmail(email)) {
                showMessage('Please enter a valid email address.', 'error');
                return false;
            }

            return true;
        }

        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }

        // Event listeners
        if (questionnaireTemplateSelect) {
            console.log('Questionnaire template select element found, adding change listener');

            questionnaireTemplateSelect.addEventListener('change', function () {
                const templateId = this.value;
                console.log('Questionnaire template changed to:', templateId);
                console.log('Questionnaire template select value:', this.value);
                console.log('Questionnaire template select options:', Array.from(this.options).map(opt => ({ value: opt.value, text: opt.text, selected: opt.selected })));

                if (templateId && templateId !== '') {
                    loadQuestionnaire(templateId);
                    loadInventory(templateId);
                } else {
                    console.log('No template selected, hiding sections');
                    // Hide sections when no template is selected
                    document.getElementById('questionnaireLoading').classList.add('hidden');
                    document.getElementById('questionnaireContent').classList.add('hidden');
                    document.getElementById('noQuestionnaire').classList.remove('hidden');
                    document.getElementById('inventoryLoading').classList.add('hidden');
                    document.getElementById('inventoryContent').classList.add('hidden');
                    document.getElementById('noInventory').classList.remove('hidden');

                    // Clear hidden service type field
                    if (hiddenServiceTypeInput) {
                        hiddenServiceTypeInput.value = '';
                    }
                }
            });

            // Load initial data if template is selected
            const initialTemplateId = questionnaireTemplateSelect.value;
            console.log('Initial template ID:', initialTemplateId);
            if (initialTemplateId && initialTemplateId !== '') {
                console.log('Pre-selected template found, loading questionnaire and inventory');
                loadQuestionnaire(initialTemplateId);
                loadInventory(initialTemplateId);
            } else {
                console.log('No template pre-selected, showing help text');
                // Show help text when no template is selected
                document.getElementById('questionnaireLoading').classList.add('hidden');
                document.getElementById('questionnaireContent').classList.add('hidden');
                document.getElementById('noQuestionnaire').classList.remove('hidden');
                document.getElementById('inventoryLoading').classList.add('hidden');
                document.getElementById('inventoryContent').classList.add('hidden');
                document.getElementById('noInventory').classList.remove('hidden');
            }
        } else {
            console.error('Questionnaire template select element not found');
            // Hide loading states if template select is not available
            document.getElementById('questionnaireLoading').classList.add('hidden');
            document.getElementById('inventoryLoading').classList.add('hidden');
            document.getElementById('noQuestionnaire').classList.remove('hidden');
            document.getElementById('noInventory').classList.remove('hidden');
        }

        form.addEventListener('submit', function (e) {
            e.preventDefault();

            if (!validateForm()) {
                return;
            }

            setLoading(true);
            formMessages.classList.add('hidden');

            const formData = collectFormData();

            fetch(form.action, {
                method: form.method,
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
                .then(response => {
                    if (response.ok) {
                        return response.json().then(data => {
                            if (data.success) {
                                showMessage(data.message || 'Lead saved successfully!', 'success');
                                setTimeout(() => {
                                    window.location.href = data.redirect || '{{ route("leads.index") }}';
                                }, 1500);
                            } else {
                                showMessage(data.message || 'Error saving lead.', 'error');
                            }
                        });
                    } else if (response.status === 422) {
                        return response.json().then(data => {
                            if (data.errors) {
                                const errorMessages = Object.values(data.errors).flat().join('\n');
                                showMessage(errorMessages, 'error');
                            } else {
                                showMessage('Validation failed. Please check the form.', 'error');
                            }
                        });
                    } else {
                        return response.text().then(text => {
                            console.error('Error Response:', response.status, text);
                            // Try to extract error message from HTML if it's an error page
                            let errorMsg = text;
                            if (text.includes('<!DOCTYPE')) {
                                // Extract title or main error message from HTML
                                const titleMatch = text.match(/<title>([^<]+)<\/title>/);
                                const messageMatch = text.match(/class="message"[^>]*>([^<]+)</);
                                errorMsg = titleMatch ? titleMatch[1] : 'Server Error ' + response.status;
                                if (messageMatch) errorMsg += ': ' + messageMatch[1];
                            } else {
                                errorMsg = text.substring(0, 500);
                            }
                            showMessage('Error ' + response.status + ': ' + errorMsg, 'error');
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showMessage('An error occurred while saving: ' + error.message, 'error');
                })
                .finally(() => {
                    setLoading(false);
                });
        });

        // Initialize on page load
        submitBtnText.setAttribute('data-original-text', submitBtnText.textContent.trim());
    });
</script>