@extends('layouts.user')

@section('title', __('owner_transactions.create_title'))
@section('page_title', __('owner_transactions.create_title'))
@section('breadcrumb', __('owner_transactions.create_breadcrumb'))

@section('content')
<div class="max-w-3xl mx-auto px-2 sm:px-3 py-4 space-y-4">

    <div class="bg-white border border-slate-200 px-4 py-3 shadow-sm">
        <div class="text-[10px] uppercase tracking-[0.18em] text-slate-500 font-semibold">
            {{ __('owner_transactions.owner') }}
        </div>
        <div class="mt-1 text-base font-bold text-slate-900">
            {{ __('owner_transactions.create_title') }}
        </div>
    </div>

    @if($errors->any())
        <div class="border border-rose-200 bg-rose-50 px-4 py-3 text-xs text-rose-700">
            <div class="font-bold mb-2">{{ __('owner_transactions.fix_errors') }}</div>
            <ul class="list-disc pl-5 space-y-1">
                @foreach($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white border border-slate-200 px-4 py-4 shadow-sm">
        <form method="POST" action="{{ route('user.owner_transactions.store') }}" class="grid gap-4 text-xs">
            @csrf

            <div>
                <label class="block text-xs font-semibold text-slate-700">
                    {{ __('owner_transactions.type') }}
                </label>
                <select
                    name="type"
                    class="mt-1.5 w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                >
                    <option value="investment" @selected(old('type') === 'investment')>
                        {{ __('owner_transactions.investment_money_in') }}
                    </option>
                    <option value="drawing" @selected(old('type') === 'drawing')>
                        {{ __('owner_transactions.drawing_money_out') }}
                    </option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-700">
                    {{ __('owner_transactions.account') }}
                </label>
                <select
                    name="user_account_id"
                    class="mt-1.5 w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                >
                    <option value="">{{ __('owner_transactions.select_account') }}</option>
                    @foreach($accounts as $a)
                        <option value="{{ $a->id }}" @selected((int) old('user_account_id') === $a->id)>
                            {{ $a->name }} ({{ strtoupper($a->type) }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-700">
                    {{ __('owner_transactions.amount') }}
                </label>
                <input
                    name="amount"
                    value="{{ old('amount') }}"
                    placeholder="{{ __('owner_transactions.amount_placeholder') }}"
                    class="mt-1.5 w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                >
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-700">
                    {{ __('owner_transactions.posted_at') }}
                </label>
                <input
                    type="datetime-local"
                    name="posted_at"
                    value="{{ old('posted_at') }}"
                    class="mt-1.5 w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                >
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-700">
                    {{ __('owner_transactions.note') }}
                </label>
                <textarea
                    name="note"
                    rows="3"
                    placeholder="{{ __('owner_transactions.optional') }}"
                    class="mt-1.5 w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                >{{ old('note') }}</textarea>
            </div>

            <div class="flex gap-2 pt-1">
                <button class="px-4 py-2.5 bg-slate-900 text-white text-xs font-semibold hover:bg-slate-800">
                    {{ __('owner_transactions.save') }}
                </button>

                <a
                    href="{{ route('user.owner_transactions.index') }}"
                    class="px-4 py-2.5 border border-slate-300 bg-white text-xs font-semibold text-slate-700 hover:bg-slate-50"
                >
                    {{ __('owner_transactions.back') }}
                </a>
            </div>
        </form>
    </div>
</div>
@endsection