{% extends "base.html" %}

{% block title %}Главная{% endblock %}

{% block content %}

 <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
                    <h2 class="text-lg font-medium mr-auto">
                        Datatable
                    </h2>
                    
                </div>
                <!-- BEGIN: Datatable -->
                <div class="intro-y datatable-wrapper box p-5 mt-5">
                    <table class="table table-report table-report--bordered display datatable w-full">
                        <thead>
                            <tr>
                                <th class="border-b-2 whitespace-no-wrap">TITLE</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">COMPANY</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">CLIENT</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Requested on</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Posted on</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">STATUS</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Assignee</th>


                                <th class="border-b-2 text-center whitespace-no-wrap">Applied on</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for job in jobs %}
                            <tr>
                                <td class="border-b">
                                    <a href="{{ job.job.job_url }}" target="_blank" class="font-medium whitespace-no-wrap">{{ job.job.job_title [:50] }}</a>
                                    <div class="text-gray-600 text-xs whitespace-no-wrap">{{ job.job.job_id  }}</div>
                                </td>
                                <td class="text-center border-b">Company</td>
                                <td class="text-center border-b">{{job.client.username}}</td>
                                <td class="text-center border-b">Requested on</td>
                                <td class="text-center border-b">Posted on</td>
                                <td class="text-center border-b">
                                    <select class="select2" onchange="updateStatus(this, '{{ job.id }}')">
                                        <option value="Scheduled" {% if job.status == "Scheduled" %}selected{% endif %}>Scheduled</option>
                                        <option value="Requested" {% if job.status == "Requested" %}selected{% endif %}>Requested</option>
                                        <option value="In-Progress" {% if job.status == "In-Progress" %}selected{% endif %}>In-Progress</option>
                                        <option value="Applied" {% if job.status == "Applied" %}selected{% endif %}>Applied</option>
                                        <option value="Issues Applying" {% if job.status == "Issues Applying" %}selected{% endif %}>Issues Applying</option>
                                        <option value="Cancelled" {% if job.status == "Cancelled" %}selected{% endif %}>Cancelled</option>
                                    </select>
                                
                                </td>
                               <td class="text-center border-b">
                                    <select class="select2" onchange="updateAssignee(this, '{{ job.id }}')">
                                        {% for user in users %}
                                        <option value="{{ user.id }}" {% if job.assignee == user.id %}selected{% endif %}>

                                            {{ user.username }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td class="text-center border-b">-</td>
                            </tr>
                         {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- END: Datatable -->


<script>
function updateStatus(selectElement, jobId) {
    let selectedStatus = selectElement.value;

    fetch('/update_status/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            job_id: jobId,
            status: selectedStatus
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Успешно обновлено:', data);
    })
    .catch(error => {
        console.error('Ошибка:', error);
    });
}


function updateAssignee(selectElement, jobId) {
    let selectedUserId = selectElement.value;

    fetch('/update_assignee/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            job_id: jobId,
            assignee_id: selectedUserId
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Успешно обновлено:', data);
    })
    .catch(error => {
        console.error('Ошибка:', error);
    });
}
</script>
{% endblock %}