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

{% block title %}Editar Cliente{% endblock title %}
{% block titlePage %}RFC: {{object.RFC}}{% endblock titlePage %}

{% 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">
            <label for="{{form.email.name}}"><strong> {{form.email.label|capfirst}} </strong></label>
            {% render_field form.email id+="add" id+=form.email.name  placeholder=form.email.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", ()=>{
        if(window.name ==='popupWin')
        {            
            document.querySelector("#cliente-form").addEventListener('submit',(event)=>{
                event.preventDefault();
                let form= event.target;
                let url = `{% url 'add_cliente' %}`;
                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 %}