<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body {
    position: relative;
    width: 100%;
}
.header {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #F1F1F1;
}
.logo {
    display: flex;
    align-items: center;
    width: 300px;
    padding-left: 40px;
}
.logo span {
    color: #5073FB;
}
.search--notification--profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 300px);
    padding: 0 40px;
}
.search {
    background-color: #F1F4F8;
    border-radius: 50px;
    width: 400px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search input {
    background-color: transparent;
    outline: none;
    border: none;
    text-indent: 15px;
    width: 85%;
}
.search button {
    outline: none;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search button i {
    font-size: 1.1rem;
    color: #5073FB;
}
.notification--profile {
    display: flex;
    align-items: center;
}
.picon {
    margin-left: 20px;
    font-size: 1.1rem;
    padding: 5px;
    border-radius: 5px;
}
.lock {
    color: #5073FB;
    background-color: rgba(80, 115, 251, .2);
}
.bell {
    color: #F1D243;
    background-color: rgba(241, 210, 67, .2);
}
.chat {
    color: #70D7A5;
    background-color: rgba(112, 215, 165, .2);
}
.profile {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.main {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 60px);
}
.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 300px;
    background-color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 2px solid #F1F1F1;
    transition: .3s;
}
.sidebar.active {
    width: 103px;
    overflow: hidden;
}
.sidebar.active .sidebar--item {
    display: none;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.sidebar--items a,
.sidebar--bottom-items a {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #000;
    padding: 10px;
    border-radius: 10px;
}
.sidebar--items a:hover,
.sidebar--bottom-items a:hover {
    background-color: #5073FB;
    color: #fff;
}
#active--link {
    background-color: #5073FB;
    color: #fff;
}
.sidebar--bottom-items li:last-child a {
    margin-bottom: 0;
}
.icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 1.3rem;
}
.icon-0 {
    color: #5073FB;
}
.icon-1 {
    color: #C5BC58;
}
.icon-2 {
    color: #A280E9;
}
.icon-3 {
    color: #85ADE3;
}
.icon-4 {
    color: #E36AC8;
}
.icon-5 {
    color: #70D7A5;
}
.icon-6 {
    color: #5F5CE0;
}
.icon-7 {
    color: #E86786;
}
.icon-8 {
    color: #F1D243;
}
iframe#contentFrame {
            width: 100%;
            height: 100%;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .main--content {
    overflow-y: auto; /* or overflow-y: scroll; */
    height: 100%; /* or a specific height */
}
    </style>
    <title>Dashboard</title>
</head>
<body>
    <section class="header">
        <div class="logo">
            <i class="ri-menu-line icon icon-0 menu"></i>
            <h2>{{first_name}} <span>Dashboard</span></h2>
        </div>
        <div class="search--notification--profile">
            <div class="search">
                <input type="text" placeholder="Search">
                <button><i class="ri-search-2-line"></i></button>
            </div>
            <div class="notification--profile">
                <div class="picon bell">
                    <i class="ri-notification-2-line"></i>
                </div>
                <div class="picon chat">
                    <i class="ri-wechat-2-line"></i>
                </div>
            </div>
        </div>
    </section>
    <section class="main">
        <div class="sidebar">
            <ul class="sidebar--items">
                <li>
                    <a href="#" id="active--link">
                        <span class="icon icon-0"><i class="fas fa-tachometer-alt"></i></span>
                        <span class="sidebar--item">Dashboard</span>
                    </a>
                </li>
                <li>  <a href="#" class="btn" onclick="loadPage('/new_job_postings/')">
                        <span class="icon icon-3"><i class="fa
                  r fa-calendar-alt"></i></span>
                        <span class="sidebar--item" style="white-space: nowrap;">New Jobs Postings</span>
                    </a>
                </li>
                <li>  <a href="#" class="btn" onclick="loadPage('/add_recruiter/','{{user_id}}')">
                        <span class="icon icon-4"><i class="fa-solid fa-address-card"></i></span>
                        <span class="sidebar--item">Add Recruiter</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon icon-4"><i class="fa-solid fa-person"></i></span>
                        <span class="sidebar--item">Recruiter List</span>
                    </a>
                </li>
                <li>
                    <a href="{% url 'all_job_postings' %}">
                        <span class="icon icon-2"><i class="far fa-calendar-alt"></i></span>
                        <span class="sidebar--item">All Jobs Postings</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon icon-4"><i class="fas fa-envelope"></i></span>
                        <span class="sidebar--item">Messages</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon icon-4"><i class="fa-regular fa-clock"></i></span>
                        <span class="sidebar--item">Pending Process</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon icon-5"><i class="fa fa-paper-plane"></i></span>
                        <span class="sidebar--item">Submitted Resumes</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon icon-6"><i class="fa-solid fa-person"></i></span>
                        <span class="sidebar--item">Client Details</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon icon-6"><i class="fas fa-chart-bar"></i></span>
                        <span class="sidebar--item">Activity Report</span>
                    </a>
                </li>
            </ul>

            <ul class="sidebar--bottom-items">
                <li>
                    <a href="#">
                        <span class="icon icon-7"><i class="fas fa-cog"></i></span>
                        <span class="sidebar--item">Settings</span>
                    </a>
                </li>
                <li>
                    <a href="{% url 'logout' %}">
                        <span class="icon icon-8"><i class="fas fa-sign-out-alt"></i></span>
                        <span class="sidebar--item">Logout</span>
                    </a>
                </li>
            </ul>
        </div>
        <div id="content"></div>
    </section>
    <script>
function loadPage(pageName, userId) {
    var url = userId ? `${pageName}?user_id=${userId}` : pageName;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("content").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

    let menu = document.querySelector('.menu');
    let sidebar = document.querySelector('.sidebar');
    let mainContent = document.querySelector('.main--content');
    menu.onclick = function() {
        sidebar.classList.toggle('active');
        mainContent.classList.toggle('active');
    };
    function saveJobPosting() {
    const form = document.getElementById('jobPostingForm');
    const formData = new FormData(form);
    // Ensure this retrieves the correct URL
    const url = form.getAttribute('action');
    console.log('CSRF Token:', '{{ csrf_token }}');
    console.log('Form action URL:', url);

    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token }}', // Assuming you have CSRF token available
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
        alert('Job posting saved successfully.');
        form.reset();
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while saving the job posting.');
    });
}

 function saveRecruiter() {
    const form = document.getElementById('addRecruiterForm');
    const formData = new FormData(form);
    // Ensure this retrieves the correct URL
    const url = form.getAttribute('action');
    console.log('CSRF Token:', '{{ csrf_token }}');
    console.log('Form action URL:', url);

    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token }}', // Assuming you have CSRF token available
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
        alert('recruiter saved successfully.');
    })
    .catch(error => {
        console.error('Error:', error);
        alert('recruiter saved successfully.');
    });
}


    </script>
</body>
</html>