<!DOCTYPE html>
<html>
<head>
    <title>Apply Now - Resume Screening 2026</title>
    <style>
        /* Copy your existing CSS here */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.95)), 
                        url('/static/images/bg.jpg');
            background-size: cover;
            background-attachment: fixed;
            color: white;
        }
        
        .header {
            background: rgba(0,0,0,0.98);
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 3px solid #00d2ff;
        }
        
        .logo h1 {
            font-size: 28px;
            background: linear-gradient(45deg, #00d2ff, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .nav a {
            color: white;
            text-decoration: none;
            margin-left: 30px;
            padding: 10px 20px;
            border-radius: 25px;
        }
        
        .nav a:hover {
            background: #00d2ff;
            color: black;
        }
        
        .container {
            max-width: 700px;
            margin: 50px auto;
            padding: 40px;
            background: rgba(30, 40, 60, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }
        
        h2 {
            text-align: center;
            font-size: 36px;
            color: #00d2ff;
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            color: #00d2ff;
            font-weight: 600;
            font-size: 16px;
        }
        
        input, select {
            width: 100%;
            padding: 15px 20px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 12px;
            color: white;
            font-size: 16px;
            transition: 0.3s;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #00d2ff;
            box-shadow: 0 0 20px rgba(0,210,255,0.3);
        }
        
        select option {
            background: #1a2634;
            color: white;
        }
        
        .file-upload {
            border: 2px dashed #00d2ff;
            padding: 30px;
            text-align: center;
            border-radius: 16px;
            cursor: pointer;
            transition: 0.3s;
            background: rgba(0,210,255,0.05);
        }
        
        .file-upload:hover {
            background: rgba(0,210,255,0.1);
            border-color: #a855f7;
        }
        
        .submit-btn {
            background: linear-gradient(45deg, #00d2ff, #a855f7);
            color: white;
            border: none;
            padding: 16px 40px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
            transition: 0.3s;
            margin-top: 20px;
        }
        
        .submit-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 30px rgba(0,210,255,0.4);
        }
        
        .footer {
            background: rgba(0,0,0,0.95);
            text-align: center;
            padding: 30px;
            margin-top: 50px;
            border-top: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <h1>🎯 AI RESUME SCREENING 2026</h1>
        </div>
        <div class="nav">
            <a href="/">Home</a>
            <a href="/apply">Apply</a>
            <a href="/admin">Admin</a>
        </div>
    </div>
    
    <div class="container">
        <h2>📄 Apply Now</h2>
        
        <form id="applicationForm" enctype="multipart/form-data">
            <div class="form-group">
                <label>👤 Full Name</label>
                <input type="text" id="name" placeholder="Enter your full name" required>
            </div>
            
            <div class="form-group">
                <label>📧 Email Address</label>
                <input type="email" id="email" placeholder="student@college.edu" required>
            </div>
            
         <div class="form-group">
    <label>🎓 Qualification</label>
    <select id="qualification" required>
        <option value="">Select your qualification</option>
        <option value="Diploma in IT">🎓 Diploma in IT</option>
        <option value="Diploma in CS">🎓 Diploma in Computer Science</option>
        <option value="Diploma in Mechanical">🎓 Diploma in Mechanical</option>
        <option value="Diploma in Civil">🎓 Diploma in Civil</option>
        <option value="Diploma in Electrical">🎓 Diploma in Electrical</option>
        <option value="B.Tech">📘 B.Tech</option>
        <option value="M.Tech">📙 M.Tech</option>
        <option value="BCA">💻 BCA</option>
        <option value="MCA">💻 MCA</option>
        <option value="B.Sc">🔬 B.Sc</option>
        <option value="M.Sc">🔬 M.Sc</option>
    </select>
</div>
            
            <div class="form-group">
                <label>🏢 Select Company</label>
                <select class="filter-select" id="company" required>
                    <option value="">🏢 Select Company</option>
                    <option value="Google">Google</option>
                    <option value="Microsoft">Microsoft</option>
                    <option value="Amazon">Amazon</option>
                    <option value="TCS">TCS</option>
                    <option value="Infosys">Infosys</option>
                    <option value="Thoughtworks">Thoughtworks</option>
                    <option value="Meta">Meta</option>
                    <option value="Apple">Apple</option>
                    <option value="Salesforce">Salesforce</option>
                    <option value="Adobe">Adobe</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>📎 Upload Resume (PDF only)</label>
                <div class="file-upload" onclick="document.getElementById('resume').click()">
                    <input type="file" id="resume" accept=".pdf" style="display: none;" required>
                    <p style="font-size: 48px; margin-bottom: 10px;">📄</p>
                    <p id="fileName" style="font-size: 18px;">Click to upload or drag & drop</p>
                    <p style="color: #888; margin-top: 10px;">Max size: 5MB, PDF only</p>
                </div>
            </div>
            
            <button type="submit" class="submit-btn">
                🚀 Submit Application
            </button>
        </form>
    </div>
    
    <div class="footer">
        <p>© 2026 AI Resume Screening System | Top 10 Tech Companies Hiring</p>
    </div>
    
    <script>
        // Get company from URL
        const urlParams = new URLSearchParams(window.location.search);
        const company = urlParams.get('company');
        if (company) {
            const select = document.getElementById('company');
            select.value = company;
        }
        
        // File upload display
        document.getElementById('resume').addEventListener('change', function(e) {
            if (this.files[0]) {
                document.getElementById('fileName').innerHTML = '📄 ' + this.files[0].name;
            }
        });
        
        // Form submission
        document.getElementById('applicationForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData();
            formData.append('name', document.getElementById('name').value);
            formData.append('email', document.getElementById('email').value);
            formData.append('qualification', document.getElementById('qualification').value);
            formData.append('company', document.getElementById('company').value);
            formData.append('resume', document.getElementById('resume').files[0]);
            
            try {
                const response = await fetch('/submit_application', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.success) {
                    alert(`✅ Application submitted!\nScore: ${data.score}%\nMatched: ${data.matched_skills.join(', ')}`);
                    setTimeout(() => {
                        window.location.href = '/';
                    }, 2000);
                } else {
                    alert('❌ ' + data.message);
                }
            } catch (error) {
                alert('❌ Submission failed');
            }
        });
    </script>
</body>
</html>