@php use App\Enums\DateTimeFormats; @endphp
<x-app-layout>
    <div class="max-w-full mx-auto sm:px-1 lg:px-1">
        <div class="bg-white  overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900">
                <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                    <p class="text-lg font-semibold text-gray-900">
                        {{__('Add Mdm Lock Configuration')}}
                    </p>

                    <a href="{{ route('mdm_lock_config.index') }}"
                       class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
                        {{ __('Back to List') }}
                    </a>
                </div>

                <x-session-message class="mt-4"/>

                <form method="POST" action="{{ route('mdm_lock_config.store') }}">
                    @csrf

                    <div class="grid grid-cols-2 gap-6"
                    >

                        <div class="col-span-1">
                            <x-input-label for="reminder_before_phone_lock" :value="__('Remind Before Lock (Days)')"
                                           class="mb-1"/>
                            <x-text-input type="number" id="reminder_before_phone_lock"
                                          name="reminder_before_phone_lock"
                                          required
                                          :value="old('reminder_before_phone_lock')"
                                          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"/>
                            <x-input-error class="mt-2" :messages="$errors->get('reminder_before_phone_lock')"/>
                        </div>

                        <x-text-input type="hidden" id="lockTimeDelayPeriod" name="lockTimeDelayPeriod"
                                      :value=" $lockConfig['lockTimeDelayPeriod'] ?? null  "/>

                        <div class="col-span-1">
                            <x-input-label for="grace_period_before_phone_lock"
                                           :value="__('Grace Period Before Lock (Days)')"
                                           class="mb-1"/>
                            <x-text-input type="number" id="grace_period_before_phone_lock"
                                          name="grace_period_before_phone_lock"
                                          required
                                          :value="old('grace_period_before_phone_lock')"
                                          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"/>
                            <x-input-error class="mt-2" :messages="$errors->get('grace_period_before_phone_lock')"/>
                        </div>

                        <!-- Effective Date field -->
                        <div class="col-span-1">
                            <x-input-label for="effective_from" :value="__('Effective From')" class="mb-1"/>
                            <x-text-input
                                id="effective_from" name="effective_from"
                                class="flatpickr"
                                value="{{\Carbon\Carbon::now()->format(DateTimeFormats::CLIENT_DATE)}}"
                                required
                            />
                            <x-input-error class="mt-2" :messages="$errors->get('effective_from')"/>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-end">
                        <x-buttons.link type="secondary" class="px-4" href="{{ route('mdm_lock_config.index') }}">
                            Cancel
                        </x-buttons.link>

                        <x-buttons.primary type="submit" class="ml-3 px-4">
                            {{__('Submit')}}
                        </x-buttons.primary>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>