@extends('admin.layouts.dashboard')

@section('title', 'Member Due List')

@section('content')
    @php
        $ttl_subs = 0;
        $ttl_disc = 0;
        $ttl_paid = 0;
        $ttl_due = 0;
        $rowCount = count($transaction_details);
    @endphp

    <x-page-header
        title="Member Due List"
        :description="number_format($rowCount).' '.Str::plural('member', $rowCount).' with an outstanding balance'"
        :breadcrumbs="['Dashboard' => url('/dashboard'), 'Reports' => null, 'Member due list' => null]"
    />

    <div id="display">
        <x-card title="Due list of members" :flush="true">
            <x-slot:actions>
                <button type="button" class="btn btn--secondary btn--sm no-print" onclick="printPageArea('display')">
                    <i class="fa-solid fa-print" aria-hidden="true"></i>
                    Print
                </button>
            </x-slot:actions>

            @if ($rowCount === 0)
                <x-empty icon="fa-circle-check" title="No outstanding dues" text="Every member is settled up." />
            @else
                <div class="table-wrap">
                    <table class="table table--striped" data-datatable data-export="true" data-page-length="50">
                        <thead>
                            <tr>
                                <th scope="col" class="col-num">SL</th>
                                <th scope="col">Name</th>
                                <th scope="col">Contact</th>
                                <th scope="col" class="u-text-right">Admission</th>
                                <th scope="col" class="u-text-right">Discount</th>
                                <th scope="col" class="u-text-right">Paid</th>
                                <th scope="col" class="u-text-right">Due</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($transaction_details as $val)
                                @php
                                    $ttl_subs += $val->amt_total;
                                    $ttl_disc += $val->dis_total;
                                    $ttl_paid += $val->ttl_paid;
                                    $ttl_due += $val->ttl_due;
                                @endphp
                                <tr>
                                    <td class="col-num">{{ $loop->iteration }}</td>
                                    <td class="table__primary u-capitalize">
                                        <a href="{{ route('members.subcription.history', $val->profile_id) }}">
                                            {{ ucwords($val->fullname) }}
                                        </a>
                                    </td>
                                    <td class="u-nowrap u-text-secondary">{{ $val->phone_number ?: '—' }}</td>
                                    <td class="u-numeric">{{ $val->amt_total }}</td>
                                    <td class="u-numeric">{{ $val->dis_total }}</td>
                                    <td class="u-numeric">{{ $val->ttl_paid }}</td>
                                    <td class="u-numeric" style="font-weight: var(--weight-semibold); color: var(--warning-700);">
                                        {{ $val->ttl_due }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th scope="row" colspan="3">Total</th>
                                <td class="u-numeric">{{ number_format($ttl_subs, 2) }}</td>
                                <td class="u-numeric">{{ number_format($ttl_disc, 2) }}</td>
                                <td class="u-numeric">{{ number_format($ttl_paid, 2) }}</td>
                                <td class="u-numeric">{{ number_format($ttl_due, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @endif
        </x-card>
    </div>
@endsection