<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Page: Settings
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="card" v-if="layout.download != undefined">
    <div class="card-body">
        <h4 class="header-title">{{ langs.setting.functions }}</h4>
        <div class="row">
            <div class="col-4 mb-2">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="layout-allow-download" disabled>
                    <label class="form-check-label" for="layout-allow-download">{{ langs.setting.show_download }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
            <div class="col-4 mb-2">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="layout-allow-saveDesign" disabled>
                    <label class="form-check-label" for="layout-allow-saveDesign">{{ langs.setting.show_save_design }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
            <div class="col-4 mb-2" v-if="layout.addcart.allow != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.addcart.allow" id="layout-allow-addcart">
                    <label class="form-check-label" for="layout-allow-addcart">{{ langs.setting.show_add_to_cart }}</label>
                </div>
            </div>
            <div class="col-4 mb-2">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="layout-allow-quote" disabled>
                    <label class="form-check-label" for="layout-allow-quote">{{ langs.setting.show_quote }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
            <div class="col-4 mb-2" v-if="layout.preview.allow != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.preview.allow" id="layout-allow-preview">
                    <label class="form-check-label" for="layout-allow-preview">{{ langs.setting.show_preview }}</label>
                </div>
            </div>
            <div class="col-4 mb-2" v-if="layout.fullscreen.allow != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.fullscreen.allow" id="layout-allow-fullscreen">
                    <label class="form-check-label" for="layout-allow-fullscreen">{{ langs.setting.show_fullscreen }}</label>
                </div>
            </div>
            <div class="col-4 mb-2">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="layout-allow-waterMask" disabled>
                    <label class="form-check-label" for="layout-allow-waterMask">{{ langs.setting.show_water_mask }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
            <div class="col-4 mb-2" v-if="layout.ruler.allow != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.ruler.allow" id="layout-allow-ruler">
                    <label class="form-check-label" for="layout-allow-ruler">{{ langs.setting.show_ruler }}</label>
                </div>
            </div>
            <div class="col-4 mb-2" v-if="layout.zoom.allow != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.zoom.allow" id="layout-allow-zoom">
                    <label class="form-check-label" for="layout-allow-zoom">{{ langs.setting.show_zoom }}</label>
                </div>
            </div>
            <div class="col-4 mb-2">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="layout-allow-undo" disabled>
                    <label class="form-check-label" for="layout-allow-undo">{{ langs.setting.show_undo }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
            <div class="col-4 mb-2" v-if="layout.reset.allow != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.reset.allow" id="layout-allow-reset">
                    <label class="form-check-label" for="layout-allow-reset">{{ langs.setting.show_reset }}</label>
                </div>
            </div>
            <div class="col-4 mb-2" v-if="layout.help.allow != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.help.allow" id="layout-allow-help">
                    <label class="form-check-label" for="layout-allow-help">{{ langs.setting.show_help }}</label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" v-if="layout.text != undefined">
    <div class="card-body">
        <h4 class="header-title">{{ langs.setting.menus }}</h4>

        <div class="mb-2" v-if="layout.template.allow != undefined">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="layout.template.allow" id="layout-allow-template">
                <label class="form-check-label" for="layout-allow-template">{{ langs.setting.show_template }}</label>
            </div>
        </div>

        <div class="mb-2" v-if="layout.text.allow != undefined">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="layout.text.allow" id="layout-allow-text">
                <label class="form-check-label" for="layout-allow-text">{{ langs.setting.show_text }}</label>
            </div>
        </div>

        <div class="row" v-if="layout.text.allow">
            <div class="col-4 mb-1" v-if="layout.text.font != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.font" id="layout-allow-text-font">
                    <label class="form-check-label" for="layout-allow-text-font">{{ langs.setting.show_font }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.size != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.size" id="layout-allow-text-size">
                    <label class="form-check-label" for="layout-allow-text-size">{{ langs.setting.font_size }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.color != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.color" id="layout-allow-text-color">
                    <label class="form-check-label" for="layout-allow-text-color">{{ langs.setting.text_color }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.bold != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.bold" id="layout-allow-text-bold">
                    <label class="form-check-label" for="layout-allow-text-bold">{{ langs.setting.font_bold }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.italic != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.italic" id="layout-allow-text-italic">
                    <label class="form-check-label" for="layout-allow-text-italic">{{ langs.setting.font_italic }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.underline != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.underline" id="layout-allow-text-underline">
                    <label class="form-check-label" for="layout-allow-text-underline">{{ langs.setting.font_underline }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.strike != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.strike" id="layout-allow-text-strike">
                    <label class="form-check-label" for="layout-allow-text-strike">{{ langs.setting.font_strike }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.uppercase != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.uppercase" id="layout-allow-text-uppercase">
                    <label class="form-check-label" for="layout-allow-text-uppercase">{{ langs.setting.font_uppercase }}</label>
                </div>
            </div>
            <div class="col-4 mb-1">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="layout-allow-text-arc" disabled>
                    <label class="form-check-label" for="layout-allow-text-arc">{{ langs.setting.text_arc }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.space != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.space" id="layout-allow-text-space">
                    <label class="form-check-label" for="layout-allow-text-space">{{ langs.setting.text_space }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.outline != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.outline" id="layout-allow-text-outline">
                    <label class="form-check-label" for="layout-allow-text-outline">{{ langs.setting.text_outline }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.transparent != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.transparent" id="layout-allow-text-transparent">
                    <label class="form-check-label" for="layout-allow-text-transparent">{{ langs.setting.transparent_text }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.move != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.move" id="layout-allow-text-move">
                    <label class="form-check-label" for="layout-allow-text-move">{{ langs.setting.move_text }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.rotate != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.rotate" id="layout-allow-text-rotate">
                    <label class="form-check-label" for="layout-allow-text-rotate">{{ langs.setting.rotate_text }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.copy != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.copy" id="layout-allow-text-copy">
                    <label class="form-check-label" for="layout-allow-text-copy">{{ langs.setting.copy_text }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.lock != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.lock" id="layout-allow-text-lock">
                    <label class="form-check-label" for="layout-allow-text-lock">{{ langs.setting.lock_text }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.text.flip != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.text.flip" id="layout-allow-text-flip">
                    <label class="form-check-label" for="layout-allow-text-flip">{{ langs.setting.flip_text }}</label>
                </div>
            </div>
            <div class="col-12"><hr class="mt-1 mb-2"></div>
        </div>

        <div class="mb-2" v-if="layout.artwork.allow != undefined">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="layout.artwork.allow" id="layout-allow-artwork">
                <label class="form-check-label" for="layout-allow-artwork">{{ langs.setting.show_artwork }}</label>
            </div>
        </div>

        <div class="row" v-if="layout.artwork.allow">
            <div class="col-4 mb-1" v-if="layout.artwork.transparent != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.transparent" id="layout-allow-artwork-transparent">
                    <label class="form-check-label" for="layout-allow-artwork-transparent">{{ langs.setting.transparent_artwork }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.artwork.color != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.color" id="layout-allow-artwork-color">
                    <label class="form-check-label" for="layout-allow-artwork-color">{{ langs.setting.color_artwork }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.artwork.size != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.size" id="layout-allow-artwork-size">
                    <label class="form-check-label" for="layout-allow-artwork-size">{{ langs.setting.artwork_size }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.artwork.move != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.move" id="layout-allow-artwork-move">
                    <label class="form-check-label" for="layout-allow-artwork-move">{{ langs.setting.move_artwork }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.artwork.rotate != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.rotate" id="layout-allow-artwork-rotate">
                    <label class="form-check-label" for="layout-allow-artwork-rotate">{{ langs.setting.rotate_artwork }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.artwork.copy != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.copy" id="layout-allow-artwork-copy">
                    <label class="form-check-label" for="layout-allow-artwork-copy">{{ langs.setting.copy_artwork }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.artwork.lock != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.lock" id="layout-allow-artwork-lock">
                    <label class="form-check-label" for="layout-allow-artwork-lock">{{ langs.setting.lock_artwork }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.artwork.flip != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.artwork.flip" id="layout-allow-artwork-flip">
                    <label class="form-check-label" for="layout-allow-artwork-flip">{{ langs.setting.flip_artwork }}</label>
                </div>
            </div>
            
            <div class="col-12"><hr class="mt-1 mb-2"></div>
        </div>

        <div class="row">
            <div class="col-4 mb-2" v-if="layout.photo.allowUpload != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.allowUpload" id="layout-allow-photoupload">
                    <label class="form-check-label" for="layout-allow-photoupload">{{ langs.setting.show_upload }}</label>
                </div>
            </div>
            <div class="col-4 mb-2">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" id="layout-allow-photolibrary" disabled>
                    <label class="form-check-label" for="layout-allow-photolibrary">{{ langs.setting.show_library }}</label>
                    <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
                </div>
            </div>
        </div>

        <div class="row" v-if="layout.photo.allowUpload">
            <div class="col-4 mb-1" v-if="layout.photo.crop != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.crop" id="layout-allow-photo-crop">
                    <label class="form-check-label" for="layout-allow-photo-crop">{{ langs.setting.crop_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.shape != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.shape" id="layout-allow-photo-shape">
                    <label class="form-check-label" for="layout-allow-photo-shape">{{ langs.setting.shape_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.transparent != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.transparent" id="layout-allow-photo-transparent">
                    <label class="form-check-label" for="layout-allow-photo-transparent">{{ langs.setting.transparent_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.color != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.color" id="layout-allow-photo-color">
                    <label class="form-check-label" for="layout-allow-photo-color">{{ langs.setting.color_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.filter != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.filter" id="layout-allow-photo-filter">
                    <label class="form-check-label" for="layout-allow-photo-filter">{{ langs.setting.filter_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.size != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.size" id="layout-allow-photo-size">
                    <label class="form-check-label" for="layout-allow-photo-size">{{ langs.setting.photo_size }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.move != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.move" id="layout-allow-photo-move">
                    <label class="form-check-label" for="layout-allow-photo-move">{{ langs.setting.move_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.rotate != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.rotate" id="layout-allow-photo-rotate">
                    <label class="form-check-label" for="layout-allow-photo-rotate">{{ langs.setting.rotate_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.copy != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.copy" id="layout-allow-photo-copy">
                    <label class="form-check-label" for="layout-allow-photo-copy">{{ langs.setting.copy_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.lock != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.lock" id="layout-allow-photo-lock">
                    <label class="form-check-label" for="layout-allow-photo-lock">{{ langs.setting.lock_photo }}</label>
                </div>
            </div>
            <div class="col-4 mb-1" v-if="layout.photo.flip != undefined">
                <div class="form-check form-switch">
                    <input type="checkbox" class="form-check-input" v-model="layout.photo.flip" id="layout-allow-photo-flip">
                    <label class="form-check-label" for="layout-allow-photo-flip">{{ langs.setting.flip_photo }}</label>
                </div>
            </div>
            
            <div class="col-12"><hr class="mt-1 mb-2"></div>
        </div>

        <div class="mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="layout-allow-team" disabled>
                <label class="form-check-label" for="layout-allow-team">{{ langs.setting.show_team }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>

        <div class="mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="layout-allow-qrcode" disabled>
                <label class="form-check-label" for="layout-allow-qrcode">{{ langs.setting.show_qrcode }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_basic"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>

        <div class="mb-2">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" id="layout-allow-barcode" disabled>
                <label class="form-check-label" for="layout-allow-barcode">{{ langs.setting.show_barcode }}</label>
                <span class="btn btn-sm btn-info btn-rounded p-0 ms-1 d-inline-block tooltip-top" :data-tooltip="langs.upgrade_pro"><i class="material-icons material-symbols-outlined fs-4">question_mark</i></span>
            </div>
        </div>

        <div class="mb-2" v-if="layout.layer.allow != undefined">
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" v-model="layout.layer.allow" id="layout-allow-layer">
                <label class="form-check-label" for="layout-allow-layer">{{ langs.setting.show_layer }}</label>
            </div>
        </div>

        <button type="button" class="btn btn-primary waves-effect waves-light float-end mb-3" :disabled="loading == 'layout'" @click="updateSettings(layout, 'layout')">
            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" v-if="loading == 'layout'"></span>
            <i v-else class="material-icons material-symbols-outlined me-1">save</i>
            {{ langs.update }}
        </button>
    </div>
</div>