@extends('layouts.app')

@section('content')

    <h1 class="page-header">Customers SOA</h1>
    <div class="row">
        <div class="col-md-3">
            @include('customer.menu')
        </div>

        <div class="col-md-9">
            <div class="card mb-3 border-0">
                @include('customer.tab')
                <div class="card-body border-bottom p-4">
					<div class="row mb-4">
						<div id="print-area">
							<span class="float-end hidden-print">
{{--                            <a href="javascript:;" class="btn btn-sm btn-white mb-10px d-print-none"><i class="fa fa-file-pdf t-plus-1 text-danger fa-fw fa-lg"></i> Export as PDF</a>--}}
							<a href="javascript:;" onclick="window.print()" class="btn btn-sm btn-white mb-10px d-print-none" data-cf-modified-b41406c8acaf8dc0f643da7c-><i class="fa fa-print t-plus-1 fa-fw fa-lg"></i> Print</a>
							</span>
							<h2 class="fw-bolder"><img src="{{ asset('img/jlg-metro-400x200.png') }}" class="me-2" alt="" width="80" height="60">JLG Metro Sdn. Bhd</h2>
							<center><strong><p style="font-size: 14px;">STATEMENT OF ACCOUNT</p></strong></center>

							<table class="table table-borderless">
								<tr>
									<td class="col-md-9 text-start"><strong>{{ old('name', $customer->name) }}</strong></td>
									<td class="text-start">Date</td>
									<td style="text-align: center;">:</td>
									<td class="text-end">{{now()->format('d/m/Y')}}</td>
								</tr>
								<tr>
									<td class="col-md-9 text-start">{{ old('address', $customer?->cardHolder?->address ?? '') }}</td>
									<td class="text-start">Acc No.</td>
									<td style="text-align: center;">:</td>
									<td class="text-end">{{ $customer?->cardHolder->account_no ?? '' }}</td>
								</tr>
								<tr>
									<td class="col-md-9 text-start">{{ $customer->ic_no ?? $customer?->cardHolder?->nric ?? '' }}</td>
									<td class="text-start">Currency</td>
									<td style="text-align: center;">:</td>
									<td class="text-end">RM</td>
								</tr>
								<tr>
									<td class="col-md-9 text-start">@if($customer->user_type == 1){{ 'Individual' }} @endif
									@if($customer->user_type == 2) {{ 'Corporate' }} @endif</td>
									<td class="text-start">Page</td>
									<td style="text-align: center;">:</td>
									<td class="text-end">1 of 1</td>
								</tr>
								<tr>
									<td class="col-md-9 text-start">&nbsp;</td>
									<td class="text-start">Term</td>
									<td style="text-align: center;">:</td>
									<td class="text-end">Season</td>
								</tr>
								<tr>
									<td class="text-start"> Attn. : {{ $customer->email ?? $customer?->cardHolder?->email }}</td>
									<td class="text-start">Deposit (RM)</td>
									<td style="text-align: center;">:</td>
									<td class="text-end">-</td>
								</tr>
							</table>

							</br>
								<table class="table border">
									<thead>
										<tr>
											<th>Date</th>
											<th>Invoice No. / Description</th>
											<th class="text-end">Dt.</th>
											<th class="text-end">Ct.</th>
											<th class="text-end">Balance</th>
										</tr>
									</thead>
									<tbody class="table-group-divider">
										<!--<tr>
											<td><strong>{{now()->format('d/m/Y')}}</strong></td>
											<td><strong>Total amount invoice</strong></th>
											<td><strong>{{ number_format($total, 2) }}</strong></td>
											<td></td>
											<td><strong>{{ number_format($total, 2) }}</strong></td>
										</tr>-->
										@php
											$balance = $total;
											$balanceOut = 0;
											$balanceOut2 = 0;
											$balance_pending = 1;
											
										@endphp
								
										@forelse ($payments as $payment)

											@php
												$amount = floatval($payment->amount ?? 0);
												$balanceNote = $payment->exact_amount;																							
												
												if ($payment->status->label() == 'Paid') {
													$balance -= $amount;	
													$balanceOut = $payment->exact_amount + $balanceOut2;
												}
												
											if($payment->status->label() == 'Pending' && $balance_pending != 0){												
												if ($balanceOut2 == 0) {
													// First pending invoice
													$balanceOut2 = $payment->exact_amount;
												} else {
													// Subsequent pending invoices
													$balanceOut2 += $payment->exact_amount;
												}												
											}
											
											if($balance_pending == 0){
												$balanceOut2 = $payment->exact_amount;
											}
										
											@endphp
											
										<tr>
											<td>{{ $payment->invoiced_at?->format('d/m/Y') ?? '-' }}</td>
											<td>@if($payment->status->label() == 'Pending')<strong>{{ $payment->invoice_no ?? '' }} - {{ $payment->invoiced_at?->copy()->addMonth()->format('m/Y') ?? '' }} </strong> @endif
											@if($payment->status->label() == 'Paid'){{ $payment->invoice_no ?? '' }} - {{ $payment->invoiced_at?->copy()->addMonth()->format('m/Y') ?? '' }} @endif</td>
											<td class="text-end"></td>
											<td class="text-end">@if($payment->status->label() == 'Pending')<strong>{{ number_format($payment->exact_amount ?? '-', 2) }}</strong> @endif
											@if($payment->status->label() == 'Paid'){{ number_format($payment->exact_amount ?? '-', 2) }} @endif
											</td>
											<td class="text-end">@if($payment->status->label() == 'Paid'){{ number_format($balanceOut, 2) }} @endif
											@if($payment->status->label() == 'Pending'){{ number_format($balanceOut2, 2) }}@endif</td>
										</tr>
										
										@foreach ($payment->items->reject(fn($i)=>is_null($i->credit_debit_note_id)) as $item)
											@php												
												$balanceNote += match($item->type) {
													App\Models\Traits\Enum\TransactionType::CREDIT => -$item->amount,
													App\Models\Traits\Enum\TransactionType::DEBIT  => $item->amount,
													default                                        => 0,
												};
												if($balanceNote == 0){
													$balance_pending = 0;
												}
											@endphp
										<tr>
											<td>{{ $item->created_at?->format('d/m/Y') ?? '-' }}</td>
											<td>{{ str_replace('Metro-INVN-', 'Metro-' . ($item->type->value ?? '') . '-', $payment->invoice_no ?? '') }} - {{ $payment->invoiced_at?->copy()->addMonth()->format('m/Y') ?? '' }}</td>
											<td class="text-end">@if ($item->type->value === 'CN'){{ number_format($item->amount ?? '-', 2) }}@endif</td>
											<td class="text-end">@if ($item->type->value === 'DN'){{ number_format($item->amount ?? '-', 2) }}@endif</td>											
											<td class="text-end">{{ number_format($balanceNote, 2) }}</td>
										</tr>										
										@endforeach
										@php if($payment->status->label() == 'Paid'){
										$balanceOut	-= $payment->exact_amount;						
										@endphp
										<tr>
											<td>{{ $payment->received_time?->format('d/m/Y') ?? '-' }}</td>
											<td>{{ $payment->invoice_no ?? '' }}@if($payment->status->label() == 'Paid') - Payment @endif</td>
											<td class="text-end">@if($payment->status->label() == 'Paid'){{ number_format($balanceNote, 2) }} @endif</td>
											<td class="text-end">@if($payment->status->label() == 'Pending'){{ $payment->exact_amount ?? '-' }}@endif</td>
											<td class="text-end">@if($payment->status->label() == 'Paid') {{ number_format($balanceOut, 2) }} @endif</td>
										</tr>
										@php } @endphp
										
										@empty
										<tr>
											<td class="text-center text-muted" colspan="7">No record found</td>
										</tr>	
																		
										@endforelse
												
										<tr>
											<td><strong>{{now()->format('d/m/Y')}}</strong></td>
											<td><strong>Balance b/f</strong></th>											
											<td></td>
											<td class="text-end"><strong>{{ number_format($balance, 2) }}</strong></td>
											<td class="text-end"><strong>{{ number_format($balance, 2) }}</strong></td>
										</tr>
										
										<tr>
											<td colspan="3" style="border: none;"><strong>RINGGIT MALAYSIA : 
											@php
												$formatter = new NumberFormatter('en', NumberFormatter::SPELLOUT);

												$whole = floor($balance);
												$cents = round(($balance - $whole) * 100);

												$words = ucfirst($formatter->format($whole));

												if ($cents > 0) {
													$words .= " and " . $formatter->format($cents) . " cents";
												}

												echo strtoupper($words);
												@endphp ONLY</strong>
											</td>
											<td style="border: none;" class="text-end"><strong>RM :</strong></td>
											<td style="border: none;" class="text-end"><strong>{{ number_format($balance, 2) }}</strong></td>
										</tr>
									</tbody>
								</table>
								<table class="table border">
									<thead>
										<tr>
											<th class="text-end">Current Mth</th>
											<th class="text-end">1 Month</th>
											<th class="text-end">2 Months</th>
											<th class="text-end">3 Months</th>
											<th class="text-end">4 Months</th>
											<th class="text-end">5 Mths & Above</th>
										</tr>
									</thead>
									
									@php
										$current = 0;
										$days30 = 0;
										$days60 = 0;
										$days90 = 0;
										$days120 = 0;
										$days150 = 0;

										$reportMonth = now()->copy()->startOfMonth();
									@endphp

									@forelse ($payments as $payment)

										@php
											// Only include pending invoices
											if ($payment->status->label() != 'Pending') {
												continue;
											}

											// Invoice month = invoiced_at + 1 month
											$invoiceMonth = $payment->invoiced_at
												->copy()
												->addMonth()
												->startOfMonth();

											// Difference in whole months
											$months = $invoiceMonth->diffInMonths($reportMonth);

											switch ($months) {
												case 0:
													$current += $payment->amount;
													break;

												case 1:
													$days30 += $payment->amount;
													break;

												case 2:
													$days60 += $payment->amount;
													break;

												case 3:
													$days90 += $payment->amount;
													break;

												case 4:
													$days120 += $payment->amount;
													break;

												default:
													$days150 += $payment->amount;
													break;
											}
										@endphp

									@empty
									@endforelse							
									<tbody class="table-group-divider">
										 <tr>
											<td class="text-end">{{ $current == 0 ? '-' : number_format($current, 2) }}</td>
											<td class="text-end">{{ $days30 == 0 ? '-' : number_format($days30, 2) }}</td>
											<td class="text-end">{{ $days60 == 0 ? '-' : number_format($days60, 2) }}</td>
											<td class="text-end">{{ $days90 == 0 ? '-' : number_format($days90, 2) }}</td>
											<td class="text-end">{{ $days120 == 0 ? '-' : number_format($days120, 2) }}	</td>
											<td class="text-end">{{ $days150 == 0 ? '-' : number_format($days150, 2) }}	</td>
										</tr>
									</tbody>
								</table>								
						</div>
						<table class="table" style="border-collapse: collapse;">
							<tr>
								<td style="border: none;">The items and balances above will be considered correct unless the company is notified of any discrepancy within fourteen (14) days. Please notify us of any change address in writing.</td>
							</tr>
						</table>

							<div class="no-print">
								<button onclick="printSection('print-area')">Print SOA</button>
							</div>
					</div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .profile-userpic img {
            float: none;
            margin: 0 auto;
            width: 50%;
            height: 50%;
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
        }

        .p-card{
            width: 320px;
            height: 190px;
            -webkit-perspective: 600px;
            -moz-perspective: 600px;
            perspective:600px;
        }

        .card__part{
            box-shadow: 1px 1px #aaa3a3;
            top: 0;
            position: absolute;
            z-index: 1000;
            left: 0;
            display: inline-block;
            width: 320px;
            height: 190px;
            background-image: linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #f15075, #ec4879); /*linear-gradient(to right bottom, #fd8369, #fc7870, #f96e78, #f56581, #ee5d8a)*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 8px;

            /* -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden; */
        }

        .card__front{
            padding: 18px;
            /* -webkit-transform: rotateY(0);
            -moz-transform: rotateY(0); */
        }

        /* .card__back {
            padding: 18px 0;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
        } */

        .card__black-line {
            margin-top: 5px;
            height: 38px;
            background-color: #303030;
        }

        .card__logo {
            height: 16px;
        }

        .card__front-logo{
            position: absolute;
            top: 18px;
            right: 18px;
        }
        .card__square {
            border-radius: 5px;
            height: 30px;
        }

        .card_numer {
            display: block;
            width: 100%;
            word-spacing: 4px;
            font-size: 20px;
            letter-spacing: 2px;
            color: #fff;
            text-align: end;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .card__space-75 {
            width: 75%;
            float: left;
        }

        .card__space-25 {
            width: 25%;
            float: left;
        }

        .card__label {
            font-size: 10px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.8);
            letter-spacing: 1px;
        }

        .card__info {
            margin-bottom: 0;
            margin-top: 5px;
            font-size: 16px;
            line-height: 18px;
            color: #fff;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .card__back-content {
            padding: 15px 15px 0;
        }
        .card__secret--last {
            color: #303030;
            text-align: right;
            margin: 0;
            font-size: 14px;
        }

        .card__secret {
            padding: 5px 12px;
            background-color: #fff;
            position:relative;
        }

        .card__secret:before{
            content:'';
            position: absolute;
            top: -3px;
            left: -3px;
            height: calc(100% + 6px);
            width: calc(100% - 42px);
            border-radius: 4px;
            background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
        }

        .card__back-logo {
            position: absolute;
            bottom: 15px;
            right: 15px;
        }

        .card__back-square {
            position: absolute;
            bottom: 15px;
            left: 15px;
        }

        .card:hover .card__front {
            /* -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg); */

        }

        .card:hover .card__back {
            /* -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg); */
        }
    </style>
