{% extends 'base.html' %}

{% load rmtmgmt_tags %}
{% load rolemgmt_tags %}

{% block midpart %}

<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">

<div class="row">
    <div class="col-xs-12">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title"> <b>{{ title }}</b></h3>
            </div>
            <div id="id_div_admin_dashboard">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Company Name</th>
                            <th>Account Type</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Days Left</th>
                            <th>Contract Details</th>
                            <th>Change History</th>
                            <th>Payment Details</th>
                            <th>Resume Bank Status</th>
                            <th>Company Account Link</th>
                            <!--<th>Online Reports</th>-->
                        </tr>
                    </thead>
                <tbody>
                    {% for client_account_detail in client_account_details %}
                        <tr>
                            <td><a href="/edit_company_details/{{client_account_detail.client.id }}/" style="cursor:pointer;">{{ client_account_detail.client.client_name }}</a></td>
                            <td>{{ client_account_detail.get_account_type_display }}</td>
                            <td>{{ client_account_detail.start_date }}</td>
                            <td>{{ client_account_detail.end_date }}</td>
                            <td>{{ client_account_detail.days_left }}</td>
                            <td>
                                {% for feature in client_account_detail.contract_features.all %}
                                    {{ feature.feature_name }},
                                {% endfor %}
                            </td>
                            <td></td>
                            <td></td>
                            <td><a onclick="get_resume_bank_status({{ client_account_detail.client.id }});"
                            style="cursor:pointer;">{{ client_account_detail.credit_limit }}</a></td>
                            <td><a href="/dashboard/?company_id={{ client_account_detail.client.id }}">Dashboard</a></td>
                            <!--<td><a href="/reports/?company_id={{ client_account_detail.client.id }}">Reports Details</a></td>-->
                        </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
</div>

<!-- resume bank status modal -->
<div class="modal fade" id="id_modal_resume_bank_status" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close modal_resume_bank_status_close">&times;</button>
                <h4 class="modal-title id_modal_title_resume_bank_status"><b></b></h4>
            </div>
            <div class="modal-body" id="id_modal_body_resume_bank_status">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default modal_resume_bank_status_close">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- end of resume bank status modal -->
<!-- jQuery 3 -->
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="/static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>

<script>
    $(function () {
        $('#example1').DataTable();
    })

    function get_resume_bank_status(client_id)
    {
        $.ajax({
            url : "/get_resume_bank_status/",
            type : "POST",
            dataType: "json",
            async: false,
            data : {
                client_id : client_id,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json)
            {
                $("#id_modal_body_resume_bank_status").html(json.response);
                $('#id_table_resume_bank_status').DataTable();
                $('.dataTables_filter').parent().addClass('pull-left');
                $('.dataTables_length').parent().addClass('pull-right');
                $('.dataTables_length').addClass('pull-right');
                $('.dataTables_filter').addClass('pull-left');
                if ( $(window).width() > 739)
                {
                    $('[type=search]').attr('size','50%');
                }
                else
                {
                    $('[type=search]').attr('size','25%');
                }
                $("#id_modal_resume_bank_status").modal("show");
            },
            error : function(xhr,errmsg,err)
            {
                alert(xhr.status + ": " + xhr.responseText);
            }
        });
    }

    $(".modal_resume_bank_status_close").click(function(){
        $("#id_modal_resume_bank_status").modal('hide');
    });

</script>

{% endblock midpart %}