@php use App\Enums\DateTimeFormats;use Carbon\Carbon; @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 Message Template')}}
                    </p>

                    <a href="{{ route('mdm_message_template.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_message_template.store') }}">
                    @csrf

                    <div class="grid grid-cols-2 gap-6"
                         x-data="{
                                insertPlaceholder(id, placeholder) {
                                    const textarea = document.getElementById(id);
                                    if (!textarea) return;
                                    const start = textarea.selectionStart;
                                    const end = textarea.selectionEnd;
                                    const value = textarea.value;
                                    textarea.value = value.substring(0, start) + placeholder + value.substring(end);
                                    textarea.selectionStart = textarea.selectionEnd = start + placeholder.length;
                                    textarea.focus();
                                }
                            }"
                    >

                        <div class="col-span-1">
                            <x-input-label for="reminder_message_before_lock"
                                           :value="__('Reminder Message Template')"
                                           class="mb-1"/>
                            <textarea
                                id="reminder_message_before_lock" name="reminder_message_before_lock" rows="3"
                                required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            >{{ old('reminder_message_before_lock') }}</textarea>
                            <div class="mt-2 flex gap-2">
                                <button type="button" class="px-2 py-1 bg-gray-200 rounded"
                                        x-on:click="insertPlaceholder('reminder_message_before_lock', '@installment_date')">
                                    @installment_date
                                </button>
                                <button type="button" class="px-2 py-1 bg-gray-200 rounded"
                                        x-on:click="insertPlaceholder('reminder_message_before_lock', '@due_amount')">
                                    @due_amount
                                </button>
                            </div>
                            <x-input-error class="mt-2" :messages="$errors->get('reminder_message_before_lock')"/>
                        </div>

                        <div class="col-span-1">
                            <x-input-label for="lock_message_after_lock" :value="__('Lock Message Template')"
                                           class="mb-1"/>
                            <textarea
                                id="lock_message_after_lock" name="lock_message_after_lock" rows="3"
                                required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            >{{ old('lock_message_after_lock') }}</textarea>
                            <div class="mt-2 flex gap-2">
                                <button type="button" class="px-2 py-1 bg-gray-200 rounded"
                                        x-on:click="insertPlaceholder('lock_message_after_lock', '@installment_date')">
                                    @installment_date
                                </button>
                                <button type="button" class="px-2 py-1 bg-gray-200 rounded"
                                        x-on:click="insertPlaceholder('lock_message_after_lock', '@due_amount')">
                                    @due_amount
                                </button>
                            </div>
                            <x-input-error class="mt-2" :messages="$errors->get('lock_message_after_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::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_message_template.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>