@extends('admin::layouts.master')

@section('title', 'Grid Cache Manager')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-database"></i> Grid Cache Manager
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Global Cache Controls -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-primary">
                                <div class="card-header">
                                    <h5 class="card-title text-white">
                                        <i class="fas fa-globe"></i> Global Cache Management
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="btn-group-vertical w-100">
                                        <button type="button" class="btn btn-warning mb-2" id="refresh-all-grid">
                                            <i class="fas fa-sync-alt"></i> Refresh All Grid Cache
                                        </button>
                                        <button type="button" class="btn btn-danger mb-2" id="refresh-all-cache">
                                            <i class="fas fa-trash"></i> Clear All Cache (Global)
                                        </button>
                                        <button type="button" class="btn btn-info" id="get-cache-stats">
                                            <i class="fas fa-chart-bar"></i> Get Cache Statistics
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card bg-success">
                                <div class="card-header">
                                    <h5 class="card-title text-white">
                                        <i class="fas fa-cogs"></i> Controller Management
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="controller-select">Select Controller:</label>
                                        <select class="form-control" id="controller-select">
                                            <option value="">Loading controllers...</option>
                                        </select>
                                    </div>
                                    <div class="btn-group-vertical w-100">
                                        <button type="button" class="btn btn-warning mb-2" id="refresh-controller">
                                            <i class="fas fa-sync-alt"></i> Refresh Controller Cache
                                        </button>
                                        <button type="button" class="btn btn-info" id="get-controller-stats">
                                            <i class="fas fa-chart-bar"></i> Get Controller Stats
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Cache Statistics Display -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-chart-pie"></i> Cache Statistics
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div id="cache-stats-display">
                                        <p class="text-muted">Click "Get Cache Statistics" to view current cache information.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Activity Log -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-history"></i> Recent Activity
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div id="activity-log" style="max-height: 300px; overflow-y: auto;">
                                        <p class="text-muted">No recent activity.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <p class="mt-2" id="loading-message">Processing...</p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Load controllers list on page load
    loadControllersList();
    
    // Global cache refresh - All grid cache
    $('#refresh-all-grid').on('click', function() {
        refreshCache('grid');
    });
    
    // Global cache refresh - All cache
    $('#refresh-all-cache').on('click', function() {
        if (confirm('Are you sure you want to clear ALL cache globally? This will affect the entire application.')) {
            refreshCache('global');
        }
    });
    
    // Get cache statistics
    $('#get-cache-stats').on('click', function() {
        getCacheStats();
    });
    
    // Refresh specific controller cache
    $('#refresh-controller').on('click', function() {
        const controller = $('#controller-select').val();
        if (controller) {
            refreshControllerCache(controller);
        } else {
            alert('Please select a controller first.');
        }
    });
    
    // Get controller statistics
    $('#get-controller-stats').on('click', function() {
        const controller = $('#controller-select').val();
        if (controller) {
            getControllerStats(controller);
        } else {
            alert('Please select a controller first.');
        }
    });
    
    function loadControllersList() {
        showLoading('Loading controllers...');
        
        $.ajax({
            url: '{{ route("admin.grid-cache.controllers") }}',
            type: 'GET',
            success: function(response) {
                hideLoading();
                if (response.success) {
                    const select = $('#controller-select');
                    select.empty();
                    select.append('<option value="">Select a controller...</option>');
                    
                    response.controllers.forEach(function(controller) {
                        select.append(`<option value="${controller}">${controller}</option>`);
                    });
                } else {
                    addActivityLog('Error loading controllers: ' + response.message, 'error');
                }
            },
            error: function(xhr) {
                hideLoading();
                addActivityLog('Failed to load controllers', 'error');
            }
        });
    }
    
    function refreshCache(type) {
        const message = type === 'global' ? 'Clearing all cache globally...' : 'Refreshing all grid cache...';
        showLoading(message);
        
        $.ajax({
            url: '{{ route("admin.grid-cache.refresh") }}',
            type: 'POST',
            data: {
                global: type === 'global',
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                hideLoading();
                if (response.success) {
                    addActivityLog(`${response.message} (${response.cleared_keys} keys cleared)`, 'success');
                    if (type === 'global') {
                        // Refresh the page after global cache clear
                        setTimeout(function() {
                            location.reload();
                        }, 2000);
                    }
                } else {
                    addActivityLog('Cache refresh failed: ' + response.message, 'error');
                }
            },
            error: function(xhr) {
                hideLoading();
                addActivityLog('Cache refresh failed', 'error');
            }
        });
    }
    
    function refreshControllerCache(controller) {
        showLoading(`Refreshing cache for ${controller}...`);
        
        $.ajax({
            url: '{{ route("admin.grid-cache.refresh") }}',
            type: 'POST',
            data: {
                controller: controller,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                hideLoading();
                if (response.success) {
                    addActivityLog(`${response.message} (${response.cleared_keys} keys cleared)`, 'success');
                } else {
                    addActivityLog('Controller cache refresh failed: ' + response.message, 'error');
                }
            },
            error: function(xhr) {
                hideLoading();
                addActivityLog('Controller cache refresh failed', 'error');
            }
        });
    }
    
    function getCacheStats() {
        showLoading('Getting cache statistics...');
        
        $.ajax({
            url: '{{ route("admin.grid-cache.stats") }}',
            type: 'GET',
            success: function(response) {
                hideLoading();
                if (response.success) {
                    displayCacheStats(response.stats);
                    addActivityLog('Cache statistics retrieved successfully', 'info');
                } else {
                    addActivityLog('Failed to get cache statistics: ' + response.message, 'error');
                }
            },
            error: function(xhr) {
                hideLoading();
                addActivityLog('Failed to get cache statistics', 'error');
            }
        });
    }
    
    function getControllerStats(controller) {
        showLoading(`Getting statistics for ${controller}...`);
        
        $.ajax({
            url: '{{ route("admin.grid-cache.stats") }}',
            type: 'GET',
            data: { controller: controller },
            success: function(response) {
                hideLoading();
                if (response.success) {
                    displayControllerStats(response.stats);
                    addActivityLog(`Statistics retrieved for ${controller}`, 'info');
                } else {
                    addActivityLog('Failed to get controller statistics: ' + response.message, 'error');
                }
            },
            error: function(xhr) {
                hideLoading();
                addActivityLog('Failed to get controller statistics', 'error');
            }
        });
    }
    
    function displayCacheStats(stats) {
        let html = '<div class="row">';
        
        if (stats.categories) {
            // Global stats
            html += '<div class="col-md-6">';
            html += '<h6>Cache Categories:</h6>';
            html += '<ul class="list-group">';
            Object.entries(stats.categories).forEach(([category, count]) => {
                html += `<li class="list-group-item d-flex justify-content-between align-items-center">
                    ${category}
                    <span class="badge badge-primary badge-pill">${count}</span>
                </li>`;
            });
            html += '</ul>';
            html += `<p class="mt-2"><strong>Total Keys: ${stats.total_keys}</strong></p>`;
            html += '</div>';
        } else {
            // Controller stats
            html += '<div class="col-md-6">';
            html += '<h6>Controller Statistics:</h6>';
            html += '<ul class="list-group">';
            Object.entries(stats.stats).forEach(([type, count]) => {
                html += `<li class="list-group-item d-flex justify-content-between align-items-center">
                    ${type}
                    <span class="badge badge-primary badge-pill">${count}</span>
                </li>`;
            });
            html += '</ul>';
            html += `<p class="mt-2"><strong>Total Keys: ${stats.total_keys}</strong></p>`;
            html += '</div>';
        }
        
        html += '</div>';
        $('#cache-stats-display').html(html);
    }
    
    function displayControllerStats(stats) {
        let html = '<div class="row">';
        html += '<div class="col-md-6">';
        html += `<h6>Statistics for ${stats.controller}:</h6>`;
        html += '<ul class="list-group">';
        Object.entries(stats.stats).forEach(([type, count]) => {
            html += `<li class="list-group-item d-flex justify-content-between align-items-center">
                ${type}
                <span class="badge badge-primary badge-pill">${count}</span>
            </li>`;
        });
        html += '</ul>';
        html += `<p class="mt-2"><strong>Total Keys: ${stats.total_keys}</strong></p>`;
        html += '</div>';
        html += '</div>';
        $('#cache-stats-display').html(html);
    }
    
    function addActivityLog(message, type) {
        const timestamp = new Date().toLocaleTimeString();
        const logEntry = `<div class="alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : 'info'} alert-sm">
            <small>[${timestamp}] ${message}</small>
        </div>`;
        
        const logContainer = $('#activity-log');
        if (logContainer.find('.text-muted').length > 0) {
            logContainer.empty();
        }
        
        logContainer.prepend(logEntry);
        
        // Keep only last 10 entries
        const entries = logContainer.children();
        if (entries.length > 10) {
            entries.slice(10).remove();
        }
    }
    
    function showLoading(message) {
        $('#loading-message').text(message);
        $('#loadingModal').modal('show');
    }
    
    function hideLoading() {
        $('#loadingModal').modal('hide');
    }
});
</script>
@endpush

@push('styles')
<style>
.alert-sm {
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.btn-group-vertical .btn {
    margin-bottom: 0.5rem;
}

.card-header h5 {
    margin-bottom: 0;
}

#activity-log {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
}

.badge-pill {
    border-radius: 10rem;
}
</style>
@endpush