@props([])

{{--
| The package editor's fields — one definition, two hosts.
|
| The standalone page (packages/form.blade.php) and the modal on the index both
| render this, so a field can never exist on one and not the other. Both hosts
| provide an Alpine `form` object with the same shape, and every input carries
| BOTH a server-rendered value and an x-model: the value is what a browser with
| no JavaScript submits, the x-model is what the modal binds to.
|
| Requires in scope: $package (a LicensePackage, possibly unsaved).
--}}

@php
    $billingPeriods = [
        'monthly'    => ['Monthly',    'Billed every month'],
        'quarterly'  => ['Quarterly',  'Billed every three months'],
        'semiannual' => ['Semiannual', 'Billed twice a year'],
        'annual'     => ['Annual',     'Billed once a year'],
        'custom'     => ['Custom',     'Priced per agreement'],
    ];

    $old = fn (string $field, $fallback = null) => old($field, $package->$field ?? $fallback);
@endphp

<div class="space-y-4">
    <div>
        <label for="package-name" class="filter-label">Package name <span class="text-red-500">*</span></label>
        <input id="package-name" name="name" type="text" required maxlength="255"
               value="{{ $old('name') }}" x-model="form.name" x-ref="nameInput"
               placeholder="12 Months"
               class="filter-input @error('name') !border-red-400 @enderror">

        <p class="mt-1.5 flex items-center gap-1.5 text-[11px] text-slate-500 dark:text-slate-400">
            <x-icon name="link" class="size-3" />
            {{-- The slug is derived from the name server-side. Showing it live
                 stops the rename that silently changes a package's identifier
                 from being a surprise. --}}
            URL slug <code class="rounded bg-slate-100 px-1 font-mono dark:bg-white/5" x-text="slugPreview()">{{ $package->slug ?: '—' }}</code>
        </p>

        @error('name')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
        @error('slug')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
            <label for="package-duration" class="filter-label">Duration (days)</label>
            <input id="package-duration" name="duration_days" type="number" min="1" max="36500"
                   value="{{ $old('duration_days') }}" x-model="form.duration_days"
                   placeholder="Leave blank for custom"
                   class="filter-input @error('duration_days') !border-red-400 @enderror">
            <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
                Blank means the owner sets the term on each license.
            </p>
            @error('duration_days')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="package-price" class="filter-label">Price (Rs) <span class="text-red-500">*</span></label>
            <input id="package-price" name="price" type="number" min="0" step="0.01" required
                   value="{{ $old('price', $package->price ?? 0) }}" x-model="form.price"
                   class="filter-input @error('price') !border-red-400 @enderror">
            <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
                <span x-show="perDay()">Works out at Rs <span x-text="perDay() ? perDay().toFixed(2) : ''"></span> per day.</span>
                <span x-show="! perDay()">Set a duration to see the daily rate.</span>
            </p>
            @error('price')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
        </div>
    </div>

    <div>
        <span class="filter-label">Billing cycle <span class="text-red-500">*</span></span>

        {{-- Radio cards rather than a select: five options with an explanation
             each, and the choice stays visible while the price is set. --}}
        <div class="mt-1.5 grid grid-cols-2 gap-2 sm:grid-cols-3">
            @foreach ($billingPeriods as $value => [$label, $description])
                <label class="group relative flex cursor-pointer flex-col rounded-xl border border-slate-200 p-2.5
                              transition hover:border-brand-300 has-[:checked]:border-brand-500
                              has-[:checked]:bg-brand-50 has-[:checked]:ring-1 has-[:checked]:ring-brand-500
                              dark:border-white/[0.08] dark:hover:border-brand-500/50
                              dark:has-[:checked]:border-brand-500 dark:has-[:checked]:bg-brand-500/10">
                    <input type="radio" name="billing_period" value="{{ $value }}" class="peer sr-only"
                           @checked($old('billing_period', 'custom') === $value)
                           x-model="form.billing_period">
                    <span class="text-xs font-semibold text-slate-800 dark:text-slate-100">{{ $label }}</span>
                    <span class="mt-0.5 text-[10px] leading-tight text-slate-500 dark:text-slate-400">{{ $description }}</span>
                </label>
            @endforeach
        </div>

        @error('billing_period')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
            <label for="package-sort" class="filter-label">Sort order</label>
            <input id="package-sort" name="sort_order" type="number" min="0"
                   value="{{ $old('sort_order', 0) }}" x-model="form.sort_order"
                   class="filter-input @error('sort_order') !border-red-400 @enderror">
            <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
                Lower numbers appear first, here and on the license form.
            </p>
            @error('sort_order')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
        </div>

        <div>
            <span class="filter-label">Availability</span>
            <label class="mt-1.5 flex cursor-pointer items-center gap-3 rounded-xl border border-slate-200 p-2.5
                          transition hover:border-slate-300
                          dark:border-white/[0.08] dark:hover:border-white/15">
                <input type="checkbox" name="is_active" value="1" class="peer sr-only"
                       @checked((bool) $old('is_active', true))
                       x-model="form.is_active">

                {{-- The knob is a child of the track, not a sibling of the
                     input, so it needs the `*:` child variant — plain
                     peer-checked: would never reach it. --}}
                <span class="relative h-5 w-9 shrink-0 rounded-full bg-slate-300 transition
                             peer-checked:bg-brand-600 peer-checked:*:translate-x-4
                             peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500
                             peer-focus-visible:ring-offset-2 dark:bg-white/15 dark:peer-focus-visible:ring-offset-shell-card">
                    <span class="absolute left-0.5 top-0.5 size-4 rounded-full bg-white shadow transition-transform"></span>
                </span>

                <span class="min-w-0">
                    <span class="block text-xs font-semibold text-slate-800 dark:text-slate-100">Active</span>
                    <span class="block text-[10px] leading-tight text-slate-500 dark:text-slate-400">
                        Offered when generating a new license
                    </span>
                </span>
            </label>
        </div>
    </div>
</div>