@extends('admin.layouts.layout')

@section('content')
    @include('admin.report-templates.template_header')
    
    <div class="mb-4">    
        <div class="servicestitle" style="border-radius: 0; padding: 5px 12px;">
            <h3>{{ $title }}</h3>
            <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
                <div class="contact_btns">
                    <a href="{{ route('report-templates.questions.index') }}" class="add_btn btn">
                        <img src="{{ asset('images/back.svg') }}"> Back to Questions
                    </a>
                </div>
            </div>
        </div>

        <!-- Form Card -->
        <div class="card">
            <div class="card-body">
                <form class="form-horizontal custom-validation" 
                      id="questionForm" 
                      action="{{ $form_action }}"
                      method="POST"
                      data-parsley-validate>
                    @csrf
                    @method($method)
                    
                    <input type="hidden" id="question_id" name="question_id" value="{{ $data->id ?? '' }}">
                    
                    <!-- Tenant Selection (Super Admin Only) -->
                    @if($show_tenant_dropdown)
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                            <select name="tenant_id" 
                                    id="tenant_id" 
                                    class="form-select select2" 
                                    required 
                                    data-parsley-required
                                    data-parsley-error-message="Please select a tenant">
                                <option value="">Select Tenant</option>
                                @foreach($tenant_list as $id => $name)
                                    <option value="{{ $id }}" {{ ($data->tenant_id ?? '') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                            <div class="form-text">Select the tenant for this question</div>
                        </div>
                    </div>
                    @else
                    <input type="hidden" id="tenant_id" name="tenant_id" value="{{ session('tenant_id') }}">
                    @endif

                    <!-- Question Text -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="question" class="form-label">Question Text <span class="text-danger">*</span></label>
                            <textarea class="form-control" 
                                      id="question" 
                                      name="question" 
                                      rows="3" 
                                      required 
                                      data-parsley-required
                                      data-parsley-maxlength="1000"
                                      data-parsley-error-message="Question text is required"
                                      placeholder="Enter the question text">{{ $data->question ?? '' }}</textarea>
                            <div class="invalid-feedback"></div>
                            <div class="form-text">Enter the question text that will be displayed to users</div>
                        </div>
                    </div>

                    <!-- Question Type -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="type" class="form-label">Question Type <span class="text-danger">*</span></label>
                            <select name="type" 
                                    id="type" 
                                    class="form-select select2" 
                                    required 
                                    data-parsley-required
                                    data-parsley-error-message="Please select a question type">
                                <option value="">Select Question Type</option>
                                @foreach($types as $key => $label)
                                    <option value="{{ $key }}" {{ ($data->type ?? '') == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                            <div class="form-text">Select the type of question</div>
                        </div>
                    </div>

                    <!-- Options Section (for radio, checkbox, select) -->
                    <div class="row mb-3" id="options-section" style="display: {{ isset($data) && in_array($data->type, ['radio', 'checkbox', 'select']) ? 'block' : 'none' }};">
                        <div class="col-md-12">
                            <label class="form-label">Options <span class="text-danger">*</span></label>
                            <div class="options-container mb-3" id="options-container">
                                @if(isset($data) && $data->options)
                                    @foreach($data->options as $index => $option)
                                        <span class="option-tag" data-value="{{ $option->label }}">
                                            {{ $option->label }}
                                            <input type="hidden" name="options[{{ $index }}][label]" value="{{ $option->label }}">
                                            <input type="hidden" name="options[{{ $index }}][value]" value="{{ $option->value }}">
                                            <button type="button" class="remove-option" onclick="removeOptionTag(this)">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </span>
                                    @endforeach
                                @endif
                            </div>
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control" 
                                       id="option-input" 
                                       placeholder="Enter option text and press Enter">
                                <button type="button" class="btn btn-outline-secondary" id="add-option-btn">
                                    <i class="fas fa-plus"></i> Add Option
                                </button>
                            </div>
                            <div class="invalid-feedback"></div>
                            <div class="form-text">Add options for radio, checkbox, or select questions</div>
                            <div id="duplicate-warning" class="alert alert-warning mt-2" style="display: none;">
                                <i class="fas fa-exclamation-triangle"></i> This option already exists!
                            </div>
                        </div>
                    </div>

                    <!-- Settings -->
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Show Separately</label>
                            <div class="form-check mt-2">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       value="1" 
                                       id="show_separately" 
                                       name="show_separately"
                                       {{ ($data->show_separately ?? false) ? 'checked' : '' }}>
                                <label class="form-check-label" for="show_separately">                                        
                                    Show this question separately
                                </label>
                            </div>
                            <small class="form-text text-muted">Display this question in a separate section</small>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Required</label>
                            <div class="form-check mt-2">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       value="1" 
                                       id="is_required" 
                                       name="is_required"
                                       {{ ($data->is_required ?? false) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_required">
                                    This question is required
                                </label>
                            </div>
                            <small class="form-text text-muted">Make this question mandatory</small>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            <div class="form-check mt-2">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       value="1" 
                                       id="is_active" 
                                       name="is_active"
                                       {{ ($data->is_active ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Active
                                </label>
                            </div>
                            <small class="form-text text-muted">Enable or disable this question</small>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary" id="saveQuestionBtn">
                                    <i class="fas fa-save"></i> {{ isset($data) ? 'Update Question' : 'Create Question' }}
                                </button>
                                <a href="{{ route('report-templates.questions.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.min.js"></script>
<style>
/* Enhanced Validation Styles */
.parsley-errors-list {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.parsley-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4m0-1.4-1.4 1.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.94-.94 1.31-1.31L8 1.04 4.98 0l-2.66 2.66L.98 1.31 0 2.29z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Select2 validation styling */
.select2-container .select2-selection--single.is-invalid {
    border-color: #dc3545;
}

.select2-container--default .select2-selection--single.is-invalid {
    border-color: #dc3545;
}

/* Form text styling */
.form-text {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #6c757d;
}

/* Loading button animation */
.btn .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Option tags styling */
.option-tag {
    display: inline-block;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin: 0.25rem;
    font-size: 0.875rem;
    position: relative;
}

.option-tag .remove-option {
    background: none;
    border: none;
    color: #6c757d;
    margin-left: 0.5rem;
    padding: 0;
    cursor: pointer;
}

.option-tag .remove-option:hover {
    color: #dc3545;
}

.options-container {
    min-height: 50px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
}
</style>
<script>
$(document).ready(function() {
    // Initialize Parsley for form validation
    $('#questionForm').parsley({
        errorClass: 'is-invalid',
        successClass: 'is-valid',
        errorsWrapper: '<div class="invalid-feedback d-block"></div>',
        errorTemplate: '<div></div>',
        inputs: 'input, textarea, select',
        excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden',
        trigger: 'change input blur focusout',
        focus: 'first',
        validationThreshold: 3,
        priorityEnabled: false
    });

    // Initialize Select2
    if ($.fn.select2) {
        $('.select2').select2({
            placeholder: 'Select option...',
            allowClear: true
        });
    }

    // Question type change handler
    $('#type').on('change', function() {
        var selectedType = $(this).val();
        var requiresOptions = ['radio', 'checkbox', 'select'].includes(selectedType);
        
        if (requiresOptions) {
            $('#options-section').show();
        } else {
            $('#options-section').hide();
            $('#options-container').empty();
        }
    });

    // Initialize option input handlers
    $('#option-input').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            addOptionTag();
        }
    });

    $('#add-option-btn').on('click', function() {
        addOptionTag();
    });

    // Form submission handling
    $('#questionForm').on('submit', function(e) {
        e.preventDefault();
        
        // Validate form
        var parsleyInstance = $(this).parsley();
        if (parsleyInstance.isValid()) {
            saveQuestion();
        } else {
            showNotification('error', 'Please correct the validation errors before submitting.');
            // Focus on first invalid field
            setTimeout(function() {
                $('#questionForm .is-invalid:first').focus();
            }, 100);
        }
        
        return false;
    });

    // Real-time validation for better UX
    $('#question').on('blur keyup', function() {
        $(this).parsley().validate();
    });

    $('#type').on('change', function() {
        $(this).parsley().validate();
    });

    // Initialize option index
    let optionIndex = {{ isset($data) && $data->options ? $data->options->count() : 0 }};

    function addOptionTag() {
        var input = $('#option-input');
        var value = input.val().trim();
        
        if (!value) {
            input.focus();
            return;
        }
        
        // Check for duplicates
        var exists = false;
        $('#options-container .option-tag').each(function() {
            if ($(this).data('value').toLowerCase() === value.toLowerCase()) {
                exists = true;
                return false;
            }
        });
        
        if (exists) {
            $('#duplicate-warning').show();
            setTimeout(function() {
                $('#duplicate-warning').hide();
            }, 3000);
            input.focus();
            return;
        }
        
        // Hide duplicate warning if showing
        $('#duplicate-warning').hide();
        
        // Create option tag
        var tagHtml = `
            <span class="option-tag" data-value="${value}">
                ${value}
                <input type="hidden" name="options[${optionIndex}][label]" value="${value}">
                <input type="hidden" name="options[${optionIndex}][value]" value="${value}">
                <button type="button" class="remove-option" onclick="removeOptionTag(this)">
                    <i class="fas fa-times"></i>
                </button>
            </span>
        `;
        
        $('#options-container').append(tagHtml);
        input.val('');
        optionIndex++;
        input.focus();
    }

    // Define removeOptionTag function globally
    window.removeOptionTag = function(button) {
        $(button).closest('.option-tag').remove();
        
        // Renumber remaining options
        $('#options-container .option-tag').each(function(index) {
            $(this).find('input[name*="[label]"]').attr('name', `options[${index}][label]`);
            $(this).find('input[name*="[value]"]').attr('name', `options[${index}][value]`);
        });
        
        optionIndex = $('#options-container .option-tag').length;
    };

    // Save question function
    function saveQuestion() {
        const $saveBtn = $('#saveQuestionBtn');
        const originalText = $saveBtn.html();
        const isEdit = '{{ isset($data) }}' === '1';
        
        // Show loading state
        $saveBtn.prop('disabled', true)
               .html('<i class="fas fa-spinner fa-spin"></i> Saving...');

        const formData = new FormData($('#questionForm')[0]);

        $.ajax({
            url: $('#questionForm').attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    showNotification('success', response.message || (isEdit ? 'Question updated successfully' : 'Question created successfully'));
                    setTimeout(function() {
                        window.location.href = '{{ route("report-templates.questions.index") }}';
                    }, 1500);
                } else {
                    showNotification('error', response.message || 'Error saving question');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                
                // Clear existing validation errors
                $('#questionForm .is-invalid').removeClass('is-invalid');
                $('#questionForm .invalid-feedback').remove();
                
                if (xhr.status === 422 && response && response.errors) {
                    // Handle validation errors (Laravel validation)
                    let errorMessage = 'Please correct the following errors:';
                    let hasErrors = false;
                    
                    $.each(response.errors, function(field, messages) {
                        hasErrors = true;
                        const $field = $('#' + field);
                        const $container = $field.closest('.col-md-12, .col-md-6, .col-md-4');
                        
                        // Add error class to field
                        $field.addClass('is-invalid');
                        
                        // Add error message
                        const errorDiv = $('<div class="invalid-feedback d-block"></div>').text(messages[0]);
                        
                        // For select2 dropdowns
                        if ($field.hasClass('select2')) {
                            $container.find('.select2-container').after(errorDiv);
                        } else {
                            $field.after(errorDiv);
                        }
                    });
                    
                    if (hasErrors) {
                        showNotification('error', errorMessage);
                        // Focus on first invalid field
                        setTimeout(function() {
                            $('#questionForm .is-invalid:first').focus();
                        }, 100);
                    }
                } else {
                    // Handle other errors
                    let errorMessage = 'Error saving question';
                    
                    if (response && response.message) {
                        errorMessage = response.message;
                    } else if (response && response.errors) {
                        const errors = Object.values(response.errors).flat();
                        errorMessage = errors.join('<br>');
                    }
                    
                    showNotification('error', errorMessage);
                }
            },
            complete: function() {
                // Restore button state
                $saveBtn.prop('disabled', false)
                       .html(originalText);
            }
        });
    }

    // Trigger type change on load to show/hide options section
    $('#type').trigger('change');
});
</script>
@endpush