@extends('dashboard.admin.layouts.app')
@section('content')
    <div class="page-container">

        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column gap-2">
            <div class="flex-grow-1">
                <h4 class="fs-18 fw-semibold mb-0">{{ $title }}</h4>
            </div>

            <div class="text-end">
                <x-dashboard.breadcrumbs :breadcrumbs="$breadcrumbs" />
            </div>
        </div>

        <div class="row">
            @include('dashboard.admin.user.partials.account_options_and_status')

            <div class="col-lg-12">
                <x-dashboard.card title="{{ $title }}">

                    <form action="{{ route('admin.user.balance_management.store', $user->uuid) }}" method="post">
                        @csrf

                        <div class="row g-3">

                            {{-- User (read-only context) --}}
                            <div class="col-md-6">
                                <label for="user" class="form-label fw-medium">User</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-body-tertiary">
                                        <i class="ti ti-user"></i>
                                    </span>
                                    <input type="text" id="user" class="form-control" value="{{ $user->name }}"
                                        readonly>
                                </div>
                            </div>

                            {{-- Balance Type --}}
                            <div class="col-md-6">
                                <label for="balance_type" class="form-label fw-medium">Balance Type <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-body-tertiary">
                                        <i class="ti ti-wallet"></i>
                                    </span>
                                    <select name="balance_type" id="balance_type"
                                        class="form-select @error('balance_type') is-invalid @enderror" required
                                        data-balance="{{ $user->balance }}"
                                        data-profit_balance="{{ $user->profit_balance }}"
                                        data-demo_balance="{{ $user->demo_balance }}">
                                        <option value="" disabled {{ old('balance_type') ? '' : 'selected' }}>Select
                                            balance type
                                        </option>
                                        <option value="balance" {{ old('balance_type') == 'balance' ? 'selected' : '' }}>
                                            Main Balance
                                        </option>
                                        <option value="profit_balance"
                                            {{ old('balance_type') == 'profit_balance' ? 'selected' : '' }}>
                                            Profit Balance
                                        </option>
                                        <option value="demo_balance"
                                            {{ old('balance_type') == 'demo_balance' ? 'selected' : '' }}>
                                            Demo Balance
                                        </option>
                                    </select>
                                    @error('balance_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-text">Select which balance this amount should be credited to.</div>
                            </div>

                            {{-- Current Balance (display only, updates based on selected type) --}}
                            <div class="col-md-6">
                                <label for="current_balance" class="form-label fw-medium">Current Balance</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-body-tertiary">{{ currency($user->currency) }}</span>
                                    <input type="text" id="current_balance" class="form-control"
                                        value="{{ formatAmount($user->balance) }}" readonly>
                                </div>
                            </div>

                            {{-- New Balance --}}
                            <div class="col-md-6">
                                <label for="amount" class="form-label fw-medium">New Balance <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-body-tertiary">{{ currency($user->currency) }}</span>
                                    <input type="number" step="0.01" min="0" name="amount" id="amount"
                                        class="form-control @error('amount') is-invalid @enderror"
                                        value="{{ old('amount') }}" placeholder="0.00" required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-text">Enter the value the selected balance should be set to.</div>
                            </div>

                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary"
                                onclick="return confirm('Are you sure you want to update the user\'s balance? This will overwrite the current value.');">
                                <i class="ti ti-cash-banknote me-1"></i> Update Balance
                            </button>
                        </div>

                    </form>

                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const typeSelect = document.getElementById('balance_type');
                            const currentBalanceInput = document.getElementById('current_balance');

                            function updateCurrentBalance() {
                                const type = typeSelect.value;
                                if (!type) return;
                                const raw = typeSelect.dataset[type];
                                currentBalanceInput.value = raw ?? '';
                            }

                            typeSelect.addEventListener('change', updateCurrentBalance);

                            // Initialize on load in case old('balance_type') is set
                            if (typeSelect.value) {
                                updateCurrentBalance();
                            }
                        });
                    </script>

                </x-dashboard.card>
            </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->

    </div>
@endsection