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

{% block contentbody %}

 
<div class="card">
    <div class="card-header bg-info">
        <h4 class="mb-0 text-white">Required Docs & Upload Status</h4>
    </div>
    <div class="form-body">
        <form method="POST">
            
            {% csrf_token %}
        <div class="card-body">
            <div class="row pt-3">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label">Name</label>
                        {{form.rdod_name|errorcss}}
                        <div class="invalid-feedback">        
                            {{form.rdod_name.errors.as_text}}
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label">Display Order</label>
                        {{form.rdod_display_order|errorcss}}
                        <div class="invalid-feedback">        
                            {{form.rdod_display_order.errors.as_text}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label">Document For</label>
                        {{form.rdod_document_for}}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label">Document Type</label>
                        {{form.rdod_document_type}}
                    </div>
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-md-3">
                    <div class="card">
                           <div class="form-check form-check-inline">
                            {{form.rdod_display_in_list}}   
                              <label class="form-check-label" for="inlineCheckbox1">Display in list</label>
                           </div>
                     </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                           <div class="form-check form-check-inline">
                            {{form.is_shareable}}   
                              <label class="form-check-label" for="inlineCheckbox1">Sharable Doc</label>
                           </div>
                     </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label">Countries</label>
                        {{form.rdod_countries}}
                     
                    </div>
                </div>
            </div>
            <hr>   
             <div class="container">
                <!--
                                <h1>TEST DESIGN</h1>
            {%for book_form in doc_status_form %}
            <div class="row pt-3">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="id_documentstatus-{{forloop.counter}}-doc_status_name">Doc status name:</label>
                        {{book_form.doc_status_name|errorcss}}
                        <div class="invalid-feedback">        
                            {{book_form.doc_status_name.errors.as_text}}
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="id_documentstatus-{{forloop.counter}}-doc_status_colord_code">Color code:</label>
                        <input class="form-control colorfield_field jscolor" data-jscolor="{hash:true,width:225,height:150,format:'hex',required:false,paletteCols:4,paletteHeight:28,palette:[]}" id="id_documentstatus-{{forloop.counter}}-doc_status_colord_code" name="documentstatus-{{forloop.counter}}-doc_status_colord_code" placeholder="#FF0001" type="color" value="">
                        <div class="invalid-feedback">        
                            {{book_form.rdod_display_order.errors.as_text}}
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-check form-check-inline">
                        <label for="id_documentstatus-{{forloop.counter}}-doc_default">Doc default:</label>
                            <input {% if book_form.doc_default.value %}checked{% endif %} id="id_documentstatus-{{forloop.counter}}-doc_default" name="documentstatus-{{forloop.counter}}-doc_default" type="checkbox">
                        <div class="invalid-feedback">        
                            {{book_form.doc_status_colord_code.errors.as_text}}
                        </div>
                    </div>
                </div> 
            </div>
            {%endfor%} 
            -->
            </div>             

            <h1>Document Status</h1>
            <!-- Testing START -->
            <div id="form_set">
                    <table class='no_error'>
                        {{doc_status_form.as_table}}
                    </table>
            </div>
            <input type="button" value="Add More" id="add_more">
            <div id="empty_form" style="display:none">
                <table class='no_error'>
                    {{ doc_status_form.empty_form.as_table }}
                </table>
            </div>
            <!-- TESTING END -->
            <!-- <table>
                {{doc_status_form.as_table}}
            </table> -->
            {% for hidden_field in doc_status_form.hidden_fields %}
                {{hidden_field.errors}}
                {{hidden_field}}
            {%endfor%}
            {% if form.errors %}
            {% for field in form %}
                {% for error in field.errors %} 
                    <div class="alert alert-danger">
                        <strong>{{ error|escape }}</strong>
                    </div>
                {% endfor %}
            {% endfor %}
            {% endif %}
            {% if doc_status_form.errors %}
            {% for field in doc_status_form %}
                {% for error in field.errors %} 
                    <div class="alert alert-danger">
                        <strong>{{ error|escape }}</strong>
                    </div>
                {% endfor %}
            {% endfor %}
            {% endif %}
            <input type="submit" value="Submit" class="btn btn-primary">
        </div>
        
        
        </form>
    </div>
</div>
    
{% endblock %}
{% block js%}
<script>
    $('#add_more').click(function() {
        var form_idx = $('#id_documentstatus-TOTAL_FORMS').val();
        console.log(form_idx);
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_documentstatus-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
</script>
{%endblock%}