@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">All Payments</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.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:260px;">
                    <select name="type" class="form-control form-control-sm">
                        <option value="all" {{ $filters['type']==='all' ? 'selected' : '' }}>All</option>
                        <option value="sale" {{ $filters['type']==='sale' ? 'selected' : '' }}>Sale Payments</option>
                        <option value="due" {{ $filters['type']==='due' ? 'selected' : '' }}>Payments For Due</option>
                    </select>
                    <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">
                    <button class="btn btn-sm btn-primary" type="submit">Filter</button>
                    <a class="btn btn-sm btn-outline-secondary" href="{{ route('pos.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>Invoice No</th>
                            <th>Customer</th>
                            <th>Method</th>
                            <th class="text-right">Received</th>
                            <th>By</th>
                            <th>Time</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payments as $i => $p)
                            <tr>
                                <td>{{ $payments->firstItem() + $i }}</td>
                                <td>
                                    @if($p->payment_type === 'due')
                                        <span class="badge badge-warning">Due</span>
                                    @else
                                        <span class="badge badge-info">Sale</span>
                                    @endif
                                </td>
                                <td style="white-space:nowrap;">
                                    @if(!empty($p->invoice_id))
                                        <a href="{{ route('pos.invoices.show', $p->invoice_id) }}" target="_blank">{{ $p->invoice_number }}</a>
                                    @else
                                        <div style="max-width:320px; white-space:normal;">{{ $p->invoice_numbers ?: '-' }}</div>
                                    @endif
                                    <div class="text-muted" style="font-size:12px;">Payment ID: {{ $p->payment_id }}</div>
                                </td>
                                <td style="text-transform: capitalize;">
                                    {{ $p->customer_name ?? 'Walk-in Customer' }}
                                    @if(!empty($p->customer_pin))
                                        <div class="text-muted" style="font-size:12px;">PIN: {{ $p->customer_pin }}</div>
                                    @endif
                                </td>
                                <td>{{ strtoupper($p->method ?? '-') }}</td>
                                <td class="text-right">
                                    {{ number_format((float)($p->received ?? 0), 2) }}
                                    @if($p->payment_type === 'due')
                                        <div class="text-muted" style="font-size:12px; white-space:nowrap;">
                                            Applied: {{ number_format((float)($p->applied ?? 0), 2) }}
                                            @if((float)($p->change_amount ?? 0) > 0.0001)
                                                | Change: {{ number_format((float)($p->change_amount ?? 0), 2) }}
                                            @endif
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $p->user_name ?? '-' }}</td>
                                <td>{{ $p->paid_at ? \Carbon\Carbon::parse($p->paid_at)->format('Y-m-d h:i A') : '-' }}</td>
                                <td style="white-space:nowrap;">
                                    @php
                                        $rowAmount = number_format((float)($p->received ?? 0), 2, '.', '');
                                        $rowMethod = strtolower($p->method ?? '');
                                        $rowPaidAt = $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-pay-edit" type="button"
                                            data-type="{{ $p->payment_type }}"
                                            data-id="{{ (int) $p->payment_id }}"
                                            data-amount="{{ $rowAmount }}"
                                            data-method="{{ $rowMethod }}"
                                            data-paid-at="{{ $rowPaidAt }}">Edit</button>
                                    <button class="btn btn-sm btn-danger js-pay-delete" type="button"
                                            data-type="{{ $p->payment_type }}"
                                            data-id="{{ (int) $p->payment_id }}">Delete</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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

<!-- Edit Modal -->
<div class="modal fade" id="paymentEditModal" 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 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 older due payments can change which invoices are marked as paid.
        </div>
        <input type="hidden" id="pay_edit_type">
        <input type="hidden" id="pay_edit_id">

        <div class="form-group">
          <label>Amount</label>
          <input type="number" step="0.01" min="0.01" class="form-control" id="pay_edit_amount">
        </div>
        <div class="form-group">
          <label>Method</label>
          <select class="form-control" id="pay_edit_method">
            <option value="cash">CASH</option>
            <option value="pos">POS</option>
            <option value="card">CARD</option>
          </select>
          <div class="text-muted" style="font-size:12px; margin-top:4px;">For due payments, only CASH/POS are used.</div>
        </div>
        <div class="form-group">
          <label>Date/Time</label>
          <input type="datetime-local" class="form-control" id="pay_edit_paid_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="savePaymentEdit()">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 openPaymentEditModal(data) {
    document.getElementById('pay_edit_type').value = data.type;
    document.getElementById('pay_edit_id').value = data.id;
    document.getElementById('pay_edit_amount').value = data.amount;
    document.getElementById('pay_edit_method').value = (data.method || 'cash');
    document.getElementById('pay_edit_paid_at').value = (data.paid_at || '');

    // For due payments, constrain methods
    const methodSel = document.getElementById('pay_edit_method');
    if (data.type === 'due') {
        methodSel.value = (data.method === 'pos') ? 'pos' : 'cash';
        Array.from(methodSel.options).forEach(o => {
            o.disabled = !['cash','pos'].includes(o.value);
        });
    } else {
        Array.from(methodSel.options).forEach(o => { o.disabled = false; });
    }

    showModalById('paymentEditModal');
}

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('#paymentEditModal').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-pay-edit').forEach(btn => {
        btn.addEventListener('click', () => {
            openPaymentEditModal({
                type: btn.getAttribute('data-type'),
                id: Number(btn.getAttribute('data-id')),
                amount: btn.getAttribute('data-amount'),
                method: btn.getAttribute('data-method'),
                paid_at: btn.getAttribute('data-paid-at')
            });
        });
    });

    document.querySelectorAll('.js-pay-delete').forEach(btn => {
        btn.addEventListener('click', () => {
            deletePayment(btn.getAttribute('data-type'), Number(btn.getAttribute('data-id')));
        });
    });
});

async function savePaymentEdit() {
    const type = document.getElementById('pay_edit_type').value;
    const id = document.getElementById('pay_edit_id').value;
    const amount = document.getElementById('pay_edit_amount').value;
    const method = document.getElementById('pay_edit_method').value;
    const paid_at = document.getElementById('pay_edit_paid_at').value;

    let url = '';
    let payload = {};

    if (type === 'sale') {
        url = `{{ url('/pos/invoices/payments') }}/${id}`;
        payload = { amount, method, paid_at };
    } else {
        url = `{{ url('/pos/credit-payments') }}/${id}`;
        payload = { amount, channel: method, applied_at: paid_at };
    }

    const res = await fetch(url, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken(),
        },
        body: JSON.stringify(payload),
    });

    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 deletePayment(type, id) {
    if (!confirm('Delete this payment?')) return;

    const url = (type === 'sale')
        ? `{{ url('/pos/invoices/payments') }}/${id}`
        : `{{ url('/pos/credit-payments') }}/${id}`;

    const res = await fetch(url, {
        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();
}
</script>
@endsection