@extends('admin.layouts.master')

@section('title')
    Agent C/A Balances
@stop

@section('style')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />

    <style>
        table.dataTable tr.odd { background-color: #E5F7FC; }
        table.dataTable tr.even { background-color: white; }
    </style>
@stop

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span class="fa fa-user"></span> Agent C/A Balances
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-user"></i> Admin Panel</a></li>
                <li class="active">Agent C/A Balances</li>
            </ol>
        </section>
        <div style="margin: 20px;"></div>

        <!-- Main content -->
        <section class="content">

            <div class="page-header">
                <a href="{{route('reports.ca.agents')}}" class="btn btn-primary"><i class="fa fa-backward"></i> Back</a>
            </div>

            <div class="clearfix"></div>
            <table class="table table-hover" id="user_table" width="100%">
                <thead>
                <tr style="background: grey ;color:#fff; font-weight: bold">
                    <td>ID</td>
                    <td>Code</td>
                    <td>Agent Name</td>
                    <td>Team</td>
                    <td>Total C/A</td>
                    <td>Total Payments</td>
                    <td>Balance</td>
                </tr>
                </thead>
                @foreach($cas as $ca)
                    <tr>
                        <td width="8%">{{$ca->agent_id}}</td>
                        <td width="15%">{{strtoupper($ca->code)}}</td>
                        <td width="20%">{{strtoupper($ca->fullname)}}</td>
                        <td width="15%">{{strtoupper($ca->team_name)}}</td>
                        <td width="15%" style="text-align: right;">{{number_format($ca->ca_amount,2)}}</td>
                        <td width="15%" style="text-align: right;">{{number_format($ca->ttl_payment_adv,2)}}</td>
                        <td width="15%" style="text-align: right;">
                            @if ($ca->ca_bal < 0)
                                0.00
                            @else
                                {{number_format($ca->ca_bal, 2)}}
                            @endif
                        </td>
                    </tr>
                    @endforeach
            </table>

            @if(Session('info'))
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <div class="tem alert alert-success navbar-fixed-bottom"><span class="glyphicon glyphicon-ok-circle"></span> {{Session('info')}}</div>
                    </div>
                </div>
            @endif

        </section>

    </div>
@stop

@section('script')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            var oTable = $('#user_table').DataTable({
                "bDestroy": true,
                'rowCallback': function(row, data, index){
                if(data[5] <= 0){
                    $(row).find('td:eq(5)').css('background-color', '#EE827E');
                }
                else if(data[6] <= 0){
                    $(row).find('td:eq(6)').css('background-color', '#7BB97F');
                }
                else {
                    $(row).find('td:eq(5)').css('background-color', '#7BB97F');
                    //$(row).find('td:eq(6)').css('background-color', '#7BB97F');
                }
                /*if(data[2].toUpperCase() == 'EE'){
                    $(row).find('td:eq(2)').css('color', 'blue');
                }*/
              }
            });
        });
    </script>
@stop