@extends('layouts.app')

@section('title', 'Invoices Report')
@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">Invoicing Reports</div>
    <div class="panel-body">
        <form action="{{ route('report.invoicing') }}" method="GET" class="align-items-center mb-3">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <label class="form-label" for="name">Name</label>
                    <input type="text" class="form-control mb-3" id="name" name="name" value="{{ request()->get('name') }}" placeholder="Name">
                </div>
                <div class="col-sm-6 col-md-4">
                    <label class="form-label" for="site_name">Site</label>
                    <select name="site_name" id="site_name" class="form-select mb-3 select2">
                        <option value="">- Select site -</option>
                        @foreach ($sites as $site)
                            <option value="{{ $site->site_id }}" @selected(request()->get('site_name') == $site->site_id)>{{ $site->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-6 col-md-3">
                    <label class="form-label" for="invoice_no">Invoice No</label>
                    <input type="text" class="form-control mb-3" id="invoice_no" name="invoice_no"
                           value="{{ request()->get('invoice_no') }}" placeholder="Invoice No.">
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="form-label" for="date_from">Date From</label>
                    <input type="date" class="form-control mb-3" id="date_from" name="date_from" value="{{ request()->get('date_from') == '' ?  now()->startOfMonth()->format('Y-m-d') : request()->get('date_from') }}" placeholder="Date From">
                </div>
                <div class="col-sm-6 col-md-3">
                    <label class="form-label" for="date_to">Date To</label>
                    <input type="date" class="form-control mb-3" id="date_to" name="date_to" value="{{ request()->get('date_to') == '' ?  now()->endOfMonth()->format('Y-m-d') : request()->get('date_to') }}" placeholder="Date To">
                </div>
                <div class="col-sm-6 col-md-3">
                    <label class="form-label" for="payment_type">Status</label>
                    <select name="status" id="status" class="form-select mb-3">
                        <option value="">- Select status -</option>
                        <option value="paid" @selected(request()->get('status') == 'paid')>Paid</option>
                        <option value="unpaid" @selected(request()->get('status') == 'unpaid')>Unpaid</option>
                    </select>
                </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.invoicing') }}" 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($total, 2) }}</h2>
                    </div>
                </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 style="width: 1%">No.</th>
                        <th>Name</th>
                        <th>Site</th>
                        <th>Invoice No.</th>
                        <th>Invoice Date</th>
{{--                        <th>Due Date</th>--}}
                        <th>Transaction Date</th>
                        <th>Amount</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    @forelse ($payments as $payment)
                    <tr>
                        <td>{{ $payments->firstItem() * $loop->iteration }}</td>
                        <td>
                            @if ($payment->payer?->user)
                                <a href="{{ route('customer.show', $payment->payer->user) }}">
                                    {{ $payment->payer->name ?? '--' }}
                                </a>
                            @else
                                --
                            @endif
                        </td>
                        <td>{{ $payment->site?->full_name ?? '--' }}</td>
                        <td>{{ $payment->invoice_no ?? '--' }}</td>
                        <td>{{ $payment->invoiced_at?->format('d/m/Y') }}</td>
{{--                        <td>10/{{ $payment->items[0]->due->format('m/Y') ?? '--' }}</td>--}}
                        <td>{{ $payment->received_time?->format('d/m/Y H:iA') ?? '--' }}</td>
                        <td>{{ $payment->amount ?? '--' }}</td>
                        <td>
                            @if ($payment->status->value == 1)
                                <span class="badge bg-{{ $payment->status->color() }}" style="display:inline-block; width:80px;">Paid</span>
                            @else
                                <span class="badge bg-danger" style="display:inline-block; width:80px;">Unpaid</span>
                            @endif
                        </td>
                        {{-- <td>{{ $item->status }}</td> --}}
                        {{-- <td>{{ $item->start_date->format('d/m/Y') ?? '--' }}</td> --}}
                        {{-- <td>{{ $item->end_date->format('d/m/Y') ?? '--' }}</td> --}}
                    </tr>
                    @empty
                    <tr>
                        <td class="text-muted text-center" colspan="8">No record found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="panel-footer">
        {{ $payments->links() }}
    </div>
</div>
@endsection

@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

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(() => {
            $('.select2').select2();
        });
    </script>
@endpush