Notes

{% extends 'components/project-base.html' %}
{% load static %}

{% block styles %}

{% endblock %}

{% block content %}
<!-- PAGE HEADER -->
<div class="page-header d-xl-flex d-block">
<div class="page-leftheader">
<div class="page-title">Dossiers d'expertise</div>
</div>
<div class="page-rightheader ms-md-auto">
<div class="d-flex align-items-end flex-wrap my-auto end-content breadcrumb-end">
<div class="btn-list">
<a href="javascript:void(0);" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newprojectmodal"><i class="feather feather-plus fs-15 my-auto me-2"></i>Créer un nouveau dossier</a>
<a href="/email-inbox" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="E-mail"> <i class="feather feather-mail"></i> </a>
<a href="/hr-emplist" class="btn btn-light" data-bs-placement="top" data-bs-toggle="tooltip" title="Contact"> <i class="fa fa-address-card"> </i> </a>
<a href="javascript:void(0);" class="btn btn-primary" data-bs-placement="top" data-bs-toggle="tooltip" title="Info"> <i class="feather feather-info"></i> </a>
</div>
</div>
</div>
</div>
<!-- END PAGE HEADER -->
<script> </script>

<!-- ROW -->
<div class="row">
<div class="col-xl-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-header border-0">
<h4 class="card-title">Recent Project Summary</h4>
<div class="ms-auto">
<div class="input-group">
<input class="form-control" placeholder="Search....." type="text">
<span class="input-group-btn">
<button class="btn btn-light br-ts-0 br-bs-0" >
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12 col-xl-7">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">From:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="feather feather-calendar"></i>
</div>
</div><input class="form-control fc-datepicker" placeholder="DD-MM-YYYY" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">To:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="feather feather-calendar"></i>
</div>
</div><input class="form-control fc-datepicker" placeholder="DD-MM-YYYY" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-3">
<div class="form-group">
<label class="form-label">Select Priority:</label>
<select name="attendance" class="form-control custom-select select2" data-placeholder="Select Priority">
<option label="Select Priority"></option>
<option value="1">High</option>
<option value="2">Medium</option>
<option value="3">Low</option>
</select>
</div>
</div>
<div class="col-md-12 col-xl-2">
<div class="form-group mt-5">
<a href="javascript:void(0);" class="btn btn-primary btn-block">Search</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<input type="text" id="searchInput">

<table class="table table-vcenter text-nowrap table-bordered border-bottom" id="myTable">
<thead>
<tr>
<th class="border-bottom-0">Numéro dossier
<input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Client<input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Assurance<input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Priorité <input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Start Date<input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Deadline<input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Progress<input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Status<input type="submit" onclick="sortTable(0)" value="^">
<input type="submit"onclick="sortTablee(0)"value="v"></th>
<th class="border-bottom-0">Actions</th>
</tr>
</thead>
<tbody>
<tr>

