{% extends 'base.html' %}
{% load widget_tweaks %}

{% block title %}Add Cliente IMMEX {% endblock title %}

{% block content %}
<form method="POST" action="." id="cliente-form">
    {% csrf_token %}
    <div class="form-group">
        <label for="{{form.RFC.name}}"><strong> {{form.RFC.label|capfirst}} </strong></label>
        {% render_field form.RFC id+="add" id+=form.RFC.name  placeholder=form.RFC.label class="form-control"  type="text" autocomplete="off" %}    
    </div>        
    <div class="form-group">
        <label for="{{form.Nombre.name}}"><strong> {{form.Nombre.label|capfirst}} </strong></label>
        {% render_field form.Nombre id+="add" id+=form.Nombre.name  placeholder=form.Nombre.label class="form-control"  type="text" autocomplete="off" %}    
    </div>
    
    <div class="form-group form-check">
        {% render_field form.Activo class+="form-checkbox"  type="checkbox"  %}
      <label class="form-check-label" for="{{form.Activo.label}}">Activo</label>
    </div>
    <div class="form-group">        
        {% render_field form.fecha_baja.label %}
        {% render_field form.fecha_baja placeholder=form.fecha_baja.label class+="form-control"  type="date" %} 
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
{% endblock content %}


{% block scripts %}
    <script>
        document.addEventListener("DOMContentLoaded", ()=>{
            console.log('edit_cliente.html',window.name)
            if(window.name ==='popupWin')
            {          
                
                document.querySelector("#cliente-form").addEventListener('submit',(event)=>{
                    event.preventDefault();
                    let form= event.target;
                    let url = `{% url 'ClientesIMMEX_Create' %}`;
                    let data = new FormData(form);
                    let xhr = new XMLHttpRequest();
                    xhr.open('POST',url);
                    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                    xhr.onreadystatechange = ()=>{
                        if(xhr.readyState===XMLHttpRequest.DONE){
                            if(xhr.status===200){
                                                          
                                let response = JSON.parse(xhr.responseText);
                                if(response.errors){
                                    alert(response.errors)
                                }else{
                                    window.opener.postMessage({data:response, windowName:'clientWindow'},window.location.origin);
                                    window.close();
                                }
                            }else{
                                console.error('Request error ',xhr.statusText);
                            }
                        }
                    };
                    xhr.send(data);
                    
                });
            }else{
                console.log('not popupWin')
            }
        })

        window.addEventListener("load", (event)=>{
            if(!id_Activo.checked){
                id_fecha_baja.setAttribute('required','')
            }else{
                id_fecha_baja.removeAttribute('requied')
            }
        })
    
        id_fecha_baja.addEventListener('click',(event)=>{
            
            if(id_Activo.checked){
                event.preventDefault()
                alert('El cliente esta activo necesita deseleccionar "Activo" y colocar fecha baja.')
                return
            }
        })
        id_Activo.addEventListener('click', (event)=>{
            
            if(id_Activo.checked){
                id_fecha_baja.value=''
                id_fecha_baja.removeAttribute('required')
                
            }else{
                id_fecha_baja.setAttribute('required','')
            }
        })
    </script>
{% endblock scripts %}