{% extends 'templates/callluge/site_layout.html' %}
{% block content %}

<div class="widget-box no-minht">
    <div class="widget-content no-padding add-sear-pos-slide">
        <div class="col-md-12 col-sm-12">            
            <div class="btn-wrap" style="display: inline-block;">
                <div class="add-new slide-toggle-icon">
                    <a href="javascript:void(0);" class="button ripple hvr-sweep-to-right"><i class="icon icon-plus"></i>Add New Agency</a>
                </div>
            </div>
            {% if messages %}
                {% for message in messages %}
                    {% if message.tags == 'success' %}
                        <div class="msg_div {{ message.tags }}"><i class="glyphicon glyphicon-ok-sign"></i>{{ message }}</div>
                    {% elif message.tags == 'error' %}
                        <div class="msg_div {{ message.tags }}"><i class="glyphicon glyphicon-exclamation-sign"></i>{{ message }}</div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>

        <div class="col-md-12 col-sm-12">
            <div class="add-grp-cont" style="display: none;">
                <div class="up-arr"></div>
                <div id="thedialog"> <!-- title="Add New Agency"> -->
                    <form class="inner-form" method="POST" action="/userauth/add-agency/" id="addagency" data-toggle="validator" role="form">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="">Agency Name*</label>             
                                        <input tabindex="1" maxlength="60" class="form-input" type="text" name="company_name" id="company_name" placeholder="Agency Name" data-error="Please enter Agency Name." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="agency_name">Contact Person Name*</label>
                                        <input tabindex="2" maxlength="60" class="form-input" type="text" placeholder="Agency Person Name" name="name" id="agency_name" data-error="Please enter Contact Person Name." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="ag_email">Contact Email Address*</label>
                                        <input tabindex="3" maxlength="120" class="form-input" type="email" pattern="^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$" name="company_email" id="ag_email" placeholder="example@domain.com" value="" required data-error="Please enter Email.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="phone_num">Phone Number*</label>
                                        <input tabindex="4" class="form-input" type="text" pattern="^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$" maxlength="15" name="phone_num" id="phone_num" placeholder="Agency Phone Number" value="" data-error="Please enter Phone Number." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>            
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="site_url">Site URL*</label>
                                        <input tabindex="5" maxlength="150" class="form-input" type="url" name="company_url" id="site_url" placeholder="http(s)://www.domain.com/..." value="" required data-error="Please enter Site URL.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="">Address*</label>
                                        <textarea tabindex="6" class="form-text" rows="2"  id="address" name="address" placeholder="Agency Address" required data-error="Please enter Address.">{{profiledetails.address}}</textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="ag_pwd">Password*</label>
                                        <input tabindex="7" maxlength="50" class="form-input" type="password" name="pwd" id="ag_pwd" value="" placeholder="Agency Password" required data-error="Please enter Password.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="ag_confpwd">Confirm password*</label>
                                        <input tabindex="8" maxlength="50" class="form-input" type="password" name="confpwd" id="ag_confpwd" data-match="#ag_pwd" value="" placeholder="Confirm Password" data-match-error="Your Password and Confirmation Password do not match." data-error="Your Password and Confirmation Password do not match." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div> 
                        </div>
                        <!-- <div class="row">    
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="profile_status">Status*</label>
                                        <div class="sign-radio">
                                            <div class="custom-checkbox">
                                                <input  tabindex="9" type="radio" name="profile_status" id="profile_status1" value="1" checked="checked" />
                                                <label for="profile_status1">Active</label>
                                            </div>
                                            <div class="custom-checkbox">
                                                <input tabindex="10" type="radio" name="profile_status" id="profile_status2" value="2" />
                                                <label for="profile_status2">Inactive</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                         <input type="hidden" name="profile_status" id="profile_status1" value="1" checked="checked" />
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group no-margin">
                                    <div class="input-group no-padding">
                                        <!-- <label for="">&nbsp;</label> -->
                                        <div class="btn-wrap">
                                            <!-- <input type="submit" value="Submit" name="submit" id="submit" class="button hvr-sweep-to-right ripple"> -->
                                            <button tabindex="9" type="submit" name="submit" id="submit" class="hvr-sweep-to-right button ripple primary">Submit</button>
                                            <button tabindex="10" type="button" class="hvr-sweep-to-right button cancel-light ripple">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                       
                        <div class="g-signin2" data-onsuccess="onSignIn"></div>
                    </form>
                </div>
            </div>
        </div>

        <table id="data-table" class="cl-table" width="100%" cellpadding="0" cellspacing="0">
            <thead> 
                <tr>
                    <th width="45%">Agency Name</th>
                    <th width="20%">No. of Clients</th>
                    <th width="15%" class="no-sort">Status</th>
                    <th width="20%" class="no-sort">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for agency in data %}
                <tr>
                    <td width="45%">{{agency.name}}</td>
                    <td width="20%">{{agency.cnt_id}}</td>
                    <td width="15%">
                        <div class="status-act-ina">
                            {% if agency.status == 1 %}
                            <div class="status-act-ina blue">
                                <i class="icon-tick"></i>
                            </div>
                            {% else %}
                             <div class="status-act-ina grey">
                                <i class="icon-minus"></i> 
                            </div> 
                            {% endif %}
                        </div>
                    </td>
                    <td width="20%">
                        <div class="action">
                            
                            <!-- <a tooltip="Package" flow="left" href="/calls/pricing/{{agency.id}}/"><i class="icon-cog"></i></a> -->
                            <a tooltip="Edit" flow="left" href="/userauth/editagency/{{agency.id}}/"><i class="icon-edit"></i></a>
                            <a tooltip="Login" flow="left" href="/userauth/autologin/{{agency.id}}/"><i class="icon-login"></i></a>
                        </div>
                    
                    </td>
                </tr>
                {% endfor %}  
            </tbody>
        </table>
    </div>  