@endpush

@push('js')
    <script>

		function printSection(sectionId) {
            let printContent = document.getElementById(sectionId).innerHTML;
            let originalContent = document.body.innerHTML;

            document.body.innerHTML = printContent;
            window.print();
            document.body.innerHTML = originalContent;
            location.reload(); // Refresh to restore full UI
		}

        const addAdjustment = document.getElementById('addAdjustment')
        if (addAdjustment) {
            addAdjustment.addEventListener('show.bs.modal', event => {

                // Button that triggered the modal
                const button = event.relatedTarget
                // Extract info from data-payment attributes
                const payment = button.getAttribute('data-payment')

                $('<input>', {
                    type: 'hidden',
                    id: 'payment',
                    name: 'payment',
                    value: payment
                }).appendTo('form');

            })

            @if (count($errors) > 0)
            let addAAdjustmentModal = new bootstrap.Modal(document.getElementById('addAdjustment'), {});
            addAAdjustmentModal.show();

            @endif
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('input[name="type"]').change(e => {
            const type = $(e.target).val();

            if (type === "DN") {
                $('#description').val("Debit Note");
            } else if (type === "CN") {
                $('#description').val("Credit Note");
            }
        });



        $(document).on('click', '#delete', function (e) {
            e.preventDefault();
            let self = $(this);
            Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this record!",
                icon: "warning",
                confirmButtonColor: '#276baa',
                showCancelButton: true,
                dangerMode: true,
            })
                .then((result) => {
                    if (result.isConfirmed) {
                        self.parents("#deleteForm").submit();
                    }
                });
        });
    </script>
@endpush