@props([
    'metricOptions' => [],
    'assignmentTypeOptions' => [],
    'userOptions' => [],
    'roleOptions' => [],
    'periodTypeOptions' => [],
    'storeUrl' => '',
    'managerUserOnly' => false,
    'modalIdPrefix' => '',
])

<div
    class="fixed inset-0 z-[60] flex items-center justify-center px-4 py-8 sm:px-6"
    x-show="modalOpen"
    x-cloak
    x-transition:enter="ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
>
    <div class="absolute inset-0 bg-gray-900/50 backdrop-blur-[1px]" @click="closeModal()" aria-hidden="true"></div>
    <div
        class="relative z-10 w-full max-w-2xl rounded-2xl border border-gray-200 bg-white shadow-2xl max-h-[90vh] overflow-y-auto"
        role="dialog"
        aria-modal="true"
        aria-labelledby="sales-performance-target-form-title"
        @click.stop
    >
        <div class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4">
            <div>
                <h3 id="sales-performance-target-form-title" class="text-base font-semibold text-gray-900" x-text="modalTitle"></h3>
                <p class="mt-1 text-sm text-gray-600" x-show="formScopeLabel" x-text="formScopeLabel"></p>
                <p class="mt-1 text-xs text-amber-800" x-show="lockAssignmentScope">
                    Metric, period, and assignment scope cannot be changed when editing. Create a new target to change scope.
                </p>
            </div>
            <button
                type="button"
                class="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)]"
                @click="closeModal()"
                aria-label="Close"
            >
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <form
            method="POST"
            action="{{ $storeUrl }}"
            class="space-y-4 px-5 py-4"
            @submit="syncScopeFieldsFromDom(); document.body.classList.remove('overflow-y-hidden')"
        >
            @csrf
            <input type="hidden" name="id" x-bind:value="formId">
            <input type="hidden" name="target_value" x-bind:value="formTargetRaw">
            @if ($managerUserOnly)
                <input type="hidden" name="assignment_type" value="user">
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Metric</label>
                    <template x-if="lockAssignmentScope">
                        <div>
                            <div class="mt-1 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900" x-text="formMetricLabel"></div>
                            <input type="hidden" name="metric_code" x-bind:value="formMetricCode">
                        </div>
                    </template>
                    <template x-if="!lockAssignmentScope">
                        <div class="mt-1">
                            <x-styled-select
                                name="metric_code"
                                id="{{ $modalIdPrefix }}modal_metric_code"
                                :selected="''"
                                :options="$metricOptions"
                                required
                                class="block w-full"
                            />
                        </div>
                    </template>
                </div>

                @if ($managerUserOnly)
                    <div>
                        <label for="{{ $modalIdPrefix }}modal_user_id" class="block text-sm font-medium text-gray-700">Branch Manager</label>
                        <template x-if="lockAssignmentScope">
                            <div>
                                <input type="hidden" name="user_id" x-bind:value="formUserId">
                                <div class="mt-1 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900" x-text="formUserName"></div>
                            </div>
                        </template>
                        <template x-if="!lockAssignmentScope">
                            <x-styled-select
                                name="user_id"
                                id="{{ $modalIdPrefix }}modal_user_id"
                                :selected="''"
                                :options="$userOptions"
                                class="mt-1 block w-full"
                            />
                        </template>
                    </div>
                @else
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Assignment type</label>
                        <template x-if="lockAssignmentScope">
                            <div>
                                <div class="mt-1 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900" x-text="assignmentTypeLabel"></div>
                                <input type="hidden" name="assignment_type" x-bind:value="formAssignmentType">
                            </div>
                        </template>
                        <template x-if="!lockAssignmentScope">
                            <div class="mt-1">
                                <x-styled-select
                                    name="assignment_type"
                                    id="{{ $modalIdPrefix }}modal_assignment_type"
                                    :selected="'dealer'"
                                    :options="$assignmentTypeOptions"
                                    class="block w-full"
                                />
                            </div>
                        </template>
                    </div>
                @endif

                @if (! $managerUserOnly)
                    <template x-if="showUserField && lockAssignmentScope">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">User</label>
                            <input type="hidden" name="user_id" x-bind:value="formUserId">
                            <div class="mt-1 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900" x-text="formUserName"></div>
                        </div>
                    </template>

                    <template x-if="showUserField && !lockAssignmentScope">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">User</label>
                            <x-styled-select
                                name="user_id"
                                id="{{ $modalIdPrefix }}modal_user_id"
                                :selected="''"
                                :options="$userOptions"
                                class="mt-1 block w-full"
                            />
                        </div>
                    </template>

                    <template x-if="showRoleField && lockAssignmentScope">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Role</label>
                            <input type="hidden" name="role_name" x-bind:value="formRoleName">
                            <div class="mt-1 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900" x-text="formRoleName"></div>
                        </div>
                    </template>

                    <template x-if="showRoleField && !lockAssignmentScope">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Role</label>
                            <x-styled-select
                                name="role_name"
                                id="{{ $modalIdPrefix }}modal_role_name"
                                :selected="''"
                                :options="$roleOptions"
                                class="mt-1 block w-full"
                            />
                        </div>
                    </template>
                @endif

                <div>
                    <label class="block text-sm font-medium text-gray-700">Period</label>
                    <template x-if="lockAssignmentScope">
                        <div>
                            <div class="mt-1 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 capitalize" x-text="formPeriodType"></div>
                            <input type="hidden" name="period_type" x-bind:value="formPeriodType">
                        </div>
                    </template>
                    <template x-if="!lockAssignmentScope">
                        <div class="mt-1">
                            <x-styled-select
                                name="period_type"
                                id="{{ $modalIdPrefix }}modal_period_type"
                                :selected="'monthly'"
                                :options="$periodTypeOptions"
                                required
                                class="block w-full"
                            />
                        </div>
                    </template>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Target value</label>
                    <input
                        type="text"
                        id="{{ $modalIdPrefix }}modal_target_value"
                        autocomplete="off"
                        x-on:focus="focusTarget($event)"
                        x-on:input="inputTarget($event)"
                        x-on:blur="blurTarget($event)"
                        x-bind:inputmode="isMoneyMetric ? 'decimal' : 'numeric'"
                        class="mt-1 block w-full rounded-xl border-gray-300 text-sm shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)]"
                        required
                    >
                    <p class="mt-1 text-xs text-gray-500" x-text="targetHelperText"></p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Starts at (optional)</label>
                    <input
                        type="date"
                        name="starts_at"
                        x-model="formStartsAt"
                        class="mt-1 block w-full rounded-xl border-gray-300 text-sm shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)]"
                    >
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Ends at (optional)</label>
                    <input
                        type="date"
                        name="ends_at"
                        x-model="formEndsAt"
                        class="mt-1 block w-full rounded-xl border-gray-300 text-sm shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)]"
                    >
                </div>
            </div>

            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input
                    type="checkbox"
                    name="is_active"
                    value="1"
                    x-bind:checked="formIsActive"
                    class="rounded border-gray-300 text-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)]"
                />
                Active
            </label>

            <div class="flex justify-end gap-2 border-t border-gray-100 pt-4">
                <button
                    type="button"
                    class="inline-flex items-center rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50"
                    @click="closeModal()"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    class="inline-flex items-center rounded-xl bg-[var(--dealer-accent-color)] px-4 py-2 text-sm font-semibold text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95"
                >
                    <span x-text="formId ? 'Save changes' : 'Create target'"></span>
                </button>
            </div>
        </form>
    </div>
</div>