</div>
<script>
$(document).ready(function() {
     $('#addagency').validator().on('submit', function (e) {
        if (e.isDefaultPrevented()) {
            // handle the invalid form...
        } else {
            $('.overlay').show();
        }
    });
    $('#data-table').DataTable({
        processing: true,
        language: { 
            search: "",
            searchPlaceholder: "Search by Agency Name",
            "processing": "<img src='../../static_/images/testinggif.gif'/>", 
            "zeroRecords": "No records found!",
            "info": "Showing _START_ to _END_ of total _TOTAL_ record(s)",
            "infoEmpty": "No records available!",
            paginate: {
                next: '&nbsp;', // space or ' '
                previous: '&nbsp;' // space or ' ' 
            } 
        },
        fnDrawCallback: function() {
            var $paginate = this.siblings('.dataTables_paginate');

            if (this.api().data().length <= this.fnSettings()._iDisplayLength){
                $paginate.hide();
            }
            else{
                $paginate.show();
            }
        },
        "order": [[ 0, "asc" ]],
        "columnDefs": [
            { 
                "targets"  : 'no-sort', 
                "orderable": false
            },
        ]
    });

// =======================
// add new agency button
    $(".add-new").click(function(){
        $(".add-grp-cont").slideToggle('slow');
        $(this).find('i').toggleClass('minus');
    });

    $(".add-grp-cont .cancel-light").click(function(){
        $(".add-grp-cont").slideUp('slow');
        $(".add-new.slide-toggle-icon").find('i').removeClass('minus');
    });
// add new agency button ends
// ========================
    
    //active inactive script
        $('.clg-select').on('click', function(){
            $(this).toggleClass('active');
        })

        $('.clg-select ul li').on('click', function() {
            var li_text = $(this).text();
            var li_class = $(this).attr('class');
            var sel_btn = $(this).parent().siblings('label').find('button');
    
            $(this).siblings().removeClass('active');        
            $(this).addClass('active');
            sel_btn.text(li_text);
    
            if(sel_btn.hasClass('blue')){
                sel_btn.removeClass('blue');
            }
            if(sel_btn.hasClass('gray')){
                sel_btn.removeClass('gray');
            }

            sel_btn.addClass(li_class);
        })
    // ===============================
});
</script>

{% endblock %}