{% extends "django_msp_sms\base.html" %}
{% block title %}SMS por seleccion{% endblock %}

<!-- CSS Code -->
{% block style_css %}{% endblock %}

<!-- JavaScript Code -->
{% block js_code %}

<script>
	$("#id_clientes_text").attr('class','form-control');
</script>
<script type="text/javascript">
    $(function () {
      $('#id_clientes').select2();
  });
</script>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }} 
  <li class='active'>Mensaje a Clientes Específicos</li> 
{% endblock %}

{% block content %}

{% if not mensaje == '' %}
{% if multi %}

<div class="alert alert-info fade in">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>{{num_enviados}} Mensajes Enviados</strong><br>
	{%if num_no_enviados > 0%}<strong>{{num_no_enviados}} Telefonos Invalidos <a href="{{MEDIA_URL}}{{archivo}}" title="{{nom_archivo}}" id="archivo" download="{{nom_archivo}}">Descargar lista</a></strong><br>{%endif%}
	{% for cliente in clientes_con_telefono_invalido %}
	{{cliente}}<br>
	{% endfor %}
	<a href="/sms/personalizados/por_seleccion"> Enviar Otro </a>
</div>
{% else %}
<div class="alert alert-{% if estatus == 'sms_11' %}success{% else %}danger{% endif %} fade in">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>{{ mensaje }}</strong>
	<a href="/sms/personalizados/por_seleccion"> Enviar Otro </a>
</div>
{% endif %}
{% else %}

<div>

	<h3><b>Envío de Mensaje a Clientes Específicos </b>
	</h3>
</div>
<p class="text-info col-md-6 col-xs-12 cl-sm-12">
	El mensaje que escribas en la caja de texto se enviará 
	<strong>a los clientes de Microsip que selecciones y cuenten con teléfono celular válido registrado en <u>Teléfono 1</u></strong>.
	<small>para seleccionar los clientes escribe el nombre de cada cliente en la caja de texto y seleccionalo de la lista</small>
</p>
<br style="clear:both;">


{% if mensaje == 'Ningun Telefono es Valido' %}
<div class="alert alert-danger fade in">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>{{ mensajes }}</strong>
</div>
{% endif %}

<div align ="center" id="contenedor">
	<form method="POST" action="#" class="form-inline" enctype='multipart/form-data'>{% csrf_token %}
		{{ form.errors }}
		<div class="col-md-offset-3 col-md-3 col-xs-12 cl-sm-12">
			<label for="clientes_id">Clientes: </label>
			{{form.clientes}}<br>
		</div>
		<br style="clear:both">
		<br style="clear:both">
		<div class="col-md-offset-3 col-md-3 col-xs-12 cl-sm-12">
			{{ form.mensaje }}
		</div>
		<br style="clear:both">
		<br>
		<a href="#" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">
  		Enviar
		</a>
		<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
		  <div class="modal-dialog modal-sm">
		    <div class="modal-content">
		      <div class="modal-header">
          		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          		<h4 class="modal-title" id="mySmallModalLabel">Seguro que quieres enviar los mensajes?</h4>
        	  </div>
        	  <div class="modal-body">
        	  	<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				<button type="submit" class="btn btn-default" id="btn-enviar" onclick="this.form.submit();$(this).text('Enviando...');this.disabled=true;">Si, estoy seguro</button>
        	  </div>
		    </div>
		  </div>
		</div>
	</form>
</div>
{% endif %}
{% endblock %}