<?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
<?= $this->extend('themes/backend/vuexy/main/general_settings_layout') ?>

<?= $this->section('content'); ?>
<!--Content Body-->
<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills flex-column flex-md-row mb-4">
            <li class="nav-item">
                <a class="nav-link active" href="javascript:void(0);"
                ><i class="ti-xs ti ti-users me-1"></i> Account</a
                >
            </li>
            <li class="nav-item">
                <a class="nav-link" href="pages-account-settings-security.html"
                ><i class="ti-xs ti ti-lock me-1"></i> Security</a
                >
            </li>
        </ul>

        <div class="card mb-4">
            <h5 class="card-header">Profile Details</h5>
            <!-- Account -->
            <div class="card-body">
                <div class="d-flex align-items-start align-items-sm-center gap-4">
                    <img
                            src="<?= $obj->picture ?? '' ?>"
                            alt="user-avatar"
                            class="d-block w-px-100 h-px-100 rounded"
                            id="uploadedAvatar"
                    />
                    <div class="button-wrapper">
                        <label for="upload" class="btn btn-primary me-2 mb-3" tabindex="0">
                            <span class="d-none d-sm-block"><?= lang("App.profile_change_photo") ?></span>
                            <i class="ti ti-upload d-block d-sm-none"></i>
                            <input
                                    type="file"
                                    id="upload"
                                    class="account-file-input"
                                    hidden
                                    accept="image/png, image/jpeg"
                            />
                        </label>
                        <button type="button" class="btn btn-label-secondary account-image-reset mb-3">
                            <i class="ti ti-refresh-dot d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">Reset</span>
                        </button>

                        <div class="text-muted">Allowed JPG, GIF or PNG. Max size of 800K</div>
                    </div>
                </div>
            </div>
            <hr class="my-0"/>
            <div class="card-body">
                <form id="formAccountSettings" method="POST" action="<?= site_url("profile/store") ?>">
                    <?= csrf_field() ?>
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label for="first_name" class="form-label"><?= lang("App.profile_first_name") ?></label>
                            <input
                                    class="form-control"
                                    type="text"
                                    id="first_name"
                                    name="first_name"
                                    placeholder="<?= lang("App.profile_first_name_ph") ?>"
                                    value="<?= (isset($obj)) ? $obj->first_name : set_value('first_name'); ?>"
                                    autofocus
                            />
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="last_name" class="form-label"><?= lang("App.profile_last_name") ?></label>
                            <input class="form-control"
                                   type="text"
                                   name="last_name"
                                   id="last_name"
                                   placeholder="<?= lang("App.profile_last_name_ph") ?>"
                                   value="<?= (isset($obj)) ? $obj->last_name : set_value('last_name'); ?>"
                            />
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="email" class="form-label"><?= lang("App.profile_email") ?></label>
                            <input
                                    class="form-control"
                                    type="text"
                                    id="email"
                                    name="email"
                                    placeholder="<?= lang("App.profile_email_ph") ?>"
                                    value="<?= (isset($obj)) ? $obj->email : set_value('email'); ?>"
                            />
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="organization" class="form-label">Organization</label>
                            <input
                                    type="text"
                                    class="form-control"
                                    id="organization"
                                    name="organization"
                                    value="Pixinvent"
                            />
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="mobile"><?= lang("App.profile_mobile") ?></label>
                            <div class="input-group input-group-merge">
                                <span class="input-group-text">US (+1)</span>
                                <input
                                        type="text"
                                        id="mobile"
                                        name="mobile"
                                        class="form-control"
                                        placeholder="<?= lang("App.profile_mobile_ph") ?>"
                                        value="<?= (isset($obj)) ? $obj->mobile : set_value('mobile'); ?>"
                                />
                            </div>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="address" class="form-label"><?= lang("App.profile_address") ?></label>
                            <input
                                    type="text"
                                    class="form-control"
                                    id="address"
                                    name="address"
                                    placeholder="<?= lang("App.profile_address_ph") ?>"
                                    value="<?= (isset($obj)) ? $obj->address : set_value('address'); ?>"
                            />
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="state" class="form-label"><?= lang("App.profile_state") ?></label>
                            <input
                                    class="form-control"
                                    type="text"
                                    id="state"
                                    name="state"
                                    placeholder="<?= lang("App.profile_state_ph") ?>"
                                    value="<?= (isset($obj)) ? $obj->state : set_value('state'); ?>"
                            />
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="city" class="form-label"><?= lang("App.profile_city") ?></label>
                            <input
                                    type="text"
                                    class="form-control"
                                    id="city"
                                    name="city"
                                    placeholder="<?= lang("App.profile_city_ph") ?>"
                                    value="<?= (isset($obj)) ? $obj->city : set_value('city'); ?>"
                            />
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="country"><?= lang("App.profile_country") ?></label>
                            <?php $id_select = (isset($obj)) ? $obj->country ?? [] : set_value('country'); ?>
                            <select name="country" id="country" class="select2 form-select">
                                <option value=""><?= lang("App.global_select") ?></option>
                                <?php foreach ($country ?? [] as $item) : ?>
                                    <option value="<?= $item['code'] ?? '' ?>" <?= $id_select == $item['code'] ? 'selected' : '' ?>><?= $item['name'] ?? '' ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="language" class="form-label"><?= lang("App.profile_language") ?></label>
                            <?php $id_select = (isset($obj)) ? $obj->language ?? [] : set_value('language'); ?>
                            <select name="language" id="language" class="select2 form-select">
                                <option value=""><?= lang("App.global_select") ?></option>
                                <option value="en" <?= $id_select == "en" ? 'selected' : '' ?>><?= lang("App.lang_en") ?></option>
                                <option value="es" <?= $id_select == "es" ? 'selected' : '' ?>><?= lang("App.lang_es") ?></option>
                                <option value="pt" <?= $id_select == "pt" ? 'selected' : '' ?>><?= lang("App.lang_pt") ?></option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-2">
                        <button type="submit" class="btn btn-primary me-2"><?= $btn_submit['title'] ?? '' ?></button>
                        <button type="reset" class="btn btn-label-secondary"><?= $btn_return['title'] ?? '' ?></button>
                    </div>
                </form>
            </div>
            <!-- /Account -->
        </div>

        <div class="card">
            <h5 class="card-header">Delete Account</h5>
            <div class="card-body">
                <div class="mb-3 col-12 mb-0">
                    <div class="alert alert-warning">
                        <h5 class="alert-heading mb-1">Are you sure you want to delete your account?</h5>
                        <p class="mb-0">Once you delete your account, there is no going back. Please be certain.</p>
                    </div>
                </div>
                <form id="formAccountDeactivation" onsubmit="return false">
                    <div class="form-check mb-4">
                        <input
                                class="form-check-input"
                                type="checkbox"
                                name="accountActivation"
                                id="accountActivation"
                        />
                        <label class="form-check-label" for="accountActivation"
                        >I confirm my account deactivation</label
                        >
                    </div>
                    <button type="submit" class="btn btn-danger deactivate-account">Deactivate Account</button>
                </form>
            </div>
        </div>


    </div>



    <?php $settings = session()->get('settings'); ?>

    <?php if ($settings['two_factor_auth']) : ?>
        <form name="form_otp" class="form" action="<?= site_url("profile/store") ?>" method="post" id="sendFormTFA">
            <?= csrf_field() ?>
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <div class="row mx-0" style="width: 100%;">
                                <div class="col-sm-6 p-md-0">
                                    <h4 class="card-title"><?= lang("App.profile_subtitle_tfa") ?></h4>
                                </div>
                                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                                    <div class="custom-control custom-switch ml-2">
                                        <input type="checkbox" id="tfa" name="tfa" class="custom-control-input"
                                               onchange="tfaView()" <?= $obj['tfa'] ?? false ? 'checked' : '' ?>>
                                        <label for="tfa"
                                               class="custom-control-label"><?= lang("App.profile_tfa_msg") ?></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="otp" style="display: <?= $obj['tfa'] ?? false ? 'block' : 'none' ?>">
                                <?php
                                $tfa = new \App\Libraries\Authenticator();
                                $name = $obj['first_name'] ?? '';
                                if ($obj['tfa'] && !empty($obj['tfa_secret'])) {
                                    $tfa_secret = $obj['tfa_secret'] ?? '';
                                    $qrcode = $tfa->GetQR("{$settings['title']} ({$name})", $tfa_secret);
                                } else {
                                    $tfa_secret = $tfa->createSecret();
                                    $qrcode = $tfa->GetQR("{$settings['title']} ({$name})", $tfa_secret);
                                }
                                ?>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <p><b><?= lang("App.profile_qrcode") ?></b></p>
                                        <img src="<?php echo $qrcode; ?>" class="img-responsive">
                                    </div>
                                    <div class="col-lg-6">
                                        <p><b><?= lang("App.profile_backup_code") ?></b></p>
                                        <?php
                                        $codes = "";
                                        if (!empty($obj['tfa_code'] ?? '')) {
                                            $codes = explode(',', $obj['tfa_code'] ?? '');
                                            foreach ($codes as $item) {
                                                echo '<span class="badge badge-primary mr-2 mb-1">' . $item . '</span>';
                                            }
                                        } else {
                                            $codes = array();
                                            for ($i = 1; $i <= 8; $i++) {
                                                $code = random_string('numeric', 6);
                                                $codes[] = $code;
                                                echo '<span class="badge badge-primary mr-2 mb-1">' . $code . '</span>';
                                            }
                                        }
                                        ?>
                                        <p class="mt-2"><b><?= lang("App.profile_tfa_secret") ?></b><br><b
                                                    class="text-primary"><?= $tfa_secret ?></b></p>
                                        <input type="hidden" id="tfa_secret" name="tfa_secret"
                                               value="<?= $tfa_secret ?>">
                                        <input type="hidden" id="tfa_code" name="tfa_code"
                                               value="<?= implode(',', $codes) ?>">
                                        <button type="button" class="btn btn-primary btn-block mt-2"
                                                onclick="download('<?= lang("App.profile_qrcode") ?>\n<?= implode(",", $codes) ?>\n<?= lang("App.profile_tfa_secret") ?>\n<?= $tfa_secret ?>','backup_codes.txt')">
                                            <i class="fas fa-download mr-1"></i> <?= lang("App.profile_tfa_download") ?>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    <?php endif; ?>
</div>
</div>

<?= $this->endSection() ?>



<?= $this->section('additionalInlineJs') ?>
    "use strict";
    $(document).ready(function () {
        $('#first_name').focus();
        $('#date_birth').bootstrapMaterialDatePicker({
            format: '<?=momentDateJS()?>',
            time: false
        });
    });
    $('.file-upload').on('click', function (e) {
        e.preventDefault();
        $('#file').trigger('click');
    });

    <?php if ($settings['two_factor_auth']) : ?>
    function download(text, filename) {
        let blob = new Blob([text], {type: "text/plain;charset=utf-8"});
        let url = window.URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        a.download = filename;
        a.click();
    }

    function tfaView() {
        document.getElementById("sendFormTFA").submit();
    }
    <?php endif; ?>

<?= $this->endSection() ?>
