@php
    $input = 'mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-900 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20';
@endphp

<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6 space-y-5">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Basics</h3>
        <p class="mt-0.5 text-xs text-slate-500">Name and description shown to tenants.</p>
    </div>
    <div>
        <label for="name" class="block text-sm font-medium text-slate-700">Name <span class="text-red-500">*</span></label>
        <input type="text" name="name" id="name" value="{{ old('name', $plan?->name) }}" required class="{{ $input }}">
        @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
    </div>
    <div>
        <label for="description" class="block text-sm font-medium text-slate-700">Description</label>
        <textarea name="description" id="description" rows="3" class="{{ $input }}">{{ old('description', $plan?->description) }}</textarea>
    </div>
</section>

<section class="mt-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6 space-y-5">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Pricing</h3>
        <p class="mt-0.5 text-xs text-slate-500">Yearly billing only. Seat limit controls employee caps.</p>
    </div>
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div>
            <label for="base_price_yearly" class="block text-sm font-medium text-slate-700">Yearly price (INR) <span class="text-red-500">*</span></label>
            <input type="number" name="base_price_yearly" id="base_price_yearly" value="{{ old('base_price_yearly', $plan?->base_price_yearly ?? 0) }}" step="0.01" min="0" required class="{{ $input }}">
            @error('base_price_yearly') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
        </div>
        <div>
            <label for="employee_limit" class="block text-sm font-medium text-slate-700">Employee limit</label>
            <input type="number" name="employee_limit" id="employee_limit" value="{{ old('employee_limit', $plan?->employee_limit) }}" min="1" class="{{ $input }}" placeholder="Blank = unlimited / custom">
        </div>
    </div>
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div>
            <label for="discount_type" class="block text-sm font-medium text-slate-700">Plan discount</label>
            <select name="discount_type" id="discount_type" class="{{ $input }} js-select2">
                <option value="none" {{ old('discount_type', $plan?->discount_type ?? 'none') === 'none' ? 'selected' : '' }}>None</option>
                <option value="percent" {{ old('discount_type', $plan?->discount_type) === 'percent' ? 'selected' : '' }}>Percent</option>
                <option value="fixed" {{ old('discount_type', $plan?->discount_type) === 'fixed' ? 'selected' : '' }}>Fixed (₹)</option>
            </select>
        </div>
        <div>
            <label for="discount_value" class="block text-sm font-medium text-slate-700">Discount value</label>
            <input type="number" name="discount_value" id="discount_value" value="{{ old('discount_value', $plan?->discount_value ?? 0) }}" step="0.01" min="0" class="{{ $input }}">
        </div>
        <div>
            <label for="strike_price_yearly" class="block text-sm font-medium text-slate-700">Strike price (optional)</label>
            <input type="number" name="strike_price_yearly" id="strike_price_yearly" value="{{ old('strike_price_yearly', $plan?->strike_price_yearly) }}" step="0.01" min="0" class="{{ $input }}">
        </div>
    </div>
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div>
            <label for="currency_code" class="block text-sm font-medium text-slate-700">Currency code</label>
            <input type="text" name="currency_code" id="currency_code" value="{{ old('currency_code', $plan?->currency_code ?? 'INR') }}" maxlength="10" class="{{ $input }}">
        </div>
        <div>
            <label for="currency_symbol" class="block text-sm font-medium text-slate-700">Currency symbol</label>
            <input type="text" name="currency_symbol" id="currency_symbol" value="{{ old('currency_symbol', $plan?->currency_symbol ?? '₹') }}" maxlength="10" class="{{ $input }}">
        </div>
        <div>
            <label for="position" class="block text-sm font-medium text-slate-700">Display position</label>
            <input type="number" name="position" id="position" value="{{ old('position', $plan?->position) }}" min="0" class="{{ $input }}">
        </div>
    </div>
</section>

<section class="mt-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
    <h3 class="text-sm font-semibold text-slate-900">Flags</h3>
    <div class="mt-4 flex flex-wrap gap-6">
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" name="active" value="1" {{ old('active', $plan?->active ?? true) ? 'checked' : '' }} class="rounded border-slate-300 text-primary focus:ring-primary">
            <span class="text-sm font-medium text-slate-700">Active</span>
        </label>
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" name="is_popular" value="1" {{ old('is_popular', $plan?->is_popular) ? 'checked' : '' }} class="rounded border-slate-300 text-primary focus:ring-primary">
            <span class="text-sm font-medium text-slate-700">Popular</span>
        </label>
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" name="is_custom" value="1" {{ old('is_custom', $plan?->is_custom) ? 'checked' : '' }} class="rounded border-slate-300 text-primary focus:ring-primary">
            <span class="text-sm font-medium text-slate-700">Custom / private (offline only)</span>
        </label>
    </div>
</section>

<input type="hidden" name="billing_type" value="yearly">
<input type="hidden" name="base_price_monthly" value="0">
<input type="hidden" name="per_employee_price" value="0">