{% extends 'base/staff/base_crud.html.twig' %}

{% block title %}{% trans %}app_name{% endtrans %} | {% trans %}my_profile{% endtrans %}{% endblock title %}

{% block body %}
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0 text-dark">{% trans %}my_profile{% endtrans %}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ path('dashboard') }}">{% trans %}home{% endtrans %}</a></li>
                <li class="breadcrumb-item active">{% trans %}my_profile{% endtrans %}</li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <section class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header p-2">
                  <ul class="nav nav-pills">
                    <li class="nav-item"><a class="nav-link active" href="#profile" data-toggle="tab">{% trans %}personal_informations{% endtrans %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#pass" data-toggle="tab">{% trans %}password{% endtrans %}</a></li>
                  </ul>
                </div><!-- /.card-header -->
				<form class="profile_form card-body" action="{{ path('profile') }}" method="POST" enctype="multipart/form-data">
                <div class="card-body">
                  <div class="tab-content">
					<div class="tab-pane active" id="profile">
                        <div class="card-body">
							<div class="row">
								<div class="col-md-3">
									<div class="wizard-card" data-color="orange" id="wizardProfile">
										<div class="row">
										  <div class="col-sm-12">
											 <div class="picture-container">
												  <div class="picture text-center d-flex">
													  <img class="mx-auto my-auto" src="{{ entity.getPhoto()|photo }}" class="picture-src" id="wizardPicturePreview" title="{{ app.user.getName() }}"/>
													  <input type="file" id="wizard-picture" name="wizard-picture">
												  </div>
												  <h6>{% trans %}choose_picture{% endtrans %}</h6>
											  </div>
										  </div>
										</div>
									</div>
								</div>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-2">
											<div class="form-group">
											  <label>{% trans %}civility{% endtrans %}<span style="color:red"> *</span></label>
                                              <select name="civility" class="form-control">
                                                {% for key, value in listCivility %}
                                                    {% if entity.getCivility() == key %}
                                                    <option value="{{ key }}" selected>{{ value }}</option>
                                                    {% else %}
                                                    <option value="{{ key }}">{{ value }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                              </select>
											</div>
										</div>
										<div class="col-md-5">
											<div class="form-group">
											  <label>{% trans %}lastname{% endtrans %}<span style="color:red"> *</span></label>
											  <input class="form-control" type="text" name="lastname" value="{{ app.user.getLastname() }}">
											</div>
										</div>
										<div class="col-md-5">
											<div class="form-group">
											  <label>{% trans %}firstname{% endtrans %}</label>
											  <input class="form-control" type="text" name="firstname" value="{{ app.user.getLastname() }}">
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group">
											  <label>{% trans %}email{% endtrans %}<span style="color:red"> *</span></label>
											  <input class="form-control" type="text" name="email" value="{{ app.user.getEmail() }}" disabled>
											</div>
										</div>
										<div class="col-md-6">
										    <div class="form-group">
											    <label>{% trans %}phone_number{% endtrans %}</label>
                          <div class="row no-gutters">
                              <div class="col-sm-3">
                                  <select name="country_code" class="form-control">
                                      {% for key, value in listCountryCode %}
                                          {% if entity.getCountryCode() == key %}
                                          <option value="{{ key }}" selected>{{ value }}</option>
                                          {% else %}
                                          <option value="{{ key }}">{{ value }}</option>
                                          {% endif %}
                                      {% endfor %}
                                    </select>
                              </div>
                              <div class="col-sm-9">
                                  <input class="form-control" type="text" name="phone_number" value="{{ app.user.getPhoneNumber() }}">
                              </div>
                          </div>
											</div>
										</div>
										<div class="col-md-12">
											<div class="form-group">
												<label>{% trans %}role{% endtrans %}<span style="color:red"> *</span></label>
												<input class="form-control" type="text" name="role" value="{{ app.user.getProfile()|trans }}" disabled>
												</select>
											</div>
										</div>		
									</div>
								</div>
						  </div>
                        </div>
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="pass">
                        <div class="card-body">
                          <div class="row">
                            <div class="col-md-12">
                              <div class="form-group">
                                  <label>{% trans %}old_password{% endtrans %}<span style="color:red"> *</span></label>
                                  <input type="password" name="old_password" class="form-control" />
                                </div>
                              </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label>{% trans %}new_password{% endtrans %}<span style="color:red"> *</span></label>
                                  <input type="password" name="new_password" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label>{% trans %}confirm_password{% endtrans %}<span style="color:red"> *</span></label>
                                  <input type="password" name="confirm_password" class="form-control" />
                                </div>
                            </div>
                          </div>
                        </div>
                    </div>
                    <!-- /.tab-pane -->
                  </div>
                  <!-- /.tab-content -->
                </div><!-- /.card-body -->
				<div class="card-footer">
					<div class="col-md-6">
						<input type="hidden" id="token" name="token" value="{{ csrf_token('check_form_profile') }}" />
					</div>
					<div class="col-md-12 text-right">
						<div class="form-group">
							<input type="submit" value="{% trans %}update1{% endtrans %}" class="btn btn-success btn-custom" />
						</div>
					</div>
				</div>
			</form>

              </div>
              <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </div><!-- /.container-fluid -->
      </section>
      <!-- /.content -->
  </div>
  <!-- /.control-sidebar -->
<!-- ./wrapper -->
{% endblock body %}
{% block javascripts %}
<script src="{{ asset('adm/dist/js/staff-control.js') }}"></script>
{% endblock javascripts %}