{% extends "global/Page.html" %}

{% load otree static %}

{% load widget_tweaks %}


{% block styles %}

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>

<link rel="stylesheet" href="{% static 'global/jquery-ui.css' %}">

<style>

body {font-family: Arial;}

.form-control {

}

.flex-box2 {
  display: flex;
  width: 100%;
  margin: 0;
  height: 50px;
}
.flex-box .col
{
  border: 1px solid green;
  border-bottom: none;
  flex:0.5;
  padding: 12px;
  overflow-y: hide;
  overflow-x: hide;
}
.flex-box2 .colSM
{
  border: 1px solid green;
  border-bottom: none;
  flex:0.5;
  padding: 12px;
  overflow-y: hide;
  overflow-x: hide;
}
.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 600px;
}

.flex-box .colCV
{
  border: 1px solid green;
  flex:0.5;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}
.flex-box .colSM
{
  border: 1px solid green;
  flex:0.5;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}

.handle {
  width: 5px;
  text-align: center;
  color: white;

  transition: all ease-in 0.1s;
}

.draggable { background: pink; }

body {
}

.parent {
    position: relative;
    height: 750px;
    border: 1px solid yellow;
}
.child {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    outline: 1px solid #ccc;
    background: #ccc;
    border: 1px solid red;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style instruction photos */
.pic1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-bottom:50px;
    }
.pic2 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0px;
    width:16px;
    }

/* Style Flexbox*/
.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 0px solid yellow;
    flex: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-child-new {
    border: 1px solid yellow;
    resize: horizontal;
    overflow: auto;
}

.flex-child:first-child {
    margin-right: 20px;
}

table {
    margin: auto;
    overflow: auto;
    font-size: small;
}
table tr:nth-child(even){
     background-color: white;
}
table tr:nth-child(odd){
     background-color: #DCDCDC;
}
table th{
    padding: 10px;
}

ul {
    list-style-position: inside;
    padding-left: 0;
}

.tabtable td{
    border: 0px solid yellow;
    background-color: #f1f1f1;
}
.notestable th{
    font-size: medium;
    border: 0px solid yellow;
    background-color: white;
}

.centered img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 850px;
    }

.image-container {
	text-align: center;
	}

.zoom {
	max-height: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 850px;
	}



</style>
{% endblock %}



{% block content %}

<h2>Applicant Screening</h2>
<p>Click on the tabbed menu to view each applicant:</p>
<div class="tab">
    <table class = "tabtable">
        <tr>
            {% if player.CV_viewing == 21 %}
            <td><button name="CV_to_view" value=21 class="tablinks active">Instructions</button></td>
            {% else %}
            <td><button name="CV_to_view" value=21 class="tablinks">Instructions</button></td>
            {% endif %}
            {% if player.CV_viewing == 1 %}
            <td> <button name="CV_to_view" value=1 class="tablinks active">Applicant 1 </button></td>
            {% else %}
            <td><button name="CV_to_view" value=1 class="tablinks">Applicant 1</button></td>
            {% endif %}
            {% if player.CV_viewing == 2 %}
            <td><button name="CV_to_view" value=2 class="tablinks active">Applicant 2</button></td>
            {% else %}
            <td><button name="CV_to_view" value=2 class="tablinks">Applicant 2<br></button></td>
            {% endif %}
            {% if player.CV_viewing == 3 %}
                <td><button name="CV_to_view" value=3 class="tablinks active">Applicant 3</button></td>
            {% else %}
                <td><button name="CV_to_view" value=3 class="tablinks">Applicant 3</button></td>
            {% endif %}
            {% if player.CV_viewing == 4 %}
                <td><button name="CV_to_view" value=4 class="tablinks active">Applicant 4</button></td>
            {% else %}
                <td><button name="CV_to_view" value=4 class="tablinks">Applicant 4</button></td>
            {% endif %}
            {% if player.CV_viewing == 5 %}
                <td><button name="CV_to_view" value=5 class="tablinks active">Applicant 5</button></td>
            {% else %}
                <td><button name="CV_to_view" value=5 class="tablinks">Applicant 5</button></td>
            {% endif %}
            {% if player.CV_viewing == 6 %}
                <td><button name="CV_to_view" value=6 class="tablinks active">Applicant 6</button></td>
            {% else %}
                <td><button name="CV_to_view" value=6 class="tablinks">Applicant 6</button></td>
            {% endif %}
        </tr>
        <tr>
            <td align="center"></td>
            <td align="center">{{ form.CV_1 }}</td>
            <td align="center">{{ form.CV_2 }}</td>
            <td align="center">{{ form.CV_3 }}</td>
            <td align="center">{{ form.CV_4 }}</td>
            <td align="center">{{ form.CV_5 }}</td>
            <td align="center">{{ form.CV_6 }}</td>
        </tr>
    </table>







    </table>
