<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Upload</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            max-width: 500px;
        }
        .card {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-body text-center">
                <h1 class="card-title">Upload from Mobile</h1>
                <p class="text-muted">Select a file to send to your computer.</p>
                <form id="mobileUploadForm">
                    <div class="mb-3">
                        <input class="form-control" type="file" id="mobileFile" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Upload File</button>
                </form>
                <div id="statusMessage" class="mt-3"></div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('mobileUploadForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const fileInput = document.getElementById('mobileFile');
            const statusMessage = document.getElementById('statusMessage');

            if (fileInput.files.length === 0) {
                statusMessage.innerHTML = `<div class="alert alert-warning">Please select a file.</div>`;
                return;
            }

            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);

            statusMessage.innerHTML = `<div class="alert alert-info">Uploading...</div>`;

            try {
                const response = await fetch(window.location.pathname, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (result.success) {
                    statusMessage.innerHTML = `<div class="alert alert-success">File uploaded successfully! You can now close this window.</div>`;
                    document.getElementById('mobileUploadForm').reset();
                } else {
                    statusMessage.innerHTML = `<div class="alert alert-danger">Error: ${result.error}</div>`;
                }
            } catch (error) {
                statusMessage.innerHTML = `<div class="alert alert-danger">An error occurred during upload.</div>`;
            }
        });
    </script>
</body>
</html>
