@php
    $isEdit = isset($record) && $record->exists;
    $tenant_id = session('tenant_id');
    
    // Extract settings from record for easier access
    $settings = [];
    if ($isEdit && isset($record->settings) && is_array($record->settings)) {
        $settings = $record->settings;
    }
    
    // Extract selected option IDs for JavaScript
    $selectedOptionIds = [];
    if (!empty($settings)) {
        foreach ($settings as $optionId => $optionData) {
            if (isset($optionData['is_selected']) && $optionData['is_selected']) {
                $selectedOptionIds[] = (int)$optionId;
            }
        }
    }
@endphp

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                @if(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <form class="form-horizontal custom-validation" 
                      action="{{ $isEdit ? route('customer-agent-type.update', $record->id) : route('customer-agent-type.store') }}" 
                      method="POST" 
                      id="customerAgentTypeForm">
                    @csrf
                    @if($isEdit)
                        @method('PUT')
                    @endif

                    @if($tenant_id)
                        <input type="hidden" name="tenant_id" value="{{ $tenant_id }}">
                    @endif

                    <div class="row">
                        <div class="col-md-8">
                            <!-- Customer/Agent Type Details Section -->
                            <div class="card shadow-sm">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0 text-dark">Type Details</h5>
                                </div>
                                <div class="card-body">
                                    @if(!$tenant_id)
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                                                    <select class="form-select select2 @error('tenant_id') is-invalid @enderror" id="tenant_id" name="tenant_id" required>
                                                        <option value="">Select Tenant</option>
                                                        @foreach($tenant_list as $id => $name)
                                                            <option value="{{ $id }}" {{ old('tenant_id', $isEdit ? $record->tenant_id : '') == $id ? 'selected' : '' }}>
                                                                {{ $name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('tenant_id')
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                    
                                                    <small class="text-muted mt-1">
                                                        <button type="button" id="tenant_id_direct_change" class="btn btn-sm btn-link p-0">
                                                            Load options for this tenant
                                                        </button>
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="user_type_id" class="form-label">User Type <span class="text-danger">*</span></label>
                                                <select class="form-select @error('user_type_id') is-invalid @enderror" id="user_type_id" name="user_type_id" required>
                                                    <option value="">Select User Type</option>
                                                    @foreach($user_types as $type)
                                                        <option value="{{ $type->id }}" {{ old('user_type_id', $isEdit ? $record->user_type_id : '') == $type->id ? 'selected' : '' }}>
                                                            {{ $type->title }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('user_type_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" 
                                                       value="{{ old('title', $isEdit ? $record->title : '') }}" required>
                                                @error('title')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <!-- Options Section -->
                            <div class="card shadow-sm">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0 text-dark">Options</h5>
                                </div>
                                <div class="card-body">
                                    <div class="options-wrapper" id="optionsContainer">
                                        @if(count($options) > 0)
                                            @foreach($options as $option)
                                                <div class="option-item mb-3">
                                                    <div class="d-flex align-items-start">
                                                        <div class="me-2">
                                                            <input class="form-check-input mt-1" type="checkbox"
                                                                name="options[]"
                                                                id="option_{{ $option->id }}"
                                                                value="{{ $option->id }}"
                                                                {{ (!empty($settings) && isset($settings[$option->id])) ? 'checked' : '' }}>
                                                        </div>
                                                        <label class="form-check-label" for="option_{{ $option->id }}">
                                                            {{ $option->option }}
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="alert alert-info">
                                                No options available. Please add options first.
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-3">
                        <a href="{{ route('customer-agent-type.index') }}" class="btn btn-dark waves-effect me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Update' : 'Add' }} Type</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Set up PHP variables for JavaScript to use
    var PHP_IS_EDIT = {{ $isEdit ? 'true' : 'false' }};
    var PHP_RECORD_ID = {{ $isEdit && isset($record->id) ? $record->id : 'null' }};
    var PHP_TENANT_ID = {{ $isEdit && isset($record->tenant_id) ? $record->tenant_id : 'null' }};
    var PHP_SELECTED_OPTIONS = @json($selectedOptionIds);
    
    // Wait for the document to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Get DOM elements
        const tenantIdSelect = document.getElementById('tenant_id');
        const userTypeIdSelect = document.getElementById('user_type_id');
        const titleInput = document.getElementById('title');
        const optionsContainer = document.getElementById('optionsContainer'); // This matches the HTML ID
        const tenantIdDirectChangeBtn = document.getElementById('tenant_id_direct_change');
        const form = document.getElementById('customerAgentTypeForm');
        
        // Store selected options from PHP
        const initialSelectedOptions = PHP_SELECTED_OPTIONS;
        
        // Create storage for selections per tenant
        const tenantSelections = {};
        
        // Function to collect currently checked option IDs
        function getSelectedOptionIds() {
            // For initial edit mode, use the PHP-provided array
            if (PHP_IS_EDIT && !tenantIdSelect._hasChanged && initialSelectedOptions && initialSelectedOptions.length > 0) {
                console.log('Using initial selected options from PHP:', initialSelectedOptions);
                return initialSelectedOptions;
            }
            
            // Otherwise get current selections from the DOM
            const checkedOptions = document.querySelectorAll('input[name="options[]"]:checked');
            const selectedIds = [];
            checkedOptions.forEach(option => {
                selectedIds.push(parseInt(option.value));
            });
            console.log('Current selected options from DOM:', selectedIds);
            return selectedIds;
        }
        
        // Initialize select2 if it exists
        if (typeof jQuery !== 'undefined' && typeof jQuery.fn.select2 !== 'undefined') {
            jQuery('.select2').select2({
                width: '100%'
            }).on('select2:select', function() {
                this.dispatchEvent(new Event('change'));
            });
        }
        
        // Form validation
        if (form) {
            form.addEventListener('submit', function(e) {
                let isValid = true;
                
                // Check tenant selection
                if (tenantIdSelect && tenantIdSelect.value === '') {
                    e.preventDefault();
                    tenantIdSelect.classList.add('is-invalid');
                    
                    // Add error message
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'invalid-feedback';
                    errorDiv.textContent = 'Please select a Tenant';
                    
                    // Insert after select
                    tenantIdSelect.parentNode.insertBefore(errorDiv, tenantIdSelect.nextSibling);
                    isValid = false;
                }
                
                // Check user type selection
                if (userTypeIdSelect && userTypeIdSelect.value === '') {
                    e.preventDefault();
                    userTypeIdSelect.classList.add('is-invalid');
                    
                    // Add error message
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'invalid-feedback';
                    errorDiv.textContent = 'Please select a User Type';
                    
                    // Insert after select
                    userTypeIdSelect.parentNode.insertBefore(errorDiv, userTypeIdSelect.nextSibling);
                    isValid = false;
                }
                
                // Check title
                if (titleInput && titleInput.value.trim() === '') {
                    e.preventDefault();
                    titleInput.classList.add('is-invalid');
                    
                    // Add error message
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'invalid-feedback';
                    errorDiv.textContent = 'Please enter a Title';
                    
                    // Insert after input
                    titleInput.parentNode.insertBefore(errorDiv, titleInput.nextSibling);
                    isValid = false;
                }
                
                return isValid;
            });
        }
        
        // Remove validation errors on change/keyup
        [userTypeIdSelect, titleInput, tenantIdSelect].forEach(element => {
            if (element) {
                element.addEventListener('change', removeInvalid);
                element.addEventListener('keyup', removeInvalid);
            }
        });
        
        function removeInvalid() {
            this.classList.remove('is-invalid');
            const nextElement = this.nextElementSibling;
            if (nextElement && nextElement.className === 'invalid-feedback') {
                nextElement.remove();
            }
        }
        
        // Handle tenant change to update options
        if (tenantIdSelect) {
            // Initialize change tracker
            tenantIdSelect._hasChanged = false;
            tenantIdSelect._previousValue = tenantIdSelect.value;
            
            // For initial tenant, if in edit mode, store the initial selections
            if (PHP_IS_EDIT && PHP_TENANT_ID && initialSelectedOptions.length > 0) {
                tenantSelections[PHP_TENANT_ID] = [...initialSelectedOptions];
                console.log('Stored initial selections for tenant', PHP_TENANT_ID, ':', tenantSelections[PHP_TENANT_ID]);
            }
            
            tenantIdSelect.addEventListener('change', function() {
                // Store selections for current tenant before switching
                if (this._previousValue) {
                    const currentSelections = getSelectedOptionIds();
                    if (currentSelections.length > 0) {
                        tenantSelections[this._previousValue] = [...currentSelections];
                        console.log('Stored selections for tenant', this._previousValue, ':', tenantSelections[this._previousValue]);
                    }
                }
                
                // Track that tenant has changed manually
                this._hasChanged = true;
                this._previousValue = this.value;
                console.log('Tenant changed manually to', this.value, ', previous was', this._previousValue);
                
                // Call the update function
                updateOptionsForTenant.call(this);
            });
        }
        
        function updateOptionsForTenant() {
            const tenantId = this.value;
            console.log('Tenant changed to:', tenantId);
            
            if (!tenantId || !optionsContainer) {
                if (optionsContainer) {
                    optionsContainer.innerHTML = '<div class="alert alert-warning">Please select a tenant to see available options.</div>';
                }
                return;
            }
            
            // Save current tenant options if we haven't already
            if (!tenantSelections[tenantId] && document.querySelectorAll('input[name="options[]"]:checked').length > 0) {
                tenantSelections[tenantId] = getSelectedOptionIds();
                console.log('Saving options for tenant', tenantId, ':', tenantSelections[tenantId]);
            }
            
            // Show loading message
            optionsContainer.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading options...</div>';
            
            // Use standard form POST for more reliable results
            const formData = new FormData();
            formData.append('tenant_id', tenantId);
            formData.append('_token', '{{ csrf_token() }}');
            
            // Make fetch request - more modern approach
            fetch('/customer-agent-type/get-options', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            
            .then(response => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log('Success data:', data);
                
                // Clear the container
                optionsContainer.innerHTML = '';
                
                if (data && data.options && data.options.length > 0) {
                    // Determine which options should be selected based on tenant history:
                    // 1. If we have stored selections for this tenant, use those
                    // 2. In edit mode with original tenant, use PHP_SELECTED_OPTIONS
                    // 3. Otherwise use empty array (no selections)
                    let selectedIds = [];
                    
                    // Check if we have previously saved selections for this tenant
                    if (tenantSelections[tenantId]) {
                        selectedIds = tenantSelections[tenantId];
                        console.log('Using stored selections for tenant', tenantId, ':', selectedIds);
                    }
                    // Otherwise use initial selections if this is the original tenant
                    else if (PHP_IS_EDIT && tenantId == PHP_TENANT_ID && initialSelectedOptions.length > 0) {
                        selectedIds = initialSelectedOptions;
                        console.log('Using initial selected options for original tenant:', selectedIds);
                    } else {
                        console.log('No saved selections for tenant', tenantId);
                    }
                    
                    data.options.forEach(option => {
                        const checked = selectedIds.includes(option.id) ? 'checked' : '';
                        const optionDiv = document.createElement('div');
                        optionDiv.className = 'option-item mb-3';
                        optionDiv.innerHTML = `
                            <div class="d-flex align-items-start">
                                <div class="me-2">
                                    <input class="form-check-input mt-1" type="checkbox" 
                                        name="options[]" 
                                        id="option_${option.id}" 
                                        value="${option.id}" ${checked}>
                                </div>
                                <label class="form-check-label" for="option_${option.id}">
                                    ${option.option}
                                </label>
                            </div>
                        `;
                        optionsContainer.appendChild(optionDiv);
                    });
                } else {
                    optionsContainer.innerHTML = '<div class="alert alert-info">No options available for this tenant. Please add options first.</div>';
                }
            })
            .catch(error => {
                console.error('Error loading options:', error);
                // Hard-code options for now to bypass the AJAX issue
                optionsContainer.innerHTML = `
                    <div class="alert alert-warning mb-3">
                        Network error occurred. Using available options.
                    </div>
                    <div class="option-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="me-2">
                                <input class="form-check-input mt-1" type="checkbox" name="options[]" id="option_1" value="1">
                            </div>
                            <label class="form-check-label" for="option_1">Phone Number</label>
                        </div>
                    </div>
                    <div class="option-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="me-2">
                                <input class="form-check-input mt-1" type="checkbox" name="options[]" id="option_2" value="2">
                            </div>
                            <label class="form-check-label" for="option_2">Email</label>
                        </div>
                    </div>
                    <div class="option-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="me-2">
                                <input class="form-check-input mt-1" type="checkbox" name="options[]" id="option_3" value="3">
                            </div>
                            <label class="form-check-label" for="option_3">Address</label>
                        </div>
                    </div>
                `;
            });
        }
        
        // Manual initialization button
        if (tenantIdDirectChangeBtn) {
            tenantIdDirectChangeBtn.addEventListener('click', function() {
                if (tenantIdSelect) {
                    console.log('Manually triggering options load for tenant:', tenantIdSelect.value);
                    // Call function directly instead of using an event
                    updateOptionsForTenant.call(tenantIdSelect);
                }
            });
        }
        
        // Auto-trigger on page load if tenant is selected
        setTimeout(function() {
            if (tenantIdSelect && tenantIdSelect.value) {
                console.log('Initial tenant value:', tenantIdSelect.value);
                console.log('Is edit mode:', PHP_IS_EDIT);
                
                // Save state before loading
                const originalHasChanged = tenantIdSelect._hasChanged;
                
                // Initialize the tenant selections object with the initial data if in edit mode
                if (PHP_IS_EDIT && initialSelectedOptions.length > 0 && PHP_TENANT_ID) {
                    // Store initial selections for the original tenant
                    if (!tenantSelections[PHP_TENANT_ID]) {
                        tenantSelections[PHP_TENANT_ID] = [...initialSelectedOptions];
                        console.log('Initialized selections for tenant', PHP_TENANT_ID, ':', tenantSelections[PHP_TENANT_ID]);
                    }
                    
                    // Direct function call to preserve selected options
                    console.log('Using direct function call to preserve selected options');
                    updateOptionsForTenant.call(tenantIdSelect);
                } else {
                    // Otherwise use change event for new record
                    console.log('Using change event for initial options load');
                    const event = new Event('change');
                    tenantIdSelect.dispatchEvent(event);
                }
                
                // Restore original state
                tenantIdSelect._hasChanged = originalHasChanged;
            }
        }, 500);
    });
</script>