<? global $lang;?>
<div id="user-panel">
  <?= \Tpl::view( 'globelus/firms/_partials/menu', [
    'active' => 'ustawienia-konta'
  ] );?>
  <div class="mini-box fluid">
    <div class="title">
      <?= ucfirst( $lang['ustawienia-konta'] );?>
    </div>
    <div class="subtitle">
      <?= $lang['ustawienia-konta-podtytul'];?>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="content profil">
            <form method="POST" action="/globelusFirms/change_password/">
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="form-group row">
                    <label form="current_password" class="col-12 col-sm-4"><?= ucfirst( $lang['obecne-haslo'] );?>:</label>
                    <div class="col-12 col-sm-8">
                      <input type="password" required id="current_password" name="current_password" class="form-control">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="form-group row">
                    <label form="new_password" class="col-12 col-sm-4"><?= ucfirst( $lang['nowe-haslo'] );?>:</label>
                    <div class="col-12 col-sm-8">
                      <input type="password" required id="new_password" name="new_password" pattern="^\S{6,}$" class="form-control">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="form-group row">
                    <label form="repeat_new_password" class="col-12 col-sm-4"><?= ucfirst( $lang['powtorz-nowe-haslo'] );?>:</label>
                    <div class="col-12 col-sm-8">
                      <input type="password" required id="repeat_new_password" name="repeat_new_password" pattern="^\S{6,}$" class="form-control" oninput="check_match(this)">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="form-group row">
                    <div class="col-12 col-sm-8 offset-sm-4 mt20">
                      <input type="submit" value="<?= ucfirst( $lang['zmien-haslo'] );?>" class="btn btn-success">
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <hr/>
    <div class="subtitle">
      <?= $lang['usuwanie-konta-podtytul'];?>
    </div>
    <div class="row">
      <div class="col-12 col-md-6">
        <a href="#" class="btn btn-danger account-delete"><?= ucfirst( $lang['usun-konto'] );?></a>
      </div>
    </div>
  </div>
</div>
<script class="footer" type="text/javascript">
  $( function()
  {
    $( 'body' ).on( click_event, '.account-delete', function()
    {
      $.alert(
      {
        title: '<?= ucfirst( $lang['potwierdz'] );?>',
        icon: 'fa fa-exclamation',
        content: '<?= $lang['potwierdz-usuniecie-konta'];?>',
        closeIcon: true,
        closeIconClass: 'fa fa-close',
        typeAnimated: true,
        animation: 'opacity',
        columnClass: 'large',
        theme: 'modern',
        buttons:
        {
          cancel:
          {
            text: '<?= $lang['anuluj'];?>',
            action: function() {}
          },
          confirm:
          {
            text: '<?= $lang['zatwierdz'];?>',
            btnClass: 'btn-blue',
            keys: ['enter'],
            action: function()
            {
              document.location.href="/globelusUser/delete_account/";
            }
          }
        }
      });
    });
  });

  function check_match(input)
  {
    if ( input.value !== document.getElementById( 'new_password' ).value )
      input.setCustomValidity( '<?= $lang['podane-hasla-sa-rozne' ];?>');
    else
      input.setCustomValidity('');
  }
</script>