@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-sm-12">
        <div class="page-title-box">
            <h4 class="page-title">Record Payment</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form id="payment-form" action="{{ route('finance.payments.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Invoice</label>
                            <select name="invoice_id" class="form-select select2" required>
                                <option value="">Select Invoice</option>
                                @foreach($invoices as $invoice)
                                    <option value="{{ $invoice->id }}" data-balance="{{ $invoice->balance_amount }}">{{ $invoice->invoice_number }} - {{ $invoice->client->name }} (Balance: {{ number_format($invoice->balance_amount, 2) }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Amount</label>
                            <input type="number" name="amount" id="amount" class="form-control" min="0.01" step="0.01" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Payment Date</label>
                            <input type="date" name="payment_date" class="form-control" required value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Payment Method</label>
                            <select name="payment_method" class="form-select" required>
                                <option value="cash">Cash</option>
                                <option value="bank_transfer">Bank Transfer</option>
                                <option value="credit_card">Credit Card</option>
                                <option value="paypal">PayPal</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Reference (Transaction ID)</label>
                            <input type="text" name="reference" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="mt-4 text-end">
                        <a href="{{ route('finance.payments.index') }}" class="btn btn-secondary me-2">Cancel</a>
                        <button type="button" class="btn btn-primary" id="save-btn">Record Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('.select2').select2({ theme: 'bootstrap-5' });

    $('select[name="invoice_id"]').change(function() {
        let balance = $(this).find(':selected').data('balance');
        if(balance) {
            $('#amount').val(balance);
        }
    });

    $('#save-btn').click(function() {
        $.ajax({
            url: $('#payment-form').attr('action'),
            method: 'POST',
            data: $('#payment-form').serialize(),
            success: function(res) {
                if(res.status) {
                    Swal.fire('Success', res.message, 'success').then(() => {
                        window.location.href = "{{ route('finance.payments.index') }}";
                    });
                }
            },
            error: function(xhr) {
                Swal.fire('Error', 'Please fill all required fields correctly', 'error');
            }
        });
    });
});
</script>
@endsection
