@extends('layouts.app')

@section('title', 'System Update')

@push('styles')
<style>
    .update-card {
        max-width: 800px;
        margin: 20px auto;
    }
    
    .version-badge {
        font-size: 24px;
        padding: 10px 20px;
        border-radius: 8px;
    }
    
    .update-progress {
        display: none;
        margin-top: 20px;
    }
    
    .update-step {
        padding: 15px;
        margin: 10px 0;
        border-radius: 5px;
        background: #f8f9fa;
        border-left: 4px solid #6c757d;
    }
    
    .update-step.success {
        border-left-color: #28a745;
        background: #d4edda;
    }
    
    .update-step.error {
        border-left-color: #dc3545;
        background: #f8d7da;
    }
    
    .update-step.processing {
        border-left-color: #007bff;
        background: #cfe2ff;
    }
    
    .changelog-item {
        padding: 15px;
        margin: 10px 0;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #dee2e6;
    }
    
    .changelog-item h5 {
        color: #667eea;
        margin-bottom: 10px;
    }
    
    .spinner-border-custom {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }
</style>
@endpush

@section('main')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">System Update</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">System Update</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        
        <!-- Current Version Card -->
        <div class="card update-card">
            <div class="card-header bg-primary">
                <h3 class="card-title"><i class="fas fa-info-circle"></i> System Information</h3>
            </div>
            <div class="card-body text-center">
                <div class="row">
                    <div class="col-md-6">
                        <h5>Current Version</h5>
                        <span class="badge badge-secondary version-badge">
                            <i class="fas fa-code-branch"></i> v{{ $currentVersion }}
                        </span>
                    </div>
                    <div class="col-md-6">
                        <h5>Latest Version</h5>
                        <span class="badge {{ $updateAvailable ? 'badge-success' : 'badge-info' }} version-badge">
                            <i class="fas fa-rocket"></i> v{{ $latestVersion }}
                        </span>
                    </div>
                </div>
                
                @if($updateAvailable)
                    <div class="alert alert-success mt-4">
                        <i class="fas fa-check-circle"></i> 
                        <strong>New Update Available!</strong> 
                        You can update from v{{ $currentVersion }} to v{{ $latestVersion }}
                    </div>
                    
                    <button type="button" class="btn btn-lg btn-primary" id="startUpdateBtn">
                        <i class="fas fa-download"></i> Start Update Now
                    </button>
                @else
                    <div class="alert alert-info mt-4">
                        <i class="fas fa-check-circle"></i> 
                        You are running the latest version!
                    </div>
                    
                    <button type="button" class="btn btn-lg btn-secondary" id="checkUpdateBtn">
                        <i class="fas fa-sync-alt"></i> Check for Updates
                    </button>
                @endif
            </div>
        </div>
        
        <!-- Update Progress Card -->
        <div class="card update-card update-progress" id="updateProgressCard">
            <div class="card-header bg-info">
                <h3 class="card-title"><i class="fas fa-spinner fa-spin"></i> Update in Progress</h3>
            </div>
            <div class="card-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> 
                    Please do not close this page or refresh until the update is complete.
                </div>
                
                <div id="updateSteps">
                    <!-- Update steps will be added here dynamically -->
                </div>
                
                <div class="progress mt-3">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" 
                         id="updateProgressBar" 
                         style="width: 0%">0%</div>
                </div>
            </div>
        </div>
        
        <!-- Changelog Card -->
        <div class="card update-card">
            <div class="card-header bg-success">
                <h3 class="card-title"><i class="fas fa-list-ul"></i> Changelog</h3>
            </div>
            <div class="card-body" id="changelogContainer">
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Backup Information Card -->
        <div class="card update-card">
            <div class="card-header bg-warning">
                <h3 class="card-title"><i class="fas fa-shield-alt"></i> Update Safety</h3>
            </div>
            <div class="card-body">
                <h5><i class="fas fa-check-circle text-success"></i> Automatic Backup</h5>
                <p>Before each update, the system automatically creates a backup of:</p>
                <ul>
                    <li>Application files</li>
                    <li>Configuration files</li>
                    <li>Database structure</li>
                </ul>
                
                <h5 class="mt-3"><i class="fas fa-undo text-info"></i> Automatic Rollback</h5>
                <p>If an update fails, the system will automatically restore from the backup.</p>
                
                <h5 class="mt-3"><i class="fas fa-pause-circle text-warning"></i> Maintenance Mode</h5>
                <p>During the update, the system will be put in maintenance mode to prevent data corruption.</p>
            </div>
        </div>
        
    </div>
</section>
@endsection

