@extends('layouts.web')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <!-- Header -->
            <div class="px-6 py-4 border-b border-gray-200" style="background: linear-gradient(135deg, {{ \App\Models\Setting::get('color_navbar_start', '#7c3aed') ?? '#7c3aed' }} 0%, {{ \App\Models\Setting::get('color_navbar_end', '#3b82f6') ?? '#3b82f6' }} 100%);">
                <h1 class="text-2xl font-bold text-white">
                    <i class="fas fa-terminal mr-2"></i>Artisan Commands
                </h1>
                <p class="text-white opacity-90 mt-1">Jalankan perintah artisan melalui web interface</p>
            </div>

            <!-- Content -->
            <div class="p-6">
                <!-- Warning Alert -->
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-yellow-700">
                                <strong>Peringatan:</strong> Halaman ini hanya untuk administrator. Pastikan Anda memahami konsekuensi dari setiap perintah sebelum menjalankannya.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Commands Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                    @foreach($commands as $key => $command)
                    <div class="border rounded-lg p-4 hover:shadow-md transition-shadow {{ isset($command['danger']) && $command['danger'] ? 'border-red-300 bg-red-50' : 'border-gray-200' }}">
                        <div class="flex items-start justify-between mb-2">
                            <h3 class="font-semibold text-gray-800 {{ isset($command['danger']) && $command['danger'] ? 'text-red-700' : '' }}">
                                {{ $command['name'] }}
                            </h3>
                            @if(isset($command['danger']) && $command['danger'])
                                <span class="px-2 py-1 text-xs font-semibold rounded bg-red-100 text-red-800">
                                    <i class="fas fa-exclamation-circle"></i> Berbahaya
                                </span>
                            @endif
                        </div>
                        <p class="text-sm text-gray-600 mb-3">{{ $command['description'] }}</p>
                        <button 
                            id="btn-{{ $key }}"
                            data-key="{{ $key }}"
                            onclick="executeCommand('{{ $key }}', '{{ $command['command'] }}', {{ isset($command['danger']) && $command['danger'] ? 'true' : 'false' }})"
                            class="w-full px-4 py-2 text-sm font-medium text-white rounded-md transition-colors {{ isset($command['danger']) && $command['danger'] ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700' }}"
                        >
                            <i class="fas fa-play mr-2"></i>Jalankan
                        </button>
                    </div>
                    @endforeach
                </div>

                <!-- Output Section -->
                <div class="mt-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-3">
                        <i class="fas fa-code mr-2"></i>Output
                    </h2>
                    <div id="output-container" class="bg-white text-black p-4 rounded-lg font-mono text-sm overflow-auto border border-gray-300" style="min-height: 200px; max-height: 500px; display: none;">
                        <div id="output-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirmModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
            <div class="flex items-center mb-4">
                <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                </div>
                <h3 class="ml-3 text-lg font-semibold text-gray-900">Konfirmasi Perintah Berbahaya</h3>
            </div>
            <p class="text-sm text-gray-600 mb-4">
                Anda akan menjalankan perintah yang dapat menghapus data atau mengubah struktur database. 
                Pastikan Anda telah membuat backup sebelum melanjutkan.
            </p>
            <div class="flex items-center mb-4">
                <input type="checkbox" id="confirmCheckbox" class="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500">
                <label for="confirmCheckbox" class="ml-2 text-sm text-gray-700">
                    Saya mengerti dan telah membuat backup
                </label>
            </div>
            <div class="flex justify-end space-x-3">
                <button onclick="closeModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
                    Batal
                </button>
                <button id="confirmButton" onclick="proceedCommand()" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700" disabled>
                    Lanjutkan
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let pendingCommand = null;

function executeCommand(key, command, isDangerous) {
    if (isDangerous) {
        pendingCommand = { key, command };
        document.getElementById('confirmModal').classList.remove('hidden');
        document.getElementById('confirmCheckbox').checked = false;
        document.getElementById('confirmButton').disabled = true;
    } else {
        runCommand(key, command, false);
    }
}

function closeModal() {
    document.getElementById('confirmModal').classList.add('hidden');
    pendingCommand = null;
}

document.getElementById('confirmCheckbox').addEventListener('change', function() {
    document.getElementById('confirmButton').disabled = !this.checked;
});

function proceedCommand() {
    if (pendingCommand) {
        closeModal();
        runCommand(pendingCommand.key, pendingCommand.command, true);
        pendingCommand = null;
    }
}

function runCommand(key, command, confirmed) {
    const outputContainer = document.getElementById('output-container');
    const outputContent = document.getElementById('output-content');
    const button = document.getElementById(`btn-${key}`);
    const originalButtonHTML = button.innerHTML;
    const originalButtonDisabled = button.disabled;
    
    // Disable button and show loading state
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menjalankan...';
    
    // Show output container
    outputContainer.style.display = 'block';
    outputContent.innerHTML = '<div class="text-black"><i class="fas fa-spinner fa-spin mr-2"></i>Menjalankan perintah...</div>';
    
    // Scroll to output
    outputContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    
    // Execute command
    fetch('{{ route("artisan.execute") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            command: command,
            confirm: confirmed
        })
    })
    .then(response => response.json())
    .then(data => {
        // Restore button state
        button.disabled = originalButtonDisabled;
        button.innerHTML = originalButtonHTML;
        
        if (data.success) {
            outputContent.innerHTML = `
                <div class="text-green-600 mb-2">
                    <i class="fas fa-check-circle mr-2"></i>${data.message}
                </div>
                <div class="text-black whitespace-pre-wrap">${data.output || 'Tidak ada output'}</div>
            `;
        } else {
            outputContent.innerHTML = `
                <div class="text-red-600 mb-2">
                    <i class="fas fa-times-circle mr-2"></i>${data.message}
                </div>
                <div class="text-black whitespace-pre-wrap">${data.output || 'Tidak ada output'}</div>
            `;
        }
    })
    .catch(error => {
        // Restore button state on error
        button.disabled = originalButtonDisabled;
        button.innerHTML = originalButtonHTML;
        
        outputContent.innerHTML = `
            <div class="text-red-400 mb-2">
                <i class="fas fa-exclamation-circle mr-2"></i>Error: ${error.message}
            </div>
        `;
    });
}
</script>
@endsection