</div>



<div>

    {% if player.CV_viewing == 1 %}

    <hr>
    <div align="center">
        <table class ="notestable">
            <tr>
                <th valign ="top">Notes about Applicant 1:</th>
                <td>{{form.Notes_1 }}</td>
            </tr>
        </table>
    </div>
    <hr>

    {% elif player.CV_viewing == 2 %}


    <hr>
    <div align="center">
        <table class ="notestable">
            <tr>
                <th valign ="top">Notes about Applicant 2:</th>
                <td>{{form.Notes_2 }}</td>
            </tr>
        </table>
    </div>
    <hr>


    {% elif player.CV_viewing == 3 %}


    <hr>
    <div align="center">
        <table class ="notestable">
            <tr>
                <th valign ="top">Notes about Applicant 3:</th>
                <td>{{form.Notes_3 }}</td>
            </tr>
        </table>
    </div>
    <hr>


    {% elif player.CV_viewing == 4 %}


    <hr>
    <div align="center">
        <table class ="notestable">
            <tr>
                <th valign ="top">Notes about Applicant 4:</th>
                <td>{{form.Notes_4 }}</td>
            </tr>
        </table>
    </div>
    <hr>


    {% elif player.CV_viewing == 5 %}

    <hr>
    <div align="center">
        <table class ="notestable">
            <tr>
                <th valign ="top">Notes about Applicant 5:</th>
                <td>{{form.Notes_5 }}</td>
            </tr>
        </table>
    </div>
    <hr>


    {% elif player.CV_viewing == 6 %}


    <hr>
    <div align="center">
        <table class ="notestable">
            <tr>
                <th valign ="top">Notes about Applicant 6:</th>
                <td>{{form.Notes_6 }}</td>
            </tr>
        </table>
    </div>
    <hr>

    {% endif %}
    {% if player.CV_viewing != 21 %}
    <div class="flex-box">

        <div class="colCV">
            <p align = "right">Drag to resize window &rarr;</p>
            <h3>Résumé</h3>

            <div class="image-container col-xs-12 medium-zoom-image">
                <img class="zoom" src="{% static image_path %}" data-action="zoom" width="200px">
            </div>

        </div>
        <div class="handle"></div>
        <div class="colSM">
            <p align = "left">&larr;</p>
            <h3>Social Media Data</h3>

            {% include html_path %}

        </div>
    </div>

    {% else %}
    <p>In this tab you can refer back to the instructions you have already read on the previous pages.</p>

    <p>
        Your task to read six résumés and give each one a score out of ten.
        You should give each a unique score so you can always say that one is better or worse than another.
    </p>

    <img src="{% static 'Picture21.jpg' %}" class='pic1' width=50% hspace="30">

    <h4> <b> Place of Work: </b>Luxury Retreat and Wellness Resort</h4>

    <p>
        Our beach-side resort offers 100 luxury rooms nestled in tranquil surroundings allowing our guests to unwind and
        get away from it all and enjoy the area. We offer a spa, a wellness center, yoga classes and our restaurant
        offers a wide range of local and seasonal cuisine. Nearby beaches, trails, wine tastings, and golf opportunities
        are all on our doorstep.
    </p>


    <h4>  <b> Job Description: </b>Office Manager</h4>
    <p>
        The Office Manager will be responsible for the daily management of all administrative and office support
        operations. We are looking for an experienced manager with excellent customer service skills who will fit well
        into our team. Candidates should be hard-working, organised and reliable.
    </p>

    <h4><b>Duties Include:</b></h4>
        <ul>
            <li>Overseeing office activities</li>
            <li>Dealing with guests in courteous and timely manner</li>
            <li>On-boarding of new employees</li>
            <li>Coordinating and creating agenda for monthly staff meetings</li>
            <li>Promoting a friendly and welcoming environment for guests</li>
        </ul>

    <p> Each application consists of a résumé and additional selected data scraped from their public social media accounts. Please use both resources to score the candidate as you see fit. </p>

    <img src="{% static 'Picture1.jpg' %}" class="pic1" hspace="50" / width=30% >


    {% endif %}
    <hr>
    <div style="float:right; width:130px" align = "right">
        <button name="subreq" value="True" position="Right" class="btn btn-success btn-large">Submit</button>
    </div>

</div>

{% if player.CV_viewing == 100 %}

