<!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">
    <title>Sign Up Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 45rem;
            margin: auto;
            padding: 20px;
            border-radius: 10px;
        }
        .two-col {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        .two-col .col1,
        .two-col .col2 {
            flex: 0 0 48%;
        }
        .two-col .col1 label,
        .two-col .col2 label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            position: relative;
        }
        .two-col .col1 .form-group,
        .two-col .col2 .form-group {
            margin-bottom: 15px;
        }
        .two-col .col1 input,
        .two-col .col2 input,
        .two-col .col1 select,
        .two-col .col2 select {
            width: 80%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        button[type="submit"] {
            background-color: #66D3FA;
            color: black;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 20%;
            margin-left: 300px;
        }
        .add input {
            width: 100%;
            padding: 10px;
            border-radius: 25px;
            border: 1px solid #ccc;
            height: 100px;
        }
        label.required::after {
            content: "*";
            color: red;
            margin-left: 5px;
        }
        h1{
            text-align: center;
        }
        .p1 {
            text-align: left;
            margin-top: 20px;
            color: green
        }
        .p2 {
            text-align: right;
            color: blue;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            margin-top: 60px;
        }
        #Address {
    width: 83%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
}
    </style>
</head>
<body>
    <div class="container">
        <h1>Add Recruiter</h1>
        <div id="responseMessage"></div>
        <form id="addRecruiterForm" method="post"  action="{% url 'create_recruiter' %}" enctype="multipart/form-data">
             {% csrf_token %}
            <div class="two-col">
                <div class="col1">
                    <div class="form-group">
                        <label for="firstName" class="required">First Name:</label>
                        <input type="text" id="firstName" name="first_name" required placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="lastName" class="required">Last Name:</label>
                        <input type="text" id="lastName" name="last_name" required placeholder="">
                    </div>
                    <div class="form-group">
                <label for="password">Password*:</label>
                <input type="password" id="password" name="password" required>
            </div>
                    <div class="form-group">
                        <label for="companyEmail" class="required">Company Email:</label>
                        <input type="email" id="companyEmail" name="company_email" required placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="workLocation" class="required">Work Location:</label>
                        <input type="text" id="workLocation" name="work_location" required placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="picture" class="required">Upload File:</label>
                        <input type="file" id="picture" name="picture" accept="image/*" required placeholder="">
                    </div>

                </div>
                <input type="hidden" name="manager_assigned" value="{{ user_id }}">
                <div class="col2">
                    <div class="form-group">
                        <label for="PhoneNo" class="required">Phone No:</label>
                        <input type="number" id="PhoneNo" name="phone" required placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="PhoneNo2">Phone No 2:</label>
                        <input type="number" id="PhoneNo2" name="phone_2" required placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="email" class="required">Personal Email:</label>
                        <input type="email" id="email" name="personal_email" required placeholder="">
                    </div>
                    <div class="form-group">
                        <div class="add">
                            <label for="Address" class="required" style="border-radius: 50px;">Address:</label>
                            <textarea id="Address" rows="2" cols="30" name="address" required style="margin-left:5px; height: 70px; padding: 5px;" ></textarea>
                        </div>
                    </div>
                </div>
            </div>
<button type="button" onclick="saveRecruiter()" style="border-radius: 5px; background-color:lightgreen; width: 70px; margin-top: -20px; padding: 5px;"> Save</button>        </form>
    </div>
    <div class="footer">
        <p class="p1" style="margin-left: 380px;">Skyonn Requirements and Submission Portal</p>
        <p class="p2" style="margin-right: 100px; margin-top: 20px;">Powered by Skyonn Careers</p>
    </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('addRecruiterForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            },
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('responseMessage').innerText = data.message;
            if (data.success) {
                form.reset(); // Reset the form fields
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('responseMessage').innerText = 'An error occurred. Please try again.';
        });
    });
});

 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('Client saved successfully.');
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while saving the job posting.');
    });
}
</script>


</body>
</html>