@extends('admin.layouts.master')

@section('title')
    Agent Collectibles
@stop

@section('style')
    <style>
    /*filter on top*/
        tfoot {
            display: table-header-group;
        }
        thead {
            display: table-row-group;
        }
        select.fstyle { width: 100px }
    </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-building"></span> Agent Collectibles
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-building"></i> Admin Panel</a></li>
                <li class="active">Agent Collectibles</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content" style=" padding-bottom: 10%;">
            <div class="page-header">
                <a href="{{route('dashboard')}}" class="btn btn-primary"><i class="fa fa-backward"></i> Back</a>
            </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>Developer</td>
                    <td>Project</td>
                    <td>Client</td>
                    <td>Blk / Lot</td>
                    <td>Contract Amount</td>
                    <td>Agent Name</td>
                    <td>Receivable Amount</td>
                    <td>Total Received</td>
                    <td>Balance</td>
                </tr>
                </thead>
                @foreach($balances as $balance)
                    <tr>
                        <td>{{$balance->rcvd_id}}</td>
                        <td>{{$balance->dev_name}}</td>
                        <td>{{$balance->prj_name}}</td>
                        <td>{{$balance->client_name}}</td>
                        <td>{{$balance->blk}} / {{$balance->lot}}</td>
                        <td style="text-align: right">{{number_format($balance->contract_amount,2)}}</td>
                        <td>{{$balance->agent_name}}</td>
                        <td style="text-align: right">
                            {{number_format($balance->agent_com_rate,2)}}
                        </td>
                        <td style="text-align: right">
                            {{number_format($balance->ttl_release,2)}}
                        </td>
                        <td style="text-align: right">
                            @if ($balance->rem_balance < 0)
                                ({{number_format($balance->rem_balance * -1,2)}})
                            @else
                                {{number_format($balance->rem_balance,2)}}
                            @endif
                        </td>
                    </tr>
                    @endforeach
                    <tfoot>
                        <tr>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                    </tfoot>
            </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>
        $(document).ready(function() {
            $('#user_table').DataTable( {
                "bDestroy": true,
                "order": [[ 0, "desc" ]],
                initComplete: function () {
                    this.api().columns([1,2,3,6]).every( function () {
                        var column = this;
                        var select = $('<select class="fstyle" id="lnOpt"><option value=""></option></p>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                }
            });
        });
        /*$("#btnAdd").on("click", function(){
            $('#addModal').modal('toggle');
        });*/
    </script>
@stop