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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="float-end mb-2 d-flex gap-2 align-items-center">
    <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light d-flex align-items-center" v-if="loadedStore" @click="showFilterStore()" :disabled="loadingStore">
        <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" v-if="loadingStore"></span>
        <i class="material-icons material-symbols-outlined" v-else>cloud_download</i>
        <span class="d-none d-lg-block">{{ langs.setting.import }}</span>
    </button>
    <label for="upload-filter-file" class="btn btn-light btn-sm waves-effect waves-light d-flex align-items-center gap-1 border">
        <i class="material-icons material-symbols-outlined">upload</i>
        <span class="d-none d-lg-block">{{ langs.setting.upload }}</span>
        <input id="upload-filter-file" type="file" class="form-control d-none" accept=".json" multiple class="d-none" @change="uploadFilter($event)">
    </label>
</div>

<div class="card w-100">
    <div class="card-body">
        <div class="d-flex gap-2 justify-content-between align-items-center mb-2">
            <h4 class="header-title m-0">{{ langs.setting.list_filters }}</h4>
            <button type="button" class="btn btn-sm btn-info waves-light d-flex align-items-center gap-1" @click="editMode = true" v-if="!editMode">
                <i class="material-icons material-symbols-outlined fs-4">edit</i>
                <span class="d-none d-lg-block">{{ langs.edit }}</span>
            </button>
            <div class="btn-group gap-2 d-flex align-items-center mb-1" v-else>
                <button type="button" class="btn btn-sm btn-light rounded-2 border waves-light d-flex align-items-center gap-1" @click="editMode = false">
                    <i class="material-icons material-symbols-outlined">close</i>
                    <span class="d-none d-lg-block">{{ langs.close }}</span>
                </button>
                <button v-if="settings.font != undefined" type="button" class="btn btn-sm btn-primary rounded-2 waves-light d-flex align-items-center gap-1" :disabled="loading == 'filter' || listFilters.length == settings.filter.length" @click="saveUpdateFilter">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="loading == 'filter'"></span>
                    <i class="material-icons material-symbols-outlined fs-4" v-else>save</i>
                    <span class="d-none d-lg-block">{{ langs.save }}</span>
                </button>
            </div>
        </div>

        <div class="d-flex flex-wrap align-items-center flex-wrap gap-2 w-100">
            <button type="button" class="btn p-0 rounded-2 position-relative pdapp-h120">
                <img :src="pluginUrl+'assets/images/filter.jpeg'" alt="Normal" class="mw-100 mh-100 rounded-2"/>
                <span class="d-block text-center fw-bold position-absolute text-white" style="bottom: 0px;">{{ langs.setting.normal }}</span>
            </button>
            <template v-if="listFilters.length">
                <button type="button" class="btn p-0 rounded-2 position-relative pdapp-h120" v-for="(filter, fid) in listFilters" :key="fid">
                    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0px; height: 0px;"><filter :id="'filter-svg-'+ fid" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" :values="filter.value"></feColorMatrix></filter></svg>
                    <img :src="pluginUrl+'assets/images/filter.jpeg'" :alt="filter.title" class="mw-100 mh-100 rounded-2" :style="'filter: url(#filter-svg-'+ fid +')'"/>
                    <span class="d-block text-center fw-bold position-absolute text-white" style="bottom: 0px;">{{ filter.title }}</span>
                    <i class="material-icons material-symbols-outlined pdapp-remove-btn" v-if="editMode" @click="listFilters.splice(fid, 1)">close</i>
                </button>
            </template>
        </div>
    </div>
</div>