@extends('admin.master')

@section('content')
<div class="mx-auto max-w-4xl">
    <div class="bg-white border border-gray-300 rounded-md p-4 sm:p-5">
        <div class="mb-5">
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Create App Upload</h2>
            <p class="mt-1 text-sm text-gray-600">Upload APK file with progress bar</p>
        </div>

        <div id="successMessage" class="hidden mb-4 border border-green-300 bg-green-50 text-green-700 px-4 py-3 rounded text-sm"></div>
        <div id="errorMessage" class="hidden mb-4 border border-red-300 bg-red-50 text-red-700 px-4 py-3 rounded text-sm"></div>

        <form id="uploadForm" action="{{ route('admin.app-uploads.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="grid grid-cols-1 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        APK File <span class="text-red-500">*</span>
                    </label>
                    <input type="file"
                           name="apk_file"
                           id="apk_file"
                           accept=".apk,application/vnd.android.package-archive"
                           class="w-full border border-gray-300 rounded px-4 py-2 bg-white">
                    <p class="text-xs text-gray-500 mt-1">Only APK file allowed. Max 200 MB.</p>
                    <p id="apk_file_error" class="text-red-500 text-sm mt-1"></p>
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox"
                           name="is_active"
                           id="is_active"
                           value="1"
                           checked
                           class="h-4 w-4 text-black border-gray-300 rounded">
                    <label for="is_active" class="text-sm font-medium text-gray-700">Active</label>
                </div>

                <div class="hidden" id="progressWrapper">
                    <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
                        <div id="progressBar"
                             class="bg-green-600 h-4 text-xs text-white text-center leading-4 transition-all duration-200"
                             style="width: 0%">
                            0%
                        </div>
                    </div>
                    <p id="progressText" class="text-sm text-gray-600 mt-2">Uploading... 0%</p>
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <button type="submit"
                        id="submitBtn"
                        class="bg-black text-white px-5 py-2 rounded text-sm sm:text-base">
                    Save
                </button>

                <a href="{{ route('admin.app-uploads.index') }}"
                   class="text-center bg-gray-200 text-gray-800 px-5 py-2 rounded text-sm sm:text-base">
                    Back
                </a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('uploadForm');
    if (!form) return;

    form.addEventListener('submit', function (e) {
        e.preventDefault();

        const formData = new FormData(form);

        const progressWrapper = document.getElementById('progressWrapper');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        const submitBtn = document.getElementById('submitBtn');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');
        const apkError = document.getElementById('apk_file_error');
        const fileInput = document.getElementById('apk_file');

        successMessage.classList.add('hidden');
        errorMessage.classList.add('hidden');
        successMessage.innerText = '';
        errorMessage.innerText = '';
        apkError.innerText = '';

        if (!fileInput.files.length) {
            apkError.innerText = 'APK file is required.';
            return;
        }

        progressWrapper.classList.remove('hidden');
        progressBar.style.width = '0%';
        progressBar.innerText = '0%';
        progressText.innerText = 'Uploading... 0%';

        submitBtn.disabled = true;
        submitBtn.innerText = 'Uploading...';

        const xhr = new XMLHttpRequest();
        xhr.open('POST', form.action, true);
        xhr.responseType = 'json';
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');

        xhr.upload.addEventListener('progress', function (e) {
            if (e.lengthComputable) {
                const percent = Math.round((e.loaded / e.total) * 100);
                progressBar.style.width = percent + '%';
                progressBar.innerText = percent + '%';
                progressText.innerText = 'Uploading... ' + percent + '%';
            }
        });

        xhr.onload = function () {
            submitBtn.disabled = false;
            submitBtn.innerText = 'Save';

            const response = xhr.response || {};

            if (xhr.status === 200 && response.status) {
                progressBar.style.width = '100%';
                progressBar.innerText = '100%';
                progressText.innerText = 'Upload complete 100%';

                successMessage.innerText = response.message || 'Upload successful.';
                successMessage.classList.remove('hidden');

                setTimeout(() => {
                    window.location.href = response.redirect;
                }, 700);
                return;
            }

            if (xhr.status === 413) {
                errorMessage.innerText = 'File too large. Server upload limit increase করতে হবে.';
                errorMessage.classList.remove('hidden');
                return;
            }

            if (xhr.status === 422 && response.errors) {
                if (response.errors.apk_file) {
                    apkError.innerText = response.errors.apk_file[0];
                }
                errorMessage.innerText = 'Validation error occurred.';
                errorMessage.classList.remove('hidden');
                return;
            }

            errorMessage.innerText = response.message || 'Something went wrong.';
            errorMessage.classList.remove('hidden');
        };

        xhr.onerror = function () {
            submitBtn.disabled = false;
            submitBtn.innerText = 'Save';
            errorMessage.innerText = 'Upload failed. Please try again.';
            errorMessage.classList.remove('hidden');
        };

        xhr.send(formData);
    });
});
</script>
@endsection