@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('own_account_transfers.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="card-header">
                                    <h4>{{ __('messages.add_transfer') }}</h4>
                                </div>
                                <div class="card-body">
                                    
                                    <div class="form-group">
                                        <label>{{ __('messages.from_account') }}</label>
                                        <select name="from_account" id="from_account" class="form-control" required>
                                            <option selected disabled>{{ __('messages.select_from_account') }}</option>
                                            @forelse ($accounts as $account)
                                                <option value="{{ $account->id }}"
                                                    {{ old('from_account') == $account->id ? 'selected' : '' }}>
                                                    {{ $account->title . '  --  ' . $account->type }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_from_accounts') }}</option>
                                            @endforelse
                                        </select>

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

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

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

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

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

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

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

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fromAccountSelect = document.getElementById('from_account');
            const fromAccountBalanceSpan = document.getElementById('from_account_balance');

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

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

            // Trigger the change event to load balance if an account is selected
            if (fromAccountSelect.value) {
                fetchAndDisplayBalance(fromAccountSelect.value);
            }

            const toAccountSelect = document.getElementById('to_account');
            const toAccountBalanceSpan = document.getElementById('to_account_balance');

            function fetchAndDisplayToBalance(accountId) {
                if (accountId) {
                    fetch(`/accounts/${accountId}/count_balance`)
                        .then(response => response.json())
                        .then(data => {
                            toAccountBalanceSpan.textContent = data;
                        })
                        .catch(error => console.error('Error fetching balance:', error));
                } else {
                    toAccountBalanceSpan.textContent = '0';
                }
            }

            toAccountSelect.addEventListener('change', function() {
                fetchAndDisplayToBalance(this.value);
            });

            // Trigger the change event to load balance if an account is selected
            if (toAccountSelect.value) {
                fetchAndDisplayToBalance(toAccountSelect.value);
            }
        });
    </script>
@endsection