@php
    $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';
@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">
        <h3 class="text-lg font-bold text-slate-950 dark:text-white">Instrument Details</h3>

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

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

            <div>
                <label for="category" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Category</label>
                <select id="category" name="category" class="{{ $inputClass }}" required>
                    @foreach ($categories as $value => $label)
                        <option value="{{ $value }}" @selected(old('category', $symbol->category) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('category') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="flex items-end">
                <label class="inline-flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $symbol->is_active ?? true)) class="rounded border-blue-200 text-blue-600 focus:ring-blue-500">
                    Active
                </label>
            </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">
        <h3 class="text-lg font-bold text-slate-950 dark:text-white">Calculator Settings</h3>

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

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

            <div>
                <label for="contract_size" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Contract Size</label>
                <input id="contract_size" type="number" step="0.0001" min="0.0001" name="contract_size" value="{{ old('contract_size', $symbol->contract_size) }}" class="{{ $inputClass }}" required>
                @error('contract_size') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="pip_size" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Pip Size</label>
                <input id="pip_size" type="number" step="0.000001" min="0.000001" name="pip_size" value="{{ old('pip_size', $symbol->pip_size) }}" class="{{ $inputClass }}" required>
                @error('pip_size') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="default_price" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Default Price</label>
                <input id="default_price" type="number" step="0.000001" min="0.000001" name="default_price" value="{{ old('default_price', $symbol->default_price) }}" class="{{ $inputClass }}" required>
                @error('default_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>
    </div>
</div>

<div class="mt-6 flex flex-wrap 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">
        {{ $symbol->exists ? 'Update Symbol' : 'Create Symbol' }}
    </button>
    <a href="{{ route('admin.trading-symbols.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>
