{% extends 'base.html' %}
{% load rolemgmt_tags %}
{% load rmtmgmt_tags %}
{% block midpart %}

  <!-- Font Awesome -->
  <link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <style>
    .btn-adjustment {width: 10%;float: right;margin: -30px 11px 0px 0px;padding-left:15px;}
    .modal {
        overflow-y: auto !important;
    }
    .dataTables_scroll
    {
        overflow:auto;
    }
  </style>

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
	<div class="row">
        <div class="col-xs-12">
          <div class="box box-success">
            <div class="box-header">
              <h3 class="box-title"> <b>{{ title }}</b></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">

              <table id="example1" class="table table-bordered table-striped" style="width:100%;">
                <thead>
                <tr>
                  	<th>Time Stamp</th>
					<th># of Resumes</th>
					<th>Category</th>
					<th>Success Percentage</th>
                    <!--<th>Error Percentage</th>-->
                    <th>Error File</th>
                    <th>Duplicate Resumes</th>
                    <th>New Resumes</th>

                </tr>
                </thead>
                <tbody>
				{% for log in logs %}
                <tr>
                  	<td>{{ log.created_on }}</td>
					<td><a onclick="show_details({{ log.id }}, 1);" style="cursor: pointer;">{{ log.no_of_resumes }}</a></td>
					<td>{{ log.category }}</td>
				  	<td>{{ log.success_percentage }}</td>
                    <!--<td>{{ log.success_percentage|get_error_percentage }}</td>-->
                    <td>
                        {% with log.no_of_resumes|substract:log.duplicates|substract:log.new_resumes as error_files %}
                            {% if error_files %}
                                <a onclick="show_details({{ log.id }}, 4);" style="cursor: pointer;">{{ error_files }}</a>
                            {% else %}
                                0
                            {% endif %}
                        {% endwith %}
                    </td>
                    <td>
                        {% if log.duplicates %}
                            <a onclick="show_details({{ log.id }}, 3);" style="cursor: pointer;">{{ log.duplicates }}</a>
                        {% else %}
                            0
                        {% endif %}
                    </td>
                    <td>
                        {% if log.new_resumes %}
                            <a onclick="show_details({{ log.id }}, 2);" style="cursor: pointer;">{{ log.new_resumes }}</a>
                        {% else %}
                            0
                        {% endif %}
                    </td>
                </tr>
				{% endfor %}
				</tbody>
              </table>
            <!-- /.box-body -->
			</div>
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>


<div class="modal fade" id="id_log_resumes_modal" role="dialog">
	<div class="modal-dialog" style="width:80%;">
	<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" id="id_log_resumes_modal_close">&times;</button>
				<h4 class="modal-title"><b>Log Resume Details</b></h4>
			</div>
			<div class="modal-body" id="id_log_resumes">
			</div>

            <!--<div class="modal-body" id="id_duplicates">-->
			<!--</div>-->
			<div class="modal-footer">
			</div>
		</div>
	</div>
</div>

<!-- jQuery 3-->
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<!--Bootstrap 3.3.7-->
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<!--<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>-->
<!-- SlimScroll -->
<script src="/static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!-- page script -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--newly added-->
<!--<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"><!--newly added-->
<!--<script src="https://code.jquery.com/jquery-3.3.1.js"></script>--><!--newly added-->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><!--newly added-->
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script><!--newly added-->

<script>
  $(function () {
    $('#example1').DataTable({
        "order":[],
    });
  })
</script>

<script>

function show_details(log_id, tag)
{
	$.ajax({
           		url : "/get_upload_log_resumes/",
                type : "POST",
                dataType: "json",
				async: false,
                data : {
						log_id : log_id,
						tag : tag,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success : function(json)
				{
					var html_code = json.response;
					$("#id_log_resumes").html(html_code);
					$('#id_log_resumes_modal').modal('show');
					$('#example2').DataTable();
                    $('.dataTables_filter').parent().addClass('pull-left');
                    $('.dataTables_length').parent().addClass('pull-right');
                    $('.dataTables_length').addClass('pull-right');
                    $('.dataTables_filter').addClass('pull-left');
                    $('.dataTable').wrap('<div class="dataTables_scroll" />');
				},
                error : function(xhr,errmsg,err) {
                    alert(xhr.status + ": " + xhr.responseText);
                }
    });
}



</script>

<script>
$(document).ready(function(){


	$("#id_log_resumes_modal_close").click(function(){
        $("#id_log_resumes_modal").modal('hide');
    });
});
</script>

{% endblock midpart %}