{% extends 'base.html' %}
{% block midpart %}

<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>


<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>
            <div class="box-body">

                    <form action="/get_quick_resume_details/" role="form" autocomplete="off" method="POST" enctype="multipart/form-data"
                          id="id_quick_resume" >{% csrf_token %}
                        <div class="col-sm-12">
                         <div class="form-group col-sm-6 col-sm-offset-1">
                             <label>Resume</label><p id="id_error" style="color:red;"></p>
                             <input type="file" name="resume" class="form-control input-sm" id="id_resume" required>
                         </div>
                        <div class="col-sm-2 col-sm-offset-1">
                            <button type="button" class="btn btn-block btn-primary" onclick="get_details()"
                            style="margin-top:32px;">
                                Submit
                            </button>
                        </div>
                             </div>
                    </form>


                <div class="col-sm-12" id="id_quick_resume_response">

                </div>
            </div>
        </div>
    </div>
</div>
<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>

<script>
    function get_details()
    {
        var file = document.getElementById("id_resume").files[0];
        if (file)
        {
            var data = new FormData();
            data.append('file', file);
            data.append('csrfmiddlewaretoken', "{{ csrf_token }}");
            $.ajax({
                url : "/get_quick_resume_details/",
                processData : false,
                contentType : false,
                type : 'POST',
                dataType: "json",
                data : data,
                success : function(data)
                    {
                        $("#id_error").html("");
                        $("#id_quick_resume_response").html(data.response);
                    },
            });
        }
        else
        {
            $("#id_error").html("Please select Resume file");
        }

    }
</script>

{% endblock %}