@extends('examples.modern-layout-v2')

@section('title', __('messages.deployments.upload'))

@section('content')
<div class="p-6" x-data="{ 
    showErrorModal: false, 
    errorModalMessage: '',
    init() {
        window.addEventListener('show-error', (e) => {
            this.errorModalMessage = e.detail;
            this.showErrorModal = true;
        });
    }
}">
    <div class="max-w-3xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <a href="{{route('deployments.index')}}" class="text-blue-600 hover:text-blue-800 mb-4 inline-block">
                <span class="material-icons align-middle">arrow_back</span> {{__('messages.call_page.back')}}
            </a>
            <h1 class="text-3xl font-bold text-gray-900">{{__('messages.deployments.upload')}}</h1>
            <p class="text-gray-600 mt-2">{{__('messages.deployments.upload_description')}}</p>
        </div>

        <!-- Upload Form -->
        <div class="bg-white rounded-lg shadow p-6">
            <form action="{{route('deployments.store')}}" method="POST" enctype="multipart/form-data" id="uploadForm">
                @csrf

                <!-- Description -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        {{__('messages.deployments.description')}}
                    </label>
                    <textarea name="description" rows="3" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="{{__('messages.deployments.description_placeholder')}}">{{old('description')}}</textarea>
                    @error('description')
                    <p class="mt-1 text-sm text-red-600">{{$message}}</p>
                    @enderror
                </div>

                <!-- File Upload -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        {{__('messages.deployments.select_file')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="flex items-center justify-center w-full">
                        <label for="file-upload" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6" id="uploadLabel">
                                <span class="material-icons text-6xl text-gray-400 mb-4">cloud_upload</span>
                                <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">{{__('messages.deployments.click_to_upload')}}</span></p>
                                <p class="text-xs text-gray-500">{{__('messages.deployments.zip_only')}} ({{__('messages.deployments.max_size')}})</p>
                            </div>
                            <input id="file-upload" name="file" type="file" accept=".zip" class="hidden" required onchange="handleFileSelect(this)" />
                        </label>
                    </div>
                    <div id="fileInfo" class="mt-3 hidden">
                        <div class="flex items-center p-3 bg-blue-50 rounded-lg">
                            <span class="material-icons text-blue-600 mr-3">folder_zip</span>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900" id="fileName"></p>
                                <p class="text-sm text-gray-500" id="fileSize"></p>
                            </div>
                            <button type="button" onclick="clearFile()" class="text-red-600 hover:text-red-800">
                                <span class="material-icons">close</span>
                            </button>
                        </div>
                    </div>
                    @error('file')
                    <p class="mt-1 text-sm text-red-600">{{$message}}</p>
                    @enderror
                </div>

                <!-- Upload Progress -->
                <div id="uploadProgress" class="mb-6 hidden">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-gray-700">{{__('messages.deployments.uploading')}}</span>
                        <span class="text-sm font-medium text-gray-700" id="progressPercent">0%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
                    </div>
                </div>

                <!-- Important Notes -->
                <div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <h3 class="text-sm font-semibold text-yellow-800 mb-2">{{__('messages.deployments.important_notes')}}</h3>
                    <ul class="text-sm text-yellow-700 space-y-1">
                        <li>• {{__('messages.deployments.note_env_excluded')}}</li>
                        <li>• {{__('messages.deployments.note_logs_excluded')}}</li>
                        <li>• {{__('messages.deployments.note_code_only')}}</li>
                    </ul>
                </div>

                <!-- Submit Button -->
                <div class="flex justify-end gap-3">
                    <a href="{{route('deployments.index')}}" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                        {{__('messages.call_page.cancel')}}
                    </a>
                    <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" id="submitBtn">
                        <span class="material-icons align-middle mr-1">cloud_upload</span>
                        {{__('messages.deployments.upload_now')}}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Error Modal -->
    <div x-show="showErrorModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;" @keydown.escape.window="showErrorModal = false">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity" @click="showErrorModal = false"></div>
        <div class="flex items-center justify-center min-h-screen px-4 py-4">
            <div class="relative bg-white rounded-2xl overflow-hidden shadow-xl transform transition-all w-full max-w-lg" @click.stop>
                <div class="bg-white px-6 pt-6 pb-4">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                                <span class="material-icons text-red-600 text-2xl">error</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                Error
                            </h3>
                        </div>
                        <button type="button" @click="showErrorModal = false" class="text-gray-400 hover:text-gray-600">
                            <span class="material-icons text-2xl">close</span>
                        </button>
                    </div>
                    <div class="mt-4">
                        <p class="text-sm text-gray-600 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif" x-text="errorModalMessage"></p>
                    </div>
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse @else justify-end @endif">
                        <button type="button" @click="showErrorModal = false" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
                            {{__('messages.common.close')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function handleFileSelect(input) {
    const file = input.files[0];
    if (file) {
        // Validate file type
        if (!file.name.endsWith('.zip')) {
            window.dispatchEvent(new CustomEvent('show-error', { detail: '{{__("messages.deployments.invalid_file_type")}}' }));
            input.value = '';
            return;
        }
        
        // Validate file size (50MB max)
        if (file.size > 52428800) {
            window.dispatchEvent(new CustomEvent('show-error', { detail: '{{__("messages.deployments.file_too_large")}}' }));
            input.value = '';
            return;
        }
        
        // Show file info
        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileSize').textContent = formatFileSize(file.size);
        document.getElementById('fileInfo').classList.remove('hidden');
        document.getElementById('uploadLabel').classList.add('hidden');
    }
}

function clearFile() {
    document.getElementById('file-upload').value = '';
    document.getElementById('fileInfo').classList.add('hidden');
    document.getElementById('uploadLabel').classList.remove('hidden');
}

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 Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
}

// Handle form submission with progress bar
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    const submitBtn = document.getElementById('submitBtn');
    const progressDiv = document.getElementById('uploadProgress');
    const progressBar = document.getElementById('progressBar');
    const progressPercent = document.getElementById('progressPercent');
    
    submitBtn.disabled = true;
    progressDiv.classList.remove('hidden');
    
    // Simulate progress (real progress would need AJAX)
    let progress = 0;
    const interval = setInterval(() => {
        progress += Math.random() * 15;
        if (progress > 90) progress = 90;
        progressBar.style.width = progress + '%';
        progressPercent.textContent = Math.round(progress) + '%';
    }, 200);
});
</script>
@endsection