@extends('layouts.layoutapp')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card me-2">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">Add Payment</h5>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            @if (isWalletEnabled())
                                <span class="badge bg-info wallet_balance" style="display: none;">Wallet Balance: ₹
                                    0.00</span>
                            @endif
                            <span class="badge bg-primary extra_amount" style="display: none;">Extra Amount: ₹ 0.00</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('invoice-payment-store') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-lg-4 mb-4">
                                <label for="invoice" class="form-label">Invoice:</label>
                                <select class="form-select select2" id="invoice_id" name="invoice" required>
                                    <option value="">Select invoice</option>
                                    @foreach ($invoices as $data)
                                        <option value="{{ $data->id }}"
                                            {{ old('invoice') == $data->id ? 'selected' : '' }}>
                                            {{ $data->invoice_id }} - {{ $data->client->user->phone ?? '' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('invoice')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-4">
                                <label for="totalAmount" class="form-label">Total Amount:</label>
                                <input type="text" id="totalAmount" class="form-control" name="totalAmount"
                                    value="{{ old('totalAmount') }}" required readonly>
                                @error('totalAmount')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-4">
                                <label for="dueAmount" class="form-label">Due Amount:</label>
                                <input type="text" id="dueAmount" class="form-control" name="dueAmount"
                                    value="{{ old('dueAmount') }}" required readonly>
                                @error('dueAmount')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-4">
                                <label for="paidAmount" class="form-label">Paid Amount</label>
                                <input type="text" id="paidAmount" class="form-control" name="paidAmount"
                                    value="{{ old('paidAmount') }}" required readonly>
                                @error('paidAmount')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-4">
                                <label for="paymentDate" class="form-label">Payment Date</label>
                                <input type="date" id="paymentDate" class="form-control" name="paymentDate"
                                    value="{{ old('paymentDate', now()->toDateString()) }}" required>
                                @error('paymentDate')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-4">
                                <label for="paymentMethod" class="form-label">Payment Method</label>
                                <select name="paymentMethod" id="paymentMethod" class="form-select" required>
                                    <option value="">Select Payment Method</option>
                                    @foreach ($payment_mode as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                @error('paymentMethod')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-4" id="tenderedAmountContainer" style="display: none;">
                                <label for="tendered_amount" class="form-label">Tendered Amount</label>
                                <input type="number" step="0.01" name="tendered_amount" id="tendered_amount"
                                    class="form-control" value="{{ old('tendered_amount') }}"
                                    placeholder="Enter tendered amount">
                                @error('tendered_amount')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-4">
                                <label for="amount" class="form-label">Amount</label>
                                <input type="number" step="0.01" id="amount" class="form-control" name="amount"
                                    value="{{ old('amount') }}" placeholder="Enter Amount">
                                @error('amount')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            @if (isWalletEnabled())
                                <div class="col-lg-4 mb-4">
                                    <label class="form-label d-block">&nbsp;</label>
                                    <div class="form-check mb-0">
                                        <input class="form-check-input" type="checkbox" value="1" id="use_wallet"
                                            name="use_wallet" {{ old('use_wallet') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="use_wallet">
                                            Debit from wallet
                                        </label>
                                    </div>
                                    @error('use_wallet')
                                        <span class="text-danger d-block ms-2">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-lg-4 mb-4" id="walletAmountContainer" style="display: none;">
                                    <label for="wallet_amount" class="form-label">Wallet Amount</label>
                                    <input type="number" step="0.01" name="wallet_amount" id="wallet_amount"
                                        class="form-control" value="{{ old('wallet_amount') }}"
                                        placeholder="Enter wallet amount">
                                    @error('wallet_amount')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endif
                            <div class="col-lg-12 mb-4">
                                <label for="note" class="form-label">Note:</label>
                                <textarea id="note" class="form-control" name="note">{{ old('note') }}</textarea>
                                @error('note')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary me-2">Save Payment</button>
                            <a href="{{ route('invoice-payment-index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let dueAmount = 0;

        $(document).ready(function() {
            const $amount = $('#amount');

            function calculatePaymentBreakdown() {
                const totalDue = dueAmount || 0;
                const paidAmount = parseFloat($('#paidAmount').val()) || 0;
                const walletAmount = ($('#use_wallet').length && $('#use_wallet').is(':checked')) ?
                    (parseFloat($('#wallet_amount').val()) || 0) :
                    0;
                const tenderedAmount = parseFloat($('#tendered_amount').val()) || 0;

                let remainingAmount = totalDue - paidAmount - walletAmount;
                if (remainingAmount < 0) remainingAmount = 0;

                const selectedText = $('#paymentMethod option:selected').text().toLowerCase();
                let extraAmount = 0;

                if (selectedText.includes('cash') && tenderedAmount > 0) {
                    let payingAmount = Math.min(tenderedAmount, remainingAmount);
                    $amount.val(payingAmount.toFixed(2));
                    extraAmount = Math.max(tenderedAmount - remainingAmount, 0);
                }

                $('.extra_amount').text('Extra Amount: ₹ ' + extraAmount.toFixed(2));

                const currentAmount = parseFloat($amount.val()) || 0;
                if (currentAmount > 0) {
                    $('#paymentMethod').attr('required', 'required');
                } else {
                    $('#paymentMethod').removeAttr('required');
                }
            }

            $('#invoice_id').on('change', function() {
                const invoiceId = $(this).val();
                if (!invoiceId) return;

                fetch(`/invoice-payments/dtls/${invoiceId}`)
                    .then(response => response.json())
                    .then(data => {
                        $('#totalAmount').val(data.totalAmount);
                        $('#dueAmount').val(data.dueAmount);
                        dueAmount = parseFloat(data.dueAmount) || 0;
                        $('#paidAmount').val(data.paidAmount ?? 0);
                        @if (isWalletEnabled())
                            $('.wallet_balance').show().text('Wallet Balance: ₹ ' + parseFloat(data
                                .walletBalance ?? 0).toFixed(2));
                        @endif
                        
                        if ($('#use_wallet').length && $('#use_wallet').is(':checked')) {
                            $amount.val('');
                        } else {
                            $amount.val(dueAmount.toFixed(2));
                        }
                        calculatePaymentBreakdown();
                    });
            });

            $('#paymentMethod').on('change', function() {
                const selectedText = $('#paymentMethod option:selected').text().toLowerCase();
                if (selectedText.includes('cash')) {
                    $('#tenderedAmountContainer').show();
                } else {
                    $('#tenderedAmountContainer').hide();
                    $('#tendered_amount').val('');
                }
                calculatePaymentBreakdown();
            });

            $(document).on('input change', '#wallet_amount, #use_wallet, #tendered_amount', function() {
                if ($('#use_wallet').length && !$('#use_wallet').is(':checked')) {
                    $('#wallet_amount').val('');
                    $('#walletAmountContainer').hide();
                    @if (isWalletEnabled())
                        $('.wallet_balance').hide();
                    @endif
                    const totalDue = dueAmount || 0;
                    const paidAmount = parseFloat($('#paidAmount').val()) || 0;
                    $amount.val((totalDue - paidAmount).toFixed(2));
                } else if ($('#use_wallet').length) {
                    $('#walletAmountContainer').show();
                    @if (isWalletEnabled())
                        $('.wallet_balance').show();
                    @endif
                    $amount.val('');
                }
                calculatePaymentBreakdown();
            });

            if ($('#use_wallet').length && $('#use_wallet').is(':checked')) {
                $('#walletAmountContainer').show();
                @if (isWalletEnabled())
                    $('.wallet_balance').show();
                @endif
            }
        });
    </script>
@endpush