@extends('user::layouts.backend-master')

@section('breadcrumb_title', $pageTitle)
@section('breadcrumb_subtitle', trans('translate.Manage your site configurations'))

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">{{ $pageTitle }}</h1>
                    <p class="text-muted mb-0">Manage translations across all modules dynamically</p>
                </div>
                <div class="header-actions">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createLanguageModal">
                        <i class="fas fa-plus me-2"></i>Add New Language
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-cogs me-2"></i>Tools
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="exportAllTranslations()">
                                <i class="fas fa-download me-2"></i>Export All
                            </a></li>
                            <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importModal">
                                <i class="fas fa-upload me-2"></i>Import Translations
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" onclick="refreshLanguages()">
                                <i class="fas fa-sync-alt me-2"></i>Refresh Data
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Language Management Cards -->
            <div class="row g-4">
                @foreach($moduleLanguages as $module => $moduleData)
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-white border-bottom">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center">
                                        <div class="module-icon me-3">
                                            <i class="fas fa-cube text-primary"></i>
                                        </div>
                                        <div>
                                            <h5 class="mb-0">{{ $moduleData['name'] }}</h5>
                                            <small class="text-muted">{{ count($moduleData['languages']) }} languages available</small>
                                        </div>
                                    </div>
                                    <div class="module-actions">
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                onclick="addLanguageToModule('{{ $module }}')">
                                            <i class="fas fa-plus me-1"></i>Add Language
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                @if(empty($moduleData['languages']))
                                    <div class="text-center py-4">
                                        <i class="fas fa-language text-muted mb-3" style="font-size: 2rem;"></i>
                                        <p class="text-muted mb-3">No language files found for this module</p>
                                        <button type="button" class="btn btn-primary btn-sm" 
                                                onclick="addLanguageToModule('{{ $module }}')">
                                            <i class="fas fa-plus me-1"></i>Create First Language File
                                        </button>
                                    </div>
                                @else
                                    <div class="row g-3">
                                        @foreach($moduleData['languages'] as $langCode => $langName)
                                            <div class="col-xl-3 col-lg-4 col-md-6">
                                                <div class="language-card border rounded p-3 h-100">
                                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                                        <div class="language-info">
                                                            <h6 class="mb-1">{{ $langName }}</h6>
                                                            <span class="badge bg-secondary">{{ strtoupper($langCode) }}</span>
                                                        </div>
                                                        <div class="dropdown">
                                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                                                    type="button" data-bs-toggle="dropdown">
                                                                <i class="fas fa-ellipsis-v"></i>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                <li>
                                                                    <a class="dropdown-item" 
                                                                       href="{{ route('admin.dynamic-language.edit', ['module' => $module, 'language' => $langCode]) }}">
                                                                        <i class="fas fa-edit me-2"></i>Edit
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a class="dropdown-item" href="#" 
                                                                       onclick="exportLanguage('{{ $module }}', '{{ $langCode }}')">
                                                                        <i class="fas fa-download me-2"></i>Export
                                                                    </a>
                                                                </li>
                                                                @if($langCode !== 'en')
                                                                    <li><hr class="dropdown-divider"></li>
                                                                    <li>
                                                                        <a class="dropdown-item text-danger" href="#" 
                                                                           onclick="deleteLanguage('{{ $module }}', '{{ $langCode }}', '{{ $langName }}')">
                                                                            <i class="fas fa-trash me-2"></i>Delete
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="language-stats">
                                                        <div class="stat-item mb-2">
                                                            <small class="text-muted">Translations:</small>
                                                            <span class="fw-semibold">{{ $moduleData['translations_count'][$langCode] ?? 0 }}</span>
                                                        </div>
                                                        <div class="progress" style="height: 6px;">
                                                            @php
                                                                $baseCount = $moduleData['translations_count']['en'] ?? 1;
                                                                $currentCount = $moduleData['translations_count'][$langCode] ?? 0;
                                                                $percentage = $baseCount > 0 ? ($currentCount / $baseCount) * 100 : 0;
                                                            @endphp
                                                            <div class="progress-bar" 
                                                                 style="width: {{ $percentage }}%"
                                                                 data-bs-toggle="tooltip" 
                                                                 title="{{ round($percentage) }}% complete">
                                                            </div>
                                                        </div>
                                                        <small class="text-muted">{{ round($percentage) }}% complete</small>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Quick Statistics -->
            <div class="row g-4 mt-4">
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 bg-primary text-white">
                        <div class="card-body text-center">
                            <i class="fas fa-cube fa-2x mb-3"></i>
                            <h3 class="mb-1">{{ count($modules) }}</h3>
                            <p class="mb-0">Total Modules</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 bg-success text-white">
                        <div class="card-body text-center">
                            <i class="fas fa-language fa-2x mb-3"></i>
                            <h3 class="mb-1">{{ count($languages) }}</h3>
                            <p class="mb-0">Available Languages</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 bg-info text-white">
                        <div class="card-body text-center">
                            <i class="fas fa-file-code fa-2x mb-3"></i>
                            <h3 class="mb-1">{{ array_sum(array_map(fn($m) => count($m['languages']), $moduleLanguages)) }}</h3>
                            <p class="mb-0">Language Files</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 bg-warning text-white">
                        <div class="card-body text-center">
                            <i class="fas fa-globe fa-2x mb-3"></i>
                            <h3 class="mb-1">{{ array_sum(array_map(fn($m) => array_sum($m['translations_count']), $moduleLanguages)) }}</h3>
                            <p class="mb-0">Total Translations</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Language Modal -->
