@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <h1 class="text-3xl font-bold mb-6">Database Column Service Test</h1>

        <!-- Connection Info -->
        <div class="mb-8 p-4 bg-gray-50 rounded-lg">
            <h2 class="text-xl font-semibold mb-4">Database Connection</h2>
            <button id="checkConnection" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Check Connection
            </button>
            <div id="connectionInfo" class="mt-4"></div>
        </div>

        <!-- Quick Test -->
        <div class="mb-8 p-4 bg-green-50 rounded-lg">
            <h2 class="text-xl font-semibold mb-4">Quick Test</h2>
            <button id="testSample" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                Create Sample Column
            </button>
            <div id="testResult" class="mt-4"></div>
        </div>

        <!-- Create Column -->
        <div class="mb-8 p-4 bg-blue-50 rounded-lg">
            <h2 class="text-xl font-semibold mb-4">Create Column</h2>
            <form id="createForm" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Form Field</label>
                    <select name="form_field_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Select Form Field</option>
                        @foreach($formFields as $field)
                            <option value="{{ $field->id }}">{{ $field->title }} ({{ $field->contentType->name ?? 'Unknown' }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Record Type</label>
                    <select name="record_type_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Select Record Type</option>
                        @foreach($recordTypes as $type)
                            <option value="{{ $type->id }}">{{ $type->title }} ({{ $type->recordType }})</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Create Column
                </button>
            </form>
            <div id="createResult" class="mt-4"></div>
        </div>

        <!-- List Columns -->
        <div class="mb-8 p-4 bg-yellow-50 rounded-lg">
            <h2 class="text-xl font-semibold mb-4">List Columns</h2>
            <form id="listForm" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Record Type</label>
                    <select name="record_type_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Select Record Type</option>
                        @foreach($recordTypes as $type)
                            <option value="{{ $type->id }}">{{ $type->title }} ({{ $type->recordType }})</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">
                    List Columns
                </button>
            </form>
            <div id="listResult" class="mt-4"></div>
        </div>

        <!-- Update Column -->
        <div class="mb-8 p-4 bg-purple-50 rounded-lg">
            <h2 class="text-xl font-semibold mb-4">Update Column</h2>
            <form id="updateForm" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Form Field</label>
                    <select name="form_field_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Select Form Field</option>
                        @foreach($formFields as $field)
                            <option value="{{ $field->id }}">{{ $field->title }} ({{ $field->contentType->name ?? 'Unknown' }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Record Type</label>
                    <select name="record_type_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Select Record Type</option>
                        @foreach($recordTypes as $type)
                            <option value="{{ $type->id }}">{{ $type->title }} ({{ $type->recordType }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Old Column Name</label>
                    <input type="text" name="old_column_name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="Enter old column name">
                </div>
                <button type="submit" class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
                    Update Column
                </button>
            </form>
            <div id="updateResult" class="mt-4"></div>
        </div>

        <!-- Delete Column -->
        <div class="mb-8 p-4 bg-red-50 rounded-lg">
            <h2 class="text-xl font-semibold mb-4">Delete Column</h2>
            <form id="deleteForm" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Record Type</label>
                    <select name="record_type_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Select Record Type</option>
                        @foreach($recordTypes as $type)
                            <option value="{{ $type->id }}">{{ $type->title }} ({{ $type->recordType }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Column Name</label>
                    <input type="text" name="column_name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="Enter column name to delete">
                </div>
                <button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                    Delete Column
                </button>
            </form>
            <div id="deleteResult" class="mt-4"></div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Check Connection
    document.getElementById('checkConnection').addEventListener('click', function() {
        fetch('/test/database-columns/connection')
            .then(response => response.json())
            .then(data => {
                const resultDiv = document.getElementById('connectionInfo');
                if (data.success) {
                    resultDiv.innerHTML = `
                        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                            <strong>Connected!</strong><br>
                            Database: ${data.database}<br>
                            Driver: ${data.driver}
                        </div>
                    `;
                } else {
                    resultDiv.innerHTML = `
                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                            <strong>Error:</strong> ${data.message}
                        </div>
                    `;
                }
            });
    });

    // Test Sample
    document.getElementById('testSample').addEventListener('click', function() {
        fetch('/test/database-columns/sample')
            .then(response => response.json())
            .then(data => {
                const resultDiv = document.getElementById('testResult');
                if (data.success) {
                    resultDiv.innerHTML = `
                        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                            <strong>Success!</strong><br>
                            ${data.result.message}<br>
                            Form Field: ${data.form_field.title}<br>
                            Record Type: ${data.record_type.title}
                        </div>
                    `;
                } else {
                    resultDiv.innerHTML = `
                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                            <strong>Error:</strong> ${data.message}
                        </div>
                    `;
                }
            });
    });

    // Create Column
    document.getElementById('createForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        fetch('/test/database-columns/create', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            const resultDiv = document.getElementById('createResult');
            if (data.success) {
                resultDiv.innerHTML = `
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                        <strong>Success!</strong><br>
                        ${data.message}<br>
                        Column: ${data.column.name}<br>
                        Type: ${data.column.type}<br>
                        Table: ${data.column.table}
                    </div>
                `;
            } else {
                resultDiv.innerHTML = `
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                        <strong>Error:</strong> ${data.message}
                    </div>
                `;
            }
        });
    });

    // List Columns
    document.getElementById('listForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        fetch('/test/database-columns/list', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            const resultDiv = document.getElementById('listResult');
            if (data.success) {
                let columnsHtml = '<ul class="list-disc list-inside">';
                data.columns.forEach(column => {
                    columnsHtml += `<li>${column.name} (${column.type})${column.nullable ? ' - nullable' : ''}</li>`;
                });
                columnsHtml += '</ul>';

                resultDiv.innerHTML = `
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                        <strong>Table:</strong> ${data.table}<br>
                        <strong>Columns:</strong><br>
                        ${columnsHtml}
                    </div>
                `;
            } else {
                resultDiv.innerHTML = `
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                        <strong>Error:</strong> ${data.message}
                    </div>
                `;
            }
        });
    });

    // Update Column
    document.getElementById('updateForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        fetch('/test/database-columns/update', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            const resultDiv = document.getElementById('updateResult');
            if (data.success) {
                resultDiv.innerHTML = `
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                        <strong>Success!</strong><br>
                        ${data.message}<br>
                        Column: ${data.column.name}<br>
                        Type: ${data.column.type}<br>
                        Table: ${data.column.table}
                    </div>
                `;
            } else {
                resultDiv.innerHTML = `
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                        <strong>Error:</strong> ${data.message}
                    </div>
                `;
            }
        });
    });

    // Delete Column
    document.getElementById('deleteForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        fetch('/test/database-columns/delete', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            const resultDiv = document.getElementById('deleteResult');
            if (data.success) {
                resultDiv.innerHTML = `
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                        <strong>Success!</strong><br>
                        ${data.message}
                    </div>
                `;
            } else {
                resultDiv.innerHTML = `
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                        <strong>Error:</strong> ${data.message}
                    </div>
                `;
            }
        });
    });
});
</script>
@endsection