@extends('layouts.app')

@section('title', 'Outstanding 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">Outstanding 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"></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()->get('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()->get('card_no') }}" placeholder="Card No.">
                </div>
                <div class="col-sm-6 col-md-3">
                    <label class="form-label" for="month">Month</label>
                    <select name="month" id="month" class="form-select mb-3">
                        <option value="">- Select month -</option>
                        @foreach (collect($periods)->reverse() as $period)
                            <option value="{{ $period->day(15)->toDateString() }}" @selected(request()->get('month', now()->day(15)->toDateString()) == $period->day(15)->toDateString())>{{ $period->day(15)->format('F Y') }}</option>
                        @endforeach
                    </select>
                </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($amount, 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>Account No.</th>
                        <th>Customer</th>
                        <th>Amount</th>
                        {{-- <th>Total</th> --}}
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    @forelse ($cardHolders as $cardHolder)
                        <tr>
                            <td>{{ ($cardHolders->currentPage() - 1)  * $cardHolders->count() + $loop->iteration }}</td>
                            <td>{{ $cardHolder->account_no ?? '--'}}</td>
                            <td class="text-uppercase">{{ $cardHolder->name ?? $cardHolder->user?->name ?? '--'}}</td>
                            {{-- <td>{{ $cardHolder->amount ?? '--'}}</td> --}}
                            <td>RM {{ $cardHolder->payment_items_sum_amount ?? '--'}}</td>
                            <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="10">- Tiada rekod dijumpai -</td>
                        </tr>
                    @endforelse
                </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,
                        // minimumInputLength: 5,
                        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) { // Assuming your server returns items in an array
                                    return {
                                        id: item.id || item.site_id, // Map your server's ID field to 'id'
                                        text: item.text // Map your server's text field to 'text'
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 15) < data.total
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: placeholder,
                    width: 'resolve',
                });
            };

            ajaxSelection(
                $('#site'),
                '{{ route('api.sites', [], false) }}',
                '-- Select Site --'
            );
        });
    </script>
@endpush