<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HR Ticket - Team One</title>
    <style>
        :root {
            --primary-blue: #040345;
            --secondary-blue: #17a2b8;
            --primary-yellow: #ffc107;
            --light-yellow: #ffd54f;
            --white: #ffffff;
            --light-gray: #f8f9fa;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--light-gray);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
        }

        .header {
            background: var(--primary-blue);
            color: var(--white);
            padding: 2rem;
            text-align: center;
            margin-bottom: 3rem;
            border-radius: 15px;
            width: 100%;
            max-width: 800px;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .header p {
            color: var(--light-yellow);
            font-size: 1.1rem;
        }

        .form-container {
            background: var(--white);
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 800px;
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--primary-blue);
            font-weight: 600;
            font-size: 1rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            font-family: 'Poppins', sans-serif;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-yellow);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        .priority-high {
            color: #dc3545;
        }

        .priority-medium {
            color: #ffc107;
        }

        .priority-low {
            color: #28a745;
        }

        .file-upload {
            border: 2px dashed #e0e0e0;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        .file-upload:hover {
            border-color: var(--primary-yellow);
        }

        .file-upload i {
            font-size: 2rem;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

        .file-upload input[type="file"] {
            display: none;
        }

        .submit-button {
            background: var(--primary-yellow);
            color: var(--primary-blue);
            border: none;
            padding: 1rem 3rem;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            margin-top: 1rem;
        }

        .submit-button:hover {
            background: var(--light-yellow);
            transform: translateY(-2px);
        }

        .back-button {
            display: inline-block;
            padding: 1rem 2rem;
            background: var(--secondary-blue);
            color: var(--white);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .back-button:hover {
            background: #138496;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .form-row {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            .form-container {
                padding: 2rem;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap">
</head>
<body>
    <div class="header">
        <h1>HR Ticket</h1>
        <p>Submit a Human Resources related request or inquiry</p>
    </div>

    <div class="form-container">
        <form id="hrTicketForm">
            <div class="form-row">
                <div class="form-group">
                    <label for="name">Full Name *</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email Address *</label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="priority">Priority Level *</label>
                    <select id="priority" name="priority" required>
                        <option value="">Select Priority</option>
                        <option value="high" class="priority-high">High - Urgent HR Matter</option>
                        <option value="medium" class="priority-medium">Medium - Important Request</option>
                        <option value="low" class="priority-low">Low - General Inquiry</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="category">Request Category *</label>
                    <select id="category" name="category" required>
                        <option value="">Select Category</option>
                        <option value="payroll">Payroll Issue</option>
                        <option value="leave">Leave Request</option>
                        <option value="benefits">Benefits Inquiry</option>
                        <option value="employment">Employment Verification</option>
                        <option value="policy">Policy Question</option>
                        <option value="training">Training Request</option>
                        <option value="performance">Performance Review</option>
                        <option value="grievance">Grievance/Complaint</option>
                        <option value="onboarding">Onboarding Support</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="subject">Subject *</label>
                <input type="text" id="subject" name="subject" placeholder="Brief description of your HR request" required>
            </div>

            <div class="form-group">
                <label for="description">Detailed Description *</label>
                <textarea id="description" name="description" placeholder="Please provide a detailed description of your HR request, including any relevant dates, circumstances, and specific requirements..." required></textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="employeeId">Employee ID</label>
                    <input type="text" id="employeeId" name="employeeId" placeholder="Your employee ID (if applicable)">
                </div>
                <div class="form-group">
                    <label for="department">Department</label>
                    <input type="text" id="department" name="department" placeholder="Your department">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="contact">Contact Number</label>
                    <input type="tel" id="contact" name="contact" placeholder="Your phone number for follow-up">
                </div>
                <div class="form-group">
                    <label for="availability">Best Time to Contact</label>
                    <select id="availability" name="availability">
                        <option value="">Select Availability</option>
                        <option value="morning">Morning (9 AM - 12 PM)</option>
                        <option value="afternoon">Afternoon (12 PM - 3 PM)</option>
                        <option value="evening">Evening (3 PM - 6 PM)</option>
                        <option value="anytime">Anytime</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label>Attachments (Optional)</label>
                <div class="file-upload" onclick="document.getElementById('fileInput').click()">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Click to upload files or drag and drop</p>
                    <p style="font-size: 0.9rem; color: #666;">Documents, forms, or other relevant files</p>
                    <input type="file" id="fileInput" name="attachments" multiple accept="image/*,.pdf,.doc,.docx,.txt">
                </div>
            </div>

            <button type="submit" class="submit-button">
                <i class="fas fa-paper-plane"></i> Submit Ticket
            </button>
        </form>
    </div>

    <a href="create-ticket.html" class="back-button">
        <i class="fas fa-arrow-left"></i> Back to Ticket Types
    </a>

    <script>
        document.getElementById('hrTicketForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const formData = new FormData(this);
            const ticketData = {
                type: 'HR',
                timestamp: new Date().toISOString(),
                status: 'Open'
            };
            
            // Add form fields to ticket data
            for (let [key, value] of formData.entries()) {
                ticketData[key] = value;
            }
            
            // Store ticket in localStorage (in a real app, this would be sent to a server)
            const tickets = JSON.parse(localStorage.getItem('tickets') || '[]');
            tickets.push(ticketData);
            localStorage.setItem('tickets', JSON.stringify(tickets));
            
            // Send notification to HR Manager
            sendNotificationToHR(ticketData);
            
            // Show success message
            alert('HR Ticket submitted successfully! Ticket ID: ' + Date.now() + '\n\nNotification sent to HR Manager.');
            
            // Reset form
            this.reset();
        });

        function sendNotificationToHR(ticketData) {
            // Create notification data
            const notification = {
                id: Date.now(),
                type: 'HR_TICKET',
                recipient: 'HR Manager',
                subject: `New HR Ticket: ${ticketData.subject}`,
                message: `A new HR ticket has been submitted:\n\n` +
                        `From: ${ticketData.name}\n` +
                        `Email: ${ticketData.email}\n` +
                        `Priority: ${ticketData.priority}\n` +
                        `Category: ${ticketData.category}\n` +
                        `Employee ID: ${ticketData.employeeId || 'Not specified'}\n` +
                        `Department: ${ticketData.department || 'Not specified'}\n` +
                        `Description: ${ticketData.description}\n\n` +
                        `Ticket ID: ${Date.now()}`,
                timestamp: new Date().toISOString(),
                read: false
            };
            
            // Store notification in localStorage
            const notifications = JSON.parse(localStorage.getItem('notifications') || '[]');
            notifications.push(notification);
            localStorage.setItem('notifications', JSON.stringify(notifications));
            
            // In a real application, this would send an email, SMS, or push notification
            console.log('Notification sent to HR Manager:', notification);
            
            // Show browser notification if permitted
            if (Notification.permission === 'granted') {
                new Notification('New HR Ticket', {
                    body: `Ticket from ${ticketData.name}: ${ticketData.subject}`,
                    icon: '/favicon.ico'
                });
            }
        }

        // File upload preview
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const files = e.target.files;
            if (files.length > 0) {
                const fileUpload = document.querySelector('.file-upload');
                fileUpload.innerHTML = `
                    <i class="fas fa-check-circle" style="color: #28a745;"></i>
                    <p>${files.length} file(s) selected</p>
                    <p style="font-size: 0.9rem; color: #666;">Click to change files</p>
                `;
            }
        });

        // Request notification permission on page load
        window.addEventListener('load', function() {
            if (Notification.permission === 'default') {
                Notification.requestPermission();
            }
        });
    </script>
</body>
</html>