@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Test Multiple Image Upload Fix</h3>
                </div>
                <div class="card-body">
                    <div class="test-section">
                        <h3>Step 1: Test Global Array</h3>
                        <button onclick="testGlobalArray()" class="btn btn-primary">Test Global Array</button>
                        <div id="global-result" class="result mt-3">No test run yet</div>
                        
                        <h3 class="mt-4">Step 2: Test File Selection</h3>
                        <input type="file" id="test-input" multiple accept="image/*" class="form-control" onchange="testFileSelection(event)">
                        <div id="file-result" class="result mt-3">No files selected yet</div>
                        
                        <h3 class="mt-4">Step 3: Test Property Form</h3>
                        <button onclick="openPropertyForm()" class="btn btn-success">Open Property Form</button>
                        <div id="form-result" class="result mt-3">Click to test property form</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.result {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px;
    margin: 10px 0;
    font-family: monospace;
    white-space: pre-line;
}
.success {
    color: #155724;
}
.error {
    color: #dc3545;
}
</style>

<script>
    // Global array - same as in the actual form
    let allSelectedFiles = [];
    
    function testGlobalArray() {
        const result = document.getElementById('global-result');
        
        try {
            result.innerHTML = '=== GLOBAL ARRAY TEST ===\n';
            result.innerHTML += 'Initial length: ' + allSelectedFiles.length + '\n';
            
            // Test adding files
            allSelectedFiles.push('test1.jpg');
            allSelectedFiles.push('test2.jpg');
            allSelectedFiles.push('test3.jpg');
            
            result.innerHTML += 'After pushing 3 files: ' + allSelectedFiles.length + '\n';
            result.innerHTML += 'Files: ' + JSON.stringify(allSelectedFiles) + '\n';
            
            result.innerHTML += '✅ SUCCESS: Global array working correctly\n';
            
        } catch (error) {
            result.innerHTML = '❌ ERROR: ' + error.message + '\n';
        }
    }
    
    function testFileSelection(event) {
        const result = document.getElementById('file-result');
        const files = event.target.files;
        
        result.innerHTML = '=== FILE SELECTION TEST ===\n';
        result.innerHTML += 'Files selected: ' + files.length + '\n';
        
        // Clear array first
        allSelectedFiles = [];
        result.innerHTML += 'Array cleared, length: ' + allSelectedFiles.length + '\n';
        
        // Add files to array
        Array.from(files).forEach(file => {
            if (file.type.startsWith('image/')) {
                result.innerHTML += 'Adding: ' + file.name + '\n';
                allSelectedFiles.push(file);
            }
        });
        
        result.innerHTML += 'Final array length: ' + allSelectedFiles.length + '\n';
        result.innerHTML += 'Files in array: ' + allSelectedFiles.map(f => f.name).join(', ') + '\n';
        
        if (allSelectedFiles.length === files.length) {
            result.innerHTML += '✅ SUCCESS: All files added to array\n';
        } else {
            result.innerHTML += '❌ ISSUE: Not all files added\n';
        }
    }
    
    function openPropertyForm() {
        const result = document.getElementById('form-result');
        result.innerHTML = '=== PROPERTY FORM TEST ===\n';
        result.innerHTML += 'Opening property creation form...\n';
        result.innerHTML += 'Instructions:\n';
        result.innerHTML += '1. Select multiple images\n';
        result.innerHTML += '2. Check console for debug messages\n';
        result.innerHTML += '3. Submit form\n';
        result.innerHTML += '4. Check database results\n';
        
        window.open('/admin/properties/create', '_blank');
    }
</script>
@endsection