<?php require APPROOT . '/app/Views/layouts/header.php'; ?>
<div class="max-w-7xl mx-auto mb-10 space-y-8">
    
    <div class="pb-4">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white flex items-center mb-1">
            <svg class="w-6 h-6 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
            <?php echo $data['title']; ?>
        </h1>
        <p class="text-sm text-gray-600 dark:text-gray-400 ml-9"><?php echo $data['description']; ?></p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="border border-red-200 dark:border-red-900/30 bg-red-50 dark:bg-red-900/10 rounded-xl p-6 relative overflow-hidden">
            <h3 class="text-xs font-bold text-red-600 dark:text-red-400 uppercase tracking-wider flex items-center mb-3">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                Bug Reports
            </h3>
            <p class="text-xs text-red-600/80 dark:text-red-400/80 leading-relaxed">
                All verified bugs (Free or Paid) are resolved strictly within your Service Level Agreement (SLA) period. The patch will be automatically pushed to your system via an OTA Update.
            </p>
        </div>
        <div class="border border-blue-200 dark:border-blue-900/30 bg-blue-50 dark:bg-blue-900/10 rounded-xl p-6 relative overflow-hidden">
            <h3 class="text-xs font-bold text-blue-600 dark:text-blue-400 uppercase tracking-wider flex items-center mb-3">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                Free App Features
            </h3>
            <p class="text-xs text-blue-600/80 dark:text-blue-400/80 leading-relaxed">
                Feature requests for Free software are thoroughly reviewed by our development team. If approved, the feature will be engineered and made available in the next scheduled OTA update.
            </p>
        </div>
        <div class="border border-purple-200 dark:border-purple-900/30 bg-purple-50 dark:bg-purple-900/10 rounded-xl p-6 relative overflow-hidden">
            <h3 class="text-xs font-bold text-purple-600 dark:text-purple-400 uppercase tracking-wider flex items-center mb-3">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                Paid App Features
            </h3>
            <p class="text-xs text-purple-600/80 dark:text-purple-400/80 leading-relaxed">
                Custom feature requests for Paid software will be analyzed and quoted. Upon formal approval of the quote, the module will be developed and securely deployed via OTA Update.
            </p>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden mb-8">
        
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
            <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center">
                <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                Log New Ticket
            </h2>
        </div>
        <div class="p-6 md:p-8">
            <form action="<?php echo URLROOT; ?>/support/submit" method="POST" enctype="multipart/form-data" id="support-form" onsubmit="confirmAction(event, this, 'Submit Ticket', 'Are you sure you are ready to submit this request to the development team?');">
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <div class="md:col-span-1">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Ticket Type</label>
                        <select name="ticket_type" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                            <option value="Report a Bug">Report a Bug</option>
                            <option value="Free Feature Request">Free Feature Request</option>
                            <option value="Paid Feature Request">Paid Feature Request</option>
                            <option value="General Inquiry">General Inquiry</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Subject</label>
                        <input type="text" name="subject" placeholder="Brief summary of the issue" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors" required>
                    </div>
                </div>

                <div class="mb-6 relative">
                    <div class="flex justify-between items-end mb-2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider">Description</label>
                        <span class="text-[10px] font-bold text-yellow-600 dark:text-yellow-500 hidden sm:block uppercase tracking-wider">CTRL+V / CMD+V Images Allowed</span>
                    </div>
                    <textarea id="description" name="description" rows="8" placeholder="Please provide as much detail as possible..." class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none resize-y transition-colors" required></textarea>
                </div>

                <div class="mb-8 border border-gray-200 dark:border-gray-700/50 rounded-xl p-5 bg-gray-50 dark:bg-gray-900/30">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-3">Attachments (Images/Screenshots)</label>
                    <input type="file" id="attachments" name="attachments[]" multiple class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-bold file:bg-primary file:text-white hover:file:opacity-90 cursor-pointer transition-colors">
                    
                    <ul id="file-list" class="mt-3 text-xs text-gray-600 dark:text-gray-400 space-y-1"></ul>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="bg-primary hover:opacity-90 text-white font-bold py-3 px-8 rounded-lg shadow-sm transition-all focus:ring-4 focus:ring-primary/50 flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                        Submit to Developer
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
            <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center">
                <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                Your Support Tickets
            </h2>
        </div>
        
        <div class="w-full text-gray-900 dark:text-gray-100 p-5">
            <table id="ticketsTable" class="w-full text-left whitespace-nowrap">
                <thead class="border-b border-gray-200 dark:border-gray-700/50">
                    <tr>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Ticket ID</th>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Date</th>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Type & Subject</th>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Status</th>
                        <th class="px-6 py-4 text-right text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(!empty($data['tickets'])): ?>
                        <?php foreach($data['tickets'] as $ticket) : ?>
                        <tr class="border-b border-gray-100 dark:border-gray-700/50 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-700/25 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900 dark:text-white font-mono">
                                <?php echo htmlspecialchars($ticket->ticket_number); ?>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-xs text-gray-500 dark:text-gray-400" data-order="<?php echo strtotime($ticket->created_at); ?>">
                                <?php echo date('M j, Y', strtotime($ticket->created_at)); ?>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-[10px] font-bold uppercase tracking-wider text-primary mb-0.5"><?php echo htmlspecialchars($ticket->ticket_type); ?></div>
                                <div class="text-sm font-bold text-gray-800 dark:text-gray-200"><?php echo htmlspecialchars($ticket->subject); ?></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <?php if($ticket->status === 'Resolved'): ?>
                                    <span class="px-2 py-0.5 inline-flex text-[10px] uppercase tracking-wider font-bold rounded border bg-green-50 text-green-700 border-green-200 dark:bg-green-900/10 dark:text-green-400 dark:border-green-800/30">Resolved</span>
                                <?php else: ?>
                                    <span class="px-2 py-0.5 inline-flex text-[10px] uppercase tracking-wider font-bold rounded border bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/10 dark:text-yellow-400 dark:border-yellow-800/30">Open</span>
                                <?php endif; ?>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex justify-end items-center space-x-2">
                                <?php if($ticket->status !== 'Resolved'): ?>
                                    <form action="<?php echo URLROOT; ?>/support/resolve/<?php echo $ticket->id; ?>" method="POST" onsubmit="confirmAction(event, this, 'Mark Resolved', 'Has this issue been completely resolved? This will close the ticket.');" class="inline m-0">
                                        <button type="submit" class="p-1.5 bg-green-50 dark:bg-green-900/10 hover:bg-green-100 dark:hover:bg-green-900/30 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-800/30 rounded-md transition-colors shadow-sm cursor-pointer flex items-center justify-center" title="Mark as Resolved">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                        </button>
                                    </form>
                                <?php else: ?>
                                    <span class="text-gray-400 dark:text-gray-600 text-[10px] uppercase tracking-wider font-bold italic">Closed</span>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // --- DataTables Initialization ---
    if ($.fn.DataTable.isDataTable('#ticketsTable')) {
        $('#ticketsTable').DataTable().destroy();
    }
    
    $('#ticketsTable').DataTable({
        responsive: true,
        order: [[ 1, "desc" ]], // Sort by date descending
        pageLength: 10,
        language: {
            search: "",
            searchPlaceholder: "Search tickets...",
            lengthMenu: "Show _MENU_ entries",
            emptyTable: `<div class="flex flex-col items-center justify-center py-10">
                            <div class="h-16 w-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
                                <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                            </div>
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white">No Tickets Found</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">You have not submitted any support tickets yet.</p>
                        </div>`
        },
        columnDefs: [
            { orderable: false, targets: 4 } // Disable sorting on the Actions column
        ]
    });

    // --- File Input / Paste Logic ---
    const fileInput = document.getElementById('attachments');
    const fileList = document.getElementById('file-list');
    const descriptionBox = document.getElementById('description');

    let dataTransfer = new DataTransfer();

    function updateFileUI() {
        fileList.innerHTML = '';
        for (let i = 0; i < fileInput.files.length; i++) {
            let li = document.createElement('li');
            li.textContent = '📄 ' + fileInput.files[i].name;
            fileList.appendChild(li);
        }
    }

    if (fileInput) {
        fileInput.addEventListener('change', function() {
            dataTransfer = new DataTransfer();
            for(let i = 0; i < fileInput.files.length; i++){
                dataTransfer.items.add(fileInput.files[i]);
            }
            updateFileUI();
        });
    }

    if (descriptionBox) {
        descriptionBox.addEventListener('paste', function(e) {
            const items = (e.clipboardData || e.originalEvent.clipboardData).items;
            let filesPasted = false;

            for (let index in items) {
                const item = items[index];
                if (item.kind === 'file') {
                    const blob = item.getAsFile();
                    const timestamp = new Date().getTime();
                    const file = new File([blob], "pasted_screenshot_" + timestamp + ".png", {type: blob.type});
                    
                    dataTransfer.items.add(file);
                    filesPasted = true;
                }
            }

            if (filesPasted) {
                fileInput.files = dataTransfer.files;
                updateFileUI();
                
                const cursorPosition = descriptionBox.selectionStart;
                const textToInsert = "\n[Screenshot Attached]\n";
                const textBefore = descriptionBox.value.substring(0, cursorPosition);
                const textAfter = descriptionBox.value.substring(cursorPosition);
                descriptionBox.value = textBefore + textToInsert + textAfter;
            }
        });
    }
});
</script>
<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>