@extends('layouts.app')
@section('title', __('Add Customer Receipt'))
@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3 no-print">
    <div>
        <h5 class="mb-1"><i class="fa-solid fa-arrow-down text-success me-2"></i>{{ __('Add Customer Receipt') }}</h5>
        <div class="text-muted small">{{ __('Receive money from unpaid or partially paid sales invoices.') }}</div>
    </div>
    <a href="{{ route('payments.receipts') }}" class="btn btn-light"><i class="fa-solid fa-list me-1"></i>{{ __('Customer Receipts') }}</a>
</div>

<div class="card">
    <div class="card-body p-4">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
            <h6 class="mb-0">{{ __('Receipt Method') }}</h6>
            <div class="btn-group btn-group-sm no-print" role="group">
                <button type="button" class="btn btn-success txn-mode active" data-target="#customer-by-invoice">{{ __('By Invoice') }}</button>
                <button type="button" class="btn btn-light txn-mode" data-target="#customer-general">{{ __('General Receipt') }}</button>
            </div>
        </div>

        <form id="customer-by-invoice" class="txn-pane" method="POST" action="{{ route('payments.receive') }}">@csrf
            <input type="hidden" name="allocation_mode" value="invoice">
            <div class="d-flex justify-content-between align-items-center mt-3 gap-2">
                <small class="text-muted">{{ __('Only unpaid and partially paid sales invoices are shown.') }}</small>
                <div class="btn-group btn-group-sm no-print">
                    <button type="button" class="btn btn-light allocation-action" data-action="select-visible">{{ __('Select all') }}</button>
                    <button type="button" class="btn btn-light allocation-action" data-action="clear-visible">{{ __('Clear') }}</button>
                </div>
            </div>
            <div class="mt-3">
                <label class="form-label">{{ __('Unpaid Sales Invoices') }}</label>
                <select class="form-select allocation-select" multiple size="10" data-id-key="invoice_id">
                    @forelse($customerInvoices as $invoice)
                        <option value="{{ $invoice->id }}" data-due="{{ $invoice->due_amount }}" data-label="{{ $invoice->invoice_number }} - {{ $invoice->customer?->name ?? __('Walk-in/General Customer Sale') }}" data-currency="{{ $invoice->currency_code }}">{{ $invoice->invoice_number }} - {{ $invoice->customer?->name ?? __('Walk-in/General Customer Sale') }} - {{ number_format($invoice->due_amount,2) }} {{ $invoice->currency_code }}</option>
                    @empty
                        <option disabled>{{ __('No unpaid invoices.') }}</option>
                    @endforelse
                </select>
                <div class="allocation-fields"></div>
                <div class="selected-summary small text-muted mt-2">{{ __('No invoices selected.') }}</div>
            </div>
            <div class="row g-2 mt-2 align-items-end">
                <div class="col-md-4"><label class="form-label">{{ __('Amount') }}</label><input name="amount" type="number" min="0.01" step="0.01" class="form-control allocation-total" readonly required></div>
                <div class="col-md-4"><label class="form-label">{{ __('Date') }}</label><input name="payment_date" type="date" class="form-control" value="{{ now()->toDateString() }}" required></div>
                <div class="col-md-4"><label class="form-label">{{ __('Method') }}</label><select name="method" class="form-select"><option value="cash">{{ __('Cash') }}</option><option value="bank">{{ __('Bank') }}</option><option value="mobile">{{ __('Mobile Money') }}</option><option value="other">{{ __('Other') }}</option></select></div>
                <div class="col-12"><input name="reference" class="form-control" placeholder="{{ __('Reference number') }}"></div>
            </div>
            <button class="btn btn-success w-100 mt-3"><i class="fa-solid fa-circle-down me-1"></i>{{ __('Receive Payment') }}</button>
        </form>

        <form id="customer-general" class="txn-pane d-none" method="POST" action="{{ route('payments.receive') }}">@csrf
            <input type="hidden" name="allocation_mode" value="general">
            <div class="row g-2">
                <div class="col-md-7"><label class="form-label">{{ __('Customer') }}</label><select name="customer_id" class="form-select general-party" required><option value="">{{ __('Select customer') }}</option>@foreach($customers as $customer)<option value="{{ $customer->id }}" data-currency="{{ $customer->payment_currency_code }}">{{ $customer->name }} - {{ number_format($customer->outstanding_balance,2) }} {{ $customer->payment_currency_code ?: $moneyCode }}</option>@endforeach</select></div>
                <div class="col-md-5"><label class="form-label">{{ __('Currency') }}</label><select name="currency_code" class="form-select">@foreach($currencies as $currency)<option value="{{ $currency->code }}" @selected($currency->is_default)>{{ $currency->code }}</option>@endforeach</select></div>
                <div class="col-md-4"><label class="form-label">{{ __('Amount') }}</label><input name="amount" type="number" min="0.01" step="0.01" class="form-control" required></div>
                <div class="col-md-4"><label class="form-label">{{ __('Date') }}</label><input name="payment_date" type="date" class="form-control" value="{{ now()->toDateString() }}" required></div>
                <div class="col-md-4"><label class="form-label">{{ __('Method') }}</label><select name="method" class="form-select"><option value="cash">{{ __('Cash') }}</option><option value="bank">{{ __('Bank') }}</option><option value="mobile">{{ __('Mobile Money') }}</option><option value="other">{{ __('Other') }}</option></select></div>
                <div class="col-12"><input name="reference" class="form-control" placeholder="{{ __('Reference number') }}"></div>
            </div>
            <button class="btn btn-success w-100 mt-3"><i class="fa-solid fa-circle-down me-1"></i>{{ __('Receive Payment') }}</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
    @include('payments.partials.allocation-scripts')
@endpush