@extends('layouts.admin')

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('deposit_transactions') }}</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ tr('home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ tr('create_deposit_transaction') }}</li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')
<div class="col-12 col-xl-12">
    <div class="card card-h-100">
        <div class="card-header">
            <h5 class="card-title">{{ tr('create_deposit_transaction') }}</h5>
        </div>

        <div class="card-body">

            <form action="{{ route('admin.deposit_transactions.store') }}" method="POST">
                @csrf
                <div class="row g-4">

                    <div class="col-xxl-6">
                        <label class="form-label">{{ tr('users') }}</label>
                        <select name="user_id" id="user_id" class="form-control" required>
                            <option value="">{{ tr('select_user') }}</option>
                            @foreach ($users as $user)
                            <option value="{{ $user->unique_id }}"
                                {{ old('user_id') == $user->unique_id ? 'selected' : '' }}>
                                {{ $user->name ?: tr('na') }} ({{ $user->email ?: tr('na') }})
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-xxl-6">
                        <label class="form-label">{{ tr('virtual_accounts') }}</label>
                        <select name="virtual_account_id" id="virtual_account_id" class="form-control" required>
                            <option value="">{{ tr('select_virtual_account') }}</option>
                        </select>
                    </div>


                    <div class="col-xxl-6">
                        <label class="form-label">{{ tr('amount') }}</label>
                        <input name="amount" id="amount" placeholder="{{ tr('enter_amount') }}"
                            class="form-control" required>
                    </div>

                    <div class="col-xxl-6">
                        <label class="form-label">{{ tr('commission_amount') }}</label>
                        <input name="commission_amount" id="commission_amount"
                            placeholder="{{ tr('enter_commission_amount') }}" class="form-control">
                    </div>

                    <div class="col-xxl-6">
                        <label class="form-label">{{ tr('total_amount') }}</label>
                        <input name="total_amount" id="total_amount" placeholder="{{ tr('enter_total_amount') }}"
                            class="form-control" readonly>
                    </div>

                    <div class="col-xxl-6">
                        <label class="form-label">{{ tr('remarks') }}</label>
                        <input name="remarks" placeholder="{{ tr('enter_remarks') }}" class="form-control">
                    </div>

                    <div class="col-xxl-6">
                        <label class="form-label">{{ tr('type') }}</label>

                        <select name="type" id="type" class="form-control" required>

                            <option value="">
                                {{ tr('select_type') }}
                            </option>

                            @php
                            $types = deposit_transaction_types();
                            @endphp

                            @foreach($types as $type)

                            <option value="{{ $type }}"
                                {{ old('type') == $type ? 'selected' : '' }}>
                                {{ ucfirst($type) }}
                            </option>

                            @endforeach

                        </select>
                    </div>


                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('admin.deposit_transactions.index') }}" class="btn btn-danger">
                            {{ tr('cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            {{ tr('submit') }}
                        </button>
                    </div>
            </form>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

        const amountInput = document.getElementById('amount');
        const commissionInput = document.getElementById('commission_amount');
        const totalInput = document.getElementById('total_amount');

        if (!amountInput || !commissionInput || !totalInput) {
            return;
        }

        function calculateTotal() {
            const amount = parseFloat(amountInput.value) || 0;
            const commission = parseFloat(commissionInput.value) || 0;

            const total = amount - commission;
            totalInput.value = total.toFixed(2);
        }

        amountInput.addEventListener('input', calculateTotal);
        commissionInput.addEventListener('input', calculateTotal);
    });
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const userSelect = document.getElementById('user_id');
    const virtualAccountSelect = document.getElementById('virtual_account_id');

    userSelect.addEventListener('change', function () {

        const userId = this.value;

        virtualAccountSelect.innerHTML =
            `<option value="">{{ tr('select_virtual_account') }}</option>`;

        if (!userId) return;

        fetch(`{{ url('admin/virtual_accounts/user-virtual-accounts') }}/${userId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Failed to fetch virtual accounts');
                }
                return response.json();
            })
            .then(data => {

                const accounts = data.virtual_accounts?.data || [];

                if (accounts.length === 0) {
                    virtualAccountSelect.innerHTML +=
                        `<option value="">{{ tr('no_virtual_accounts_found') }}</option>`;
                    return;
                }

                accounts.forEach(account => {
                    console.log(account);
                    const option = document.createElement('option');
                    option.value = account.id;
                    option.textContent =
                        `${account.account_holder_name ?? 'N/A'} - ${account.account_number ?? 'N/A'} - ${account.currency ?? 'N/A'}`;
                    virtualAccountSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error(error);
                alert('{{ tr('something_went_wrong') }}');
            });
    });
});
</script>

@endsection