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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="modal.type == 'upload'">
    <div class="modal-body">
        <div class="mb-3" v-show="Object.keys(listLang.list).length > 1 && modal.data.length">
            <div class="row">
                <div class="col-12 col-lg-5 col-xl-4">
                    <label class="form-label">{{ langs.art.languages }} <span class="text-danger">*</span></label>
                    <select class="form-select mw-100" v-model="modal.langCode">
                        <option v-for="(lang, lid) in listLang.list" :key="lid" :value="lid">{{ lang }}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="mb-0" v-if="modal.data.length">
            <div class="table-responsive">
                <table class="table table-centered table-borderless table-hover table-nowrap mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="border-0" style="width: 20px;position: relative;">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="fileCheckbox" v-model="modal.checkbox" :disabled="modal.saving" @change="checkAllFile">
                                    <label class="form-check-label" for="fileCheckbox">&nbsp;</label>
                                </div>
                                <a v-if="modal.checkboxs.length" href="javascript:void(0);" class="btn btn-sm btn-rounded btn-danger position-absolute" style="top: 13px;left: 35px;padding: 5px;" @click="removeListUpload"><i class="material-icons material-symbols-outlined" style="font-size: 16px;">delete</i></a>
                            </th>
                            <th class="border-0" style="width: 200px;">{{ langs.art.thumbnail }}</th>
                            <th class="border-0">{{ langs.art.name }}</th>
                            <th class="border-0">{{ langs.art.price }}</th>
                            <th class="border-0" style="width: 80px;">{{ langs.art.filesize }}</th>
                            <th class="border-0" style="width: 80px;">{{ langs.action }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(file, fid) in modal.data" :key="fid">
                            <td>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" :id="'fileCheckbox-'+ fid" v-model="modal.checkboxs" :value="file.id" :disabled="modal.saving || modal.uploading == 100">
                                    <label class="form-check-label" :for="'fileCheckbox-'+ fid">&nbsp;</label>
                                </div>
                            </td>
                            <td class="text-center">
                                <img v-if="file.thumb != ''" :src="file.thumb" alt="artwork file" height="60">
                                <div class="progress progress-lg mt-1 mb-0" v-if="file.error == ''">
                                    <div class="progress-bar bg-success" role="progressbar" :style="'width: '+ file.uploading +'%;'" :aria-valuenow="file.uploading" aria-valuemin="0" aria-valuemax="100">{{ file.uploading }}%</div>
                                </div>
                                <small class="d-block text-danger" v-else>{{ file.error }}</small>
                            </td>
                            <td>
                                <input v-if="file.uploading == 0" type="text" class="form-control form-control-sm" v-model="file.title[modal.langCode]" :placeholder="langs.art.art_name_desc">
                                <span v-else>{{ getTitle(file.title) }}</span>
                            </td>
                            <td>
                                <input v-if="file.uploading == 0" type="number" step="0.1" min="0" class="form-control form-control-sm" value="0" :placeholder="langs.art.price_desc" disabled>
                                <span v-else>${{ file.price }}</span>
                            </td>
                            <td>{{ file.size }}MB</td>
                            <td>
                                <a href="javascript:void(0);" class="action-icon text-danger" @click="modal.data.splice(fid, 1)" v-if="modal.saving == false && modal.uploading != 100">
                                    <i class="material-icons material-symbols-outlined">delete</i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mb-0" v-if="modal.data.length == 0">
            <label class="form-label">{{ langs.art.arts }}</label>
            <input class="form-control" type="file" accept="image/png, image/jpg, image/jpeg, image/svg+xml" multiple @change="changeArtFiles($event)">
        </div>
    </div>
    <div class="modal-footer">
        <div class="mb-0 d-flex justify-content-between align-items-center w-100">
            <button v-if="modal.data.length == 0" type="button" class="btn btn-light border" @click="modal.show = false">{{ langs.cancel }}</button>
            <label v-else class="btn btn-info" for="pdapp-add-more-art">
                {{ langs.art.add_more_files }}
                <input id="pdapp-add-more-art" class="d-none" type="file" accept="image/png, image/jpg, image/jpeg, image/svg+xml" multiple @change="changeArtFiles($event)">
            </label>
            <div class="btn-group gap-2">
                <button v-if="modal.data.length != 0" type="button" class="btn btn-light border rounded-2" @click="modal.show = false">{{ langs.close }}</button>
                <button type="button" class="btn btn-primary rounded-2" :disabled="modal.data.length == 0 || modal.upload == false || modal.saving" @click="startUploadFiles">
                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" v-if="modal.saving"></span>
                    {{ langs.art.start_uploads }}
                </button>
            </div>
        </div>
    </div>
</template>