<td>
<a href="project-view" class="d-flex sidebarmodal-collpase">
<span class="bg-primary dot-label1 me-2 mt-1"></span>
<span>Logo Design</span>
</a>
</td>
<td>
<a href="javascript:void(0);" class="font-weight-semibold">David Vance</a>
</td>
<td>
<div class="avatar-list avatar-list-stacked">
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/1.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/9.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/2.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/10.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/3.jpg'%})"></span>
</div>
</td>
<td><span class="badge badge-success-light">Low</span></td>
<td>15-02-2021</td>
<td>13-03-2021</td>
<td>
<div class="d-flex align-items-end justify-content-between">
<h6 class="fs-12">Project Status</h6>
<h6 class="fs-12">75%</h6>
</div>
<div class="progress h-1">
<div class="progress-bar bg-primary w-75"></div>
</div>
</td>
<td><span class="badge badge-primary">Active</span></td>
<td>
<div class="d-flex">
<a href="project-view" class="action-btns1" data-bs-toggle="tooltip" data-bs-placement="top" title="View Task"><i class="feather feather-eye text-primary"></i></a>
<a href="javascript:void(0);" class="action-btns1" data-bs-toggle="modal" data-bs-target="#editprojectmodal">
<i class="feather feather-edit-2 text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit task"></i>
</a>
<a href="javascript:void(0);" class="action-btns1" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete Task"><i class="feather feather-trash-2 text-danger"></i></a>
</div>
</td>
</tr>
<tr>
<td><a href="project-view" class="d-flex sidebarmodal-collpase">
<span class="bg-primary dot-label1 me-2 mt-1"></span>
<span>Mobile App</span>
</a></td>
<td><a href="javascript:void(0);" class="font-weight-semibold">Julia Walker</a></td>
<td><div class="avatar-list avatar-list-stacked">
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/4.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/15.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/5.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/14.jpg'%})"></span>
</div></td>
<td><span class="badge badge-danger-light">High</span></td>
<td>12-02-2021</td>
<td>16-06-2021</td>
<td>
<div class="d-flex align-items-end justify-content-between">
<h6 class="fs-12">Project Status</h6>
<h6 class="fs-12">30%</h6>
</div>
<div class="progress h-1">
<div class="progress-bar bg-primary w-80"></div>
</div></td>
<td><span class="badge badge-primary">Active</span></td>
<td>
<div class="d-flex">
<a href="project-view" class="action-btns1" data-bs-toggle="tooltip" data-bs-placement="top" title="View Task"><i class="feather feather-eye text-primary"></i></a>
<a href="javascript:void(0);" class="action-btns1" data-bs-toggle="modal" data-bs-target="#editprojectmodal">
<i class="feather feather-edit-2 text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit task"></i>
</a>
<a href="javascript:void(0);" class="action-btns1" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete Task"><i class="feather feather-trash-2 text-danger"></i></a>
</div></td>
</tr>
<tr>

<td>
<a href="project-view" class="d-flex sidebarmodal-collpase">
<span class="bg-warning dot-label1 me-2 mt-1"></span>
<span>Website Development</span>
</a>
</td>
<td>
<a href="javascript:void(0);" class="font-weight-semibold">Diane Short</a>
</td>
<td>
<div class="avatar-list avatar-list-stacked">
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/2.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/10.jpg'%})"></span>
<span class="avatar avatar brround" style="background-image: url({% static 'assets/images/users/3.jpg'%})"></span>
</div>
</td>
<td><span class="badge badge-danger-light">High</span></td>
<td>01-01-2021</td>
<td>22-04-2021</td>
<td>
<div class="d-flex align-items-end justify-content-between">
<h6 class="fs-12">Project Status</h6>
<h6 class="fs-12">50%</h6>
</div>
<div class="progress h-1">
<div class="progress-bar bg-warning w-50"></div>
</div>
</td>
<td><span class="badge badge-warning">On going</span></td>
<td>
<div class="d-flex">
<a href="project-view" class="action-btns1" data-bs-toggle="tooltip" data-bs-placement="top" title="View Task"><i class="feather feather-eye text-primary"></i></a>
<a href="javascript:void(0);" class="action-btns1" data-bs-toggle="modal" data-bs-target="#editprojectmodal">
<i class="feather feather-edit-2 text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit task"></i>
</a>
<a href="javascript:void(0);" class="action-btns1" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete Task"><i class="feather feather-trash-2 text-danger"></i></a>
</div>
</td>
</tr>
</tbody>
</table>

