@extends('layouts.app')

@section('title', 'Aging Reports')

@push('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/select2/dist/css/select2.min.css') }}">
    <style>
        .is-invalid + .select2.select2-container .selection .select2-selection.select2-selection--single  {
            border: 1px solid  #f44336;
        }

        .select2 .is-invalid {
            border: none;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="page-header mb-0">Reports Management</h1>
    </div>
    <div class="panel panel-inverse border-0">
        <div class="panel-heading">Aging Details</div>
        <div class="panel-body">
            <form action="{{ route('report.aging') }}" method="GET" class="align-items-center mb-3">
                <div class="row">
                    <div class="col-sm-6 col-md-3">
                        <label class="form-label" for="site">Site</label>
                        <select name="site" id="site" class="form-select mb-3">
                            @if (request()->filled('site'))
                                <option value="{{ request()->input('site') }}">{{ $sites->firstWhere('site_id', request()->input('site'))?->name }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <label class="form-label" for="account_no">Account No.</label>
                        <input type="text" class="form-control mb-3" id="account_no" name="account_no" value="{{ request()->input('account_no') }}" placeholder="Account No.">
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <label class="form-label" for="card_no">Card No</label>
                        <input type="text" class="form-control mb-3" id="card_no" name="card_no" value="{{ request()->input('card_no') }}" placeholder="Card No.">
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <label class="form-label" for="date">Date</label>
                        <input type="date" class="form-control mb-3" id="date" name="date" value="{{ $dateInput }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <button type="submit" class="btn btn-primary">Filter</button>
                        <a href="{{ route('report.aging') }}" class="btn btn-white">Reset</a>
                        <button type="submit" name="action" value="export" class="btn btn-green">Export</button>
                    </div>
                    <div class="col-md-6 text-end">
                        <h2>RM {{ number_format($grandTotal, 2) }}</h2>
                    </div>
                </div>
            </form>
            <div class="table-responsive">
                <table class="table table-hover border text-nowrap align-middle mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>No.</th>
                        <th>Status</th>
                        <th>Account No.</th>
                        <th>Customer</th>
                        <th>Total Card (Active/Inactive)</th>

                        @php $isCurrent = request('order') == 'current'; $nextCurrent = ($isCurrent && request('by') == 'desc') ? 'asc' : 'desc'; @endphp
                        <th class="text-end">
                            <a href="{{ request()->fullUrlWithQuery(['order' => 'current', 'by' => $nextCurrent]) }}" class="text-decoration-none text-dark d-block">
                                Current {!! $isCurrent ? (request('by') == 'desc' ? '▼' : '▲') : '' !!}<br>
                                <small class="text-muted fw-normal">({{ $labels['current'] ?? '' }})</small>
                            </a>
                        </th>

                        @php $is30 = request('order') == '30'; $next30 = ($is30 && request('by') == 'desc') ? 'asc' : 'desc'; @endphp
                        <th class="text-end">
                            <a href="{{ request()->fullUrlWithQuery(['order' => '30', 'by' => $next30]) }}" class="text-decoration-none text-dark d-block">
                                30 Days {!! $is30 ? (request('by') == 'desc' ? '▼' : '▲') : '' !!}<br>
                                <small class="text-muted fw-normal">({{ $labels['30'] ?? '' }})</small>
                            </a>
                        </th>

                        @php $is60 = request('order') == '60'; $next60 = ($is60 && request('by') == 'desc') ? 'asc' : 'desc'; @endphp
                        <th class="text-end">
                            <a href="{{ request()->fullUrlWithQuery(['order' => '60', 'by' => $next60]) }}" class="text-decoration-none text-dark d-block">
                                60 Days {!! $is60 ? (request('by') == 'desc' ? '▼' : '▲') : '' !!}<br>
                                <small class="text-muted fw-normal">({{ $labels['60'] ?? '' }})</small>
                            </a>
                        </th>

                        @php $is90 = request('order') == '90'; $next90 = ($is90 && request('by') == 'desc') ? 'asc' : 'desc'; @endphp
                        <th class="text-end">
                            <a href="{{ request()->fullUrlWithQuery(['order' => '90', 'by' => $next90]) }}" class="text-decoration-none text-dark d-block">
                                90 Days {!! $is90 ? (request('by') == 'desc' ? '▼' : '▲') : '' !!}<br>
                                <small class="text-muted fw-normal">({{ $labels['90'] ?? '' }})</small>
                            </a>
                        </th>

                        @php $is180 = request('order') == '180'; $next180 = ($is180 && request('by') == 'desc') ? 'asc' : 'desc'; @endphp
                        <th class="text-end">
                            <a href="{{ request()->fullUrlWithQuery(['order' => '180', 'by' => $next180]) }}" class="text-decoration-none text-dark d-block">
                                180 Days {!! $is180 ? (request('by') == 'desc' ? '▼' : '▲') : '' !!}<br>
                                <small class="text-muted fw-normal">({{ $labels['180'] ?? '' }})</small>
                            </a>
                        </th>

                        @php $is0 = request('order') == '0'; $next0 = ($is0 && request('by') == 'desc') ? 'asc' : 'desc'; @endphp
                        <th class="text-end">
                            <a href="{{ request()->fullUrlWithQuery(['order' => '0', 'by' => $next0]) }}" class="text-decoration-none text-dark d-block">
                                180++ Days {!! $is0 ? (request('by') == 'desc' ? '▼' : '▲') : '' !!}<br>
                                <small class="text-muted fw-normal">({{ $labels['0'] ?? '' }})</small>
                            </a>
                        </th>

                        <th class="text-end">Total</th>
                        <th>View</th>
                    </tr>
                    </thead>
                    <tbody class="table-group-divider">
                    @forelse ($cardHolders as $cardHolder)
                        @php
                            $inactive_cards_count = $cardHolder->cards_count - $cardHolder->active_cards_count;
                        @endphp
                        <tr>
                            <td>{{ $cardHolders->firstItem() + $loop->index }}</td>
                            <td>{{ $cardHolder->status?->label() }}</td>
                            <td>
                                @if ($cardHolder->user)
                                    <a href="{{ route('customer.show', $cardHolder->user) }}">
                                        {{ $cardHolder->account_no ?? '--'}}
                                    </a>
                                @else
                                    {{ $cardHolder->account_no ?? '--'}}
                                @endif
                            </td>
                            <td class="text-uppercase">{{ $cardHolder->name ?? $cardHolder->user?->name ?? '--'}}</td>
                            <td class="fs-14px">
                                <span class="badge bg-blue">{{ $cardHolder->cards_count }}</span>
                                (<span class="badge bg-success">{{ $cardHolder->active_cards_count ?? '0'}}</span>
                                /
                                <span @class(['badge', 'bg-info' => $inactive_cards_count == 0, 'bg-warning' => $inactive_cards_count != 0])>
                                    {{ $inactive_cards_count }}
                                </span>)
                            </td>

                            <td class="text-end">{{ number_format($cardHolder->outstanding_30, 2) }}</td>
                            <td class="text-end">{{ number_format($cardHolder->outstanding_60, 2) }}</td>
                            <td class="text-end">{{ number_format($cardHolder->outstanding_90, 2) }}</td>
                            <td class="text-end">{{ number_format($cardHolder->outstanding_120, 2) }}</td>
                            <td class="text-end">{{ number_format($cardHolder->outstanding_180, 2) }}</td>
                            <td class="text-end">{{ number_format($cardHolder->outstanding_more_180, 2) }}</td>

                            @php
                                $rowTotal = $cardHolder->outstanding_30
                                          + $cardHolder->outstanding_60
                                          + $cardHolder->outstanding_90
                                          + $cardHolder->outstanding_120
                                          + $cardHolder->outstanding_180
                                          + $cardHolder->outstanding_more_180;
                            @endphp
                            <th class="text-end">{{ number_format($rowTotal, 2) }}</th>
                            <td class="text-end">
                                @if ($cardHolder->user)
                                    <a href="{{ route('customer.transaction', $cardHolder->user) }}" class="btn btn-sm btn-white me-1"><i class="fa-solid fa-eye fa-fw"></i></a>
                                @else
                                    --
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-center" colspan="13">- Tiada rekod dijumpai -</td>
                        </tr>
                    @endforelse

                    <tr class="text-uppercase">
                        <th class="text-end" colspan="11">Total In This Page</th>
                        <th class="text-end">
                            RM {{ number_format($cardHolders->sum(function($ch) {
                                return $ch->outstanding_30 + $ch->outstanding_60 + $ch->outstanding_90 + $ch->outstanding_120 + $ch->outstanding_180 + $ch->outstanding_more_180;
                            }), 2) }}
                        </th>
                        <th class="text-end"></th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="panel-footer">
            {{  $cardHolders->links() }}
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            let ajaxSelection = (element, url, placeholder) => {
                element.select2({
                    ajax: {
                        url: url,
                        dataType: 'json',
                        delay: 500,
                        data: function (params) {
                            return {
                                q: params.term,
                                page: params.page
                            };
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.data, function (item) {
                                    return {
                                        id: item.id || item.site_id,
                                        text: item.text
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 15) < data.total
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: placeholder,
                    width: 'resolve',
                });
            };

            ajaxSelection(
                $('#site'),
                '{{ route('api.sites', [], false) }}',
                '{{ request()->filled('site') ? request()->input('site') : '-- Select Site' }}'
            );

            @if(request()->filled('site'))
            $('#site').val({{ request()->input('site') }}).trigger('change');
            @endif
        });
    </script>
@endpush