@extends('user::layouts.backend-master')
@section('breadcrumb_title', __('updater::translate.Upload Update'))

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold">{{ __('updater::translate.Upload Update Package') }}</h1>
            <p class="text-gray-600 mt-1">{{ __('updater::translate.Current Version') }}: <span class="font-medium text-blue-600">v{{ $currentVersion }}</span></p>
        </div>
        <div>
            <a href="{{ route('admin.updater.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left mr-2"></i>{{ __('updater::translate.Back to Updates') }}
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Upload Form -->
        <div class="lg:col-span-2">
            <div class="card">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">{{ __('updater::translate.Upload Update Package') }}</h3>
                </div>

                <form action="{{ route('admin.updater.store') }}" method="POST" enctype="multipart/form-data" class="p-6">
                    @csrf

                    <!-- File Upload -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ __('updater::translate.Select Update File') }} <span class="text-red-500">*</span>
                        </label>
                        
                        <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md @error('update_file') border-red-300 @enderror"
                             id="file-drop-area">
                            <div class="space-y-1 text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <div class="flex text-sm text-gray-600">
                                    <label for="update_file" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                        <span>{{ __('updater::translate.Upload a file') }}</span>
                                        <input id="update_file" name="update_file" type="file" accept=".zip" class="sr-only" required>
                                    </label>
                                    <p class="pl-1">{{ __('updater::translate.or drag and drop') }}</p>
                                </div>
                                <p class="text-xs text-gray-500">{{ __('updater::translate.ZIP files up to 500MB') }}</p>
                            </div>
                        </div>

                        <div id="file-info" class="mt-3 hidden">
                            <div class="bg-blue-50 border border-blue-200 rounded-md p-3">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <i class="fas fa-file-archive text-blue-400"></i>
                                    </div>
                                    <div class="ml-3 flex-1 min-w-0">
                                        <p class="text-sm font-medium text-blue-900" id="file-name"></p>
                                        <p class="text-sm text-blue-700" id="file-size"></p>
                                    </div>
                                    <div class="ml-4 flex-shrink-0">
                                        <button type="button" onclick="removeFile()" class="text-blue-400 hover:text-blue-600">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @error('update_file')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="flex justify-end space-x-3">
                        <a href="{{ route('admin.updater.index') }}" class="btn btn-secondary">
                            {{ __('updater::translate.Cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary" id="upload-btn" disabled>
                            <i class="fas fa-upload mr-2"></i>{{ __('updater::translate.Upload Update') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Instructions & Guidelines -->
        <div class="space-y-6">
            <!-- Upload Instructions -->
            <div class="card">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">{{ __('updater::translate.Upload Instructions') }}</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-gray-700">
                                {{ __('updater::translate.Select a ZIP file containing the update package') }}
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-file-alt text-blue-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-gray-700">
                                {{ __('updater::translate.The update package must contain an update.json manifest file') }}
                            </p>
                        </div>
                    </div>

                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-weight-hanging text-blue-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-gray-700">
                                {{ __('updater::translate.Maximum file size: 500MB') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Package Structure -->
            <div class="card">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">{{ __('updater::translate.Package Structure') }}</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        <div class="flex items-center text-sm">
                            <i class="fas fa-file-code text-gray-400 w-5"></i>
                            <span class="ml-2 font-mono text-gray-900">update.json</span>
                            <span class="ml-2 text-gray-500 text-xs">{{ __('updater::translate.Required') }}</span>
                        </div>
                        
                        <div class="flex items-center text-sm">
                            <i class="fas fa-folder text-gray-400 w-5"></i>
                            <span class="ml-2 font-mono text-gray-900">files/</span>
                            <span class="ml-2 text-gray-500 text-xs">{{ __('updater::translate.Optional') }}</span>
                        </div>
                        
                        <div class="flex items-center text-sm">
                            <i class="fas fa-folder text-gray-400 w-5"></i>
                            <span class="ml-2 font-mono text-gray-900">migrations/</span>
                            <span class="ml-2 text-gray-500 text-xs">{{ __('updater::translate.Optional') }}</span>
                        </div>
                        
                        <div class="flex items-center text-sm">
                            <i class="fas fa-folder text-gray-400 w-5"></i>
                            <span class="ml-2 font-mono text-gray-900">scripts/</span>
                            <span class="ml-2 text-gray-500 text-xs">{{ __('updater::translate.Optional') }}</span>
                        </div>
                    </div>

                    <div class="mt-4 p-3 bg-gray-50 rounded-md">
                        <h4 class="text-sm font-medium text-gray-900 mb-2">update.json {{ __('updater::translate.Example') }}:</h4>
                        <pre class="text-xs text-gray-700 overflow-x-auto"><code>{
  "version": "1.2.0",
  "title": "Bug Fixes and Improvements",
  "description": "This update includes...",
  "changelog": "- Fixed issue with...\n- Improved performance...",
  "seeders": ["DatabaseSeeder"]
}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Safety Guidelines -->
            <div class="card">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">{{ __('updater::translate.Safety Guidelines') }}</h3>
                </div>
                <div class="p-6 space-y-3">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-shield-alt text-green-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-gray-700">
                                {{ __('updater::translate.Always create a backup before installing updates') }}
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-vial text-yellow-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-gray-700">
                                {{ __('updater::translate.Test updates on a staging environment first') }}
                            </p>
                        </div>
                    </div>

                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-history text-blue-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-gray-700">
                                {{ __('updater::translate.Keep your system backed up regularly') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function($) {
            "use strict";

            let selectedFile = null;

            $(document).ready(function() {
                const $dropArea = $('#file-drop-area');
                const $fileInput = $('#update_file');
                const $fileInfo = $('#file-info');
                const $uploadBtn = $('#upload-btn');

                // Drag and drop handlers
                $dropArea.on('dragover dragenter', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $dropArea.addClass('border-indigo-500 bg-indigo-50');
                });

                $dropArea.on('dragleave dragend', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $dropArea.removeClass('border-indigo-500 bg-indigo-50');
                });

                $dropArea.on('drop', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $dropArea.removeClass('border-indigo-500 bg-indigo-50');
                    
                    const files = e.originalEvent.dataTransfer.files;
                    if (files.length > 0) {
                        handleFile(files[0]);
                    }
                });

                // File input change handler
                $fileInput.on('change', function(e) {
                    if (e.target.files.length > 0) {
                        handleFile(e.target.files[0]);
                    }
                });

                function handleFile(file) {
                    // Validate file type
                    if (!file.name.toLowerCase().endsWith('.zip')) {
                        alert('{{ __('updater::translate.Update file must be a ZIP archive') }}');
                        return;
                    }

                    // Validate file size (500MB)
                    if (file.size > 500 * 1024 * 1024) {
                        alert('{{ __('updater::translate.Update file size cannot exceed 500MB') }}');
                        return;
                    }

                    selectedFile = file;
                    
                    // Update UI
                    $('#file-name').text(file.name);
                    $('#file-size').text(formatBytes(file.size));
                    $fileInfo.removeClass('hidden');
                    $uploadBtn.prop('disabled', false);
                    
                    // Update file input (for form submission)
                    const dt = new DataTransfer();
                    dt.items.add(file);
                    $fileInput[0].files = dt.files;
                }

                window.removeFile = function() {
                    selectedFile = null;
                    $fileInfo.addClass('hidden');
                    $uploadBtn.prop('disabled', true);
                    $fileInput.val('');
                };

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

        })(jQuery);
    </script>
@endpush