@extends('layouts.main')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-tools me-2"></i>
                        Pengaturan Maintenance Mode
                    </h3>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-lg-8 mb-4">
                            <!-- Status Maintenance -->
                            <div class="alert alert-info mb-4">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <h5 class="mb-1"><i class="fas fa-info-circle me-2"></i>Status Maintenance Mode</h5>
                                        <div id="maintenance-status" class="mt-2">
                                            <span class="badge bg-{{ $setting->is_maintenance_mode ? 'danger' : 'success' }} fs-6 px-3 py-2">
                                                {{ $setting->is_maintenance_mode ? 'AKTIF' : 'NONAKTIF' }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Form Pengaturan -->
                            <form id="maintenance-form">
                                @csrf
                                <!-- Pesan Maintenance -->
                                <div class="mb-4">
                                    <label for="maintenance_message" class="form-label fw-semibold mb-2">
                                        <i class="fas fa-comment-alt me-2"></i>Pesan Maintenance
                                    </label>
                                    <textarea 
                                        class="form-control form-control-lg" 
                                        id="maintenance_message" 
                                        name="maintenance_message" 
                                        rows="5"
                                        placeholder="Masukkan pesan yang akan ditampilkan kepada pengguna saat maintenance mode aktif..."
                                        style="border: 2px solid #dee2e6; border-radius: 8px; padding: 12px;"
                                    >{{ $setting->maintenance_message }}</textarea>
                                    <div class="form-text mt-2">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Pesan ini akan ditampilkan di halaman maintenance.
                                    </div>
                                </div>

                                <!-- Waktu Mulai & Estimasi Selesai -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="maintenance_start" class="form-label fw-semibold mb-2">
                                                <i class="far fa-calendar-alt me-2"></i>Waktu Mulai
                                            </label>
                                            <input 
                                                type="datetime-local" 
                                                class="form-control form-control-lg" 
                                                id="maintenance_start" 
                                                name="maintenance_start"
                                                value="{{ $setting->maintenance_start ? $setting->maintenance_start->format('Y-m-d\TH:i') : '' }}"
                                                style="border: 2px solid #dee2e6; border-radius: 8px; padding: 10px;"
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="maintenance_end" class="form-label fw-semibold mb-2">
                                                <i class="far fa-calendar-check me-2"></i>Estimasi Selesai
                                            </label>
                                            <input 
                                                type="datetime-local" 
                                                class="form-control form-control-lg" 
                                                id="maintenance_end" 
                                                name="maintenance_end"
                                                value="{{ $setting->maintenance_end ? $setting->maintenance_end->format('Y-m-d\TH:i') : '' }}"
                                                style="border: 2px solid #dee2e6; border-radius: 8px; padding: 10px;"
                                            >
                                        </div>
                                    </div>
                                </div>

                                <!-- IP yang Diizinkan -->
                                <div class="mb-4">
                                    <label for="allowed_ips" class="form-label fw-semibold mb-2">
                                        <i class="fas fa-network-wired me-2"></i>IP yang Diizinkan (Opsional)
                                    </label>
                                    <input 
                                        type="text" 
                                        class="form-control form-control-lg" 
                                        id="allowed_ips" 
                                        name="allowed_ips"
                                        value="{{ $setting->allowed_ips }}"
                                        placeholder="192.168.1.1, 10.0.0.1 (pisahkan dengan koma)"
                                        style="border: 2px solid #dee2e6; border-radius: 8px; padding: 10px;"
                                    >
                                    <div class="form-text mt-2">
                                        <i class="fas fa-info-circle me-1"></i>
                                        IP yang diizinkan mengakses sistem saat maintenance mode aktif. Kosongkan jika tidak ada.
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="d-flex flex-wrap gap-2 mt-4 pt-3 border-top">
                                    <button type="button" id="enable-maintenance" class="btn btn-danger btn-lg px-4 py-2">
                                        <i class="fas fa-power-off me-2"></i>
                                        Aktifkan Maintenance Mode
                                    </button>
                                    <button type="button" id="disable-maintenance" class="btn btn-success btn-lg px-4 py-2">
                                        <i class="fas fa-check me-2"></i>
                                        Nonaktifkan Maintenance Mode
                                    </button>
                                    <button type="button" id="update-settings" class="btn btn-primary btn-lg px-4 py-2">
                                        <i class="fas fa-save me-2"></i>
                                        Simpan Pengaturan
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="col-lg-4">
                            <!-- Preview Maintenance Page -->
                            <div class="card mb-3">
                                <div class="card-header bg-info text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-eye me-2"></i>
                                        Preview Halaman Maintenance
                                    </h5>
                                </div>
                                <div class="card-body p-3">
                                    <div class="maintenance-preview">
                                        <div class="preview-header">
                                            <i class="fas fa-tools"></i>
                                            <h6>Sistem Sedang Dalam Pemeliharaan</h6>
                                        </div>
                                        <div class="preview-message" id="preview-message">
                                            {{ $setting->maintenance_message ?: 'Kami sedang melakukan pemeliharaan sistem untuk meningkatkan layanan kami. Silakan coba lagi dalam beberapa saat.' }}
                                        </div>
                                        <div class="preview-time" id="preview-time">
                                            @if($setting->maintenance_start)
                                                <small>Mulai: {{ $setting->maintenance_start->format('d M Y H:i') }}</small>
                                            @endif
                                            @if($setting->maintenance_end)
                                                <br><small>Selesai: {{ $setting->maintenance_end->format('d M Y H:i') }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Log Aktivitas -->
                            <div class="card mb-3">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-history me-2"></i>
                                        Log Aktivitas
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="log-item">
                                        <small class="text-muted d-block mb-2">Status saat ini:</small>
                                        <span class="badge bg-{{ $setting->is_maintenance_mode ? 'danger' : 'success' }} fs-6 px-3 py-2">
                                            {{ $setting->is_maintenance_mode ? 'Maintenance Mode Aktif' : 'Sistem Normal' }}
                                        </span>
                                    </div>
                                    @if($setting->updated_at)
                                    <div class="log-item mt-3 pt-3 border-top">
                                        <small class="text-muted d-block mb-2">Terakhir diperbarui:</small>
                                        <div class="fw-semibold">
                                            <i class="far fa-clock me-2"></i>
                                            {{ $setting->updated_at->format('d M Y H:i') }}
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Artisan Commands -->
                            <div class="card">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-terminal me-2"></i>
                                        Artisan Commands
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="alert alert-warning alert-sm mb-3">
                                        <small><i class="fas fa-exclamation-triangle me-1"></i>Hati-hati saat menjalankan perintah artisan!</small>
                                    </div>
                                    
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-sm btn-primary artisan-btn" data-command="migrate">
                                            <i class="fas fa-database me-2"></i>Migrate
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger artisan-btn" data-command="migrate:fresh" data-danger="true">
                                            <i class="fas fa-exclamation-triangle me-2"></i>Migrate Fresh
                                        </button>
                                        <button type="button" class="btn btn-sm btn-secondary artisan-btn" data-command="migrate:rollback">
                                            <i class="fas fa-undo me-2"></i>Rollback
                                        </button>
                                        <button type="button" class="btn btn-sm btn-info artisan-btn" data-command="cache:clear">
                                            <i class="fas fa-broom me-2"></i>Clear Cache
                                        </button>
                                        <button type="button" class="btn btn-sm btn-info artisan-btn" data-command="config:clear">
                                            <i class="fas fa-cog me-2"></i>Clear Config
                                        </button>
                                        <button type="button" class="btn btn-sm btn-info artisan-btn" data-command="route:clear">
                                            <i class="fas fa-route me-2"></i>Clear Route
                                        </button>
                                        <button type="button" class="btn btn-sm btn-info artisan-btn" data-command="view:clear">
                                            <i class="fas fa-eye me-2"></i>Clear View
                                        </button>
                                        <button type="button" class="btn btn-sm btn-success artisan-btn" data-command="optimize:clear">
                                            <i class="fas fa-magic me-2"></i>Clear All
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary artisan-btn" data-command="config:cache">
                                            <i class="fas fa-save me-2"></i>Cache Config
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary artisan-btn" data-command="route:cache">
                                            <i class="fas fa-save me-2"></i>Cache Route
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary artisan-btn" data-command="optimize">
                                            <i class="fas fa-rocket me-2"></i>Optimize
                                        </button>
                                        <button type="button" class="btn btn-sm btn-success artisan-btn" data-command="db:seed">
                                            <i class="fas fa-seedling me-2"></i>Database Seed
                                        </button>
                                    </div>

                                    <!-- Output Area -->
                                    <div id="artisan-output" class="mt-3" style="display: none;">
                                        <div class="card bg-white text-dark border border-1 border-secondary">
                                            <div class="card-header bg-secondary text-white">
                                                <small><i class="fas fa-terminal me-2"></i>Output</small>
                                            </div>
                                            <div class="card-body p-2">
                                                <pre id="artisan-output-content" class="mb-0" style="font-size: 0.85rem; max-height: 220px; overflow-y: auto; background:#ffffff; color:#000000;"></pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.maintenance-preview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.preview-header {
    margin-bottom: 1rem;
}

.preview-header i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.9;
}

.preview-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.preview-message {
    margin: 1rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.95;
}

.preview-time {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.log-item {
    padding: 0;
}

.log-item:last-child {
    border-bottom: none;
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-control-lg {
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control-lg:hover {
    border-color: #adb5bd;
}

@media (max-width: 768px) {
    .d-flex.flex-wrap {
        flex-direction: column;
    }
    
    .d-flex.flex-wrap .btn {
        width: 100%;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Update preview saat input berubah
    document.getElementById('maintenance_message').addEventListener('input', function() {
        document.getElementById('preview-message').textContent = this.value || 'Kami sedang melakukan pemeliharaan sistem untuk meningkatkan layanan kami. Silakan coba lagi dalam beberapa saat.';
    });

    // Enable Maintenance Mode
    document.getElementById('enable-maintenance').addEventListener('click', function() {
        if (confirm('Apakah Anda yakin ingin mengaktifkan maintenance mode? Sistem akan tidak dapat diakses oleh pengguna biasa.')) {
            const formData = new FormData(document.getElementById('maintenance-form'));
            
            fetch('{{ route("maintenance.enable") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    maintenance_message: formData.get('maintenance_message'),
                    allowed_ips: formData.get('allowed_ips'),
                    maintenance_start: formData.get('maintenance_start'),
                    maintenance_end: formData.get('maintenance_end'),
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    updateMaintenanceStatus(true);
                } else {
                    showAlert('error', data.message);
                }
            })
            .catch(error => {
                showAlert('error', 'Terjadi kesalahan: ' + error.message);
            });
        }
    });

    // Disable Maintenance Mode
    document.getElementById('disable-maintenance').addEventListener('click', function() {
        if (confirm('Apakah Anda yakin ingin menonaktifkan maintenance mode?')) {
            fetch('{{ route("maintenance.disable") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    updateMaintenanceStatus(false);
                } else {
                    showAlert('error', data.message);
                }
            })
            .catch(error => {
                showAlert('error', 'Terjadi kesalahan: ' + error.message);
            });
        }
    });

    // Update Settings
    document.getElementById('update-settings').addEventListener('click', function() {
        const formData = new FormData(document.getElementById('maintenance-form'));
        
        fetch('{{ route("maintenance.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                maintenance_message: formData.get('maintenance_message'),
                allowed_ips: formData.get('allowed_ips'),
                maintenance_start: formData.get('maintenance_start'),
                maintenance_end: formData.get('maintenance_end'),
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
            } else {
                showAlert('error', data.message);
            }
        })
        .catch(error => {
            showAlert('error', 'Terjadi kesalahan: ' + error.message);
        });
    });

    function updateMaintenanceStatus(isActive) {
        const statusElement = document.getElementById('maintenance-status');
        statusElement.innerHTML = `
            <span class="badge bg-${isActive ? 'danger' : 'success'} fs-6">
                ${isActive ? 'AKTIF' : 'NONAKTIF'}
            </span>
        `;
    }

    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        // Insert alert at the top of the card body
        const cardBody = document.querySelector('.card-body');
        cardBody.insertAdjacentHTML('afterbegin', alertHtml);
        
        // Auto remove alert after 5 seconds
        setTimeout(() => {
            const alert = cardBody.querySelector('.alert');
            if (alert) {
                alert.remove();
            }
        }, 5000);
    }

    // Artisan Commands Handler
    let pendingArtisanCommand = null;
    let pendingArtisanButton = null;
    const artisanButtons = document.querySelectorAll('.artisan-btn');
    
    artisanButtons.forEach(button => {
        button.addEventListener('click', function() {
            const command = this.getAttribute('data-command');
            const isDangerous = this.getAttribute('data-danger') === 'true';
            
            if (isDangerous) {
                pendingArtisanCommand = command;
                pendingArtisanButton = this;
                showArtisanConfirmModal(command);
            } else {
                executeArtisanCommand(command, false, this);
            }
        });
    });

    function showArtisanConfirmModal(command) {
        const modalHtml = `
            <div id="artisan-confirm-modal" class="modal fade show" style="display: block; background: rgba(0,0,0,0.5);" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-danger text-white">
                            <h5 class="modal-title">
                                <i class="fas fa-exclamation-triangle me-2"></i>Konfirmasi Perintah Berbahaya
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-dismiss="artisan-modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Anda akan menjalankan perintah <strong>${command}</strong> yang dapat menghapus data atau mengubah struktur database.</p>
                            <p class="text-danger"><strong>Peringatan:</strong> Pastikan Anda telah membuat backup sebelum melanjutkan!</p>
                            <div class="form-check mt-3">
                                <input class="form-check-input" type="checkbox" id="artisan-confirm-checkbox">
                                <label class="form-check-label" for="artisan-confirm-checkbox">
                                    Saya mengerti dan telah membuat backup
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="artisan-modal">Batal</button>
                            <button type="button" class="btn btn-danger" id="artisan-confirm-btn" disabled>
                                <i class="fas fa-play me-2"></i>Lanjutkan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Handle checkbox change
        document.getElementById('artisan-confirm-checkbox').addEventListener('change', function() {
            document.getElementById('artisan-confirm-btn').disabled = !this.checked;
        });
        
        // Handle cancel buttons
        document.querySelectorAll('[data-dismiss="artisan-modal"]').forEach(btn => {
            btn.addEventListener('click', function() {
                closeArtisanModal();
            });
        });
        
        // Handle confirm button
        document.getElementById('artisan-confirm-btn').addEventListener('click', function() {
            if (!this.disabled && pendingArtisanCommand) {
                proceedArtisanCommand();
            }
        });
    }

    function closeArtisanModal() {
        const modal = document.getElementById('artisan-confirm-modal');
        if (modal) {
            modal.remove();
        }
        pendingArtisanCommand = null;
        pendingArtisanButton = null;
    }
    
    // Make functions available globally for backward compatibility
    window.closeArtisanModal = closeArtisanModal;
    window.proceedArtisanCommand = function() {
        if (pendingArtisanCommand && pendingArtisanButton) {
            const command = pendingArtisanCommand;
            const button = pendingArtisanButton;
            closeArtisanModal();
            executeArtisanCommand(command, true, button);
        }
    };

    function executeArtisanCommand(command, confirmed, buttonElement = null) {
        const outputDiv = document.getElementById('artisan-output');
        const outputContent = document.getElementById('artisan-output-content');
        
        // Use provided button or try to find it
        const button = buttonElement || document.querySelector(`[data-command="${command}"]`);
        
        // Validate required elements
        if (!outputDiv || !outputContent) {
            showAlert('error', 'Elemen output tidak ditemukan!');
            return;
        }
        
        // Save original button state (if button exists)
        let originalButtonHTML = '';
        let originalButtonDisabled = false;
        if (button) {
            originalButtonHTML = button.innerHTML;
            originalButtonDisabled = button.disabled;
        }
        
        // Show output and disable button
        outputDiv.style.display = 'block';
        outputContent.innerHTML = '<span class="text-warning"><i class="fas fa-spinner fa-spin me-2"></i>Menjalankan perintah...</span>';
        
        if (button) {
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Menjalankan...';
        }
        
        // Scroll to output
        outputDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        
        fetch('{{ route("maintenance.artisan.execute") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                command: command,
                confirm: confirmed
            })
        })
        .then(response => response.json())
        .then(data => {
            // Restore button state (if button exists)
            if (button) {
                button.disabled = originalButtonDisabled;
                button.innerHTML = originalButtonHTML;
            }
            
            if (data.success) {
                outputContent.innerHTML = `<span class="text-success"><i class="fas fa-check-circle me-2"></i>${data.message}</span>\n<pre class="text-white mt-2">${data.output || 'Tidak ada output'}</pre>`;
                showAlert('success', `Perintah "${command}" berhasil dijalankan!`);
            } else {
                outputContent.innerHTML = `<span class="text-danger"><i class="fas fa-times-circle me-2"></i>${data.message}</span>\n<pre class="text-white mt-2">${data.output || 'Tidak ada output'}</pre>`;
                showAlert('error', `Perintah "${command}" gagal: ${data.message}`);
            }
        })
        .catch(error => {
            // Restore button state on error (if button exists)
            if (button) {
                button.disabled = originalButtonDisabled;
                button.innerHTML = originalButtonHTML;
            }
            
            outputContent.innerHTML = `<span class="text-danger"><i class="fas fa-exclamation-circle me-2"></i>Error: ${error.message}</span>`;
            showAlert('error', `Terjadi kesalahan: ${error.message}`);
        });
    }
});
</script>
@endsection