complaint.liquid

<script src="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/jquery.min.js?v=1596581720"></script>
<script src="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/bs.min.js?v=1596581690"></script>
<script src="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/provincias.js?v=1596583586"></script>
<link rel="stylesheet" type="text/css"
  href="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/bs.css?v=1596582732">

<style>

</style>

{% assign razon_social = ' ' %}
{% assign ruc = ' ' %}
{% assign direccion = ' ' %}
{% assign mail = ' ' %}

{% form 'contact' %}
<div class="libro-reclamaciones" id="theForm">
  <div class="container">
    <div class="form-row" style="text-align: center;">
      <div class="col">
        <hr style="color: transparent;border-style: none;">
        <h2>Libro de reclamaciones</h2>
        <input type="hidden" id="uuid" name="contact[id-reclamo]">
      </div>
    </div>
    <div class="form-row">
      <hr style="color: transparent;border-style: none;">
      <div class="col-12 col-md-8 cmdl">
        <h5>Datos de la empresa:</h5>
        {% if razon_social != '' %}
        <p class="mb-0 sml"><b>Razón social: </b>{{ razon_social }}</p>
        {% endif %}
        {% if ruc != '' %}
        <p class="mb-0 sml"><b>RUC: </b>{{ ruc }}</p>
        {% endif %}
        {% if direccion != '' %}
        <p class="mb-0 sml"><b>Dirección: </b>{{ direccion }}</p>
        {% endif %}
        {% if mail != '' %}
        <p class="mb-0 sml"><b>Mail: </b>{{ mail }}</p>
        {% endif %}
      </div>
      <div class="col-12 col-md-4 cmdr">
        <h5>Hoja de reclamación: </h5>
        <p class="mb-0" id="uid"></p>
        <input type="hidden" id="uuid" name="contact[id-reclamo]">
      </div>
    </div>

    {% if form.posted_successfully? %}
    <div class="form-row" style="text-align: center;">
      <div class="col">
        <hr style="color: transparent;border-style: none;">
        <p>Reclamo enviado con éxito</p>
      </div>
    </div>
    {% endif %}
    {% if form.errors %}
    <div class="form-row" style="text-align: center;">
      <div class="col">
        <hr style="color: transparent;border-style: none;">
        <p>Hubo un error en tu solicitud, intenta nuevamente</p>
        <ul class="center">
          {% for field in form.errors %}
          <li>
            Error en {{ field }}
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
    {% endif %}

    <div class="form-row" style="text-align: center;">
      <div class="col">
        <hr style="color: transparent;border-style: none;">
        <p>IDENTIFICACIÓN DEL CONSUMIDOR O RECLAMANTE<br></p>
      </div>
    </div>
    <div class="form-row">
      <input type="hidden" name="contact[tipo-contacto]" value="{{page.title}}">
      <div class="col-12 col-md-6"><select class="form-control" title="Tipo de documento" required=""
          name="contact[tipo-de-documento]">
          <option selected="selected" disabled="disabled">Tipo de documento</option>
          <option value="DNI">DNI</option>
          <option value="Carné de extranjería">Carné de Extranjería</option>
          <option value="Pasaporte">Pasaporte</option>
        </select></div>
      <div class="col-12 col-md-6"><input class="form-control" type="tel" placeholder="N° de Documento" required=""
          maxlength="40" name="contact[numero-de-documento]"></div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-4"><input class="form-control" type="text" placeholder="Nombres" name="contact[nombres]"
          required=""></div>
      <div class="col-12 col-md-4"><input class="form-control" type="text" placeholder="Apellido Paterno"
          name="contact[apellido paterno]" required=""></div>
      <div class="col-12 col-md-4"><input class="form-control" type="text" placeholder="Apellido Materno"
          name="contact[apellido materno]" required="">
      </div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-6"><select class="form-control" required="" name="contact[tipo-de-respuesta]">
          <option selected="selected" disabled="disabled">Tipo de respuesta</option>
          <option value="Correo electrónico">Correo electrónico</option>
          <option value="Dirección domiciliaria">Dirección domiciliaria</option>
        </select></div>
      <div class="col-12 col-md-6"><input class="form-control" type="email" placeholder="Email" required=""
          name="contact[email]">
      </div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-4"><select class="form-control" id="ubigeo_dep" required=""
          name="contact[departamento]"></select></div>
      <div class="col-12 col-md-4"><select class="form-control" id="ubigeo_pro" required=""
          name="contact[provincia]"></select></div>
      <div class="col-12 col-md-4"><select class="form-control" id="ubigeo_dis" required=""
          name="contact[distrito]"></select></div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-6"><input class="form-control" type="text" placeholder="Dirección" required=""
          name="contact[direccion]"></div>
      <div class="col-12 col-md-6"><input class="form-control" type="tel" placeholder="Teléfono celular" required=""
          name="contact[celular]"></div>
    </div>
    <div class="form-row">
      <div class="col-12"><input class="form-control" type="text" placeholder="Nombre completo del padre o madre (Si eres menor de edad)"
                                 name="contact[nombre-tutor]"></div>
    </div>
    <div class="form-row">
      <div class="col text-center">
        <hr style="color: transparent;border-style: none;">
        <p>SI TU PRODUCTO FUE ENTREGADO, ESTOS DATOS SON NECESARIOS<br></p>
      </div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-6"><input class="form-control" type="tel" placeholder="N° Boleta o factura"
          name="contact[boleto-factura]"></div>
      <div class="col-12 col-md-6"><input class="form-control" data-toggle="tooltip" data-bs-tooltip="Fecha de compra" type="date"
          title="Fecha de compra" name="contact[fecha-compra]"></div>
    </div>
    <div class="form-row">
      <div class="col text-center">
        <hr style="border-style: none;">
        <p>Identificación del bien contratado<br></p>
      </div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-6"><select class="form-control" title="Identificación del bien contratado" required=""
          name="contact[identificacion-de-bien-contratado]">
          <option selected="selected" disabled="disabled">Bien contratado</option>
          <option value="producto">Producto</option>
          <option value="servicio">Servicio</option>
        </select></div>
      <div class="col-12 col-md-6"><input class="form-control" type="tel" placeholder="Monto reclamado"
          name="contact[monto-reclamo]" required=""></div>
    </div>
    <div class="form-row">
      <div class="col-12"><textarea class="form-control" placeholder="Descripción" name="contact[descripcion]"
          required=""></textarea></div>
    </div>
    <div class="form-row">
      <div class="col text-center">
        <hr style="border-style: none;">
        <p>DETALLE DE SU RECLAMO<br></p>
      </div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-6"><select class="form-control" title="Tipo de reclamo" required="" name="contact[tipo]">
          <option selected="selected" disabled="disabled">Tipo de reclamo</option>
          <option value="">Reclamo</option>
          <option value="">Queja</option>
        </select></div>
      <div class="col-12 col-md-6"><input class="form-control" data-toggle="tooltip" data-bs-tooltip="Fecha de su reclamo" type="date"
          title="Fecha de su reclamo" name="contact[fecha-reclamo]"></div>
    </div>
    <div class="form-row">
      <div class="col-12 col-md-6"><textarea class="form-control" placeholder="Detalle del reclamo / queja" required=""
          name="contact[detalle-reclamo]"></textarea></div>
      <div class="col-12 col-md-6"><textarea class="form-control" placeholder="Pedido" name="contact[pedido]"
          required=""></textarea></div>
    </div>
    <div class="form-row">
      <div class="col-6 col-sm-8 col-md-6 col-lg-6 offset-3 offset-sm-2 offset-md-3 offset-lg-3"><button
          class="btn btn-block add secondary-button" type="submit">Enviar</button></div>
      <hr style="border-style: none;">
    </div>
    <div class="form-row">
      <div class="col-12 offset-0 col-md-12">
        <hr style="border-style: none;">
        <p class="text-justify sml mb-0"><b>Importante: </b>IMPORTANTE: Los datos consignados en el presente documento han sido proporcionados por
          el cliente, por lo tanto son veraces y de total conformidad del usuario.</p>
        <p class="text-justify sml mb-0"><b>Reclamo: </b>Disconformidad relacionada a los productos o servicios.</p>
        <p class="text-justify sml mb-0"><b>Queja: </b>Disconformidad no relacionada a los productos o servicios o malestar o descontento respecto a la atención al
          público.</p>
        <p class="text-justify sml mb-0">La formulación del reclamo no impide acudir a otras vías de solución de controversias ni es
          requisito previo para interponer una denuncia ante el INDECOPI.</p>
        <p class="text-justify sml">El proveedor deberá dar respuesta al reclamo en un plazo no mayor
          de treinta (30) días calendario, pudiendo ampliar el plazo hasta por treinta (30) días más, previa
          comunicación al consumidor.</p>
      </div>
    </div>
  </div>
</div>
{% endform %}

<style>
  textarea {
    min-width: 10px;
  }
  .sml {
   	font-size: 12px !important; 
  }
  @media screen and (max-width: 767px) {
    .cmdl, .cmdr {
      text-align: center;
    }
  }
  @media screen and (min-width: 768px) {
    .cmdl {
      text-align: left;
    }
    .cmdr {
      text-align: right;
    }
  }
</style>

<script>
  window.onload = function () {
    const uuid = Math.random().toString().slice(2,12);
    const uuidInput = document.querySelector('#uuid');
    const uuidSpan = document.querySelector('#uid');

    uuidSpan.textContent = uuid;
    uuidInput.value = uuid;
    var form = document.getElementById('contact_form');
    form.button.onclick = function () {
      for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].value === '' && form.elements[i].hasAttribute('required')) {
          alert('There are some required fields!');
          return false;
        }
      }
      form.submit();
    };
  };
</script>