@push('script')
<script>
$(document).ready(function() {
    
    // Load changelog
    loadChangelog();
    
    // Check for updates button
    $('#checkUpdateBtn').on('click', function() {
        $(this).html('<i class="fas fa-spinner fa-spin"></i> Checking...').prop('disabled', true);
        
        setTimeout(function() {
            location.reload();
        }, 2000);
    });
    
    // Start update button
    $('#startUpdateBtn').on('click', function() {
        if (!confirm('Are you sure you want to update the system?\n\nThe system will be put in maintenance mode during the update.')) {
            return;
        }
        
        $(this).prop('disabled', true);
        $('#updateProgressCard').slideDown();
        
        // Scroll to progress card
        $('html, body').animate({
            scrollTop: $('#updateProgressCard').offset().top - 100
        }, 500);
        
        // Start the update process
        performUpdate();
    });
    
    // Load changelog from server
    function loadChangelog() {
        $.get('/system-update/changelog', function(data) {
            var html = '';
            
            data.forEach(function(version) {
                html += '<div class="changelog-item">';
                html += '<h5><i class="fas fa-tag"></i> Version ' + version.version + ' <small class="text-muted">(' + version.date + ')</small></h5>';
                html += '<ul>';
                version.changes.forEach(function(change) {
                    html += '<li>' + change + '</li>';
                });
                html += '</ul>';
                html += '</div>';
            });
            
            $('#changelogContainer').html(html);
        }).fail(function() {
            $('#changelogContainer').html('<div class="alert alert-danger">Failed to load changelog</div>');
        });
    }
    
    // Perform the update
    function performUpdate() {
        var updateSteps = [
            'Putting system in maintenance mode',
            'Creating system backup',
            'Downloading update package',
            'Extracting update files',
            'Running database migrations',
            'Clearing system cache',
            'Taking system online'
        ];
        
        var currentStep = 0;
        var totalSteps = updateSteps.length;
        
        // Add initial steps to UI
        updateSteps.forEach(function(step, index) {
            addUpdateStep(step, 'pending', index);
        });
        
        // Make AJAX call to perform update
        $.ajax({
            url: '/system-update/perform',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // Update steps based on response
                    response.steps.forEach(function(step, index) {
                        updateStepStatus(index, step.status, step.message);
                        updateProgress((index + 1) / totalSteps * 100);
                    });
                    
                    // Show success message
                    if (typeof notificationSystem !== 'undefined') {
                        notificationSystem.success('System Updated!', response.message);
                    } else {
                        alert('✅ ' + response.message);
                    }
                    
                    // Reload page after 3 seconds
                    setTimeout(function() {
                        window.location.reload();
                    }, 3000);
                } else {
                    showUpdateError(response.message);
                }
            },
            error: function(xhr) {
                var message = 'Update failed. Please try again or contact support.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                showUpdateError(message);
            }
        });
    }
    
    // Add update step to UI
    function addUpdateStep(stepName, status, index) {
        var icon = '<i class="fas fa-circle"></i>';
        if (status === 'success') icon = '<i class="fas fa-check-circle"></i>';
        if (status === 'error') icon = '<i class="fas fa-times-circle"></i>';
        if (status === 'processing') icon = '<i class="fas fa-spinner fa-spin"></i>';
        
        var html = '<div class="update-step ' + status + '" id="step-' + index + '">' +
                   icon + ' <strong>' + stepName + '</strong>' +
                   '<span class="step-message"></span>' +
                   '</div>';
        
        $('#updateSteps').append(html);
    }
    
    // Update step status
    function updateStepStatus(index, status, message) {
        var $step = $('#step-' + index);
        $step.removeClass('pending processing success error').addClass(status);
        
        var icon = '<i class="fas fa-circle"></i>';
        if (status === 'success') icon = '<i class="fas fa-check-circle"></i>';
        if (status === 'error') icon = '<i class="fas fa-times-circle"></i>';
        if (status === 'processing') icon = '<i class="fas fa-spinner fa-spin"></i>';
        
        $step.find('i').replaceWith(icon);
        
        if (message) {
            $step.find('.step-message').html(' - ' + message);
        }
    }
    
    // Update progress bar
    function updateProgress(percent) {
        percent = Math.round(percent);
        $('#updateProgressBar').css('width', percent + '%').text(percent + '%');
    }
    
    // Show update error
    function showUpdateError(message) {
        $('#updateSteps').append(
            '<div class="alert alert-danger mt-3">' +
            '<i class="fas fa-exclamation-triangle"></i> <strong>Update Failed:</strong> ' + message +
            '</div>'
        );
        
        if (typeof notificationSystem !== 'undefined') {
            notificationSystem.showError(message, 'Update Failed');
        } else {
            alert('❌ Update Failed: ' + message);
        }
        
        setTimeout(function() {
            location.reload();
        }, 5000);
    }
    
});
</script>
@endpush