<?php
defined('ABSPATH') || exit;
?>
<div class="bw-form-fields-page" v-cloak>
    <div class="bw-header-title-section-simple">
        <el-row type="flex" class="bw-admin-head bw-ff-page-head" justify="space-between" align="middle">
            <el-col :xs="24" :sm="12" :md="14" :lg="16" :xl="16" class="bw-mlc-left">
                <h3 class="bw-custom-page-title"><?php echo esc_html__('Form Fields', 'bookwellnow-appointment-booking'); ?></h3>
                <p class="bw-page-desc"><?php echo esc_html__('Customize the customer details fields shown on the booking form.', 'bookwellnow-appointment-booking'); ?></p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="10" :lg="8" :xl="8" class="bw-ff-page-head-actions">
                <el-button type="primary" class="bw-ff-save-btn" :loading="form_fields_saving" @click="bwab_saveFormFields">
                    {{ form_fields_ui.save_changes }}
                </el-button>
            </el-col>
        </el-row>
    </div>

    <div class="bw-ff-layout">
        <?php
        /**
         * Form Elements sidebar (Pro custom field types).
         */
        do_action('bookwellab_form_fields_elements_sidebar');
        ?>
        <div class="bw-ff-fields-wrap">
            <div class="bw-ff-fields-container">
                <div id="bw-form-fields-sortable" class="bw-ff-fields-list">
                <div
                    v-for="field in form_fields_list"
                    :key="field.field_name"
                    class="bw-ff-field-card"
                    :data-field-name="field.field_name"
                >
                    <div class="bw-ff-field-toolbar">
                        <div class="bw-ff-field-toolbar-left">
                            <span class="bw-ff-drag-handle" aria-hidden="true">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="6" cy="5" r="1.25" fill="currentColor"/>
                                    <circle cx="12" cy="5" r="1.25" fill="currentColor"/>
                                    <circle cx="6" cy="9" r="1.25" fill="currentColor"/>
                                    <circle cx="12" cy="9" r="1.25" fill="currentColor"/>
                                    <circle cx="6" cy="13" r="1.25" fill="currentColor"/>
                                    <circle cx="12" cy="13" r="1.25" fill="currentColor"/>
                                </svg>
                            </span>
                            <span class="bw-ff-field-type">{{ field.field_type }}</span>
                        </div>
                        <div class="bw-ff-field-width-wrap">
                            <el-select
                                v-model="field.field_width"
                                size="small"
                                class="bw-ff-width-select"
                                popper-class="bw-ff-width-select-dropdown"
                            >
                                <el-option :label="form_fields_ui.width_full" value="full"></el-option>
                                <el-option :label="form_fields_ui.width_half" value="half"></el-option>
                            </el-select>
                        </div>
                        <div class="bw-ff-field-toolbar-right">
                            <div class="bw-ff-required-wrap">
                                <span class="bw-ff-required-label">{{ form_fields_ui.required }}</span>
                                <el-switch
                                    v-model="field.is_required"
                                    :disabled="field.field_name === 'terms_and_conditions' || field.field_type === 'Password'"
                                ></el-switch>
                            </div>
                            <?php
                            /**
                             * Extra toolbar controls (e.g. delete custom field).
                             */
                            do_action('bookwellab_form_fields_field_toolbar_extra');
                            ?>
                            <el-popover
                                placement="bottom-end"
                                :width="320"
                                trigger="manual"
                                :visible="field.is_edit"
                                popper-class="bw-ff-settings-popper"
                            >
                                <template #reference>
                                    <button type="button" class="bw-ff-settings-btn" @click="bwab_toggleFormFieldSettings(field.field_name)">
                                        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                            <path d="M18.543 5.62022L18.0874 4.84928C17.7428 4.26624 17.5706 3.97472 17.2774 3.85846C16.9842 3.74222 16.6527 3.83395 15.9896 4.0174L14.8633 4.32673C14.44 4.42192 13.9958 4.36792 13.6093 4.17428L13.2983 3.99935C12.9668 3.79236 12.7119 3.48717 12.5707 3.12844L12.2625 2.2308C12.0598 1.63678 11.9585 1.33977 11.7172 1.16988C11.476 1 11.1555 1 10.5145 1H9.48546C8.84457 1 8.52407 1 8.28278 1.16988C8.04154 1.33977 7.94019 1.63678 7.73751 2.2308L7.42924 3.12844C7.28812 3.48717 7.03317 3.79236 6.70171 3.99935L6.39075 4.17428C6.00421 4.36792 5.56007 4.42192 5.13674 4.32673L4.01038 4.0174C3.34729 3.83395 3.01576 3.74222 2.72261 3.85846C2.42946 3.97472 2.25718 4.26624 1.9126 4.84928L1.45699 5.62022C1.13399 6.16675 0.972491 6.44002 1.00384 6.73092C1.03518 7.02181 1.25138 7.25624 1.68378 7.72508L2.6355 8.7625C2.86812 9.0496 3.03327 9.55 3.03327 9.99991C3.03327 10.45 2.86817 10.9502 2.63553 11.2374L1.68378 12.2748C1.25138 12.7437 1.03519 12.9781 1.00384 13.2691C0.972491 13.5599 1.13399 13.8332 1.45699 14.3797L1.91259 15.1506C2.25716 15.7336 2.42946 16.0252 2.72261 16.1414C3.01576 16.2577 3.3473 16.166 4.0104 15.9825L5.1367 15.6731C5.56011 15.5779 6.00433 15.632 6.39091 15.8257L6.70183 16.0007C7.03323 16.2077 7.28811 16.5128 7.42922 16.8715L7.73751 17.7693C7.94019 18.3633 8.04154 18.6603 8.28278 18.8302C8.52407 19 8.84457 19 9.48546 19H10.5145C11.1555 19 11.476 19 11.7172 18.8302C11.9585 18.6603 12.0598 18.3633 12.2625 17.7693L12.5708 16.8715C12.7119 16.5128 12.9667 16.2077 13.2982 16.0007L13.6091 15.8257C13.9957 15.632 14.4399 15.5779 14.8633 15.6731L15.9896 15.9825C16.6527 16.166 16.9842 16.2577 17.2774 16.1414C17.5706 16.0252 17.7428 15.7336 18.0874 15.1506L18.543 14.3797C18.866 13.8332 19.0275 13.5599 18.9962 13.2691C18.9648 12.9781 18.7486 12.7437 18.3162 12.2748L17.3645 11.2374C17.1318 10.9502 16.9667 10.45 16.9667 9.99991C16.9667 9.55 17.1319 9.0496 17.3645 8.7625L18.3162 7.72508C18.7486 7.25624 18.9648 7.02181 18.9962 6.73092C19.0275 6.44002 18.866 6.16675 18.543 5.62022Z" stroke="currentColor" stroke-width="1.5"/>
                                            <path d="M13.191 9.99298C13.191 11.7327 11.7446 13.143 9.96029 13.143C8.17598 13.143 6.72955 11.7327 6.72955 9.99298C6.72955 8.25327 8.17598 6.84297 9.96029 6.84297C11.7446 6.84297 13.191 8.25327 13.191 9.99298Z" stroke="currentColor" stroke-width="1.5"/>
                                        </svg>
                                    </button>
                                </template>
                                <div class="bw-ff-settings-panel">
                                    <el-form label-position="top">
                                        <el-form-item :label="form_fields_ui.label">
                                            <el-input
                                                v-if="field.field_name !== 'terms_and_conditions'"
                                                v-model="field.label"
                                            ></el-input>
                                            <el-input
                                                v-else
                                                type="textarea"
                                                :rows="3"
                                                v-model="field.label"
                                            ></el-input>
                                        </el-form-item>
                                        <el-form-item
                                            v-if="field.field_name !== 'phone' && field.field_name !== 'terms_and_conditions' && field.field_type !== 'Checkbox' && field.field_type !== 'Radio' && field.field_type !== 'Signature' && field.field_type !== 'File'"
                                            :label="form_fields_ui.placeholder"
                                        >
                                            <el-input v-model="field.placeholder"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="form_fields_ui.error_message">
                                            <el-input v-model="field.error_message"></el-input>
                                        </el-form-item>
                                        <?php
                                        /**
                                         * Extra settings controls for custom field types.
                                         */
                                        do_action('bookwellab_form_fields_settings_extra');
                                        ?>
                                        <el-form-item v-if="field.is_default && field.field_name !== 'email'">
                                            <div class="bw-ff-hide-toggle">
                                                <span>{{ form_fields_ui.hide_field }}</span>
                                                <el-switch v-model="field.is_hide"></el-switch>
                                            </div>
                                        </el-form-item>
                                        <p v-if="field.field_name === 'terms_and_conditions'" class="bw-ff-terms-note">
                                            {{ form_fields_ui.terms_required_note }}
                                        </p>
                                    </el-form>
                                    <div class="bw-ff-settings-actions">
                                        <el-button type="primary" size="small" @click="bwab_closeFormFieldSettings(field.field_name)">
                                            {{ form_fields_ui.save }}
                                        </el-button>
                                    </div>
                                </div>
                            </el-popover>
                        </div>
                    </div>

                    <div class="bw-ff-field-preview">
                        <template v-if="field.field_name === 'terms_and_conditions'">
                            <el-checkbox disabled>
                                <span v-html="field.label"></span>
                            </el-checkbox>
                        </template>
                        <template v-else-if="field.field_name === 'note'">
                            <label class="bw-ff-preview-label">{{ field.label }}</label>
                            <el-input type="textarea" :placeholder="field.placeholder" disabled></el-input>
                        </template>
                        <template v-else-if="field.field_name === 'phone'">
                            <label class="bw-ff-preview-label">{{ field.label }}</label>
                            <el-input placeholder="<?php echo esc_attr__('Phone number', 'bookwellnow-appointment-booking'); ?>" disabled></el-input>
                        </template>
                        <template v-else-if="!field.is_default && field.is_default !== 1 && field.is_default !== true">
                            <?php
                            /**
                             * Preview markup for custom (non-default) fields.
                             */
                            do_action('bookwellab_form_fields_preview_extra');
                            ?>
                        </template>
                        <template v-else>
                            <label class="bw-ff-preview-label">{{ field.label }}</label>
                            <el-input :placeholder="field.placeholder" disabled></el-input>
                        </template>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
