@extends('layouts.app')

@section('title', 'Credit Debit Note')

@section('content')

    <div class="d-flex justify-content-between align-items-center mb-3 d-print-none">
        <h1 class="page-header mb-0">Credit Debit Note</h1>
    </div>

    <div class="card border-0">
        <div class="card-header bg-dark text-white">
            <span class="fs-5 fw-bold">Credit Debit Note</span>
        </div>
        <div class="card-body">
            <form action="{{ route('adjustment.show') }}" method="GET" class="align-items-center mb-3">
                <div class="row">
                    <div class="col-sm-6 col-md-3">
                        <label class="form-label" for="type">Transaction Type</label>
                        <select name="type" id="type" class="form-select mb-3">
                            <option value="">- Select type -</option>
                            @foreach(\App\Models\Traits\Enum\TransactionType::cases() as $type)
                                <option value="{{ $type->value }}" @selected(request()->get('type') == $type->name)>
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <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 select2">
                            <option value="">- Select site -</option>
                            @foreach ($sites as $site)
                                <option value="{{ $site->site_id }}" @selected(request()->get('site') == $site->site_id)>
                                    {{ Str::upper($site->name) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

					<div class="col-sm-6 col-md-3">
                        <label class="form-label" for="payment_for">Payment For</label>
                        <select name="payment_for" id="payment_for" class="form-select mb-3">
                            <option value="">- Select payment for -</option>
                            @foreach(\App\Models\Traits\Enum\PaymentFor::cases() as $payment_for)
                                <option value="{{ $payment_for->value }}" @selected(request()->get('payment_for') == $payment_for->name)>
                                    {{ $payment_for->name }}
                                </option>
                            @endforeach
                        </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="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="status">Approval Status</label>
                        <select name="status" id="status" class="form-select mb-3">
                            <option value="">- Select status -</option>
                            @foreach (\App\Models\Traits\Enum\CreditDebitNoteStatus::cases() as $status)
                                <option value="{{ $status->value }}" @selected(request()->get('status') !== null && request()->get('status') !== '' && (int) request()->get('status') === $status->value)>
                                    {{ $status->label() }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-sm-6 col-md-3">
                        <label class="form-label" for="category">Category</label>
                        <select name="category" id="category" class="form-select mb-3">
                            <option value="">- Select category -</option>
                            @foreach (\App\Models\Traits\Enum\CreditDebitNoteCategory::cases() as $category)
                                <option value="{{ $category->value }}" @selected(request()->get('category') !== null && request()->get('category') !== '' && (int) request()->get('category') === $category->value)>
                                    {{ $category->label() }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row align-items-center">
                    <div class="col-md-6">
                        <button type="submit" class="btn btn-primary">Filter</button>
                        <a href="{{ route('adjustment.show') }}" 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">
                        {{-- Totals for the current filter. A description list rather
                             than an <h2>: these are figures, not a section heading,
                             so they no longer compete with the page title.

                             Credit and Debit are told apart by a tinted label pill,
                             not by tinting the amounts. Every accessible text colour
                             in this theme is a dark, desaturated tone (warning #623e0a
                             against primary #15395a), so two coloured amounts read as
                             the same muddy dark; the theme's bright brand colours are
                             legible only as a background, not as text on white. So the
                             colour goes where it can be strong — a filled pill — and
                             the amounts stay plain dark for maximum legibility. The
                             pills reuse the badge language of the table below. --}}
                        <dl class="d-flex justify-content-md-end gap-4 mb-0 mt-3 mt-md-0">
                            <div class="text-md-end">
                                <dt class="mb-1">
                                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">Credit</span>
                                </dt>
                                <dd class="fs-5 fw-bold mb-0">RM {{ number_format($creditTotal, 2) }}</dd>
                            </div>

                            <div class="text-md-end border-start ps-4">
                                <dt class="mb-1">
                                    <span class="badge bg-primary-subtle text-primary-emphasis border border-primary-subtle">Debit</span>
                                </dt>
                                <dd class="fs-5 fw-bold mb-0">RM {{ number_format($debitTotal, 2) }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </form>

            {{-- Resolved once for the whole listing: permissions do not vary per row.
                 The approval tick is only offered to a reviewer who has no edit
                 pencil, because both controls open the same edit page and a second
                 copy of the same link adds nothing. --}}
            @php
                $reviewsApprovals = auth()->user()?->can('approve-credit-debit-note')
                    && ! auth()->user()?->can('edit-credit-debit-note');
            @endphp

            <div class="table-responsive">
                <table class="table border">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Invoice No.</th>
                        <th>Customer</th>
                        <th>Site Name</th>
                        <th>Type</th>
						<th>Payment For</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Invoice Date</th>
                        <th>Transaction Date</th>
                        <th>Status</th>
                        <th>Approval Status</th>
                        <th>Category</th>
                        <th>Decided By</th>
                        <th>Decided Date</th>
                        <th class="text-end">Action</th>
                    </tr>
                    </thead>
                    <tbody class="table-group-divider">
                    @forelse ($creditDebitNotes as $creditDebitNote)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td><a target="_blank" href="{{ route('payment.show', $creditDebitNote->paymentItem->payment) }}">{{ $creditDebitNote->paymentItem->payment->invoice_no ?? '' }}</a></td>
                            <td>{{ $creditDebitNote->cardholder->name ?? '' }}</td>
                            <td>{{ $creditDebitNote->paymentItem->site->name ?? '' }}</td>
                            <td>{{ $creditDebitNote->type->name ?? '' }}</td>
							<td>{{ $creditDebitNote->paymentItem->payment->payment_for ?? '' }}</td>
                            <td>{{ $creditDebitNote->description ?? '' }}</td>
                            <td>{{ $creditDebitNote->type->symbol() }} RM {{ $creditDebitNote->amount ?? '' }}</td>
                            <td>{{ $creditDebitNote->paymentItem->payment->invoiced_at?->format('d/m/Y') ?? '--' }}</td>
                            <td>{{ $creditDebitNote->paymentItem->payment->received_time?->format('d/m/Y \- H:i') ?? '--' }}</td>
                            <td>
                                @if ($creditDebitNote->paymentItem->payment->isPaid())
                                    <span class="badge bg-{{ $creditDebitNote->paymentItem->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>
                                @if ($creditDebitNote->status)
                                    <span class="badge bg-{{ $creditDebitNote->status->color() }}">{{ $creditDebitNote->status->label() }}</span>
                                @else
                                    <span class="badge bg-gray">Draft</span>
                                @endif
                            </td>
                            <td>{{ $creditDebitNote->category?->label() ?? '-' }}</td>
                            {{-- Who approved or rejected this note, and when. The outcome
                                 itself is the Approval Status badge above. --}}
                            <td>{{ $creditDebitNote->decider?->name ?? '-' }}</td>
                            <td>{{ $creditDebitNote->decided_at?->format('d/m/Y \- H:i') ?? '-' }}</td>
                            {{-- Nothing here renders disabled: a control is either shown
                                 and usable, or not shown at all. The delete form holds
                                 only its own button, and the group is laid out inline so
                                 the controls sit on one row instead of stacking. --}}
                            <td class="text-end">
                                <div class="d-flex justify-content-end align-items-center gap-1">
                                    @can('edit-credit-debit-note')
                                        <a href="{{ route('adjustment.edit', $creditDebitNote) }}"
                                           class="btn btn-xs btn-white"
                                           title="Edit" aria-label="Edit credit debit note">
                                            <i class="fa-solid fa-pen-to-square fa-fw"></i>
                                        </a>
                                    @endcan

                                    {{-- A call to action, not a status indicator: the tick
                                         invites a decision, so it retires once one is
                                         recorded (approved or rejected). A decided note is
                                         then read through the edit page. --}}
                                    @if ($reviewsApprovals && ! $creditDebitNote->isDecided())
                                        <a href="{{ route('adjustment.edit', $creditDebitNote) }}"
                                           class="btn btn-xs btn-primary"
                                           title="Review approval" aria-label="Review credit debit note approval">
                                            <i class="fa-solid fa-check fa-fw"></i>
                                        </a>
                                    @endif

                                    @can('delete-credit-debit-note')
                                        <form id="deleteForm" class="m-0" action="{{ route('adjustment.destroy', $creditDebitNote) }}" method="POST">
                                            @method('DELETE')
                                            @csrf

                                            <button type="submit" id="delete" class="btn btn-xs btn-dark"
                                                    title="Delete" aria-label="Delete credit debit note">
                                                <i class="fas fa-trash fa-fw"></i>
                                            </button>
                                        </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-center text-muted" colspan="16">No record found</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div><!-- card-body -->
        <div class="card-footer text-end">
            {{  $creditDebitNotes->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>
    <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

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(() => {
            $('.select2').select2();
        });
    </script>
    <script>
        $(() => {
            $(document).on('click', '#delete', function (e) {
                e.preventDefault();
                let self = $(this);
                Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this record!",
                    icon: "warning",
                    confirmButtonColor: '#276baa',
                    showCancelButton: true,
                    dangerMode: true,
                })
                    .then((result) => {
                        if (result.isConfirmed) {
                            self.parents("#deleteForm").submit();
                        }
                    });
            });

            $('input[name="type"]').change(e => {
                const type = $(e.target).val();

                if (type === "DN") {
                    $('#description').val("Debit Note");
                } else if (type === "CN") {
                    $('#description').val("Credit Note");
                }
            });

            @if (count($errors) > 0)
            $('#addCreditDebitNote').modal('show');
            @endif
        });
    </script>
@endpush