@extends('layouts.admin')

@section('admin-content')
<div class="admin-page-header">
    <div class="admin-page-header-content">
        <div class="admin-page-title">
            <h1>{{ trans('app.System Updates') }}</h1>
            <p class="admin-page-subtitle">{{ trans('app.Manage system updates and version control') }}</p>
        </div>
        <div class="admin-page-actions">
            <button id="check-updates-btn" class="admin-btn admin-btn-info admin-btn-m">
                <i class="fas fa-sync me-2"></i>
                {{ trans('app.Check for Updates') }}
            </button>
            <button id="auto-update-btn" class="admin-btn admin-btn-primary admin-btn-m">
                <i class="fas fa-magic me-2"></i>
                {{ trans('app.Auto Update') }}
            </button>
        </div>
    </div>
</div>

@if(session('success'))
<div class="admin-alert admin-alert-success mb-6">
    <div class="flex">
        <i class="fas fa-check-circle text-green-500 mt-0.5 mr-3"></i>
        <div>
            <h4 class="font-semibold">{{ trans('app.Success') }}</h4>
            <p class="mt-1">{{ session('success') }}</p>
        </div>
    </div>
</div>
@endif

@if(session('error'))
<div class="admin-alert admin-alert-error mb-6">
    <div class="flex">
        <i class="fas fa-exclamation-triangle text-red-500 mt-0.5 mr-3"></i>
        <div>
            <h4 class="font-semibold">{{ trans('app.Error') }}</h4>
            <p class="mt-1">{{ session('error') }}</p>
        </div>
    </div>
</div>
@endif

