@extends('dashboard.layouts.app')

@section('title', __('dashboard.Pay Invoice') . ' #' . $invoice->id)
@section('page_heading', __('dashboard.Pay Invoice') . ' #' . $invoice->id)

@section('breadcrumb')
<li class="breadcrumb-item">
    <a href="{{ route('dashboard.home') }}" class="text-decoration-none">{{ __('dashboard.Home') }}</a>
</li>
<li class="breadcrumb-item">
    <a href="{{ route('dashboard.invoices.index') }}" class="text-decoration-none">{{ __('dashboard.Invoices') }}</a>
</li>
<li class="breadcrumb-item">
    <a href="{{ route('dashboard.invoices.show', $invoice) }}"
        class="text-decoration-none">{{ __('dashboard.Invoice') }} #{{ $invoice->id }}</a>
</li>
<li class="breadcrumb-item active">{{ __('dashboard.Pay') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('dashboard.Pay Invoice') }} #{{ $invoice->id }}</h3>
        <div class="card-toolbar">
            <span class="badge badge-light-primary fs-base">
                {{__('dashboard.Remaining Amount')}}:
                <span id='remaining_amount'>{{ number_format($remainingAmount, 2) }} {{ $invoice->currency ? $invoice->currency->code : 'N/A' }}</span>
            </span>
        </div>
    </div>
    <div class="card-body">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <form action="{{ route('dashboard.invoices.pay', $invoice) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="payment_type" value="inbound">

            <!-- Payment Method Selection -->
            <div class="mb-3">
                <label class="form-label">{{ __('dashboard.Payment Method') }}</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="payment_method" id="wallet_payment" value="wallet" checked>
                    <label class="form-check-label" for="wallet_payment">
                        {{ __('dashboard.Pay from Wallet') }}
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="payment_method" id="bank_payment" value="bank">
                    <label class="form-check-label" for="bank_payment">
                        {{ __('dashboard.Pay to Bank Account') }}
                    </label>
                </div>
            </div>

            <!-- Account Selection (hidden by default) -->
            <div class="mb-3" id="account_selection" style="display: none;">
                <label for="account_id" class="form-label">{{ __('accounts.Account') }}</label>
                <select class="form-select form-select-solid @error('account_id') is-invalid @enderror" id="account_id"
                    name="account_id" data-control="select2"
                    data-placeholder="{{__('dashboard.Select an option')}}" data-allow-clear="true">
                    <option value=""></option>
                    @foreach ($accounts as $account)
                    <option value="{{ $account->id }}" data-currency-id="{{ $account->currency_id }}"
                        data-currency-code="{{ $account->currency->code }}" {{ old('account_id')==$account->id ? 'selected' : '' }}>
                        {{ $account->name }} ({{ $account->currency->code }})
                    </option>
                    @endforeach
                </select>
                @error('account_id')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <input type="hidden" name="currency_id" id="currency_id" value="">

            <div class="mb-3">
                <label for="amount" class="form-label">{{ __('dashboard.Amount') }}</label>
                <input type="number" class="form-control form-control-solid @error('amount') is-invalid @enderror"
                    id="amount" name="amount" step="0.01" min="0.01"
                    value="{{ old('amount', $remainingAmount) }}" required>
                @error('amount')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3" id="exchange_rate_div" style="display: none;">
                <label for="exchange_rate" class="form-label">{{ __('transactions.Exchange Rate') }}</label>
                <input type="number" step="0.0000000001"
                    class="form-control form-control-solid @error('exchange_rate') is-invalid @enderror"
                    id="exchange_rate" name="exchange_rate" value="{{ old('exchange_rate') }}"
                    placeholder="{{ __('transactions.Enter exchange rate if applicable') }}">
                @error('exchange_rate')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <div id="exchange_rate_info" class="form-text"></div>
            </div>

            <div class="mb-3">
                <label for="payment_date" class="form-label">{{ __('payments.Payment Date') }}</label>
                <input type="date" class="form-control form-control-solid @error('payment_date') is-invalid @enderror"
                    id="payment_date" name="payment_date" value="{{ old('payment_date', now()->format('Y-m-d')) }}" required>
                @error('payment_date')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="reference_number" class="form-label">{{ __('payments.Reference Number') }}</label>
                <input type="text" class="form-control form-control-solid @error('reference_number') is-invalid @enderror"
                    id="reference_number" name="reference_number" value="{{ old('reference_number') }}" maxlength="255">
                @error('reference_number')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="notes" class="form-label">{{ __('payments.Notes') }}</label>
                <textarea class="form-control form-control-solid @error('notes') is-invalid @enderror" id="notes"
                    name="notes" rows="3">{{ old('notes') }}</textarea>
                @error('notes')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="attachment" class="form-label">{{ __('payments.Attachment') }}</label>
                <input type="file" class="form-control form-control-solid @error('attachment') is-invalid @enderror"
                    id="attachment" name="attachment">
                @error('attachment')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="btn btn-primary">{{ __('dashboard.Pay') }}</button>
            <a href="{{ route('dashboard.invoices.show', $invoice) }}" class="btn btn-secondary">{{ __('dashboard.Cancel') }}</a>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#account_id').select2({
            placeholder: "{{__('dashboard.Select an option')}}",
            allowClear: true,
            theme: 'bootstrap-5',
            width: '100%'
        });

        // Show/hide account selection based on payment method
        $('input[name="payment_method"]').on('change', function() {
            if (this.value === 'wallet') {
                $('#account_selection').hide();
                $('#account_id').removeAttr('required');
            } else {
                $('#account_selection').show();
                $('#account_id').attr('required', 'required');
            }
        }).trigger('change');

        // Update currency and exchange rate visibility
        function updateCurrency() {
            let selectedAccountId = $('#account_id').val();
            if (selectedAccountId) {
                let selectedOption = $('#account_id option:selected');
                let currencyId = selectedOption.data('currency-id');
                let currencyCode = selectedOption.data('currency-code');
                $('#currency_id').val(currencyId);
                if (currencyCode != 'USD') {
                    $('#exchange_rate_div').show();
                    $('#exchange_rate_info').text('Exchange Rate: 1 ' + currencyCode + ' = ... USD');
                } else {
                    $('#exchange_rate_div').hide();
                }
            } else {
                $('#currency_id').val('');
                $('#exchange_rate_div').hide();
            }
        }

        $('#account_id').on('change', updateCurrency);
        let initialAccountId = $('#account_id').val();
        if (initialAccountId) {
            updateCurrency();
        }
    });
</script>
@endsection