@extends('printlayout')
@section('content')
    <div class="row invoice-box">
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 ">
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 text-center ">
                <h1 style="font-size:26px;">
                    {{ __('sitelabel.PostDatedCustomerChequeReport') }}
                </h1>
            </div>
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 text-center ">
                <span style="font-size:16px; padding:0 10px;"><strong>{{ __('sitelabel.StartDate') }}: </strong></span>
                <span style="font-size:16px; padding:0 10px;">
                    {{ \Carbon\Carbon::parse(request('txtStartDate'))->format('d-F-Y') }}
                </span>
                <span style="font-size:16px; padding:0 10px;"><strong>{{ __('sitelabel.EndDate') }}: </strong></span>
                <span style="font-size:16px; padding:0 10px;">
                    {{ \Carbon\Carbon::parse(request('txtEndDate'))->format('d-F-Y') }}
                </span>
            </div>
        </div>
    </div>

    <div class="row table-row">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="text-center">{{ __('sitelabel.SerialNumber') }}</th>
                    <th class="text-left">{{ __('sitelabel.Customer') }}</th>
                    <th class="text-left">{{ __('sitelabel.PaymentDate') }}</th>
                    <th class="text-left">{{ __('sitelabel.Bank') }}</th>
                    <th class="text-left">{{ __('sitelabel.Branch') }}</th>
                    <th class="text-left">{{ __('sitelabel.ChequeNO') }}</th>
                    <th class="text-left">{{ __('sitelabel.ChequeDate') }}</th>
                    <th class="text-left">{{ __('sitelabel.ChequeCashDate') }}</th>
                    <th class="text-right">{{ __('sitelabel.Amount') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($customerpayment as $payment)
                    <tr>
                        <th class="text-center">{{ $loop->iteration }}</td>
                        <td>{{ $payment->Name }}</td>
                        <td>{{ $payment->PaymentDate }}</td>
                        <td>{{ $payment->BankName }}</td>
                        <td>{{ $payment->BranchName }}</td>
                        <td>{{ $payment->ChkNo }}</td>
                        <td>{{ $payment->ChkDate }}</td>
                        <td>{{ $payment->ChkCashDate }}</td>
                        <td style="text-align: right">{{ number_format($payment->Amount, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="8" style="text-align: right"><strong>{{ __('sitelabel.GrandTotal') }}</strong></td>
                    <td style="text-align: right"><strong><span class="grandtotal">0.00</span></strong></td>
                </tr>
            </tfoot>
        </table>
    </div>

    @include('sign-subview.signandbuttons')
@endsection
@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get all the amount cells from the table
            const amountCells = document.querySelectorAll('tbody tr td:last-child');
            let grandTotal = 0;

            // Loop through each cell and calculate the sum
            amountCells.forEach(cell => {
                const amount = parseFloat(cell.textContent.replace(/,/g, '')) ||
                    0; // Remove commas and parse as float
                grandTotal += amount;
            });

            // Format the grand total with commas
            const formattedTotal = new Intl.NumberFormat('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(grandTotal);

            // Update the grand total in the tfoot
            const grandTotalElement = document.querySelector('tfoot .grandtotal');
            if (grandTotalElement) {
                grandTotalElement.textContent = formattedTotal;
            }
        });
    </script>
@endsection