@extends('admin.base')

@section('title', 'Создание транзакции')

@section('content')
    <div class="max-w-2xl mx-auto bg-white p-6 rounded shadow">
        <h2 class="text-2xl font-semibold mb-6">Создание новой транзакции</h2>

        <form action="{{ route('admin.transaction.store') }}" method="POST">
            @csrf

            <div class="mb-4">
                <label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">Пользователь</label>
                <select name="user_id" id="user_id" class="w-full border-gray-300 rounded-md shadow-sm"
                        onchange="toggleNewUserInput(this.value)">
                    <option value="">— Новый пользователь —</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }} (ID: {{ $user->id }})</option>
                    @endforeach
                </select>

                <div id="new-user-fields" class="mt-2 hidden">
                    <input type="text" name="new_user_name" placeholder="Имя" class="w-full border mt-2 p-2 rounded">
                </div>
            </div>

            <script>
                toggleNewUserInput("")
                function toggleNewUserInput(val) {
                    const fields = document.getElementById('new-user-fields');
                    if (val === "") {
                        fields.classList.remove('hidden');
                    } else {
                        fields.classList.add('hidden');
                    }
                }
            </script>

            <div class="mb-4">
                <label for="type" class="block text-sm font-medium text-gray-700 mb-1">Тип транзакции</label>
                <select name="type" id="type" class="w-full border-gray-300 rounded-md shadow-sm">
                    @foreach ($types as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-4">
                <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Сумма</label>
                <input type="number" step="0.01" name="amount" id="amount"
                       class="w-full border-gray-300 rounded-md shadow-sm" required>
            </div>

            <div class="mb-4">
                <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Описание</label>
                <textarea name="description" id="description" rows="3"
                          class="w-full border-gray-300 rounded-md shadow-sm"></textarea>
            </div>

            <div class="flex justify-end">
                <a href="{{ route('admin.transaction.index') }}" class="mr-4 text-gray-600 hover:underline">Отмена</a>
                <button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">
                    Сохранить
                </button>
            </div>
        </form>
    </div>
@endsection