{# templates/customer/home.twig #}
{% extends 'layout.twig' %}

{% block title %} Customer Settings {% endblock %}

{% block content %}
<!-- Container fluid -->
{#
<div class="bg-primary pt-10 pb-21"></div>
<div class="container-fluid xmt-n22 px-6">
    Aqui esta el contenido
</div>
#}
<div class="container-fluid px-6 py-4">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-12">
            <!-- Page header -->
            <div>
                <div class="border-bottom pb-4 mb-4 d-flex align-items-center justify-content-between">
                    <div class="mb-2 mb-lg-0">
                        <h3 class="mb-0 fw-bold">Ajustes de cuenta</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-8">
        <div class="col-xl-3 col-lg-4 col-md-12 col-12">
            <div class="mb-4 mb-lg-0">
              <h4 class="mb-1">Ajustes generales</h4>
              <p class="mb-0 fs-5 text-muted">Configuración de los ajustes del perfil</p>
            </div>
        </div>

        <div class="col-xl-9 col-lg-8 col-md-12 col-12">
            <!-- card -->
            <div class="card">
              <!-- card body -->
              <div class="card-body">
                <div class=" mb-6">
                  <h4 class="mb-1">Ajustes generales</h4>
                </div>
                <div class="row align-items-center mb-8">
                  <div class="col-md-3 mb-3 mb-md-0">
                    <h5 class="mb-0">Avatar</h5>
                  </div>
                  <div class="col-md-9">
                    <div class="d-flex align-items-center">
                      <div class="me-3">
                        <img src="/assets/images/avatar/{{ customer.avatar }}" class="rounded-circle avatar avatar-lg" alt="">
                      </div>
                      <div>
                        <button type="submit" class="btn btn-outline-white
                            me-1">Cambiar</button>
                        <button type="submit" class="btn btn-outline-white">Quitar</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- col -->
                
                {% if message is not empty %}
                  {% if success %}
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                  </symbol>
                </svg>
                <div class="alert alert-success d-flex align-items-center" role="alert">
                  <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#check-circle-fill"/></svg>
                  <div>{{ message }}</div>
                </div>
                  {% else %}
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                  </symbol>
                </svg>
                <div class="alert alert-danger d-flex align-items-center" role="alert">
                  <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#exclamation-triangle-fill"/></svg>
                  <div>{{ message }}</div>
                </div>
                  {% endif %}
                {% endif %}

                <div>
                  <!-- border -->
                  <div class="mb-6">
                    <h4 class="mb-1">Información básica</h4>
                  </div>
                  <form method='post'>
                    <!-- row -->
                    <div class="mb-3 row">
                      <label for="fullName" class="col-sm-4 col-form-label
                          form-label">Nombre completo</label>
                      <div class="col-sm-4 mb-3 mb-lg-0">
                        <input type="text" class="form-control" placeholder="Nombre(s)" 
                            id="fullName" name="gsform[first_name]" 
                            value='{{customer.first_name}}' required>
                          {% if messages.first_name is defined %}
                          <h6><span class="text-danger"><i>{{ messages.first_name }}</i></span></h6>
                          {% endif %}
                      </div>
                      <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="Apellido(s)" 
                            id="lastName" name="gsform[last_name]" 
                            value='{{customer.last_name}}' required>
                          {% if messages.last_name is defined %}
                          <h6><span class="text-danger"><i>{{ messages.last_name }}</i></span></h6>
                          {% endif %}
                      </div>
                    </div>

                    <!-- row -->
                    <div class="mb-3 row">
                      <label for="displayName" class="col-sm-4
                          col-form-label form-label">Nombre visible</label>
                      <div class="col-md-8 col-12">
                        <input type="text" class="form-control" placeholder="Nombre visible" 
                            id="displayName" name="gsform[display_name]" 
                            value='{{ customer.display_name }}' required>
                          <h6><span class="text-muted"><i>Así será como se mostrará tu nombre en la sección de tu cuenta</i></span></h6>
                          {% if messages.display_name is defined %}
                          <h6><span class="text-danger"><i>{{ messages.display_name }}</i></span></h6>
                          {% endif %}
                      </div>
                    </div>
                    <!-- row -->
                    <div class="mb-3 row">
                      <label for="email" class="col-sm-4 col-form-label
                          form-label">Dirección de correo electrónico</label>
                      <div class="col-md-8 col-12">
                        <input type="email" class="form-control" placeholder="{{ customer.user_email }}" 
                            id="email" disabled>
                      </div>
                    </div>
                    <!-- row -->
                    <div class="mb-3 row">
                      <label for="phone" class="col-sm-4 col-form-label
                          form-label">Teléfono <span class="text-muted">(Opcional)</span></label>
                      <div class="col-md-8 col-12">
                        <input type="text" class="form-control" placeholder="Teléfono" id="phone"
                            name="gsform[phone_number]" 
                            value='{{ customer.phone_number }}'>
                          {% if messages.phone_number is defined %}
                          <h6><span class="text-danger"><i>{{ messages.phone_number }}</i></span></h6>
                          {% endif %}
                      </div>
                    </div>
                    <!-- row -->
                    <div class="mb-3 row">
                      <label for="location" class="col-sm-4 col-form-label
                          form-label">Ubicación</label>

                      <div class="col-md-8 col-12">
                        <select class="form-select" id="location" name="gsform[country]" required>
                            {% if customer.country is null %}
                            <option selected>Sleccione país</option>
                            {% endif %}
                            <option value="VE"{% if customer.country == 'VE' %} selected="selected"{% endif %}>Venezuela</option>
                            <option value="ES"{% if customer.country == 'ES' %} selected="selected"{% endif %}>España</option>
                            <option value="DE"{% if customer.country == 'DE' %} selected="selected"{% endif %}>Alemania</option>
                            <option value="BE"{% if customer.country == 'BE' %} selected="selected"{% endif %}>Bélgica</option>
                          </select>
                          {% if messages.country is defined %}
                          <h6><span class="text-danger"><i>{{ messages.country }}</i></span></h6>
                          {% endif %}
                      </div>
                    </div>
                    <!-- row -->
                    <div class="mb-3 row">
                      <label for="addressLine" class="col-sm-4 col-form-label
                          form-label">Dirección</label>
                      <div class="col-md-8 col-12">
                        <input type="text" class="form-control" placeholder="Dirección" 
                            id="addressLine" name="gsform[address]" value='{{ customer.address }}' required>
                          {% if messages.address is defined %}
                          <h6><span class="text-danger"><i>{{ messages.address }}</i></span></h6>
                          {% endif %}
                      </div>
                    </div>
                    <!-- row -->
                    <div class="row align-items-center">
                      <label for="zipcode" class="col-sm-4 col-form-label
                          form-label">Código postal <i data-feather="info"
                            class="me-2 icon-xs"></i></label>
                      <div class="col-md-8 col-12">
                        <input type="text" class="form-control" placeholder="Código postal" 
                            id="zipcode" name="gsform[zipcode]" value='{{ customer.zipcode }}' required>
                          {% if messages.zipcode is defined %}
                          <h6><span class="text-danger"><i>{{ messages.zipcode }}</i></span></h6>
                          {% endif %}
                      </div>
                      <div class="offset-md-4 col-md-8 mt-4">
                        <input type="hidden" name="action" value="gsform">
                        <button type="submit" class="btn btn-primary">Guardar cambios</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>

    </div>

</div>
{% endblock %}