<div class="modal fade" id="createLanguageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Language</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="createLanguageForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="moduleSelect" class="form-label">Module</label>
                        <select id="moduleSelect" name="module" class="form-select" required>
                            <option value="">Select a module...</option>
                            @foreach($modules as $moduleKey => $moduleName)
                                <option value="{{ $moduleKey }}">{{ $moduleName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="languageSelect" class="form-label">Language</label>
                        <select id="languageSelect" name="language" class="form-select" required>
                            <option value="">Select a language...</option>
                            @foreach($languages as $langCode => $langName)
                                <option value="{{ $langCode }}">{{ $langName }} ({{ strtoupper($langCode) }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="copyFromSelect" class="form-label">Copy from existing language</label>
                        <select id="copyFromSelect" name="copy_from" class="form-select">
                            <option value="en">English (EN) - Recommended</option>
                            @foreach($languages as $langCode => $langName)
                                @if($langCode !== 'en')
                                    <option value="{{ $langCode }}">{{ $langName }} ({{ strtoupper($langCode) }})</option>
                                @endif
                            @endforeach
                        </select>
                        <div class="form-text">Translations will be copied from the selected language as a starting point.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>Create Language File
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Translations</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="importForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="importFile" class="form-label">Translation File</label>
                        <input type="file" id="importFile" name="file" class="form-control" accept=".json" required>
                    </div>
                    <div class="mb-3">
                        <label for="importModule" class="form-label">Target Module</label>
                        <select id="importModule" name="module" class="form-select" required>
                            <option value="">Select module...</option>
                            @foreach($modules as $moduleKey => $moduleName)
                                <option value="{{ $moduleKey }}">{{ $moduleName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="importLanguage" class="form-label">Target Language</label>
                        <select id="importLanguage" name="language" class="form-select" required>
                            <option value="">Select language...</option>
                            @foreach($languages as $langCode => $langName)
                                <option value="{{ $langCode }}">{{ $langName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="mergeTranslations" name="merge" class="form-check-input" checked>
                        <label for="mergeTranslations" class="form-check-label">
                            Merge with existing translations
                        </label>
                        <div class="form-text">If unchecked, existing translations will be completely replaced.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i>Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.language-card {
    transition: all 0.3s ease;
    border: 2px solid transparent !important;
}

.language-card:hover {
    border-color: var(--bs-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.module-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 8px;
}

.progress-bar {
    background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #17a2b8 100%);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
}
</style>
@endpush

@push('scripts')
<script>
// Add language to specific module
function addLanguageToModule(module) {
    document.getElementById('moduleSelect').value = module;
    const modal = new bootstrap.Modal(document.getElementById('createLanguageModal'));
    modal.show();
}

// Create language form submission
document.getElementById('createLanguageForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Creating...';
    submitBtn.disabled = true;
    
    fetch('{{ route("admin.dynamic-language.create") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('createLanguageModal')).hide();
            if (data.redirect) {
                window.location.href = data.redirect;
            } else {
                showToast(data.message, 'success');
                setTimeout(() => window.location.reload(), 1000);
            }
        } else {
            showToast(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Failed to create language file', 'error');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});

// Import form submission
document.getElementById('importForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Importing...';
    submitBtn.disabled = true;
    
    fetch('{{ route("admin.dynamic-language.import") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('importModal')).hide();
            showToast(`${data.message} (${data.imported_count} translations imported)`, 'success');
            setTimeout(() => window.location.reload(), 1500);
        } else {
            showToast(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Failed to import translations', 'error');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});

// Export single language
function exportLanguage(module, language) {
    fetch(`{{ route('admin.dynamic-language.export', ['module' => '__MODULE__', 'language' => '__LANGUAGE__']) }}`
        .replace('__MODULE__', module)
        .replace('__LANGUAGE__', language))
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const blob = new Blob([JSON.stringify(data.data, null, 2)], { type: 'application/json' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = data.filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            showToast('Translations exported successfully', 'success');
        } else {
            showToast(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Failed to export translations', 'error');
    });
}

// Delete language
function deleteLanguage(module, language, languageName) {
    if (confirm(`Are you sure you want to delete the ${languageName} language file for ${module} module? This action cannot be undone.`)) {
        fetch(`{{ route('admin.dynamic-language.destroy', ['module' => '__MODULE__', 'language' => '__LANGUAGE__']) }}`
            .replace('__MODULE__', module)
            .replace('__LANGUAGE__', language), {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                setTimeout(() => window.location.reload(), 1000);
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Failed to delete language file', 'error');
        });
    }
}

// Refresh languages
function refreshLanguages() {
    window.location.reload();
}

// Toast notification function
function showToast(message, type = 'info') {
    const toastContainer = document.getElementById('toast-container') || createToastContainer();
    const toastId = 'toast-' + Date.now();
    const bgClass = type === 'error' ? 'bg-danger' : type === 'success' ? 'bg-success' : 'bg-info';
    
    const toastHtml = `
        <div id="${toastId}" class="toast ${bgClass} text-white" role="alert">
            <div class="toast-header ${bgClass} text-white border-0">
                <i class="fas fa-${type === 'error' ? 'exclamation-circle' : type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
                <strong class="me-auto">${type.charAt(0).toUpperCase() + type.slice(1)}</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">${message}</div>
        </div>
    `;
    
    toastContainer.insertAdjacentHTML('beforeend', toastHtml);
    const toast = new bootstrap.Toast(document.getElementById(toastId));
    toast.show();
    
    setTimeout(() => {
        const element = document.getElementById(toastId);
        if (element) element.remove();
    }, 5000);
}

function createToastContainer() {
    const container = document.createElement('div');
    container.id = 'toast-container';
    container.className = 'toast-container position-fixed top-0 end-0 p-3';
    container.style.zIndex = '1055';
    document.body.appendChild(container);
    return container;
}

// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltips.forEach(tooltip => new bootstrap.Tooltip(tooltip));
});
</script>
@endpush