@php
    if($user->hasRole(['super-admin', 'admin'])) {
        $layoutDirectory = 'layouts.app';
    } else {
        $layoutDirectory = 'layouts.customer';
    }
@endphp

@extends($layoutDirectory)

@section('title', 'Statement OF Account (SOA)')

@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;
        }
    </style>
@endpush

@section('content')
    <h1 class="page-header">Statement OF Account (SOA)</h1>
    <div class="row">
        @cannot('access-admin-panel')
        <div class="col-md-3">
            @include('profile.menu')
        </div>
        @endcannot
        <div class="col">
            <div class="card border-0">
				<div id="print-area">
					<div class="card-header h6 mb-0 bg-none p-3">
						Statement OF Account (SOA)
					</div>
						@method('PUT')
						@csrf
					<div class="card-body">
						<table class="table table-borderless">
							<tr>
								<td class="col-md-9 text-start"><strong>{{ old('name', $user->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', $user?->profile?->address ?? '') }}</td>
								<td class="text-start">Acc No.</td>
								<td style="text-align: center;">:</td>
								<td class="text-end">{{ $user->profile->account_no ?? '' }}</td>
							</tr>
							<tr>
								<td class="col-md-9 text-start">{{ $user->ic_no ?? $user->profile?->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($user->user_type == 1){{ 'Individual' }} @endif
								@if($user->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. : {{ $user->email ?? $user->profile?->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>Dt.</th>
									<th>Ct.</th>
									<th>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;
								@endphp

								@forelse ($payments as $payment)

									@php
										$amount = floatval($payment->amount ?? 0);

										if ($payment->status->label() == 'Paid') {
											$balance -= $amount;
										}
									@endphp
								<tr>
									<td>{{ $payment->invoiced_at?->format('d/m/Y') ?? '-' }}</td>
									<td>{{ $payment->invoice_no ?? '' }}</td>
									<td>@if($payment->status->label() == 'Pending'){{ $payment->exact_amount ?? '-' }}@endif</td>
									<td>@if($payment->status->label() == 'Paid'){{ $payment->exact_amount ?? '-' }}@endif</td>
									<td></td>
								</tr>
								@foreach ($payment->items->reject(fn($i)=>is_null($i->credit_debit_note_id)) as $item)
								<tr>
									<td>&nbsp;</td>
									<td>{{ str_replace('Metro-INVN-', 'Metro-' . ($item->type->value ?? '') . '-', $payment->invoice_no ?? '') }}</td>
									<td>@if($payment->status->label() == 'Pending'){{ $item->amount ?? '-' }}@endif</td>
									<td>@if($payment->status->label() == 'Paid'){{ $item->amount ?? '-' }}@endif</td>
									<td>&nbsp;</td>
								</tr>
								@endforeach
								@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><strong>{{ number_format($balance, 2) }}</strong></td>
									<td></td>
									<td><strong>{{ number_format($balance, 2) }}</strong></td>
								</tr>
							</tbody>
						</table>

					</div>

				</div>
				<div class="card-footer bg-none text-end no-print">
					<button type="button" onclick="printSection('print-area')" class="btn btn-primary">Print SOA</button>
				</div>
            </div>
        </div>
    </div>
@endsection

@section('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>
@endsection