<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>220 Support Ticket</title>
    
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/icon-512.png">
    <meta name="theme-color" content="#0056b3">

    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
    
    <style>
        :root { --primary-blue: #0056b3; --dark-blue: #002d5d; --light-grey: #f4f7f9; --error-red: #d32f2f; }
        body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--light-grey); margin: 0; padding: 20px; color: #333; }
        .container { max-width: 500px; margin: auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; }
        .logo { display: block; margin: 0 auto 20px; max-width: 150px; border-radius: 10px; }
        h2 { text-align: center; color: var(--dark-blue); font-size: 1.4rem; margin-bottom: 25px; }
        label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
        input, select, textarea { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 1rem; }
        
        /* File Upload Styling */
        .file-input-wrapper { margin-bottom: 10px; }
        #fileList { margin-bottom: 20px; list-style: none; padding: 0; }
        .file-item { display: flex; justify-content: space-between; align-items: center; background: #eee; padding: 8px 12px; border-radius: 4px; margin-bottom: 5px; font-size: 0.85rem; }
        .remove-file { color: var(--error-red); font-weight: bold; cursor: pointer; font-size: 1.2rem; padding: 0 5px; }
        
        .help-link { color: var(--primary-blue); font-size: 0.8rem; cursor: pointer; text-decoration: underline; margin-top: -15px; display: block; margin-bottom: 20px; }
        button { width: 100%; padding: 15px; background-color: var(--primary-blue); color: white; border: none; border-radius: 6px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background 0.3s; }
        button:hover { background-color: var(--dark-blue); }
        button:disabled { background-color: #ccc; cursor: not-allowed; }
        
        #modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 1000; }
        .modal-content { background: white; padding: 25px; border-radius: 10px; width: 90%; max-width: 400px; }
        .tab-buttons { display: flex; gap: 10px; margin-bottom: 15px; }
        .tab-buttons button { padding: 8px; font-size: 0.9rem; background: #eee; color: #333; }
        .tab-buttons button.active { background: var(--primary-blue); color: white; }
        .success-content { text-align: center; padding: 20px 0; }
        .success-icon { font-size: 64px; margin-bottom: 20px; display: block; }
    </style>
</head>
<body>

<div class="container" id="mainContainer">
    <img src="/icon-512.png" alt="220 Logo" class="logo">
    <h2>Open a Support Ticket</h2>
    
    <form id="supportForm">
        <label>Full Name</label>
        <input type="text" name="name" required placeholder="John Doe">

        <label>Email Address</label>
        <input type="email" name="email" required placeholder="john@business.com.au">

        <label>Computer Name</label>
        <input type="text" name="computer_name" id="computer_name" required placeholder="eg. DESKTOP-12345">
        <span class="help-link" onclick="toggleModal(true)">How do I find this?</span>

        <label>In 5 words or less, what's happening?</label>
        <input type="text" name="subject" maxlength="50" required placeholder="eg. Printer won't connect">

        <label>How is this affecting your work?</label>
        <select name="impact" required>
            <option value="Question">I just have a question</option>
            <option value="Workaround">This is something I can work around</option>
            <option value="Not Affected">My work is not affected</option>
            <option value="Critical">I can't work at all</option>
        </select>

        <label>Description</label>
        <textarea name="description" rows="4" placeholder="Tell us more about the issue..."></textarea>

        <label>Add Attachments (Max 4, 10MB each)</label>
        <div class="file-input-wrapper">
            <input type="file" id="filePicker" accept="image/*,application/pdf">
        </div>
        <ul id="fileList"></ul>

        <div class="cf-turnstile" data-sitekey="0x4AAAAAACMIpRNJntVp66J5"></div>

        <button type="submit" id="submitBtn">Send Support Request</button>
    </form>
</div>

<div id="modal">
    <div class="modal-content">
        <h3>Find Computer Name</h3>
        <div class="tab-buttons">
            <button id="winBtn" class="active" onclick="showHelp('win')">Windows</button>
            <button id="macBtn" onclick="showHelp('mac')">Mac</button>
        </div>
        <div id="helpText">
            <p>1. Click the <b>Start</b> menu.<br>2. Type <b>'About'</b> and press Enter.<br>3. Look for <b>'Device Name'</b>.</p>
        </div>
        <button onclick="toggleModal(false)" style="background:#666; margin-top:10px; width: 100%; border:none; color:white; padding: 10px; border-radius: 5px; cursor: pointer;">Close</button>
    </div>
</div>

<script>
    const filePicker = document.getElementById('filePicker');
    const fileListDisplay = document.getElementById('fileList');
    let stagedFiles = [];

    // Handle single file picking
    filePicker.onchange = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        if (stagedFiles.length >= 4) {
            alert("Maximum 4 files allowed.");
            filePicker.value = "";
            return;
        }

        if (file.size > 10485760) {
            alert("File size exceeds 10MB.");
            filePicker.value = "";
            return;
        }

        stagedFiles.push(file);
        updateFileList();
        filePicker.value = ""; // Clear input for next pick
    };

    function updateFileList() {
        fileListDisplay.innerHTML = "";
        stagedFiles.forEach((file, index) => {
            const li = document.createElement('li');
            li.className = 'file-item';
            li.innerHTML = `
                <span>${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)</span>
                <span class="remove-file" onclick="removeStagedFile(${index})">×</span>
            `;
            fileListDisplay.appendChild(li);
        });
    }

    function removeStagedFile(index) {
        stagedFiles.splice(index, 1);
        updateFileList();
    }

    function toggleModal(show) { document.getElementById('modal').style.display = show ? 'flex' : 'none'; }
    
    function showHelp(os) {
        const text = document.getElementById('helpText');
        const winBtn = document.getElementById('winBtn');
        const macBtn = document.getElementById('macBtn');
        if(os === 'win') {
            text.innerHTML = "<p>1. Click the <b>Start</b> menu.<br>2. Type <b>'About'</b> and press Enter.<br>3. Look for <b>'Device Name'</b>.</p>";
            winBtn.classList.add('active'); macBtn.classList.remove('active');
        } else {
            text.innerHTML = "<p>1. Click the <b>Apple Menu</b> ().<br>2. Select <b>System Settings</b>.<br>3. Click <b>General</b> > <b>About</b>.<br>4. Look for <b>'Name'</b> at the top.</p>";
            macBtn.classList.add('active'); winBtn.classList.remove('active');
        }
    }

    document.getElementById('supportForm').onsubmit = async (e) => {
        e.preventDefault();
        const form = e.target;
        const btn = document.getElementById('submitBtn');
        const container = document.getElementById('mainContainer');
        
        btn.disabled = true;
        btn.innerText = "Processing Ticket...";

        const formData = new FormData(form);
        
        // Remove the original empty input and add staged files manually
        formData.delete('attachments[]'); 
        stagedFiles.forEach(file => {
            formData.append('attachments[]', file);
        });

        try {
            const response = await fetch('api/api-handler.php', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.status === 'success') {
                confetti({
                    particleCount: 150,
                    spread: 70,
                    origin: { y: 0.6 },
                    colors: ['#0056b3', '#ffffff', '#002d5d']
                });

                container.innerHTML = `
                    <div class="success-content">
                        <span class="success-icon">✅</span>
                        <h2 style="color: var(--primary-blue);">Ticket Created!</h2>
                        <p>We've received your request (<b>#${result.ticket_id}</b>).</p>
                        <p>Our team at <b>220 Remote Support</b> has been notified and we are on to it!</p>
                        <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
                        <button onclick="location.reload()" style="background:#f0f0f0; color:#333; font-size: 0.9rem; border:none; padding:10px; border-radius:5px; cursor:pointer;">Send another update</button>
                    </div>
                `;
            } else {
                throw new Error(result.message || "Failed to create ticket.");
            }
        } catch (error) {
            alert("Something went wrong: " + error.message);
            btn.disabled = false;
            btn.innerText = "Send Support Request";
        }
    };

    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js').catch(err => console.log('SW registration failed:', err));
        });
    }
</script>

</body>
</html>