<?php
$baseUrl = Yii::app()->theme->baseUrl . "/register/";
$url = Yii::app()->baseUrl;
$this->pageTitle = 'Form Pendaftaran Team '.Setting::model()->description();
?>



<div id="preloader">
  <div data-loader="circle-side"></div>
</div><!-- /Preload -->

<div id="loader_form">
  <div data-loader="circle-side-2"></div>
</div><!-- /loader_form -->

<!-- <nav>
<ul class="cd-primary-nav">
<li><a href="<?php echo YII::app()->baseUrl; ?>" class="animated_link">Home</a></li>
<li><a href="<?php echo YII::app()->baseUrl; ?>/login" class="animated_link">Login</a></li>
</ul>
</nav> -->
<!-- /menu -->

<div class="container-fluid full-height">
  <div class="row row-height">
    <div class="col-lg-5 content-left">
      <div class="content-left-wrapper">
        <a href="<?php echo YII::app()->baseUrl; ?>" id="logo"><img src="<?php echo $url; ?>/image/setting/<?php echo Setting::model()->logo(); ?>" class="img-responsive" height="40px" alt=""></a>
        <div id="social">
          <ul>
            <li><a href="#0"><i class="icon-facebook"></i></a></li>
            <li><a href="#0"><i class="icon-instagram"></i></a></li>
          </ul>
        </div>
        <!-- /social -->
        <div>
          <figure><img src="<?php echo $baseUrl; ?>img/team.png" alt="" class="img-fluid"></figure>
          <h2>Form Pendaftaran</h2>
          <p><?php echo Setting::model()->description(); ?></p>
        </div>
        <div class="copy">© <?php echo date('Y'); ?> <?php echo Setting::model()->name(); ?></div>
      </div>
      <!-- /content-left-wrapper -->
    </div>
    <!-- /content-left -->

    <div class="col-lg-7 content-right" id="start">
      <div id="wizard_container">
        <div id="top-wizard">
          <div id="progressbar"></div>
        </div>
        <!-- /top-wizard -->
        <?php $form = $this->beginWidget('CActiveForm', array(
          'id' => 'users-form',
          'enableAjaxValidation' => FALSE,
          'enableClientValidation' => true,
          'clientOptions' => array(
            'validateOnSubmit' => true,
    // 'afterValidate' => 'js:notificationForm',
          ),
          'errorMessageCssClass' => 'label label-danger',
          'htmlOptions' => array('enctype' => 'multipart/form-data', 'autocomplete' => 'off'),
        )); ?>
        <input id="website" name="website" type="text" value="">
        <!-- Leave for security protection, read docs for details -->
        <div id="middle-wizard">
          <div class="step">
            <h3 class="main_question"><strong>1/4</strong>Data Peserta Kelompok</h3>


            <div class="form-group">
              <select class="form-control " id="Users_type" name="Users[type]" required="true">
                <option value="">-- Pilih Jenis Kepesertaan--</option>
                <option value="<?php echo YII::app()->baseUrl; ?>/register-individu">Perseorangan</option>
                <option value="<?php echo YII::app()->baseUrl; ?>/register-team" selected>Kelompok</option>
              </select>
            </div>

            <div class="form-group">
              <?php echo $form->error($model, 'fullname'); ?>
              <?php echo $form->textField($model, 'fullname', array('class' => 'form-control', 'placeholder' => 'Nama TIM', 'required' => true, 'onchange' => 'getVals(this, "fullname")')); ?>
            </div>

            <div class="form-group">
              <?php echo $form->error($model, 'email'); ?>
              <?php echo $form->emailField($model, 'email', array('class' => 'form-control', 'placeholder' => 'Alamat Email TIM', 'required' => true, 'onchange' => 'getVals(this, "email")')); ?>
            </div>

            <div class="form-group">
              <?php echo $form->error($model, 'phone'); ?>
              <?php echo $form->numberField($model, 'phone', array('class' => 'form-control', 'placeholder' => 'No. Whatsapp', 'required' => true, 'onchange' => 'getVals(this, "phone")')); ?>
            </div>



          </div>
          <!-- /step-->
          <div class="step">
            <h3 class="main_question"><strong>2/4</strong>Informasi Akun</h3>

            <div class="form-group">
              <?php echo $form->error($model, 'username'); ?>
              <?php echo $form->textField($model, 'username', array('class' => 'form-control', 'placeholder' => 'Username', 'required' => true, 'onchange' => 'getVals(this, "username")')); ?>
              (Username berupa Huruf/Angka dan Tanpa Spasi/Titik)
            </div>
            <div class="form-group">
              <?php echo $form->error($model, 'password'); ?>
              <?php echo $form->passwordField($model, 'password', array('id' => 'password1', 'class' => 'form-control', 'placeholder' => 'Password', 'required' => true, 'onchange' => 'getVals(this, "password")')); ?>
              (Password Minimal 6 Karakter)
            </div>
            <div class="form-group">
              <?php echo $form->error($model, 'repeat_password'); ?>
              <?php echo $form->passwordField($model, 'repeat_password', array('id' => 'password2', 'class' => 'form-control', 'placeholder' => 'Ulangi Password', 'required' => true)); ?>
            </div>
            <div id="pass-info" class="clearfix"></div>
          </div>
          <!-- /step-->
          <div class="step">
            <h3 class="main_question"><strong>3/4</strong>Anggota Tim</h3>

            <div id="dynamic_field">
              <div class="row">
                <div class="col-md-5">
                  <div class="form-group">
                    <input type="number" id="member_code_1" name="member_code[]" placeholder="NIK E-KTP" class="form-control name_list" required="true" />
                  </div>
                  <div class="form-group">
                    <input type="email" id="member_email_1" name="member_email[]" placeholder="Alamat Email Aktif" class="form-control name_list" required="true" />
                  </div>
                  <div class="form-group">
                    <input type="file" accept="image/*" id="member_image_identity_1" name="member_image_identity[]" class="btn btn-sm name_list" required="true">Upload Foto KTP (.jpg, .jpeg, .png)</input>
                  </div>
                </div>
                <div class="col-md-5">
                  <div class="form-group">
                    <input type="text" id="member_name_1" name="member_name[]" placeholder="Nama Lengkap" class="form-control name_list" required="true" />
                  </div>
                  <div class="form-group">
                    <input type="number" id="member_phone_1" name="member_phone[]" placeholder="No. Whatsapp" class="form-control name_list" required="true" />
                  </div>
                  <div class="form-group">
                    <input type="file" accept="image/*" id="member_image_foto_1" name="member_image_foto[]" class="btn btn-sm name_list" required="true">Upload Pas Foto (.jpg, .jpeg, .png)</input>
                  </div>
                </div>
                <div class="col-md-2">
                  <button type="button" name="add" id="add" class="btn btn-success">Tambah</button>
                </div>
                <div class="col-md-5">
                  <div class="form-group">
                    <input type="file" accept="image/*" id="member_image_sosmed_1" name="member_image_sosmed[]" class="btn btn-sm name_list" required="true">Upload Bukti Follow Sosial Media (.jpg, .jpeg, .png)</input>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <!-- /step-->
          <div class="submit step">
            <h3 class="main_question"><strong>4/4</strong>Preview Data</h3>

            <div class="summary">
              <ul>
                <li><strong>1</strong>
                  <h5>Informasi TIM</h5>
                  <ul>
                    <li><label>Nama TIM</label>: <span id="fullname"></span></li>
                    <li><label>Kontak TIM</label>: <span id="phone"></span></li>
                    <li><label>Email TIM</label>: <span id="email"></span></li>
                  </ul>
                </li>
                <li><strong>2</strong>
                  <h5>Informasi Akun TIM</h5>
                  <ul>
                    <li><label>Username</label>: <span id="username"></span></li>
                    <li><label>Password</label>: <span id="password"></span></li>
                  </ul>
                </li>
                <li><strong>3</strong>
                  <h5>Informasi Anggota Tim</h5>
                  <div id="preview_field">
                    <ul>
                      <li><label>NIK E-KTP</label>: <span id="text_member_code_1"></span></li>
                      <li><label>Nama Lengkap</label>: <span id="text_member_name_1"></span></li>
                      <li><label>ALamat Email</label>: <span id="text_member_email_1"></span></li>
                      <li><label>No. Whatsapp</label>: <span id="text_member_phone_1"></span></li>
                      <li><label>Lampiran Identitas KTP</label>:</li>
                      <li><img id="preview_member_image_identity_1" class="img-responsive" height="150px" src="" /></li>
                      <li><label>Lampiran Pas Foto</label>:</li>
                      <li><img id="preview_member_image_foto_1" class="img-responsive" height="150px" src="" /></li>
                      <li><label>Lampiran Bukti Follow Sosial Media</label>:</li>
                      <li><img id="preview_member_image_sosmed_1" class="img-responsive" height="150px" src="" /></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>

            <div class="form-group terms">
              <label class="container_check">Data yang saya masukkan sesuai kartu identitas yang berlaku, benar, dan dapat dipertanggungjawabkan.
                <input type="checkbox" name="terms" value="Yes" class="required" required="true">
                <span class="checkmark"></span>
              </label>
            </div>

            <div class="form-group terms">
              <label class="container_check">Karya yang saya buat orisinil, bukan tiruan, dan belum pernah diikutsertakan dalam lomba sejenis serta belum pernah dipublikasikan (upload surat pernyataan bermaterai di bawah ini).
                <input id="finish_check" type="checkbox" name="finish_check" value="Yes" class="required" required="true">
                <span class="checkmark"></span>
              </label>
            </div>

            <div class="form-group" id="napoli">
              <?php echo $form->label($model, 'image'); ?>
              <?php echo $form->error($model, 'image'); ?>
              <?php echo $form->fileField($model, 'image', array('class' => 'btn', 'placeholder' => 'File Persyaratan', 'required' => true, 'accept'=>'application/pdf')); ?>
            </div>



          </div>
          <!-- /step-->
        </div>
        <!-- /middle-wizard -->
        <div id="bottom-wizard">
          <button type="button" name="backward" class="backward">Sebelumnya</button>
          <button type="button" name="forward" class="forward">Selanjutnya</button>
          <button type="submit" name="process" class="submit">Daftar</button>
        </div>
        <!-- /bottom-wizard -->

        <?php $this->endWidget(); ?>

      </div>
      <!-- /Wizard container -->
    </div>
    <!-- /content-right-->
  </div>
  <!-- /row-->
</div>
<!-- /container-fluid -->

<div class="cd-overlay-nav">
  <span></span>
</div>
<!-- /cd-overlay-nav -->

<div class="cd-overlay-content">
  <span></span>
</div>
<!-- /cd-overlay-content -->

<!-- <a href="#0" class="cd-nav-trigger">Menu<span class="cd-icon"></span></a> -->
<!-- /menu button -->

<!-- Modal terms -->
<div class="modal fade" id="terms-txt" tabindex="-1" role="dialog" aria-labelledby="termsLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="termsLabel">Terms and conditions</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, in porro albucius qui, in <strong>nec quod novum accumsan</strong>, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus.</p>
        <p>Lorem ipsum dolor sit amet, in porro albucius qui, in nec quod novum accumsan, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus. Lorem ipsum dolor sit amet, <strong>in porro albucius qui</strong>, in nec quod novum accumsan, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus.</p>
        <p>Lorem ipsum dolor sit amet, in porro albucius qui, in nec quod novum accumsan, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn_1" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<script>
  $(function() {
    $('#Users_type').on('change', function() {
      var url = $(this).val();
      if (url) {
        window.location = url;
      }
      return false;
    });
  });
</script>