Forge Cron Builder code

@props([
    'name' => 'scheduled_job',
    'command' => null,
    'user' => 'forge',
    'frequency' => 'daily',
    'cron' => '0 0 * * *',
    'presets' => [
        'hourly' => 'Hourly',
        'daily' => 'Daily',
        'weekly' => 'Weekly',
        'custom' => 'Custom',
    ],
])

@php
    /*
    | Scheduler form section with frequency presets and a custom cron field.
    | It intentionally does not wrap itself in a form so it can sit in modals.
    |
    | Usage:
    |   <x-ui.forge-cron-builder command="php artisan schedule:run" />
    */
@endphp

<section
    x-data="{ frequency: @js($frequency), cron: @js($cron) }"
    {{ $attributes->merge(['class' => 'min-w-0 rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}
>
    <div class="flex flex-col gap-4">
        <x-ui.field label="Command" for="{{ $name }}-command">
            <x-ui.input id="{{ $name }}-command" name="{{ $name }}[command]" :value="$command" icon="terminal-window" placeholder="php artisan schedule:run" />
        </x-ui.field>

        <div class="grid gap-4 sm:grid-cols-2">
            <x-ui.field label="User" for="{{ $name }}-user">
                <x-ui.input id="{{ $name }}-user" name="{{ $name }}[user]" :value="$user" icon="user" />
            </x-ui.field>

            <x-ui.field label="Cron expression" for="{{ $name }}-cron">
                <x-ui.input id="{{ $name }}-cron" name="{{ $name }}[cron]" x-model="cron" class="font-mono" />
            </x-ui.field>
        </div>

        <div>
            <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Frequency</p>
            <div class="inline-flex flex-wrap rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-950">
                @foreach ($presets as $value => $label)
                    <button
                        type="button"
                        class="rounded-md px-3 py-1.5 text-sm font-medium transition"
                        :class="frequency === @js((string) $value) ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-800 dark:text-white' : 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'"
                        @click="frequency = @js((string) $value)"
                    >
                        {{ $label }}
                    </button>
                @endforeach
            </div>
            <input type="hidden" name="{{ $name }}[frequency]" x-model="frequency">
        </div>
    </div>
</section>