<script>
function sortTable(col) {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[col];
y = rows[i + 1].getElementsByTagName("TD")[col];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
function sortTablee(col) {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[col];
y = rows[i + 1].getElementsByTagName("TD")[col];
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}




const searchInput = document.getElementById("searchInput");
const table = document.getElementById("myTable");

searchInput.addEventListener("input", function() {
const searchValue = searchInput.value.toLowerCase();

for (let i = 1; i < table.rows.length; i++) {
let found = false;
const row = table.rows[i];

for (let j = 0; j < row.cells.length; j++) {
const cellValue = row.cells[j].innerHTML.toLowerCase();
if (cellValue.indexOf(searchValue) > -1) {
found = true;
break;
}
}

if (found) {
row.style.display = "";
} else {
row.style.display = "none";
}
}
});



</script>
</div>
</div>
</div>
</div>
</div>
<!-- END ROW -->
{% endblock %}

{% block modal %}
<!-- EDIT PROJECT MODAL -->
<div class="modal fade" id="editprojectmodal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Project</h5>
<button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Project ID</label>
<input class="form-control" placeholder="Number" value="#67">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Project Title</label>
<input class="form-control" placeholder="Text" value="Mobile App">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Department:</label>
<select name="attendance" class="form-control custom-select select2" data-placeholder="Select Department">
<option label="Select Department"></option>
<option value="1">Designing Department</option>
<option value="2">Development Department</option>
<option value="3">Marketing Department</option>
<option value="4">Human Resource Department</option>
<option value="5">Managers Department</option>
<option value="6" selected>Application Department</option>
<option value="7">Support Department</option>
<option value="8">IT Department</option>
<option value="9">Technical Department</option>
<option value="10">Accounts Department</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Project Priority:</label>
<select name="attendance" class="form-control custom-select select2" data-placeholder="Select Priority">
<option label="Select Priority"></option>
<option value="1" selected>High</option>
<option value="2">Medium</option>
<option value="3">Low</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Client:</label>
<select name="attendance" class="form-control custom-select select2" data-placeholder="Enter Client">
<option label="Enter Client"></option>
<option value="1" selected>Julia Walker</option>
<option value="2">Client 02</option>
<option value="3">Client 03</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">($)Price:</label>
<input class="form-control" placeholder="Enter Price eg:$69.00" value="$170.00">
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Assigned Team:</label>
<select name="attendance" class="form-control custom-select select2" multiple="multiple" data-placeholder="Select Employee">
<option label="Select Employee"></option>
<option value="1" selected>Faith Harris</option>
<option value="2" selected>Austin Bell</option>
<option value="3" selected>Maria Bower</option>
<option value="4" selected>Peter Hill</option>
<option value="5">Victoria Lyman</option>
<option value="6">Adam Quinn</option>
<option value="7">Melanie Coleman</option>
<option value="8">Max Wilson</option>
<option value="9">Amelia Russell</option>
<option value="10">Justin Metcalfe</option>
<option value="11">Ryan Young</option>
<option value="12">Jennifer Hardacre</option>
<option value="13">Justin Parr</option>
<option value="14">Julia Hodges</option>
<option value="15">Michael Sutherland</option>
</select>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Form:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="feather feather-calendar"></i>
</div>
</div><input class="form-control fc-datepicker" placeholder="DD-MM-YYY" type="text" value="12-02-2021">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">To:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="feather feather-calendar"></i>
</div>
</div><input class="form-control fc-datepicker" placeholder="DD-MM-YYY" type="text" value="16-06-2021">
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Description:</label>
<div class="summernote">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
</div>
<div class="form-group">
<label class="form-label">Upload Files:</label>
<div class="form-group">
<label class="form-label"></label>
<input class="form-control" type="file">
</div>
</div>
<div class="custom-controls-stacked d-md-flex">
<label class="form-label me-5">Work Status :</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option5" checked>
<span class="custom-control-label">Active</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option1">
<span class="custom-control-label">Completed</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option2">
<span class="custom-control-label">On going</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option3">
<span class="custom-control-label">Pending</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option4">
<span class="custom-control-label">Not Started</span>
</label>
<label class="custom-control custom-radio success">
<input type="radio" class="custom-control-input" name="example-radios1" value="option6">
<span class="custom-control-label">Canceled</span>
</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-success projectnotify">Update</button>
</div>
</div>
</div>
</div>
<!-- END EDIT PROJECT MODAL -->

<!-- New PROJECT MODAL -->
<div class="modal fade" id="newprojectmodal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Project</h5>
<button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Project ID</label>
<input class="form-control" placeholder="Number">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Project Title</label>
<input class="form-control" placeholder="Text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Department:</label>
<select name="attendance" class="form-control custom-select select2" data-placeholder="Select Department">
<option label="Select Department"></option>
<option value="1">Designing Department</option>
<option value="2">Development Department</option>
<option value="3">Marketing Department</option>
<option value="4">Human Resource Department</option>
<option value="5">Managers Department</option>
<option value="6">Application Department</option>
<option value="7">Support Department</option>
<option value="8">IT Department</option>
<option value="9">Technical Department</option>
<option value="10">Accounts Department</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Project Priority:</label>
<select name="attendance" class="form-control custom-select select2" data-placeholder="Select Priority">
<option label="Select Priority"></option>
<option value="1">High</option>
<option value="2">Medium</option>
<option value="3">Low</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Client:</label>
<select name="attendance" class="form-control custom-select select2" data-placeholder="Enter Client">
<option label="Enter Client"></option>
<option value="1">Client 01</option>
<option value="2">Client 02</option>
<option value="3">Client 03</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">($)Price:</label>
<input class="form-control" placeholder="Enter Price eg:$69.00">
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Assigned Team:</label>
<select name="attendance" class="form-control custom-select select2" multiple="multiple" data-placeholder="Select Employee">
<option label="Select Employee"></option>
<option value="1">Faith Harris</option>
<option value="2">Austin Bell</option>
<option value="3">Maria Bower</option>
<option value="4">Peter Hill</option>
<option value="5">Victoria Lyman</option>
<option value="6">Adam Quinn</option>
<option value="7">Melanie Coleman</option>
<option value="8">Max Wilson</option>
<option value="9">Amelia Russell</option>
<option value="10">Justin Metcalfe</option>
<option value="11">Ryan Young</option>
<option value="12">Jennifer Hardacre</option>
<option value="13">Justin Parr</option>
<option value="14">Julia Hodges</option>
<option value="15">Michael Sutherland</option>
</select>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label">Form:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="feather feather-calendar"></i>
</div>
</div><input class="form-control fc-datepicker" placeholder="DD-MM-YYY" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label">To:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="feather feather-calendar"></i>
</div>
</div><input class="form-control fc-datepicker" placeholder="DD-MM-YYY" type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Description:</label>
<div class="summernote"></div>
</div>
<div class="form-group">
<label class="form-label">Upload Files:</label>
<div class="form-group">
<label class="form-label"></label>
<input class="form-control" type="file">
</div>
</div>
<div class="custom-controls-stacked d-lg-flex">
<label class="form-label me-5">Work Status :</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option5">
<span class="custom-control-label">Active</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option1">
<span class="custom-control-label">Completed</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option2">
<span class="custom-control-label">On going</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option3">
<span class="custom-control-label">Pending</span>
</label>
<label class="custom-control custom-radio success me-4">
<input type="radio" class="custom-control-input" name="example-radios1" value="option4">
<span class="custom-control-label">Not Started</span>
</label>
<label class="custom-control custom-radio success">
<input type="radio" class="custom-control-input" name="example-radios1" value="option6">
<span class="custom-control-label">Canceled</span>
</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-success projectnotify">Submit</button>
</div>
</div>
</div>
</div>
<!-- END NEW PROJECT MODAL -->
{% endblock %}

{% block scripts %}
<!-- NOTIFICATIONS JS -->
<script src="{% static 'assets/plugins/notify/js/notifIt.js'%}"></script>

<!--INTERNAL CHART JS -->
<script src="{% static 'assets/plugins/chart/chart.bundle.js'%}"></script>
<script src="{% static 'assets/plugins/chart/utils.js'%}"></script>

<!-- INTERNAL DATEPICKER JS -->
<script src="{% static 'assets/plugins/modal-datepicker/datepicker.js'%}"></script>

<!-- INTERNAL INDEX JS -->
<script src="{% static 'assets/js/project/project-list.js'%}"></script>

<!-- THEME COLOR JS -->
<script src="{% static 'assets/js/themeColors.js'%}"></script>
{% endblock %}