@extends('layouts.admin.app')

@section('title', __('pages/admin/components.nav.form_elements'))

@section('content')
<x-layouts.admin.component-demo
    :title="__('pages/admin/components.nav.form_elements')"
    :section="__('pages/admin/components.section.forms')"
    :subtitle="__('pages/admin/components.forms.elements.subtitle')"
    :wide="true"
>
    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
        {{-- Left column --}}
        <div class="space-y-6">
            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.default_inputs')">
                <div class="space-y-4">
                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.input')" for="fe_input">
                        <x-forms.input name="fe_input" :placeholder="__('pages/admin/components.forms.elements.placeholders.enter_text')" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.input_with_placeholder')" for="fe_email_placeholder">
                        <x-forms.input name="fe_email_placeholder" type="email" :placeholder="__('pages/admin/components.forms.elements.placeholders.email_example')" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.select_input')" for="fe_select_default">
                        <x-forms.select
                            name="fe_select_default"
                            :options="[
                                '' => __('pages/admin/components.forms.elements.placeholders.select_option'),
                                'opt1' => __('pages/admin/components.forms.elements.options.option', ['number' => 1]),
                                'opt2' => __('pages/admin/components.forms.elements.options.option', ['number' => 2]),
                                'opt3' => __('pages/admin/components.forms.elements.options.option', ['number' => 3]),
                            ]"
                        />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.password_input')" for="fe_password">
                        <x-forms.input name="fe_password" type="password" :placeholder="__('pages/admin/components.forms.elements.placeholders.enter_password')" icon="heroicon-o-lock-closed" />
                    </x-forms.form-group>
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.input_types')">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.text')" for="fe_type_text">
                        <x-forms.input name="fe_type_text" type="text" :placeholder="__('pages/admin/components.forms.elements.placeholders.text')" />
                    </x-forms.form-group>
                    <x-forms.form-group :label="__('form.label.email')" for="fe_type_email">
                        <x-forms.input name="fe_type_email" type="email" :placeholder="__('pages/admin/components.forms.elements.placeholders.email')" />
                    </x-forms.form-group>
                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.number')" for="fe_type_number">
                        <x-forms.input name="fe_type_number" type="number" placeholder="0" />
                    </x-forms.form-group>
                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.tel')" for="fe_type_tel">
                        <x-forms.input name="fe_type_tel" type="tel" :placeholder="__('pages/admin/components.forms.elements.placeholders.tel')" />
                    </x-forms.form-group>
                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.url')" for="fe_type_url">
                        <x-forms.input name="fe_type_url" type="url" :placeholder="__('pages/admin/components.forms.elements.placeholders.url')" />
                    </x-forms.form-group>
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.select_inputs')">
                <div class="space-y-4">
                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.select_input')" for="fe_select">
                        <x-forms.select
                            name="fe_select"
                            :options="[
                                'engineering' => __('pages/admin/components.forms.elements.options.engineering'),
                                'design' => __('pages/admin/components.forms.elements.options.design'),
                                'marketing' => __('pages/admin/components.forms.elements.options.marketing'),
                            ]"
                        />
                    </x-forms.form-group>

                    <x-forms.multi-select
                        name="fe_multi_select"
                        :label="__('pages/admin/components.forms.elements.labels.multiple_select')"
                        :options="[
                            'opt1' => __('pages/admin/components.forms.elements.options.option', ['number' => 1]),
                            'opt2' => __('pages/admin/components.forms.elements.options.option', ['number' => 2]),
                            'opt3' => __('pages/admin/components.forms.elements.options.option', ['number' => 3]),
                            'opt4' => __('pages/admin/components.forms.elements.options.option', ['number' => 4]),
                        ]"
                        :selected="['opt1', 'opt3']"
                    />
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.textarea')">
                <div class="space-y-4">
                    <x-forms.textarea
                        name="fe_textarea_default"
                        :label="__('ui.variant.default')"
                        :placeholder="__('pages/admin/components.forms.elements.placeholders.enter_message')"
                        rows="3"
                    />

                    <x-forms.textarea
                        name="fe_textarea_filled"
                        :label="__('pages/admin/components.forms.elements.labels.with_content')"
                        :value="__('pages/admin/components.forms.elements.content.textarea_sample')"
                        rows="3"
                    />

                    <x-forms.textarea
                        name="fe_textarea_disabled"
                        :label="__('ui.state.disabled')"
                        :value="__('pages/admin/components.forms.elements.content.textarea_disabled')"
                        rows="3"
                        disabled
                    />
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.date_time_pickers')">
                <div class="space-y-4">
                    <x-forms.date-picker name="fe_date_native" :label="__('pages/admin/components.forms.elements.labels.native_date')" />

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.native_time')" for="fe_time_native">
                        <x-forms.input name="fe_time_native" type="time" id="fe_time_native" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.native_datetime')" for="fe_datetime_native">
                        <x-forms.input name="fe_datetime_native" type="datetime-local" id="fe_datetime_native" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.flatpickr_date')" for="fe_fp_date">
                        <x-forms.flatpickr
                            name="fe_fp_date"
                            id="fe_fp_date"
                            :placeholder="__('pages/admin/components.forms.elements.placeholders.select_date')"
                            :config="[
                                'dateFormat' => 'Y-m-d',
                                'altFormat' => 'F j, Y',
                                'altInput' => true,
                            ]"
                        />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.flatpickr_time')" for="fe_fp_time">
                        <x-forms.flatpickr
                            name="fe_fp_time"
                            id="fe_fp_time"
                            :placeholder="__('pages/admin/components.forms.elements.placeholders.select_time')"
                            :config="[
                                'enableTime' => true,
                                'noCalendar' => true,
                                'dateFormat' => 'H:i',
                                'altFormat' => 'h:i K',
                                'altInput' => true,
                            ]"
                        />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.flatpickr_datetime')" for="fe_fp_datetime">
                        <x-forms.flatpickr
                            name="fe_fp_datetime"
                            id="fe_fp_datetime"
                            :placeholder="__('pages/admin/components.forms.elements.placeholders.select_datetime')"
                            :config="[
                                'enableTime' => true,
                                'dateFormat' => 'Y-m-d H:i',
                                'altFormat' => 'F j, Y h:i K',
                                'altInput' => true,
                            ]"
                        />
                    </x-forms.form-group>
                </div>
            </x-utility.card>
        </div>

        {{-- Right column --}}
        <div class="space-y-6">
            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.text_inputs')">
                <div class="space-y-4">
                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.basic_text')" for="fe_text_basic">
                        <x-forms.input name="fe_text_basic" :placeholder="__('pages/admin/components.forms.elements.placeholders.enter_text')" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.with_leading_icon')" for="fe_text_icon">
                        <x-forms.input name="fe_text_icon" :placeholder="__('pages/admin/components.forms.elements.placeholders.search')" icon="heroicon-o-magnifying-glass" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('pages/admin/components.forms.elements.labels.clearable_input')" for="fe_text_clearable" :hint="__('pages/admin/components.forms.elements.hints.clearable')">
                        <x-forms.input name="fe_text_clearable" :clearable="true" :placeholder="__('pages/admin/components.forms.elements.placeholders.type_something')" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('ui.state.disabled')" for="fe_text_disabled">
                        <x-forms.input name="fe_text_disabled" :value="__('pages/admin/components.forms.elements.content.cannot_edit')" disabled />
                    </x-forms.form-group>
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.password_inputs')">
                <div class="space-y-4">
                    <x-forms.form-group :label="__('form.label.password')" for="fe_pwd">
                        <x-forms.input name="fe_pwd" type="password" :placeholder="__('pages/admin/components.forms.elements.placeholders.enter_password')" icon="heroicon-o-lock-closed" />
                    </x-forms.form-group>

                    <x-forms.form-group :label="__('form.label.password_confirmation')" for="fe_pwd_confirm">
                        <x-forms.input name="fe_pwd_confirm" type="password" :placeholder="__('pages/admin/components.forms.elements.placeholders.confirm_password')" icon="heroicon-o-lock-closed" />
                    </x-forms.form-group>
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.checkboxes')">
                <div class="space-y-3">
                    <label class="flex cursor-pointer items-center gap-2.5">
                        <x-forms.checkbox name="fe_cb_default" value="1" />
                        <span class="text-sm text-foreground">{{ __('ui.variant.default') }}</span>
                    </label>
                    <label class="flex cursor-pointer items-center gap-2.5">
                        <x-forms.checkbox name="fe_cb_checked" value="1" checked />
                        <span class="text-sm text-foreground">{{ __('pages/admin/components.forms.elements.labels.checked') }}</span>
                    </label>
                    <label class="flex cursor-pointer items-center gap-2.5 opacity-60">
                        <x-forms.checkbox name="fe_cb_disabled" value="1" disabled />
                        <span class="text-sm text-foreground">{{ __('ui.state.disabled') }}</span>
                    </label>
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.radio_buttons')">
                <div class="space-y-3">
                    <x-forms.radio name="fe_radio" value="default" :label="__('ui.variant.default')" />
                    <x-forms.radio name="fe_radio" value="selected" :label="__('pages/admin/components.forms.elements.labels.selected')" checked />
                    <x-forms.radio name="fe_radio_disabled" value="disabled" :label="__('ui.state.disabled')" disabled />
                </div>
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.drag_drop_upload')">
                <x-forms.file-upload
                    name="fe_file_upload"
                    :label="__('pages/admin/components.forms.elements.labels.upload_file')"
                    accept=".png,.jpg,.jpeg,.pdf,.webp"
                    :hint="__('pages/admin/components.forms.elements.hints.file_upload')"
                />
            </x-utility.card>

            <x-utility.card :title="__('pages/admin/components.forms.elements.sections.multiple_file_upload')">
                <x-forms.file-upload
                    name="fe_file_upload_multi"
                    :label="__('pages/admin/components.forms.elements.labels.upload_images')"
                    accept="image/*"
                    :hint="__('pages/admin/components.forms.elements.hints.image_upload')"
                    :multiple="true"
                />
            </x-utility.card>
        </div>
    </div>

    <x-utility.card :title="__('pages/admin/components.forms.elements.sections.tinymce')">
        <p class="mb-5 text-sm text-muted-foreground">
            {{ __('pages/admin/components.forms.elements.descriptions.tinymce') }}
        </p>
        <form class="space-y-5" onsubmit="return false;">
            <x-forms.tinymce
                name="fe_tinymce"
                :label="__('pages/admin/components.forms.elements.labels.article_content')"
                :placeholder="__('pages/admin/components.forms.elements.placeholders.start_writing')"
                :hint="__('pages/admin/components.forms.elements.hints.tinymce')"
                :value="__('pages/admin/components.forms.elements.content.tinymce_default')"
            />
            <div class="flex items-center gap-3">
                <x-buttons.secondary>{{ __('buttons.cancel') }}</x-buttons.secondary>
                <x-buttons.primary type="submit">{{ __('pages/admin/components.forms.elements.buttons.save_content') }}</x-buttons.primary>
            </div>
        </form>
    </x-utility.card>
</x-layouts.admin.component-demo>
@endsection