@php
    $isEdit = $account->exists;
    $isApiConnected = (bool) $account->api_connected;
    $inputClass = 'mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100';
    $disabledClass = ' disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500 dark:disabled:bg-slate-800 dark:disabled:text-slate-400';
@endphp

<div class="grid gap-6 lg:grid-cols-2">
    <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <h2 class="text-lg font-bold text-slate-950 dark:text-white">Account Details</h2>

        <div class="mt-5 grid gap-4 sm:grid-cols-2">
            <div>
                <label for="name" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Account Name</label>
                <input id="name" name="name" value="{{ old('name', $account->name) }}" class="{{ $inputClass }}" required>
                @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="broker_name" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Broker Name</label>
                <input id="broker_name" name="broker_name" value="{{ old('broker_name', $account->broker_name) }}" class="{{ $inputClass }}" required>
                @error('broker_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="account_number" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Account Number</label>
                <input id="account_number" name="account_number" value="{{ old('account_number', $account->account_number) }}" class="{{ $inputClass }}">
                @error('account_number') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="account_type" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Account Type</label>
                <select id="account_type" name="account_type" class="{{ $inputClass }}" required>
                    @foreach (['demo' => 'Demo', 'live' => 'Live', 'prop' => 'Prop Firm'] as $value => $label)
                        <option value="{{ $value }}" @selected(old('account_type', $account->account_type) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('account_type') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="platform" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Platform</label>
                <input id="platform" name="platform" value="{{ old('platform', $account->platform) }}" placeholder="MT4, MT5, cTrader" class="{{ $inputClass }}">
                @error('platform') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="server" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Server</label>
                <input id="server" name="server" value="{{ old('server', $account->server) }}" class="{{ $inputClass }}">
                @error('server') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="currency" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Currency</label>
                <input id="currency" name="currency" maxlength="3" value="{{ old('currency', $account->currency ?? 'USD') }}" class="{{ $inputClass }} uppercase" required>
                @error('currency') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="leverage" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Leverage</label>
                <input id="leverage" type="number" min="1" name="leverage" value="{{ old('leverage', $account->leverage) }}" placeholder="100" class="{{ $inputClass }}">
                @error('leverage') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>
    </div>

    <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h2 class="text-lg font-bold text-slate-950 dark:text-white">Manual Metrics</h2>
                <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
                    @if ($isApiConnected)
                        API mode is active, so broker-controlled values are read-only.
                    @else
                        Manual mode is active, so you can edit these values yourself.
                    @endif
                </p>
            </div>
            <span class="rounded-full px-3 py-1 text-xs font-bold {{ $isApiConnected ? 'bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-200' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' }}">
                {{ $isApiConnected ? 'API Mode' : 'Manual Mode' }}
            </span>
        </div>

        <div class="mt-5 grid gap-4 sm:grid-cols-2">
            @foreach (['balance' => 'Balance', 'equity' => 'Equity', 'margin' => 'Margin', 'free_margin' => 'Free Margin'] as $field => $label)
                <div>
                    <label for="{{ $field }}" class="text-sm font-semibold text-slate-700 dark:text-slate-200">{{ $label }}</label>
                    <input
                        id="{{ $field }}"
                        type="number"
                        step="0.01"
                        min="0"
                        name="{{ $field }}"
                        value="{{ old($field, $account->{$field} ?? 0) }}"
                        class="{{ $inputClass }}{{ $disabledClass }}"
                        @disabled($isApiConnected)
                        @required(! $isApiConnected)
                    >
                    @error($field) <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            @endforeach
        </div>
    </div>
</div>

<div class="mt-6 rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
    <h2 class="text-lg font-bold text-slate-950 dark:text-white">Future API Connection</h2>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
        These fields prepare the account for MetaApi or broker API integration. They do not create automatic data without real credentials.
    </p>

    <div class="mt-5 grid gap-4 sm:grid-cols-2">
        <div>
            <label for="api_provider" class="text-sm font-semibold text-slate-700 dark:text-slate-200">API Provider</label>
            <select id="api_provider" name="api_provider" class="{{ $inputClass }}">
                <option value="">No API provider yet</option>
                <option value="metaapi" @selected(old('api_provider', $account->api_provider) === 'metaapi')>MetaApi</option>
                <option value="broker_api" @selected(old('api_provider', $account->api_provider) === 'broker_api')>Broker API</option>
            </select>
            @error('api_provider') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="api_account_id" class="text-sm font-semibold text-slate-700 dark:text-slate-200">API Account ID</label>
            <input id="api_account_id" name="api_account_id" value="{{ old('api_account_id', $account->api_account_id) }}" class="{{ $inputClass }}" placeholder="Provided by MetaApi or broker">
            @error('api_account_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>
    </div>
</div>

<div class="mt-6 flex flex-wrap items-center gap-3">
    <button type="submit" class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
        {{ $isEdit ? 'Update Account' : 'Create Account' }}
    </button>
    <a href="{{ route('trading-accounts.index') }}" class="rounded-lg border border-blue-100 px-5 py-2.5 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
        Cancel
    </a>
</div>
