@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between px-3 pt-3">
                <h4 class="mb-0">Payments For Due</h4>
                <a class="btn btn-sm btn-dark" href="{{ route('pos.invoices.index') }}">Back to Sales</a>
            </div>

            <div class="px-3 mt-3">
                <form method="get" action="{{ route('pos.credit-payments.index') }}" class="form-inline" style="gap:8px;">
                    <input type="text" name="search" value="{{ $filters['search'] }}" class="form-control form-control-sm" placeholder="Invoice no / customer / payment id" style="min-width:240px;">
                    <input type="date" name="from" value="{{ $filters['from'] }}" class="form-control form-control-sm">
                    <input type="date" name="to" value="{{ $filters['to'] }}" class="form-control form-control-sm">
                    <label class="form-check form-check-inline mb-0" style="align-items:center; gap:6px;">
                        <input class="form-check-input" type="checkbox" name="include_invoice_payments" value="1" {{ !empty($filters['include_invoice_payments']) ? 'checked' : '' }}>
                        <span class="form-check-label" style="font-size:13px;">Include invoice payments</span>
                    </label>
                    <button class="btn btn-sm btn-primary" type="submit">Filter</button>
                    <a class="btn btn-sm btn-outline-secondary" href="{{ route('pos.credit-payments.index') }}">Reset</a>
                </form>
            </div>

            <div class="table-responsive px-3 mt-3">
                <table class="table table-sm table-bordered" style="width:100%; font-size:14px;">
                    <thead class="thead-light">
                        <tr>
                            <th>#</th>
                            <th>Type</th>
                            <th>Customer</th>
                            <th>Method</th>
                            <th>Previous Due</th>
                            <th>Paid</th>
                            <th>Current Due</th>
                            <th>Allocations</th>
                            <th>By</th>
                            <th>Time</th>
                            <th class="px-3 py-2 text-left">Invoices</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payments as $i => $p)
                            <tr>
                                <td>{{ $payments->firstItem() + $i }}</td>
                                <td style="white-space:nowrap; font-weight:600;">
                                    {{ strtoupper($p->payment_type ?? '-') }}
                                </td>
                                <td style="text-transform: capitalize;">
                                    {{ $p->customer_name ?? 'Unknown' }}
                                    @if(!empty($p->customer_pin))
                                        <div class="text-muted" style="font-size:12px;">PIN: {{ $p->customer_pin }}</div>
                                    @endif
                                </td>
                                <td>{{ strtoupper($p->method ?? 'cash') }}</td>
                                <td class="text-right">
                                    @if(($p->payment_type ?? '') === 'due')
                                        {{ number_format((float)($p->balance_before ?? 0), 2) }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="text-right">{{ number_format((float)($p->paid ?? 0), 2) }}</td>
                                <td class="text-right">
                                    @if(($p->payment_type ?? '') === 'due')
                                        {{ number_format((float)($p->balance_after ?? 0), 2) }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="text-right">{{ (int)($p->allocations ?? 0) }}</td>
                                <td>{{ $p->user_name ?? '-' }}</td>
                                <td>
                                    {{ !empty($p->paid_at) ? \Carbon\Carbon::parse($p->paid_at)->format('Y-m-d h:i A') : '-' }}
                                </td>
                                <td class="px-3 py-2">
                                    @php
                                        $invoiceNumbers = collect(explode(', ', (string)($p->invoice_numbers ?? '')))
                                            ->filter(fn($v) => trim((string)$v) !== '')
                                            ->unique()
                                            ->values();
                                    @endphp
                                    @if($invoiceNumbers->isEmpty())
                                        <span class="text-gray-500">-</span>
                                    @else
                                        {{ $invoiceNumbers->take(3)->implode(', ') }}
                                        @if($invoiceNumbers->count() > 3)
                                            <span class="text-gray-500">(+{{ $invoiceNumbers->count() - 3 }})</span>
                                        @endif
                                    @endif
                                </td>
                                <td style="white-space:nowrap;">
                                    @if(($p->payment_type ?? '') === 'due')
                                        <a href="{{ route('pos.credit-payments.print', $p->payment_id) }}" target="credit_payment_print" class="btn btn-sm btn-dark">Print</a>
                                        @php
                                            $editAmount = number_format((float)($p->amount_requested ?? $p->paid ?? 0), 2, '.', '');
                                            $editMethod = strtolower($p->method ?? 'cash');
                                            $editAt = !empty($p->paid_at) ? \Carbon\Carbon::parse($p->paid_at)->format('Y-m-d\\TH:i') : '';
                                        @endphp
                                        <button class="btn btn-sm btn-outline-primary js-due-edit" type="button"
                                                data-id="{{ (int) $p->payment_id }}"
                                                data-amount="{{ $editAmount }}"
                                                data-method="{{ $editMethod }}"
                                                data-applied-at="{{ $editAt }}">Edit</button>
                                        <button class="btn btn-sm btn-danger js-due-delete" type="button"
                                                data-id="{{ (int) $p->payment_id }}">Delete</button>
                                    @elseif(($p->payment_type ?? '') === 'invoice')
                                        @if(!empty($p->invoice_id))
                                            <a href="{{ route('pos.invoices.show', $p->invoice_id) }}" target="_blank" class="btn btn-sm btn-outline-primary">View Invoice</a>
                                        @else
                                            -
                                        @endif
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="px-3 pb-3">
                {{ $payments->links() }}
            </div>
        </div>
    </div>
</div>

<!-- Edit Due Payment Modal -->
<div class="modal fade" id="duePaymentEditModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Due Payment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" style="font-size:12px;">
                    Editing/deleting due payments can change which invoices are marked as paid.
                </div>
                <input type="hidden" id="due_edit_id">

                <div class="form-group">
                    <label>Amount</label>
                    <input type="number" step="0.01" min="0.01" class="form-control" id="due_edit_amount">
                </div>

                <div class="form-group">
                    <label>Method</label>
                    <select class="form-control" id="due_edit_method">
                        <option value="cash">CASH</option>
                        <option value="pos">POS</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Date/Time</label>
                    <input type="datetime-local" class="form-control" id="due_edit_applied_at">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveDuePaymentEdit()">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
function csrfToken() {
        const el = document.querySelector('meta[name="csrf-token"]');
        return el ? el.getAttribute('content') : '';
}

function showModalById(id) {
    const el = document.getElementById(id);
    if (!el) return;

    // Bootstrap 5
    if (window.bootstrap && window.bootstrap.Modal) {
        try {
            if (typeof window.bootstrap.Modal.getOrCreateInstance === 'function') {
                window.bootstrap.Modal.getOrCreateInstance(el).show();
                return;
            }
            if (typeof window.bootstrap.Modal === 'function') {
                new window.bootstrap.Modal(el).show();
                return;
            }
        } catch (e) {
            // fall through
        }
    }

    // Bootstrap 4 (jQuery plugin)
    if (window.jQuery && typeof window.jQuery === 'function' && window.jQuery.fn && window.jQuery.fn.modal) {
        window.jQuery(el).modal('show');
        return;
    }

    // Fallback (no backdrop)
    el.style.display = 'block';
    el.classList.add('show');
    el.setAttribute('aria-hidden', 'false');
    el.setAttribute('aria-modal', 'true');
    if (!el.getAttribute('role')) el.setAttribute('role', 'dialog');
}

function openDuePaymentEditModal(id, amount, method, appliedAt) {
    document.getElementById('due_edit_id').value = id;
    document.getElementById('due_edit_amount').value = amount;
    document.getElementById('due_edit_method').value = (String(method).toLowerCase() === 'pos') ? 'pos' : 'cash';
    document.getElementById('due_edit_applied_at').value = (appliedAt || '');

    showModalById('duePaymentEditModal');
}

async function saveDuePaymentEdit() {
        const id = document.getElementById('due_edit_id').value;
        const amount = document.getElementById('due_edit_amount').value;
        const channel = document.getElementById('due_edit_method').value;
        const applied_at = document.getElementById('due_edit_applied_at').value;

        const res = await fetch(`{{ url('/pos/credit-payments') }}/${id}`, {
                method: 'PUT',
                headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken(),
                },
                body: JSON.stringify({ amount, channel, applied_at }),
        });

        const data = await res.json().catch(() => null);
        if (!res.ok) {
                alert((data && data.message) ? data.message : 'Failed to update payment');
                return;
        }

        window.location.reload();
}

async function deleteDuePayment(id) {
        if (!confirm('Delete this payment?')) return;

        const res = await fetch(`{{ url('/pos/credit-payments') }}/${id}`, {
                method: 'DELETE',
                headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken(),
                }
        });

        const data = await res.json().catch(() => null);
        if (!res.ok) {
                alert((data && data.message) ? data.message : 'Failed to delete payment');
                return;
        }

        window.location.reload();
}

document.addEventListener('DOMContentLoaded', function () {
    // Prevent a11y warning: don't keep focus inside a hidden (aria-hidden) modal.
    if (window.jQuery && typeof window.jQuery === 'function' && window.jQuery.fn && window.jQuery.fn.modal) {
        window.jQuery('#duePaymentEditModal').on('hidden.bs.modal', function () {
            const active = document.activeElement;
            if (active && this.contains(active)) {
                active.blur();
                document.body.focus && document.body.focus();
            }
        });
    }

    document.querySelectorAll('.js-due-edit').forEach(btn => {
        btn.addEventListener('click', () => {
            openDuePaymentEditModal(
                btn.getAttribute('data-id'),
                btn.getAttribute('data-amount'),
                btn.getAttribute('data-method'),
                btn.getAttribute('data-applied-at')
            );
        });
    });

    document.querySelectorAll('.js-due-delete').forEach(btn => {
        btn.addEventListener('click', () => {
            deleteDuePayment(btn.getAttribute('data-id'));
        });
    });
});
</script>

<iframe name="credit_payment_print" style="display:none;"></iframe>
@endsection