<h5>Drag</h5>
<p id="recleftperc2" name="ip" value="no value">drag</p>
<input type="text" id="recleftperc" name="drag" value="">
<h5>drag time</h5>
<p id="rectime2" name="ip" value="no value">time</p>
<input type="text" id="rectime" name="dragtime" value="">
<h5>scroll cv</h5>
<p id="recCVscroll2" name="ip" value="no value">scroll</p>
<input type="text" id="recCVscroll" name="CVscroll" value="">
<h5>scroll cv time</h5>
<p id="recCVtime2" name="ip" value="no value">time</p>
<input type="text" id="recCVtime" name="CVscrolltime" value="">
<h5>scroll SM</h5>
<p id="recSMscroll2" name="ip" value="no value">scroll</p>
<input type="text" id="recSMscroll" name="SMscroll" value="">
<h5>scroll sm time</h5>
<p id="recSMtime2" name="ip" value="no value">time</p>
<input type="text" id="recSMtime" name="SMscrolltime" value="">

{% endif %}

<script>includeHTML();</script>


<script src="{% static 'global/medium-zoom-min.js' %}"></script>
<script src="{% static 'global/jquery-min.js' %}"></script>


<script src="{% static 'global/jquery.min.js'%}"></script>
<script src="{% static 'global/jquery-ui.js' %}"></script>


{% endblock %}

{% block scripts %}

<script>

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}


</script>

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};


mediumZoom('.zoom', {
    background: '#f1f1f1',
    scrollOffset: 900,
    container: {
        width: 1311,
        height: 1689,
  },
  })


</script>

<script>
    includeHTML();
</script>

<script>
$('.flex-child').resizable({
    handles: 'n,w,s,e',minWidth: 50,
    maxWidth: 400
});
</script>


<script>
    // drag function
    (function($) {
    $.fn.drags = function(opt) {

      opt = $.extend({handle:"",cursor:"ew-resize", min: 1}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        var priorCursor = $('body').css('cursor');

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {

            priorCursor = $('body').css('cursor');
            $('body').css('cursor', opt.cursor);

            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {

              var prev = $('.draggable').prev();
              var next = $('.draggable').next();

              // Assume 50/50 split between prev and next then adjust to
              // the next X for prev

              var total = prev.outerWidth() + next.outerWidth();


              console.log('l: ' +  prev.outerWidth() + ', r:' + next.outerWidth());

              var leftPercentage = (((e.pageX - prev.offset().left) + (pos_x - drg_w / 2)) / total);
              var rightPercentage = 1 - leftPercentage;

              if(leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min)
              {
                return;
              }

              console.log('l: ' + leftPercentage + ', r:' + rightPercentage);

              prev.css('flex', leftPercentage.toString());
              next.css('flex', rightPercentage.toString());

                $(document).on("mouseup", function() {
                  $('body').css('cursor', priorCursor);
                    $('.draggable').removeClass('draggable').css('z-index', z_idx);
                });


              // Setting text of element P with id gfg
              var time= ($.now());
              var leftperclist= $("#recleftperc").val();
              var timelist= $("#rectime").val();
              $("#recleftperc").val(leftperclist + leftPercentage.toString() + ', ');
              $("#recleftperc2").text(leftPercentage.toString());
              $("#rectime").val(timelist + time.toString() + ', ');
              $("#rectime2").text(time.toString());
            });
            e.preventDefault(); // disable selection
        });

    }
})(jQuery);

$('.handle').drags();
</script>


<script>
$('.colSM').on('scroll',function(){
var scrollTop= $('.colSM').scrollTop();
var SMtime= ($.now());
var SMscrolllist = $("#recSMscroll").val();
var SMtimelist= $("#recSMtime").val();
var SMheight= $('.colSM')[0].scrollHeight;
var Clientheight= $('.colCV')[0].clientHeight;
var SMscroll= scrollTop / (SMheight-Clientheight);
$("#recSMscroll").val(SMscrolllist + SMscroll.toString() + ', ');
$("#recSMscroll2").text(SMscroll.toString());
$("#recSMtime").val(SMtimelist + SMtime.toString() + ', ');
$("#recSMtime2").text(SMtime.toString());
});
$('.colCV').on('scroll',function(){
var scrollTop= $('.colCV').scrollTop();
var CVtime= ($.now());
var CVscrolllist = $("#recCVscroll").val();
var CVtimelist= $("#recCVtime").val();
var CVheight= $('.colCV')[0].scrollHeight;
var Clientheight= $('.colCV')[0].clientHeight;
var CVscroll= scrollTop / (CVheight-Clientheight);
$("#recCVscroll").val(CVscrolllist + CVscroll.toString() + ', ');
$("#recCVscroll2").text(CVscroll.toString());
$("#recCVtime").val(CVtimelist + CVtime.toString() + ', ');
$("#recCVtime2").text(CVtime.toString());
});
</script>

<script>
for (let ele of document.getElementsByTagName('textarea')) {
  ele.rows = 5;
  ele.cols = 80;
}
</script>

{% endblock %}