{% extends 'base.html' %} 
{% load static %} 
{% block contenido %}

<div class="container-fluid content-bg" style="padding: 0px 30px; background-color: rgba(242,242,242,0.5);">
  <div class="row">
<nav class="bcrumbs">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="https://remate.continua.com.mx/" class="breadcrumb">Inicio</a>
      <a href="{% url 'Whatsapp_Create' %}" class="breadcrumb">WhatsApp</a>
      <a href="#" class="breadcrumb">Editar Plantilla</a>
    </div>
  </div>
</nav>
</div>
</div>  

<div class="container">
  <form action="{% url 'Whatsapp_Edit' id=plantilla.id %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row s12 center">
      <h4><br>Editar plantilla de WhatsApp</h4>
    </div>
    <div class="row">
      <input
        name="id"
        id="id"
        value="{{ plantilla.id }}"
        hidden="true"
        required="true"
        type="text"
      />

      <div class="input-field col s12">
        <input
          name="titulo"
          id="titulo"
          value="{{ plantilla.titulo }}"
          required="true"
          type="text"
          disabled
        />
        <label for="titulo">Título</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s8">
        <textarea
          class="materialize-textarea"
          value="{{plantilla.texto}}"
          name="texto"
          id="texto"
          required="true"
          class="validate"
        >{{ plantilla.texto }}</textarea
        >
        <label for="texto">Mensaje </label>
      </div>
    <div class="input-field col s4">
    <select id="insertcampo" onchange="insertarcampo()">
      <optgroup label="Campos Estandar">
        <option value="" disabled selected>Seleccione Campo</option>
        <option value="{NOMBRE}">Nombre</option>
        <option value="{APELLIDOS}">Apellidos</option>
          <option value="{TELEFONO}">Telefono</option>
        <option value="{EMAIL}">Email</option>
      </optgroup>
      <optgroup label="Campos Personalizados">
        <option value="{EMPRESA}">Empresa</option>
        <option value="{DIRECCION}">Dirección</option>
        <option value="{NOTAS}">Notas</option>

      </optgroup>
    </select>
    <label>Insertar Campo</label>
  </div>
    </div>
    <div class="row center" {% if plantilla.has_image%} {% else %}hidden{%endif%} >
       <div class="file-field input-field s12"  >
      <div class="btn">
        <span>Imagen</span>
        <input type="file" id='ufile' name='ufile' accept="image/*"  >
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" id='tfile' name='tfile' type="text">
      </div>
    </div>
        </div>

    <div class="row center">
    <div class="col s4"  {% if plantilla.has_image%} {% else %}hidden{%endif%}>
    <button type="button" href="#modalimg" class="btn light-blue darken-4 modal-trigger" href="/media/{{plantilla.img_file}}">Ver Imagen Actual</button>
    </div>
        <div class="col s4"  {% if plantilla.boton_tel%} {% else %}hidden{%endif%}>
    <button type="button" class="btn light-blue darken-4" onclick="M.toast({html: 'Llamara a: {{plantilla.boton_tel}}'})" >{{plantilla.boton_tel_txt}}</button>
    </div>

        <div class="col s4"  {% if plantilla.boton_url%} {% else %}hidden{%endif%}>
    <button type="button" class="btn light-blue darken-4" onclick="M.toast({html: 'Visitará a: {{plantilla.boton_url}}'})" >{{plantilla.boton_url_txt}}</button>
    </div>

    </div>
  
    <div class="row center">
      <div class="col s6">
        <button
          class="btn waves-effect waves-light"
          type="submit"
          name="action"
        >
          Guardar
          <i class="material-icons right">save</i>
        </button>
      </div>

      <div class="col s6">
        <button
          class="btn waves-effect waves-light"
          type="button"
          onclick="limpiar();"
        >
          Limpiar
          <i class="material-icons right">undo</i>
        </button>
      </div>
    </div>
  </form>
   <div id="modalimg" class="modal center">
    <div class="modal-content">
      <h4>Imagen Actual</h4>
      
      <img src="/media/{{plantilla.img_file}}"/>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cerrar</a>
    </div>
  </div>
          
</div>

{% endblock %} 
{% block jscripts %}
<script>
  function insertarcampo() {
    $("select").formSelect();
    let valores = $("#insertcampo").formSelect("getSelectedValues");
    let valor = valores[0];
    console.log("valores:", valor);
    let mytexto = $("#texto").val();
    $("#texto").val(mytexto + valor);

    M.textareaAutoResize($("#texto"));
    $("#insertcampo").val("");

    $("#insertcampo").formSelect();
  }

  function limpiar() {
    $("#texto").val("");
    M.textareaAutoResize($("#texto"));
  }
</script>
{% endblock %}