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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="row">
    <div class="col-12">
        <div class="card mb-2 bg-light">
            <div class="d-flex w-100 justify-content-between">
                <h4 class="page-title">{{ langs.upgrade.version }} - {{ package }} {{ version }}</h4>
                <label for="pdapp-upload-update" class="btn btn-primary waves-effect waves-light d-flex align-items-center justify-content-center tooltip-left" :disabled="loading" :data-tooltip="langs.upgrade.upload_file_update">
                    <template v-if="loading"><span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> {{ langs.upgrade.updating }}...</template>
                    <template v-else>
                        <i class="material-icons material-symbols-outlined me-1">upload_file</i> {{ langs.upgrade.upload }}
                    </template>
                    <input id="pdapp-upload-update" class="d-none" type="file" accept="application/zip" @change="changeFile($event)">
                </label>
            </div>
        </div>
        <div class="card mb-1 position-relative" v-for="(upgrade, uid) in upgrades" :key="uid">
            <div class="card-header p-0">
                <h5 class="m-0 position-relative">
                    <a href="javascript:void(0);" class="text-dark w-100 d-flex justify-content-between align-items-center gap-2 p-3" :class="uid == openDefault ? '' : 'collapsed'" @click.prevent.stop="openDefault == uid ? openDefault = -1 : openDefault = uid">
                        <span class="d-flex gap-2 align-items-center">
                            <span class="d-flex gap-1 align-items-center fw-bold">
                                <span class="material-symbols-outlined">{{checkVersion(upgrade.version) ? 'vertical_align_bottom' : 'update'}}</span>
                                {{ langs.upgrade.version }}: {{ upgrade.version }} - <small>({{ showDate(upgrade.created) }})</small>
                            </span>
                            <span class="badge bg-secondary border-0" v-if="upgrade.version == version">{{ langs.upgrade.current}}</span>
                            <button type="button" class="badge bg-primary border-0" v-if="checkVersion(upgrade.version)">{{ langs.upgrade.new_version}}</button>
                        </span>
                        
                        <i class="material-icons material-symbols-outlined accordion-arrow" @click.prevent.stop="openDefault == uid ? openDefault = -1 : openDefault = uid">{{ uid == openDefault ? 'expand_less' : 'expand_more' }}</i>
                    </a>
                </h5>
            </div>

            <div class="collapse" :class="uid == openDefault ? 'show' : ''">
                <div class="card-body pt-1">
                    <h5 class="card-title fw-bold">{{ langs.upgrade.changelog}}:</h5>
                    <p class="sub-header mb-1" v-for="(note, nid) in upgrade.notes" :key="nid">+ {{ note }}</p>
                    <button type="button" class="btn btn-primary mt-3" v-if="checkVersion(upgrade.version) && loadedStore" @click.prevent.stop="confirmUpgrade(upgrade.version)">{{ langs.upgrade.upgrade}}</button>
                </div>
            </div>

            <div class="position-absolute" id="pdapp-mask-upgrade" v-if="pdappPurchasedCode == ''">
                <h5 class="d-flex justify-content-center align-items-center position-absolute fw-bold w-100 h-100 m-0">
                    <a href="<?php echo esc_url(PDAPP_HOME_URL. '/shop/woocommerce');?>" target="_blank" class="text-danger bg-white p-1 px-2 rounded">{{ langs.upgrade_basic }}</a>
                </h5>
            </div>
        </div>
    </div>
</div>