<form id="frm-beneficioafiliado-{{ hash_vista }}" >

    <div class="box">

    <div class="box-header with-border">

    <h3 class="box-title">Formulario de Beneficios de Afiliados</h3>

    <div class="box-tools pull-right">

        {% if BeneficioAfiliado %}

            {{ boton("guardar","guardarCambiosBeneficioAfiliados")}}

        {% else %}

            {{ boton("guardar","guardarNuevoBeneficioAfiliados")}}

        {% endif %}

        {{ boton("cancelar", null, "cancelarFormularioBenefioAfiliado()")}}

        {{ boton("resetear", null, "$('#beneficioNombre')[0].focus();")}}  

    </div>

    <!-- /.box-tools -->

    </div>

    <!-- /.box-header -->

    <div class="box-body">

    <div class="row">

        <div class="col-md-12" id="">

            <div class="form-group">

                <label for="beneficioNombre">Nombre Beneficio</label>

                <input type="text" class="form-control uppercase" name="beneficioNOMBRE" id="beneficioNOMBRE"  required

                    value="{{ BeneficioAfiliado.beneficioTITULO }}" placeholder="Titulo del Beneficios"  />

            </div>

        </div>

    </div>

    <div class="row">

        <div class="col-md-6" >

            <div class="form-group">

                <label for="beneficioDESCRIPCION">Descripción del Beneficio</label>

                <textarea rows="10" cols="80" class="wysiwyg form-control " placeholder="Descripción del beneficio" 

                    name="beneficioDESCRIPCION" id="beneficioDESCRIPCION-{{ hash_vista }}" 

                    >{{ BeneficioAfiliado.beneficioDESCRIPCION }}</textarea>

            </div>

            <div class="thumbnail">

                <img src="{% if BeneficioAfiliado.beneficioIMGMIN %}{{ BeneficioAfiliado.beneficioIMGMIN }}{% else %}http://via.placeholder.com/300x150/FEDCBA/000000/?text=Beneficios+300x150{% endif %}" alt="Miniatura del Imagen Promocional"  class="img-thumbnail" style="width:100%" />

                <div class="caption">

                    <label for="beneficioMin">Imagen Miniatura</label>

                    <input accept="image/*" class="file beneficioFile" data-show-upload="false" data-show-caption="true" 

                        type="file" id="beneficioMin"  name='beneficioMin' {% if not BeneficioAfiliado %}required{% endif %}  />           

                </div>

            </div>

            <div class="form-group">

                <label for="beneficioLINK">Link de Beneficio</label>

                <input type="url" class="form-control" name="beneficioLINK" id="beneficioLINK"

                    value="{{ BeneficioAfiliado.beneficioLINK }}" placeholder="Link de Beneficio" >

            </div>

            <div class="form-group">

                <label>Estado:</label>

            </div>

            <div class="form-group">

                <label class="col-sm-6">

                    <input type="radio" name="beneficioEstado" id="beneficioActivado" class="flat-red" required

                        {% if BeneficioAfiliado.beneficioESTADO == 'ACTIVO'%}checked{% endif %} value="ACTIVO" />

                    ACTIVADO

                </label>

                <label class="col-sm-6">

                    <input type="radio" name="beneficioEstado" id="beneficioSuspendido" class="flat-red" required

                        {% if BeneficioAfiliado.beneficioESTADO == 'SUSPENDIDO' %}checked{% endif %} value="SUSPENDIDO" /> 

                    SUSPENDIDO

                </label>

            </div>

        </div>

        <div class="col-md-6" >

            <div class="thumbnail">

                <img src="{% if BeneficioAfiliado.beneficioIMGMAX %}{{ BeneficioAfiliado.beneficioIMGMAX }}{% else %}http://via.placeholder.com/300x420/FEDCBA/000000/?text=Beneficios+300x420{% endif %}" alt="Imagen Promocional Completa"  class="img-thumbnail" style="width:100%" />

                <div class="caption">

                    <label for="beneficioMax">Imagen Completa</label>

                    <input accept="image/*" class="file beneficioFile" data-show-upload="false" data-show-caption="true" 

                        type="file" id="beneficioMax"  name='beneficioMax' {% if not BeneficioAfiliado %}required{% endif %} />           

                </div>

            </div>

        </div>

    </div>

    </div>

    </div>

    <input type="hidden" name="beneficioID" value="{{BeneficioAfiliado.beneficioID}}" />

</form>

<script>

    $(document).ready(function () {

        $("#frm-beneficioafiliado-{{hash_vista}}").submit(function(){

             ejecutarOperacionArchivo(

                "afiliados","AfiliadosBeneficios","guardarDatosBeneficio",

                crearFormData("frm-beneficioafiliado-{{ hash_vista }}"),

                function(beneficio){

                    cerrarTabContenedor("frm-beneficioafiliado-{{hash_vista}}");

                    cargarVista('afiliados','afiliadosBeneficios','mostrarFormularioEditar', 'beneficioID='+beneficio.beneficioID );

                    cargarTablaBeneficios(); 

                }

            );

        });  

        

        $("#beneficioDESCRIPCION-{{ hash_vista }}").wysihtml5();

       

       $(".beneficioFile").fileinput({

           previewFileType: "image",

            maxFileSize: 512,

            // slugCallback: function (filename) {

            //     return filename.replace('(', '_').replace(']', '_');

            // }

        });

    });

    

    function cancelarFormularioBenefioAfiliado(){

        cerrarTabContenedor("frm-beneficioafiliado-{{ hash_vista }}");

    }

</script>