@extends('layout.admin.master')

@section('content')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="section-body">
                <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                        <div class="card">
                            <form action="{{ route('received_payments.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="card-header">
                                    <h4>{{ __('messages.receive_payment') }}</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>{{ __('messages.partner') }}</label>
                                        <select name="partner_id" id="partner" class="form-control" required>
                                            <option selected disabled>{{ __('messages.select_partner') }}</option>
                                            @forelse ($partners as $partner)
                                                <option value="{{ $partner->id }}"
                                                    {{ old('partner_id') == $partner->id ? 'selected' : '' }}>
                                                    {{ $partner->fname . ' ' . $partner->lname . '  --  ' . $partner->company }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_partners_available') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('partner_id'))
                                            <div class="text-danger">{{ $errors->first('partner_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.account') }}</label>
                                        <select name="account_id" id="account" class="form-control" required>
                                            <option selected disabled>{{ __('messages.select_account') }}</option>
                                            @forelse ($accounts as $account)
                                                <option value="{{ $account->id }}"
                                                    {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                                    {{ $account->title . '  --  ' . $account->type }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_accounts_available') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('account_id'))
                                            <div class="text-danger">{{ $errors->first('account_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.amount') }}</label>
                                        <input name="amount" type="number" class="form-control"
                                            value="{{ old('amount') }}" required="">

                                        @if ($errors->has('amount'))
                                            <div class="text-danger">{{ $errors->first('amount') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.comment') }}</label>
                                        <textarea class="form-control" name="comment" id="" cols="30" rows="10">{{ old('comment') }}</textarea>

                                        @if ($errors->has('comment'))
                                            <div class="text-danger">{{ $errors->first('comment') }}</div>
                                        @endif
                                    </div>

                                </div>
                                <div class="card-footer text-right">
                                    <p>{{ __('messages.balance') }}: <span id="balance">0</span></p>
                                    <button class="btn btn-primary">{{ __('messages.add') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    const partnerSelect = document.getElementById('partner');
    const balanceSpan = document.getElementById('balance');

    function fetchAndDisplayBalance(partnerId) {
        if (partnerId) {
            fetch(`/partners/${partnerId}/count_balance`)
                .then(response => response.json())
                .then(data => {
                    balanceSpan.textContent = data;
                })
                .catch(error => console.error('Error fetching balance:', error));
        } else {
            balanceSpan.textContent = '0';
        }
    }

    partnerSelect.addEventListener('change', function() {
        fetchAndDisplayBalance(this.value);
    });

    // Trigger the change event to load balance if a partner is selected
    if (partnerSelect.value) {
        fetchAndDisplayBalance(partnerSelect.value);
    }
});

</script>