<?php include('config.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Professional CV Build</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root { --primary: #38bdf8; --bg: #0f172a; --card: #1e293b; --text: #cbd5e1; --accent: #fbbf24; }
        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: white; display: flex; margin: 0; }
        
        /* SIDEBAR */
        .sidebar { width: 260px; background: var(--card); height: 100vh; padding: 20px; position: fixed; border-right: 1px solid #334155; }
        .sidebar h2 { color: var(--primary); text-align: center; margin-bottom: 30px; }
        .tab-btn { display: block; width: 100%; padding: 12px; margin-bottom: 10px; background: transparent; color: var(--text); border: 1px solid #334155; text-align: left; cursor: pointer; border-radius: 8px; transition: 0.3s; }
        .tab-btn.active { background: var(--primary); color: var(--bg); font-weight: bold; }
        .tab-btn:hover:not(.active) { border-color: var(--primary); color: white; }

        /* MAIN CONTENT */
        .main-content { margin-left: 300px; padding: 40px; width: calc(100% - 340px); }
        .tab-content { display: none; background: var(--card); padding: 30px; border-radius: 15px; box-shadow: 0 15px 30px rgba(0,0,0,0.4); }
        .tab-content.active { display: block; }

        /* FORMS */
        h3 { color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px; margin-top: 0; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; color: var(--text); font-size: 14px; }
        input, textarea, select { width: 100%; padding: 12px; background: var(--bg); border: 1px solid #334155; color: white; border-radius: 6px; box-sizing: border-box; }
        input:focus { border-color: var(--primary); outline: none; }
        .btn-save { background: var(--primary); color: var(--bg); padding: 12px 25px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; width: 100%; font-size: 16px; margin-top: 10px; }
        
        /* DATA DISPLAY AREA */
        .display-area { margin-top: 30px; border-top: 1px dashed #334155; padding-top: 20px; }
        .data-card { background: var(--bg); padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid var(--primary); position: relative; }
        
        /* BUTTONS */
        .voice-btn { background: #4ade80; color: #0f172a; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-bottom: 20px; display: inline-block; }
        .pdf-btn { position: fixed; right: 30px; top: 30px; background: var(--accent); color: #0f172a; padding: 15px 25px; border-radius: 10px; text-decoration: none; font-weight: bold; z-index: 100; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4); }
    </style>
</head>
<body>

<a href="generate_pdf.php" class="pdf-btn"><i class="fas fa-file-pdf"></i> GENERATE PDF</a>

<div class="sidebar">
    <h2><i class="fas fa-file-invoice"></i> MY CV</h2>
    <button class="tab-btn active" onclick="openTab(event, 'bio')"><i class="fas fa-user"></i> BIO DATA</button>
    <button class="tab-btn" onclick="openTab(event, 'edu')"><i class="fas fa-graduation-cap"></i> EDUCATION</button>
    <button class="tab-btn" onclick="openTab(event, 'exp')"><i class="fas fa-briefcase"></i> EXPERIENCE</button>
    <button class="tab-btn" onclick="openTab(event, 'proj')"><i class="fas fa-project-diagram"></i> PROJECTS</button>
    <button class="tab-btn" onclick="openTab(event, 'skills')"><i class="fas fa-star"></i> SKILLS & HOBBIES</button>
</div>

<div class="main-content">
    
    <!-- BIO SECTION -->
    <div id="bio" class="tab-content active">
        <div class="voice-btn" onclick="speakDetails('bio-list')"><i class="fas fa-volume-up"></i> Voiceover Intro</div>
        <h3><i class="fas fa-id-card"></i> Personal Bio</h3>
        <form class="cvForm" data-type="bio">
            <label>Profile Picture</label>
            <input type="file" name="profile_pic" accept="image/*">
            <input type="text" name="full_name" placeholder="Your Full Name">
            <input type="email" name="email" placeholder="Email Address">
            <input type="text" name="phone" placeholder="Phone Number">
            <input type="text" name="address" placeholder="Address">
            <input type="text" name="linkedin" placeholder="LinkedIn URL">
            <input type="text" name="github" placeholder="GitHub URL">
            <textarea name="objective" placeholder="Write a short objective about yourself..."></textarea>
            <button type="submit" class="btn-save">Update Bio Information</button>
        </form>
        <div id="bio-list" class="display-area"></div>
    </div>

    <!-- EDUCATION SECTION -->
    <div id="edu" class="tab-content">
        <h3><i class="fas fa-university"></i> Education History</h3>
        <form class="cvForm" data-type="edu">
            <input type="text" name="degree_level" placeholder="Level / Degree (e.g. Matric, Inter, BS)">
            <input type="text" name="board_university" placeholder="Board / University">
            <input type="text" name="institute" placeholder="Institute Name">
            <input type="text" name="marks_gpa" placeholder="Marks / GPA">
            <input type="text" name="division_grade" placeholder="Division / Grade">
            <button type="submit" class="btn-save">💾 Save Education Entry</button>
        </form>
        <div id="edu-list" class="display-area"></div>
    </div>

    <!-- EXPERIENCE SECTION -->
    <div id="exp" class="tab-content">
        <h3><i class="fas fa-briefcase"></i> Professional Experience</h3>
        <form class="cvForm" data-type="exp">
            <input type="text" name="job_title" placeholder="Job Title">
            <input type="text" name="company" placeholder="Company Name">
            <input type="text" name="location" placeholder="City / Location">
            <div style="display:flex; gap:10px;">
                <input type="date" name="start_date">
                <input type="date" name="end_date">
            </div>
            <label style="margin: 10px 0;"><input type="checkbox" name="is_current" value="1"> Currently working here</label>
            <textarea name="description" placeholder="Work Responsibilities..."></textarea>
            <button type="submit" class="btn-save">Add New Role</button>
        </form>
        <div id="exp-list" class="display-area"></div>
    </div>

    <!-- PROJECTS SECTION -->
    <div id="proj" class="tab-content">
        <h3><i class="fas fa-code"></i> Projects</h3>
        <form class="cvForm" data-type="proj">
            <input type="text" name="project_title" placeholder="Project Title">
            <input type="text" name="tech_stack" placeholder="Tech Stack (e.g. PHP, MySQL, JS)">
            <input type="text" name="project_link" placeholder="Live Link / GitHub Link">
            <textarea name="description" placeholder="Project Description..."></textarea>
            <button type="submit" class="btn-save">Add New Project</button>
        </form>
        <div id="proj-list" class="display-area"></div>
    </div>

    <!-- SKILLS SECTION -->
    <div id="skills" class="tab-content">
        <h3><i class="fas fa-award"></i> Skills & Hobbies</h3>
        <form class="cvForm" data-type="skill">
            <input type="text" name="skill_name" placeholder="Skill Name (e.g. PHP Development)">
            <select name="proficiency">
                <option value="Beginner">Beginner</option>
                <option value="Intermediate">Intermediate</option>
                <option value="Expert">Expert</option>
            </select>
            <button type="submit" class="btn-save">Add Skill</button>
        </form>
        <hr style="margin:20px 0; border:0; border-top:1px solid #334155;">
        <form class="cvForm" data-type="hobby">
            <input type="text" name="hobby_name" placeholder="Hobby (e.g. Reading, Coding)">
            <button type="submit" class="btn-save">Add Hobby</button>
        </form>
        <div id="skills-list" class="display-area"></div>
        <div id="hobby-list" class="display-area"></div>
    </div>

</div>

<script>
function openTab(evt, tabName) {
    $(".tab-content").removeClass("active");
    $(".tab-btn").removeClass("active");
    $("#" + tabName).addClass("active");
    $(evt.currentTarget).addClass("active");
}

// AJAX Submission for all forms
$(".cvForm").on("submit", function(e){
    e.preventDefault();
    let type = $(this).data('type');
    let formData = new FormData(this);
    formData.append('action', 'save');
    formData.append('type', type);

    $.ajax({
        url: 'save_cv_data.php',
        method: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function(response){
            if(type == 'skill' || type == 'hobby') {
                $("#skills-list").append(response); // Skills/Hobby updates
            } else {
                $("#" + type + "-list").html(response);
            }
            alert(type.toUpperCase() + " Saved Successfully!");
        }
    });
});

// Voiceover Functionality
function speakDetails(divId) {
    let content = document.getElementById(divId).innerText;
    if(content.trim().length < 5) {
        content = "Hi, I am Hamna. Please fill in your bio details so I can introduce you properly.";
    } else {
        content = "Hi, here are the details: " + content;
    }
    
    let utterance = new SpeechSynthesisUtterance(content);
    utterance.rate = 0.9; // Thora slow taake professional lagay
    utterance.pitch = 1.1;
    window.speechSynthesis.speak(utterance);
}
</script>

</body>
</html>