@extends('layouts.app')
@section('title', 'Shopify Test Debug')

@section('content')
<!-- Debug info -->
<div class="alert alert-info">
    <strong>Page loaded at:</strong> {{ date('Y-m-d H:i:s') }}<br>
    <strong>User:</strong> {{ Auth::check() ? Auth::user()->username : 'Not logged in' }}<br>
    <strong>Business ID:</strong> {{ Auth::check() ? Auth::user()->business_id : 'N/A' }}
</div>
<div class="content-header">
    <h1>Shopify Connection Test Debug</h1>
</div>

<section class="content">
    <div class="box">
        <div class="box-body">
            <h3>JavaScript & AJAX Test</h3>
            
            <div class="form-group">
                <label>API Key:</label>
                <input type="text" class="form-control" id="test_api_key" placeholder="Enter API Key" value="9c4d64f11f90d2bf5b333440610ef2b6">
            </div>
            
            <div class="form-group">
                <label>Shop Domain:</label>
                <input type="text" class="form-control" id="test_shop_domain" placeholder="Enter Shop Domain" value="e3kp1y-3s.myshopify.com">
            </div>
            
            <button type="button" class="btn btn-primary" id="test_js_btn">Test JavaScript</button>
            <button type="button" class="btn btn-info" id="test_ajax_btn">Test AJAX</button>
            <button type="button" class="btn btn-warning" id="test_simple_route">Test Simple Route</button>
            <button type="button" class="btn btn-success" id="test_shopify_connection">Test Shopify Connection</button>
            
            <div id="results" class="mt-3">
                <h4>Test Results:</h4>
                <div id="test_output"></div>
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
// Immediate test to see if script loads
alert('JavaScript file is loading!');
console.log('Script tag executed');

// Check if jQuery is available
if (typeof jQuery === 'undefined') {
    alert('ERROR: jQuery is not loaded!');
} else {
    console.log('jQuery is available, version:', jQuery.fn.jquery);
}

$(document).ready(function() {
    console.log('=== SHOPIFY DEBUG PAGE LOADED ===');
    alert('Document ready fired! Page is loaded.');
    
    function addResult(message, type = 'info') {
        var className = 'alert-info';
        if (type === 'success') className = 'alert-success';
        if (type === 'error') className = 'alert-danger';
        if (type === 'warning') className = 'alert-warning';
        
        $('#test_output').append(
            '<div class="alert ' + className + '">' + 
            '<strong>' + new Date().toLocaleTimeString() + ':</strong> ' + message + 
            '</div>'
        );
    }
    
    // Test 1: Basic JavaScript functionality
    $('#test_js_btn').click(function() {
        console.log('JavaScript test button clicked');
        addResult('JavaScript is working! jQuery version: ' + $.fn.jquery, 'success');
        
        // Check CSRF token
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        if (csrfToken) {
            addResult('CSRF token found: ' + csrfToken.substring(0, 10) + '...', 'success');
        } else {
            addResult('CSRF token NOT found!', 'error');
        }
        
        // Check SweetAlert
        if (typeof swal !== 'undefined') {
            addResult('SweetAlert is available', 'success');
            swal({
                title: 'JavaScript Test',
                text: 'All JavaScript libraries are working!',
                icon: 'success'
            });
        } else {
            addResult('SweetAlert is NOT available', 'warning');
            alert('SweetAlert not available, but alert() works');
        }
    });
    
    // Test 2: AJAX functionality
    $('#test_ajax_btn').click(function() {
        console.log('AJAX test button clicked');
        addResult('Testing AJAX request...', 'info');
        
        $.ajax({
            url: '/debug-shopify',
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                console.log('AJAX Success:', response);
                addResult('AJAX Success! Response: ' + JSON.stringify(response), 'success');
            },
            error: function(xhr, status, error) {
                console.log('AJAX Error:', {xhr: xhr, status: status, error: error});
                addResult('AJAX Error: ' + status + ' - ' + error + ' (Status: ' + xhr.status + ')', 'error');
            }
        });
    });
    
    // Test 2.5: Simple route test
    $('#test_simple_route').click(function() {
        console.log('Simple route test button clicked');
        addResult('Testing simple route...', 'info');
        
        var formData = {
            test: 'simple_test',
            timestamp: new Date().toISOString(),
            _token: $('meta[name="csrf-token"]').attr('content')
        };
        
        $.ajax({
            url: '/test-shopify-simple',
            method: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                console.log('Simple route success:', response);
                addResult('Simple Route Test SUCCESS: ' + response.message, 'success');
            },
            error: function(xhr, status, error) {
                console.log('Simple route error:', {xhr: xhr, status: status, error: error});
                addResult('Simple Route Test ERROR: ' + status + ' - ' + error + ' (HTTP ' + xhr.status + ')', 'error');
                addResult('Response: ' + xhr.responseText.substring(0, 200), 'error');
            }
        });
    });
    
    // Test 3: Shopify connection test
    $('#test_shopify_connection').click(function() {
        console.log('Shopify connection test button clicked');
        addResult('Testing Shopify connection...', 'info');
        
        var formData = {
            api_key: $('#test_api_key').val(),
            shop_domain: $('#test_shop_domain').val(),
            _token: $('meta[name="csrf-token"]').attr('content')
        };
        
        console.log('Form data:', formData);
        addResult('Sending data: ' + JSON.stringify(formData), 'info');
        
        $.ajax({
            url: '{{ route("shopify.test-connection") }}',
            method: 'POST',
            data: formData,
            dataType: 'json',
            beforeSend: function() {
                addResult('AJAX request starting...', 'info');
            },
            success: function(response) {
                console.log('Shopify test success:', response);
                if (response.success) {
                    addResult('Shopify Connection Test SUCCESS: ' + response.message, 'success');
                    if (typeof swal !== 'undefined') {
                        swal({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success'
                        });
                    }
                } else {
                    addResult('Shopify Connection Test FAILED: ' + response.message, 'error');
                }
            },
            error: function(xhr, status, error) {
                console.log('Shopify test error:', {xhr: xhr, status: status, error: error});
                addResult('Shopify Connection Test ERROR: ' + status + ' - ' + error + ' (HTTP ' + xhr.status + ')', 'error');
                addResult('Response text: ' + xhr.responseText, 'error');
            },
            complete: function() {
                addResult('AJAX request completed', 'info');
            }
        });
    });
    
    addResult('Debug page initialized successfully', 'success');
});
</script>

@endsection