@php
    $options = $field->options->map(function ($option) {
        return [
            'id'    => $option->id,
            'name'  => $option->name,
            'value' => $option->value,
        ];
    })->toArray();
@endphp

<x-admin::layouts>
    <!-- Title of the page -->
    <x-slot:title>
        @lang('marketplace::app.admin.rma.custom-fields.edit.title')
    </x-slot>

    <x-admin::form
        :action="route('admin.marketplace.rma.custom-fields.update', $field->id)"
        method="PUT"
    >
        <!-- Page Header -->
        <div class="flex items-center justify-between gap-4 max-sm:flex-wrap">
            <p class="text-xl font-bold text-gray-800 dark:text-white">
                @lang('marketplace::app.admin.rma.custom-fields.edit.title')
            </p>

            <div class="flex items-center gap-x-2.5">
                <!-- Back Button -->
                <a
                    href="{{ route('admin.marketplace.rma.custom-fields.index') }}"
                    class="transparent-button hover:bg-gray-200 dark:text-white dark:hover:bg-gray-800"
                >
                    @lang('marketplace::app.admin.rma.custom-fields.edit.back-btn')
                </a>

                <!-- Update Button -->
                <button
                    type="submit"
                    class="primary-button"
                >
                    @lang('marketplace::app.admin.rma.custom-fields.edit.save-btn')
                </button>
            </div>
        </div>

        <!-- Full Panel -->
        <div class="mt-3.5 flex gap-2.5 max-xl:flex-wrap">
            <!-- Left Panel -->
            <div class="flex flex-col gap-2 flex-1 max-xl:flex-auto">
                <div class="box-shadow relative rounded bg-white p-4 dark:bg-gray-900">
                    <p class="mb-4 text-base font-semibold text-gray-800 dark:text-white">
                        @lang('marketplace::app.admin.rma.custom-fields.edit.general')
                    </p>

                    <!-- Label -->
                    <x-admin::form.control-group>
                        <x-admin::form.control-group.label class="required">
                            @lang('marketplace::app.admin.rma.custom-fields.edit.label')
                        </x-admin::form.control-group.label>

                        <x-admin::form.control-group.control
                            type="text"
                            name="label"
                            value="{{ old('label', $field->label) }}"
                            rules="required"
                            :placeholder="trans('marketplace::app.admin.rma.custom-fields.edit.label')"
                        />

                        <x-admin::form.control-group.error control-name="label" />
                    </x-admin::form.control-group>

                    <v-rma-custom-field></v-rma-custom-field>
                </div>
            </div>

            <!-- Right Panel -->
            <div class="flex flex-col gap-2 w-[360px] max-w-full max-sm:w-full">
                <div class="box-shadow relative rounded bg-white p-4 dark:bg-gray-900">
                    <p class="mb-4 text-base font-semibold text-gray-800 dark:text-white">
                        @lang('marketplace::app.admin.rma.custom-fields.edit.settings')
                    </p>
                    
                    <!-- Code -->
                    <x-admin::form.control-group>
                        <x-admin::form.control-group.label class="required">
                            @lang('marketplace::app.admin.rma.custom-fields.edit.code')
                        </x-admin::form.control-group.label>

                        <x-admin::form.control-group.control
                            type="text"
                            name="code"
                            value="{{ old('code', $field->code) }}"
                            rules="required"
                            :placeholder="trans('marketplace::app.admin.rma.custom-fields.edit.code')"
                        />

                        <x-admin::form.control-group.error control-name="code" />
                    </x-admin::form.control-group>

                    <!-- Position -->
                    <x-admin::form.control-group>
                        <x-admin::form.control-group.label class="required">
                            @lang('marketplace::app.admin.rma.custom-fields.edit.position')
                        </x-admin::form.control-group.label>

                        <x-admin::form.control-group.control
                            type="text"
                            name="position"
                            value="{{ old('position', $field->position) }}"
                            rules="required|numeric"
                            :placeholder="trans('marketplace::app.admin.rma.custom-fields.edit.position')"
                        />

                        <x-admin::form.control-group.error control-name="position" />
                    </x-admin::form.control-group>

                    <!-- Status -->
                    <x-admin::form.control-group>
                        <x-admin::form.control-group.label>
                            @lang('marketplace::app.admin.rma.custom-fields.edit.status')
                        </x-admin::form.control-group.label>

                        <x-admin::form.control-group.control
                            type="switch"
                            name="status"
                            value="1"
                            :checked="(bool) old('status', $field->status)"
                        />

                        <x-admin::form.control-group.error control-name="status" />
                    </x-admin::form.control-group>
                </div>
            </div>
        </div>
    </x-admin::form>

    @pushOnce('scripts')
        <script
            type="text/x-template"
            id="v-rma-custom-field-template"
        >            
            <!-- Type -->
            <x-admin::form.control-group>
                <x-admin::form.control-group.label class="required">
                    @lang('marketplace::app.admin.rma.custom-fields.edit.type')
                </x-admin::form.control-group.label>

                <x-admin::form.control-group.control
                    type="select"
                    id="type"
                    class="cursor-pointer"
                    name="type"
                    rules="required"
                    v-model="fieldType"
                >
                    @foreach(['text', 'textarea', 'date', 'select', 'multiselect', 'checkbox', 'radio'] as $type)
                        <option
                            value="{{ $type }}"
                            {{ $type === 'text' ? "selected" : '' }}
                        >
                            @lang('marketplace::app.admin.rma.custom-fields.edit.'. $type)
                        </option>
                    @endforeach
                </x-admin::form.control-group.control>

                <x-admin::form.control-group.error control-name="type" />
            </x-admin::form.control-group>

            <div
                v-if="canHaveOptions"
                class="gap-4 mt-2"
            >
                <div 
                    v-for="(option, index) in options" 
                    :key="option.id + '_' + index"
                    class="flex gap-4"
                >
                    <x-admin::form.control-group class="w-full">
                        <x-admin::form.control-group.label class="required">
                            @lang('marketplace::app.admin.rma.custom-fields.edit.option')
                        </x-admin::form.control-group.label>

                        <x-admin::form.control-group.control
                            type="text"
                            ::name="'options[' + index + '][name]'"
                            v-model="option.name"
                            rules="required"
                            label="{{ trans('marketplace::app.admin.rma.custom-fields.edit.option') }}"
                        />
                    </x-admin::form.control-group>

                    <x-admin::form.control-group class="w-full">
                        <x-admin::form.control-group.label class="required">
                            @lang('marketplace::app.admin.rma.custom-fields.edit.value')
                        </x-admin::form.control-group.label>

                        <x-admin::form.control-group.control
                            type="text"
                            ::name="'options[' + index + '][value]'"
                            v-model="option.value"
                            rules="required"
                            label="{{ trans('marketplace::app.admin.rma.custom-fields.edit.value') }}"
                        />
                    </x-admin::form.control-group>

                    <span 
                        class="icon-delete text-2xl mt-8 cursor-pointer"
                        @click="removeOption(option.id)"
                        v-if="options.length > 1"
                    >
                    </span>
                </div>
            </div>
            
            <!-- Add Option Button -->
            <div
                v-if="canHaveOptions"
                class="flex justify-start mb-4 mt-2"
            >
                <button
                    type="button"
                    class="secondary-button"
                    @click="addOption()"
                >
                    @lang('marketplace::app.admin.rma.custom-fields.edit.add-option-btn')
                </button>
            </div>

            <hr />
        
            <!-- Validation -->
            <p class="mt-4 mb-2 text-sm text-gray-600 dark:text-gray-300 font-medium">
                @lang('marketplace::app.admin.rma.custom-fields.edit.validation')
            </p>

            <!-- Input Validation -->
            <div v-if="fieldType == 'text'">
                <x-admin::form.control-group>
                    <x-admin::form.control-group.label class="required">
                        @lang('marketplace::app.admin.rma.custom-fields.edit.input-validation')
                    </x-admin::form.control-group.label>

                    <x-admin::form.control-group.control
                        type="select"
                        id="input_validation"
                        name="input_validation"
                        value="{{ old('input_validation', $field->input_validation) }}"
                        rules="required"
                        :label="trans('marketplace::app.admin.rma.custom-fields.edit.input-validation')"
                    >
                        @foreach(['numeric', 'email', 'decimal', 'url'] as $type)
                            <option value="{{ $type }}">
                                @lang('marketplace::app.admin.rma.custom-fields.edit.' . $type)
                            </option>
                        @endforeach
                    </x-admin::form.control-group.control>

                    <x-admin::form.control-group.error control-name="input_validation" />
                </x-admin::form.control-group>
            </div>

            <!-- Is Required -->
            <x-admin::form.control-group class="flex gap-2.5 items-center !mb-2">
                <x-admin::form.control-group.control
                    type="checkbox"
                    id="is_required"
                    name="is_required"
                    value="1"
                    for="is_required"
                    :checked="(bool) old('is_required', $field->is_required)"
                />

                <label
                    class="text-xs text-gray-600 dark:text-gray-300 font-medium cursor-pointer"
                    for="is_required"
                >
                    @lang('marketplace::app.admin.rma.custom-fields.edit.is-required')
                </label>
            </x-admin::form.control-group>
        </script>

        <script type="module">
            app.component('v-rma-custom-field', {
                template: '#v-rma-custom-field-template',
                
                data() {
                    return {
                        fieldType: "{{ old('type', $field->type) }}",

                        options: @json($options),

                        nextOptionKey: 1,
                    }
                },

                computed: {
                    canHaveOptions() {
                        return this.fieldType == 'select'
                            || this.fieldType == 'multiselect'
                            || this.fieldType == 'checkbox'
                            || this.fieldType == 'radio';
                    }
                },

                methods: {
                    addOption() {
                        this.options.push({
                            id: 'new_' + (this.nextOptionKey++),
                            name: '',
                            value: '',
                        });
                    },

                    removeOption(id) {
                        console.log(id, this.options);
                        
                        this.options = this.options.filter(option => option.id != id);
                    },
                }
            });
        </script>
    @endPushOnce
</x-admin::layouts>