<!-- System Status Card -->
<div class="row g-4 mb-5">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="d-flex align-items-center mb-3">
                            <div class="stats-icon bg-primary bg-opacity-10 rounded-circle p-3 me-3">
                                <i class="fas fa-server text-primary fs-4"></i>
                            </div>
                            <div>
                                <h4 class="mb-1 text-dark">{{ trans('app.System Status') }}</h4>
                                <p class="text-muted mb-0">{{ trans('app.Current version') }}: 
                                    <span class="badge bg-primary">{{ $versionStatus['current_version'] }}</span>
                                </p>
                            </div>
                        </div>
                        
                        @if(isset($updateInfo) && $updateInfo && $updateInfo['is_update_available'])
                            <div class="alert alert-warning mb-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <div>
                                        <strong>{{ trans('app.Next Update Available') }}:</strong> 
                                        <span class="badge bg-warning">{{ $updateInfo['next_version'] }}</span>
                                        <br>
                                        <small class="text-muted">{{ trans('app.Updates must be installed sequentially') }}</small>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="alert alert-success mb-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-check-circle me-2"></i>
                                    <div>
                                        <strong>{{ trans('app.System is up to date') }}</strong>
                                        <br>
                                        <small class="text-muted">{{ trans('app.No updates available') }}</small>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="col-md-4 text-end">
                        <button class="btn btn-primary btn-lg" onclick="checkForUpdates()">
                            <i class="fas fa-sync me-2"></i>
                            {{ trans('app.Check for Updates') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Update Information -->
@if(isset($updateInfo) && $updateInfo && $updateInfo['is_update_available'])
<div class="row g-4 mb-5">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-download me-2"></i>
                    {{ trans('app.Next Update Available') }} - {{ $updateInfo['next_version'] }}
                </h5>
            </div>
            <div class="card-body p-4">

                <!-- Update Details -->
                <div class="row">
                    <div class="col-md-8">
                        <h5 class="text-dark mb-3">{{ $updateInfo['update_info']['title'] ?? 'Update' }}</h5>
                        
                        @if(isset($updateInfo['update_info']['description']) && $updateInfo['update_info']['description'])
                            <p class="text-muted mb-3">{{ $updateInfo['update_info']['description'] }}</p>
                        @endif
                        
                        @if(isset($updateInfo['update_info']['changelog']) && is_array($updateInfo['update_info']['changelog']))
                            <div class="mb-3">
                                <h6 class="text-dark">{{ trans('app.Changelog') }}:</h6>
                                <ul class="list-unstyled">
                                    @foreach($updateInfo['update_info']['changelog'] as $item)
                                        <li class="mb-1">
                                            <i class="fas fa-check text-success me-2"></i>
                                            {{ $item }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h6 class="card-title">{{ trans('app.Update Details') }}</h6>
                                
                                <div class="mb-2">
                                    <small class="text-muted">{{ trans('app.Version') }}:</small>
                                    <div class="fw-bold">{{ $updateInfo['next_version'] }}</div>
                                </div>
                                
                                <div class="mb-2">
                                    <small class="text-muted">{{ trans('app.Type') }}:</small>
                                    <div>
                                        @if($updateInfo['update_info']['is_major'] ?? false)
                                            <span class="badge bg-warning">{{ trans('app.Major') }}</span>
                                        @else
                                            <span class="badge bg-info">{{ trans('app.Minor') }}</span>
                                        @endif
                                        
                                        @if($updateInfo['update_info']['is_required'] ?? false)
                                            <span class="badge bg-danger ms-1">{{ trans('app.Required') }}</span>
                                        @endif
                                    </div>
                                </div>
                                
                                @if(isset($updateInfo['update_info']['file_size']))
                                <div class="mb-2">
                                    <small class="text-muted">{{ trans('app.File Size') }}:</small>
                                    <div class="fw-bold">{{ number_format($updateInfo['update_info']['file_size'] / 1024 / 1024, 2) }} MB</div>
                                </div>
                                @endif
                                
                                @if(isset($updateInfo['update_info']['release_date']))
                                <div class="mb-3">
                                    <small class="text-muted">{{ trans('app.Release Date') }}:</small>
                                    <div class="fw-bold">{{ $updateInfo['update_info']['release_date'] }}</div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex gap-2 flex-wrap mt-4">
                    <button class="btn btn-primary" onclick="showAutoUpdateModal()">
                        <i class="fas fa-magic me-2"></i>
                        {{ trans('app.Auto Update') }}
                    </button>
                    <button class="btn btn-warning" onclick="showUploadUpdateModal()">
                        <i class="fas fa-upload me-2"></i>
                        {{ trans('app.Upload Update') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Update Actions -->
@if($versionStatus['is_update_available'])
<div class="card mb-4">
    <div class="card-header bg-warning text-dark">
        <h5 class="card-title mb-0">
            <i class="fas fa-download me-2"></i>
            {{ trans('app.Update Available') }}
        </h5>
    </div>
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h6 class="mb-2">{{ trans('app.New Version Available') }}</h6>
                <p class="text-muted mb-0">
                    {{ trans('app.A new version') }} <strong>{{ $versionStatus['latest_version'] }}</strong> 
                    {{ trans('app.is available. Current version is') }} <strong>{{ $versionStatus['current_version'] }}</strong>
                </p>
            </div>
            <div class="col-md-4 text-end">
                <button id="update-system-btn" class="btn btn-warning btn-lg" data-version="{{ $versionStatus['latest_version'] }}">
                    <i class="fas fa-download me-2"></i>
                    {{ trans('app.Update Now') }}
                </button>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Version History -->
<div class="card">
    <div class="card-header bg-light">
        <div class="d-flex align-items-center">
            <i class="fas fa-history me-3 text-primary"></i>
            <div>
                <h5 class="card-title mb-0">{{ trans('app.Version History') }}</h5>
                <small class="text-muted">{{ trans('app.Release notes and changelog') }}</small>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div id="version-history-content">
            <div class="text-center py-4">
                <i class="fas fa-spinner fa-spin fa-2x text-primary mb-3"></i>
                <p class="text-muted">{{ trans('app.Loading version history...') }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Update Confirmation Modal -->
<div class="modal fade" id="updateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    {{ trans('app.Confirm System Update') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>{{ trans('app.Warning') }}:</strong> {{ trans('app.System update will perform the following actions') }}:
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex align-items-center">
                        <i class="fas fa-database text-primary me-2"></i>
                        {{ trans('app.Run database migrations') }}
                    </li>
                    <li class="list-group-item d-flex align-items-center">
                        <i class="fas fa-broom text-info me-2"></i>
                        {{ trans('app.Clear all caches') }}
                    </li>
                    <li class="list-group-item d-flex align-items-center">
                        <i class="fas fa-sync text-success me-2"></i>
                        {{ trans('app.Optimize application') }}
                    </li>
                    <li class="list-group-item d-flex align-items-center">
                        <i class="fas fa-tag text-warning me-2"></i>
                        {{ trans('app.Update version number') }}
                    </li>
                </ul>
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmUpdate">
                    <label class="form-check-label" for="confirmUpdate">
                        {{ trans('app.I understand the risks and want to proceed with the update') }}
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ trans('app.Cancel') }}
                </button>
                <button type="button" class="btn btn-warning" id="confirm-update-btn" disabled>
                    <i class="fas fa-download me-2"></i>
                    {{ trans('app.Proceed with Update') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Version Details Modal -->
<div class="modal fade" id="versionDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="versionDetailsTitle">
                    <i class="fas fa-info-circle me-2"></i>
                    {{ trans('app.Version Details') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="versionDetailsContent">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ trans('app.Close') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Backups Modal -->
<div class="modal fade" id="backupsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-archive me-2"></i>
                    {{ trans('app.System Backups') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="backupsTable">
                        <thead>
                            <tr>
                                <th>{{ trans('app.Version') }}</th>
                                <th>{{ trans('app.Filename') }}</th>
                                <th>{{ trans('app.Size') }}</th>
                                <th>{{ trans('app.Created At') }}</th>
                                <th>{{ trans('app.Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Backups will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ trans('app.Close') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Upload Package Modal -->
<div class="modal fade" id="uploadPackageModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-upload me-2"></i>
                    {{ trans('app.Upload Update Package') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="uploadPackageForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="update_package" class="form-label">{{ trans('app.Update Package') }}</label>
                        <input type="file" class="form-control" id="update_package" name="update_package" accept=".zip" required>
                        <div class="form-text">{{ trans('app.Select a ZIP file containing the update package (max 50MB)') }}</div>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>{{ trans('app.Note') }}:</strong> {{ trans('app.The update package should contain all necessary files for the update') }}
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ trans('app.Cancel') }}
                </button>
                <button type="button" class="btn btn-success" id="confirm-upload-btn">
                    <i class="fas fa-upload me-2"></i>
                    {{ trans('app.Upload Package') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Auto Update Modal -->
<div class="modal fade" id="autoUpdateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-magic me-2"></i>
                    {{ trans('app.Auto Update') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>{{ trans('app.Note') }}:</strong> {{ trans('app.Enter your license information to check for and install updates automatically') }}
                </div>
                
                <form id="autoUpdateForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="auto-license-key" class="form-label">
                                    <i class="fas fa-key text-primary me-1"></i>
                                    {{ trans('app.License Key') }} <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="auto-license-key" name="license_key" 
                                       placeholder="XXXX-XXXX-XXXX-XXXX" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="auto-product-slug" class="form-label">
                                    <i class="fas fa-tag text-success me-1"></i>
                                    {{ trans('app.Product Slug') }} <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="auto-product-slug" name="product_slug" 
                                       value="the-ultimate-license-management-system" readonly required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="auto-domain" class="form-label">
                                    <i class="fas fa-globe text-info me-1"></i>
                                    {{ trans('app.Domain') }}
                                </label>
                                <input type="text" class="form-control" id="auto-domain" name="domain" 
                                       value="{{ parse_url(config('app.url'), PHP_URL_HOST) }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="auto-current-version" class="form-label">
                                    <i class="fas fa-code-branch text-warning me-1"></i>
                                    {{ trans('app.Current Version') }} <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="auto-current-version" name="current_version" 
                                       value="{{ \App\Helpers\VersionHelper::getCurrentVersion() }}" readonly required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="button" class="btn btn-primary" id="check-auto-updates-btn" onclick="checkAutoUpdates()">
                            <i class="fas fa-search me-2"></i>
                            {{ trans('app.Check for Updates') }}
                        </button>
                    </div>
                </form>
                
                <div id="auto-update-info" style="display: none;" class="mt-4"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ trans('app.Close') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Rollback Confirmation Modal -->
<div class="modal fade" id="rollbackModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-undo me-2"></i>
                    {{ trans('app.Confirm System Rollback') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>{{ trans('app.Warning') }}:</strong> {{ trans('app.System rollback will restore the system to a previous version') }}
                </div>
                <p>{{ trans('app.This action will') }}:</p>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex align-items-center">
                        <i class="fas fa-undo text-danger me-2"></i>
                        {{ trans('app.Restore system files from backup') }}
                    </li>
                    <li class="list-group-item d-flex align-items-center">
                        <i class="fas fa-database text-warning me-2"></i>
                        {{ trans('app.Rollback database changes') }}
                    </li>
                    <li class="list-group-item d-flex align-items-center">
                        <i class="fas fa-broom text-info me-2"></i>
                        {{ trans('app.Clear all caches') }}
                    </li>
                </ul>
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmRollback">
                    <label class="form-check-label" for="confirmRollback">
                        {{ trans('app.I understand the risks and want to proceed with the rollback') }}
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ trans('app.Cancel') }}
                </button>
                <button type="button" class="btn btn-danger" id="confirm-rollback-btn" disabled>
                    <i class="fas fa-undo me-2"></i>
                    {{ trans('app.Proceed with Rollback') }}
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Check for updates button
    document.getElementById('check-updates-btn').addEventListener('click', function() {
        checkForUpdates();
    });


    // Update system button
    document.getElementById('update-system-btn').addEventListener('click', function() {
        const version = this.dataset.version;
        showUpdateModal(version);
    });

    // Confirm update checkbox
    document.getElementById('confirmUpdate').addEventListener('change', function() {
        document.getElementById('confirm-update-btn').disabled = !this.checked;
    });

    // Confirm update button
    document.getElementById('confirm-update-btn').addEventListener('click', function() {
        const version = document.getElementById('update-system-btn').dataset.version;
        performUpdate(version);
    });

    // Confirm upload button
    document.getElementById('confirm-upload-btn').addEventListener('click', function() {
        uploadUpdatePackage();
    });

    // Confirm rollback checkbox
    document.getElementById('confirmRollback').addEventListener('change', function() {
        document.getElementById('confirm-rollback-btn').disabled = !this.checked;
    });

    // Confirm rollback button
    document.getElementById('confirm-rollback-btn').addEventListener('click', function() {
        const version = this.dataset.version;
        performRollback(version);
    });
});

function checkForUpdates() {
    const btn = document.getElementById('check-updates-btn');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ trans("app.Checking...") }}';
    btn.disabled = true;

    fetch('{{ route("admin.updates.check") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Reload page to show updated status
            window.location.reload();
        } else {
            showAlert('error', data.message || '{{ trans("app.Failed to check for updates") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred while checking for updates") }}');
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function showUpdateModal(version) {
    document.getElementById('update-system-btn').dataset.version = version;
    document.getElementById('confirmUpdate').checked = false;
    document.getElementById('confirm-update-btn').disabled = true;
    
    const modal = new bootstrap.Modal(document.getElementById('updateModal'));
    modal.show();
}

function performUpdate(version) {
    const btn = document.getElementById('confirm-update-btn');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ trans("app.Updating...") }}';
    btn.disabled = true;

    fetch('{{ route("admin.updates.update") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            version: version,
            confirm: true
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            showAlert('error', data.message || '{{ trans("app.Update failed") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred during update") }}');
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
        bootstrap.Modal.getInstance(document.getElementById('updateModal')).hide();
    });
}

function showVersionDetails(version) {
    fetch(`{{ route("admin.updates.version-info", ":version") }}`.replace(':version', version))
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('versionDetailsTitle').innerHTML = 
                '<i class="fas fa-info-circle me-2"></i>{{ trans("app.Version Details") }} - ' + version;
            
            let content = '<div class="version-details">';
            
            if (data.data.info.features && data.data.info.features.length > 0) {
                content += '<h6 class="text-success mb-3"><i class="fas fa-plus me-2"></i>{{ trans("app.New Features") }}</h6>';
                content += '<ul class="list-group list-group-flush mb-4">';
                data.data.info.features.forEach(feature => {
                    content += `<li class="list-group-item"><i class="fas fa-check text-success me-2"></i>${feature}</li>`;
                });
                content += '</ul>';
            }
            
            if (data.data.info.fixes && data.data.info.fixes.length > 0) {
                content += '<h6 class="text-warning mb-3"><i class="fas fa-wrench me-2"></i>{{ trans("app.Bug Fixes") }}</h6>';
                content += '<ul class="list-group list-group-flush mb-4">';
                data.data.info.fixes.forEach(fix => {
                    content += `<li class="list-group-item"><i class="fas fa-check text-warning me-2"></i>${fix}</li>`;
                });
                content += '</ul>';
            }
            
            if (data.data.info.improvements && data.data.info.improvements.length > 0) {
                content += '<h6 class="text-info mb-3"><i class="fas fa-arrow-up me-2"></i>{{ trans("app.Improvements") }}</h6>';
                content += '<ul class="list-group list-group-flush mb-4">';
                data.data.info.improvements.forEach(improvement => {
                    content += `<li class="list-group-item"><i class="fas fa-check text-info me-2"></i>${improvement}</li>`;
                });
                content += '</ul>';
            }
            
            if (data.data.instructions && data.data.instructions.length > 0) {
                content += '<h6 class="text-primary mb-3"><i class="fas fa-list me-2"></i>{{ trans("app.Update Instructions") }}</h6>';
                content += '<ul class="list-group list-group-flush">';
                data.data.instructions.forEach(instruction => {
                    content += `<li class="list-group-item"><i class="fas fa-arrow-right text-primary me-2"></i>${instruction}</li>`;
                });
                content += '</ul>';
            }
            
            content += '</div>';
            document.getElementById('versionDetailsContent').innerHTML = content;
            
            const modal = new bootstrap.Modal(document.getElementById('versionDetailsModal'));
            modal.show();
        } else {
            showAlert('error', data.message || '{{ trans("app.Failed to load version details") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred while loading version details") }}');
    });
}

function showBackupsModal() {
    const modal = new bootstrap.Modal(document.getElementById('backupsModal'));
    modal.show();
    
    // Load backups data
    loadBackups();
}

function showUploadPackageModal() {
    const modal = new bootstrap.Modal(document.getElementById('uploadPackageModal'));
    modal.show();
}

function loadBackups() {
    fetch('{{ route("admin.updates.backups") }}')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const tbody = document.querySelector('#backupsTable tbody');
            tbody.innerHTML = '';
            
            if (data.data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">{{ trans("app.No backups found") }}</td></tr>';
                return;
            }
            
            data.data.forEach(backup => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td><span class="badge bg-primary">${backup.version || 'Unknown'}</span></td>
                    <td><code>${backup.filename}</code></td>
                    <td>${formatFileSize(backup.size)}</td>
                    <td>${backup.created_at}</td>
                    <td>
                        <button class="btn btn-sm btn-danger" onclick="showRollbackModal('${backup.version}')" ${!backup.version ? 'disabled' : ''}>
                            <i class="fas fa-undo me-1"></i>{{ trans("app.Rollback") }}
                        </button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        } else {
            showAlert('error', data.message || '{{ trans("app.Failed to load backups") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred while loading backups") }}');
    });
}

function uploadUpdatePackage() {
    const fileInput = document.getElementById('update_package');
    const file = fileInput.files[0];
    
    if (!file) {
        showAlert('error', '{{ trans("app.Please select a file to upload") }}');
        return;
    }
    
    const formData = new FormData();
    formData.append('update_package', file);
    
    const btn = document.getElementById('confirm-upload-btn');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ trans("app.Uploading...") }}';
    btn.disabled = true;
    
    fetch('{{ route("admin.updates.upload-package") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            bootstrap.Modal.getInstance(document.getElementById('uploadPackageModal')).hide();
            fileInput.value = '';
        } else {
            showAlert('error', data.message || '{{ trans("app.Upload failed") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred during upload") }}');
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function showRollbackModal(version) {
    document.getElementById('confirm-rollback-btn').dataset.version = version;
    document.getElementById('confirmRollback').checked = false;
    document.getElementById('confirm-rollback-btn').disabled = true;
    
    const modal = new bootstrap.Modal(document.getElementById('rollbackModal'));
    modal.show();
}

function performRollback(version) {
    const btn = document.getElementById('confirm-rollback-btn');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ trans("app.Rolling back...") }}';
    btn.disabled = true;
    
    fetch('{{ route("admin.updates.rollback") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            version: version,
            confirm: true
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            showAlert('error', data.message || '{{ trans("app.Rollback failed") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred during rollback") }}');
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
        bootstrap.Modal.getInstance(document.getElementById('rollbackModal')).hide();
    });
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Auto Update functionality
document.getElementById('auto-update-btn').addEventListener('click', function() {
    const modal = new bootstrap.Modal(document.getElementById('autoUpdateModal'));
    modal.show();
});

// Check for updates function (refresh page to get latest data)
function checkForUpdates() {
    showAlert('info', '{{ trans("app.Checking for updates") }}...');
    
    // Simply reload the page to get fresh data from the server
    setTimeout(() => {
        window.location.reload();
    }, 1000);
}

// Display update information
function displayUpdateInfo(updateData) {
    document.getElementById('update-title').textContent = updateData.update_info.title || 'Update';
    document.getElementById('update-version').textContent = updateData.latest_version;
    document.getElementById('update-major').innerHTML = updateData.update_info.is_major ? 
        '<span class="badge bg-warning">Yes</span>' : '<span class="badge bg-info">No</span>';
    document.getElementById('update-required').innerHTML = updateData.update_info.is_required ? 
        '<span class="badge bg-danger">Yes</span>' : '<span class="badge bg-success">No</span>';
    document.getElementById('update-status').innerHTML = '<span class="badge bg-success">Available</span>';
    document.getElementById('update-release-date').textContent = updateData.update_info.release_date || 'Not specified';
    document.getElementById('update-file-size').textContent = formatFileSize(updateData.update_info.file_size);
    document.getElementById('update-description').textContent = updateData.update_info.description || 'No description available';
    
    // Display changelog
    const changelogElement = document.getElementById('update-changelog');
    if (updateData.update_info.changelog && updateData.update_info.changelog.length > 0) {
        changelogElement.innerHTML = '<ul class="list-unstyled">' + 
            updateData.update_info.changelog.map(item => `<li><i class="fas fa-check text-success me-2"></i>${item}</li>`).join('') + 
            '</ul>';
    } else {
        changelogElement.textContent = 'No changelog available';
    }
    
    // Show update info section
    document.getElementById('update-info-section').style.display = 'block';
    document.getElementById('no-updates-section').style.display = 'none';
    
    // Store update data for download
    window.currentUpdateData = updateData;
}

// Show no updates available
function showNoUpdatesAvailable() {
    document.getElementById('update-info-section').style.display = 'none';
    document.getElementById('no-updates-section').style.display = 'block';
}


// Show auto update modal
function showAutoUpdateModal() {
    const modal = new bootstrap.Modal(document.getElementById('autoUpdateModal'));
    modal.show();
}

// Show upload update modal
function showUploadUpdateModal() {
    const modal = new bootstrap.Modal(document.getElementById('uploadPackageModal'));
    modal.show();
}

function showProductUpdateInfo(updateData, productName) {
    const modalHtml = `
        <div class="modal fade" id="productUpdateModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-download me-2"></i>
                            {{ trans('app.Update Available for') }} ${productName}
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>{{ trans('app.Current Version') }}:</strong> ${updateData.current_version}</p>
                                <p><strong>{{ trans('app.Latest Version') }}:</strong> ${updateData.latest_version}</p>
                                <p><strong>{{ trans('app.Update Type') }}:</strong> 
                                    <span class="badge ${updateData.update_info.is_major ? 'bg-warning' : 'bg-info'}">
                                        ${updateData.update_info.is_major ? '{{ trans("app.Major") }}' : '{{ trans("app.Minor") }}'}
                                    </span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>{{ trans('app.File Size') }}:</strong> ${formatFileSize(updateData.update_info.file_size)}</p>
                                <p><strong>{{ trans('app.Required') }}:</strong> 
                                    <span class="badge ${updateData.update_info.is_required ? 'bg-danger' : 'bg-success'}">
                                        ${updateData.update_info.is_required ? '{{ trans("app.Yes") }}' : '{{ trans("app.No") }}'}
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="mt-3">
                            <h6>{{ trans('app.Changelog') }}:</h6>
                            <ul class="list-unstyled">
                                ${updateData.update_info.changelog.map(item => `<li><i class="fas fa-check text-success me-2"></i>${item}</li>`).join('')}
                            </ul>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-success" onclick="installProductUpdate('${updateData.latest_version}', '${updateData.update_info.download_url}')">
                                <i class="fas fa-download me-2"></i>
                                {{ trans('app.Install Update') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    const existingModal = document.getElementById('productUpdateModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('productUpdateModal'));
    modal.show();
}

function installProductUpdate(version, downloadUrl) {
    if (!confirm('{{ trans("app.Are you sure you want to install this update?") }}')) {
        return;
    }
    
    showAlert('info', '{{ trans("app.Downloading and installing update...") }}');
    
    // Here you would implement the actual download and installation
    // For now, we'll just show a success message
    setTimeout(() => {
        showAlert('success', '{{ trans("app.Update installed successfully!") }}');
        bootstrap.Modal.getInstance(document.getElementById('productUpdateModal')).hide();
    }, 3000);
}

function checkAutoUpdates() {
    const licenseKey = document.getElementById('auto-license-key').value;
    const productSlug = document.getElementById('auto-product-slug').value;
    const domain = document.getElementById('auto-domain').value;
    const currentVersion = document.getElementById('auto-current-version').value;
    
    if (!licenseKey || !productSlug || !currentVersion) {
        showAlert('error', '{{ trans("app.Please fill all required fields") }}');
        return;
    }
    
    const btn = document.getElementById('check-auto-updates-btn');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ trans("app.Checking...") }}';
    btn.disabled = true;
    
    fetch('{{ route("admin.updates.auto-check") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            license_key: licenseKey,
            product_slug: productSlug,
            domain: domain,
            current_version: currentVersion
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Check if auto update was completed
            if (data.message && data.message.includes('Auto update completed successfully')) {
                // Auto update was completed
                showAlert('success', data.message);
                
                // Show additional info if available
                if (data.data && data.data.files_installed) {
                    setTimeout(() => {
                        showAlert('info', `{{ trans('app.Files installed') }}: ${data.data.files_installed}. {{ trans('app.Please refresh the page to see the new version') }}.`);
                    }, 2000);
                }
                
                // Auto refresh page after 5 seconds
                setTimeout(() => {
                    window.location.reload();
                }, 5000);
                
            } else if (data.data && data.data.is_update_available) {
                // Update available but not installed yet
                showAutoUpdateInfo(data.data);
            } else {
                // No updates available
                showAlert('info', '{{ trans("app.No updates available") }}');
            }
        } else {
            // Update failed
            showAlert('error', data.message || '{{ trans("app.Update failed") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred during update") }}: ' + error.message);
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function showAutoUpdateInfo(updateData) {
    const updateInfoDiv = document.getElementById('auto-update-info');
    updateInfoDiv.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-download text-primary me-2"></i>
                    {{ trans('app.Update Available') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>{{ trans('app.Current Version') }}:</strong> ${updateData.current_version}</p>
                        <p><strong>{{ trans('app.Latest Version') }}:</strong> ${updateData.latest_version}</p>
                        <p><strong>{{ trans('app.Update Type') }}:</strong> 
                            <span class="badge ${updateData.update_info.is_major ? 'bg-warning' : 'bg-info'}">
                                ${updateData.update_info.is_major ? '{{ trans("app.Major") }}' : '{{ trans("app.Minor") }}'}
                            </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>{{ trans('app.File Size') }}:</strong> ${formatFileSize(updateData.update_info.file_size)}</p>
                        <p><strong>{{ trans('app.Required') }}:</strong> 
                            <span class="badge ${updateData.update_info.is_required ? 'bg-danger' : 'bg-success'}">
                                ${updateData.update_info.is_required ? '{{ trans("app.Yes") }}' : '{{ trans("app.No") }}'}
                            </span>
                        </p>
                    </div>
                </div>
                <div class="mt-3">
                    <h6>{{ trans('app.Changelog') }}:</h6>
                    <ul class="list-unstyled">
                        ${updateData.update_info.changelog.map(item => `<li><i class="fas fa-check text-success me-2"></i>${item}</li>`).join('')}
                    </ul>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" onclick="installAutoUpdate('${updateData.latest_version}')">
                        <i class="fas fa-download me-2"></i>
                        {{ trans('app.Install Update') }}
                    </button>
                </div>
            </div>
        </div>
    `;
    updateInfoDiv.style.display = 'block';
}

function installAutoUpdate(version) {
    const licenseKey = document.getElementById('auto-license-key').value;
    const productSlug = document.getElementById('auto-product-slug').value;
    const domain = document.getElementById('auto-domain').value;
    
    if (!confirm('{{ trans("app.Are you sure you want to install this update?") }}')) {
        return;
    }
    
    const btn = document.querySelector('#auto-update-info .btn-primary');
    const originalText = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ trans("app.Installing...") }}';
    btn.disabled = true;
    
    fetch('{{ route("admin.updates.auto-install") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            license_key: licenseKey,
            product_slug: productSlug,
            domain: domain,
            version: version,
            confirm: true
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => {
                window.location.reload();
            }, 3000);
        } else {
            showAlert('error', data.message || '{{ trans("app.Installation failed") }}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '{{ trans("app.An error occurred during installation") }}');
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : type === 'info' ? 'alert-info' : 'alert-danger';
    const iconClass = type === 'success' ? 'fa-check-circle' : type === 'info' ? 'fa-info-circle' : 'fa-exclamation-triangle';
    
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="fas ${iconClass} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // Insert at the top of the page
    const container = document.querySelector('.admin-page-header').parentNode;
    container.insertAdjacentHTML('afterbegin', alertHtml);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) {
            bootstrap.Alert.getOrCreateInstance(alert).close();
        }
    }, 5000);
}

// Load version history
function loadVersionHistory() {
    fetch('{{ route("admin.updates.current-version") }}', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        const content = document.getElementById('version-history-content');
        
        if (data.success && data.data.version_history && data.data.version_history.length > 0) {
            let html = '<div class="timeline">';
            
            data.data.version_history.forEach(history => {
                const isCurrent = history.version === data.data.current_version;
                const badgeClass = isCurrent ? 'bg-success' : 'bg-secondary';
                const badgeText = isCurrent ? '{{ trans("app.Current") }}' : '{{ trans("app.Previous") }}';
                
                html += `
                    <div class="timeline-item">
                        <div class="timeline-marker bg-${isCurrent ? 'success' : 'secondary'}"></div>
                        <div class="timeline-content">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="timeline-title">
                                        Version ${history.version}
                                        <span class="badge ${badgeClass} ms-2">${badgeText}</span>
                                    </h6>
                                    <p class="timeline-text text-muted">${new Date(history.updated_at).toLocaleDateString()}</p>
                                </div>
                            </div>
                            <div class="mt-2">
                                <p class="small text-muted">${history.value || '{{ trans("app.Auto update") }}'}</p>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            content.innerHTML = html;
        } else {
            content.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-info-circle text-muted fs-1 mb-3"></i>
                    <h5 class="text-muted">{{ trans('app.No Version History Available') }}</h5>
                    <p class="text-muted">{{ trans('app.Version information will appear here') }}</p>
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error loading version history:', error);
        document.getElementById('version-history-content').innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-exclamation-triangle text-warning fs-1 mb-3"></i>
                <h5 class="text-warning">{{ trans('app.Error loading version history') }}</h5>
                <p class="text-muted">{{ trans('app.Please try again later') }}</p>
            </div>
        `;
    });
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    // Load version history on page load
    loadVersionHistory();
});
</script>
@endpush