{% extends 'base.html' %}

{% block extrahead %}
  <script src="{{ MEDIA_URL }}js/jquery-1.5.1.min.js"
          type="text/javascript"></script>
{% endblock %}

{% block title %}
  Embauche
{% endblock %}

{% block main %}
  <form action="" method="post">

    {% if step == 'poste' %}
      <h2>Poste visé</h2>

      <table cellspacing="0">
        {{ form.as_table }}
      </table>

      <script type="text/javascript">
        $('#id_poste').change(function() {
            window.location = '{% url embauche %}/' + $(this).val();
        });
      </script>
    {% else %}
      <h1>Autorisation d'embauche</h1>

      <p><strong>Poste</strong>: {{ poste }}</p>

      <h2>Employé</h2>

      <table cellspacing="0" id="form-employe">
        {{ forms.employe.as_table }}
      </table>

      <input type="hidden" id="poste" name="poste" value="dae-{{ poste.id }}" />
      <input type="hidden" id="implantation" name="implantation"
             value="{{ poste.implantation_id }}" />

      <script type="text/javascript">
        function activateEmployeDropDown() {
            $('#id_employe').change(loadEmploye);
        }

        function loadEmploye() {
            var employeUrl = '{% url employe %}/' + $(this).val();
            $('#form-employe').html('<tr><td>Chargement...</td></tr>')
                              .load(employeUrl, activateEmployeDropDown);
            var dossierUrl = '{% url dossier %}/' + $('#poste').val() +
                             '/' + $(this).val();
            $('#form-dossier').html('<tr><td>Chargement...</td></tr>')
                              .load(dossierUrl, activateDossierDropDowns);
        }

        activateEmployeDropDown();
      </script>

      <h2>Dossier</h2>

      <table cellspacing="0" id="form-dossier">
        {{ forms.dossier.as_table }}
      </table>

      <script type="text/javascript">
        function activateDossierDropDowns() {
            $('#id_classement, #id_devise').change(loadSalaire);
        }

        function loadSalaire() {
            $.getJSON('{% url salaire %}/' + $('#implantation').val() + '/' +
                      $('#id_devise').val() + '/' + $('#id_classement').val(),
              function(data) {
                console.log(data);
                $('#id_salaire').val(data.salaire_devise);
              });
        }

        activateDossierDropDowns();
      </script>
      <input type="submit" name="save" value="Sauvegarder" />
    {% endif %}
  </form>
{% endblock %}