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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="row justify-content-between align-items-center mb-2">
    <div class="col-auto">
        <div class="d-flex gap-1 align-items-center">
            <div class="d-block d-xl-none">
                <button type="button" class="btn btn-outline-light rounded-pill waves-effect p-1" v-if="!products.searchMobile" @click="products.searchMobile = true">
                    <i class="material-icons material-symbols-outlined">search</i>
                </button>
                <div class="search-bar position-relative mb-sm-0" v-if="products.searchMobile">
                    <input type="text" class="form-control" v-model="products.search" :placeholder="langs.product.search+ '...'" @keyup="products.paged = 1">
                    <i class="material-icons material-symbols-outlined pdapp-search-icon" @click="products.searchMobile = false">search</i>
                </div>
            </div>
            <div class="search-bar position-relative mb-sm-0 d-none d-xl-block">
                <input type="text" class="form-control" v-model="products.search" :placeholder="langs.product.search+ '...'" @keyup="products.paged = 1">
                <i class="material-icons material-symbols-outlined">search</i>
            </div>

            <div class="d-block" v-if="productCheckboxs.length">
                <button type="button" class="btn btn-danger waves-effect waves-light d-none d-xl-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.remove_all" @click="confirmRemovePr('', '')">
                    <i class="material-icons material-symbols-outlined">delete</i>
                    {{ langs.remove }}
                </button>
                <button type="button" class="btn btn-danger waves-effect waves-light p-1 d-xl-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.remove_all" @click="confirmRemovePr('', '')">
                    <i class="material-icons material-symbols-outlined">delete</i>
                </button>
            </div>
        </div>
    </div>
    <div class="col-auto d-flex gap-2">
        <div class="d-block">
            <button type="button" class="btn btn-primary waves-effect waves-light d-none d-xl-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.product.add_new_product" @click="editProduct('')">
                <i class="material-icons material-symbols-outlined">add</i>
                {{ langs.product.add_product }}
            </button>
            <button type="button" class="btn btn-primary waves-effect waves-light p-1 d-xl-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.product.add_new_product" @click="editProduct('')">
                <i class="material-icons material-symbols-outlined">add</i>
            </button>
        </div>
        <div class="d-block" v-if="loadedStore">
            <button type="button" class="btn btn-secondary waves-effect waves-light d-none d-xl-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.product.import_product_store" @click="showProductStore()" :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>
                {{ langs.product.import }}
            </button>
            <button type="button" class="btn btn-secondary waves-effect waves-light p-1 d-xl-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.product.import_product_store" @click="showProductStore()" :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>
            </button>
        </div>
        <div class="d-block">
            <label for="pdapp-upload-product" class="btn btn-info waves-effect waves-light d-none d-xl-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.product.upload_your_product">
                <i class="material-icons material-symbols-outlined me-1">upload_file</i>
                {{ langs.product.upload }}
            </label>
            <label for="pdapp-upload-product" class="btn btn-info waves-effect waves-light p-1 d-xl-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.product.upload_your_product">
                <i class="material-icons material-symbols-outlined">upload_file</i>
            </label>
            <input id="pdapp-upload-product" class="d-none" type="file" accept="application/json" @change="uploadProductFile($event)">
        </div>
    </div>
</div>