@extends('AdminLte.template')

<!--Title-->
@section('title')
@php
    $title = 'B2B Payment Collection';
@endphp
{{$title}}
@endsection
<!--Title Close-->

<!--External CSS-->
@section('ExternalCss')
@parent
<style>
    .input {
        border: none;
        border-bottom: 1px solid #aaa;
    }
</style>
<link href="{{ asset("/bower/bootstrap-multiselect/bootstrap-multiselect.css")}}" rel="stylesheet" type="text/css" />
@endsection
<!--External CSS Close-->

@section('Content')
<!-- Your Page Content Here -->
<div class="table-responsive">
    
    <div class="col-md-12">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h3 style="margin-top:10px !important; margin-bottom:2px !important;" class="txtCenter">{{ $title }}</h3>
        </div>
        <div class="col-md-4">
        </div>
        <br />
        <table id="mainTable" class="table commonFontSize">
            <thead>
                <tr>
                    <th class="warning txtRight borderTopBottom">Sr.</th>
                    <th class="warning borderTopBottom">Customer Details</th>
                    <th class="warning borderTopBottom txtRight">Advance/Received</th>
                    <th class="warning borderTopBottom txtRight">Bill Amount</th>
                    <th class="warning borderTopBottom txtRight">Balance</th>
                    <th class="warning textRight borderTopBottom txtCenter">Action</th>
                </tr>
            </thead>
            <tbody>
                @php
                $i = 1;
                @endphp
                @foreach ($transactionData as $key =>$transaction)
                @php
                $receiptClass = '';
                $billClass = '';
                $balanceClass = '';
                $colorClass = '';
                $patOrCustName = '* '.$transaction->btob_customer_id." / ".$transaction->ph_cust_name;
                $billAmt = $transaction->bill_amount;
                $amtReceived = $transaction->amount_received;
                $balance = $amtReceived - $billAmt ;
                @endphp
                <tr class="{{ $colorClass }}">
                    <td class="danger txtRight borderTopBottomGray">{{ $i++ }}</td>
                    <td class="danger borderTopBottomGray">&nbsp;&nbsp;{{ $patOrCustName }}</td>
                    <td class="danger borderTopBottomGray txtRight">{{ number_format($amtReceived,2) }}</td>
                    <td class="danger borderTopBottomGray txtRight">{{ number_format($billAmt,2) }}</td>
                    <td class="danger borderTopBottomGray txtRight">{{ number_format($balance,2) }}</td>
                    <td class="danger borderTopBottomGray txtCenter">
                        <button type="button" data-toggle="modal" data-target="#balanceSheetModal" data-transaction='{{ json_encode($transaction)}}' class="btn btn-success btnBalanceSheet fontsize10 noPaddingTopBottom"><i class="fa fa-file-pdf-o"></i>View / Collect</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="col-md-4 col-md-offset-4">
            @php
            if(session()->get('messageType') == 'success'){
            $class = "alert-success";
            }else if(session()->get('messageType') == 'error'){
            $class = "alert-danger";
            }
            @endphp

            @if(session()->has('message'))
            <div class="alert {{$class}} alert-dismissible fade in col-sm-12">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <span class="fontsize16">{{ session()->get('message')}}
            </div>
            @endif
        </div>

    </div>
</div>
@endsection

<!--Bootstrap Modals-->
@section('BootstrapModals')
@include('Components/Bootstrap Modals/balance_sheet_modal')
@endsection
<!--Bootstrap Modals Close-->

<!--External JS-->
@section('ExternalJs')
<script src="{{ asset ("/js/paymentCollection.js?$releaseVersion") }}"></script>
<script src="{{ asset ("/js/onlinePaymentScript.js?$releaseVersion") }}"></script>

<script>
    $(document).ready(function() {
        $('#mainTable').DataTable();
    });
</script>
@endsection
<!--External JS Close-->