<?php
/* @var $this \yii\web\View */
/* @var $errors \common\models\opportunities\OpportunitiesLogs */

use common\models\CT_Helpers;
use common\models\opportunities\OpportunitiesModel;
use yii\helpers\Url;

$this->registerJsFile(
	'https://cdn.jsdelivr.net/npm/vue',
	[
		'depends' => [\frontend\assets\CTAsset::className()],
		'position' => \yii\web\View::POS_END
	]
);
$this->registerJsFile(
	'@web/assets/js/insert-opportunity-a.js',
	[
		'depends' => [\frontend\assets\CTAsset::className()],
		'position' => \yii\web\View::POS_END
	]
);


?>
<div class="center_wrapper" style="padding-top: 30px;">
	<h1 class="insert__title">Insert an Opportunity</h1>
</div>
<div class="center_wrapper" style="padding-bottom: 30px; min-height: 90vh">
    <?php if(isset($errors)): ?>
    <div style="margin: 10px 40px;border-left: 4px solid red; padding: 5px 10px;">
        <h3 style="font-weight: bold;margin-bottom: 15px;">Your reject reason</h3>
        <ul>
            <?php foreach ($errors as $item): ?>
            <li ><h2>(<?= date('d-m-Y H:i:s', $item->created_at) ?>)<h2> <p style="padding-bottom: 15px"><?= $item->content ?></p></li>
            <?php endforeach; ?>
        </ul>
    </div>
    <?php endif; ?>
	<div id="vue-app">
        <input type="hidden" id="team_id" value="<?= isset($errors)?$errors[0]->opportunity_id:0 ?>">
		<div>
			<h2 class="intro_title">Introduction</h2>
			<div class="insert_half register__col left">
				<div class="form-group">
					<label class="form-group__label" for="register-first-name">Title of the idea</label>
					<input class="input" v-model="title" placeholder="Click to insert text (Max 100char)" />
				</div>
				<div class="form-group">
					<label class="form-group__label top_label" for="description_idea">
                        <span class="relative">Quick description of the idea
                          <button class="form-group__info" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon--top" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                              <path d="M0 0h24v24H0z" fill="none"/>
                              <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
                            </svg>
                          </button>
                          <span class="tip info_tip">
                            <span class="tip__item">Connecting Talents is a <span class="bold">digital platform</span> to support people in finding their professional path in the new world of work. We empower aur user by discovering their <span class="bold">unique talent portfolio.</span> So they can choose <span class="bold">matching Opportunities</span> for skills development, testing their entrepreneurial capabilities and creating new businesses on our <span class="bold">sharing</span> platform.</span>
                          </span>
                        </span>

					</label>
					<textarea class="input input_description" placeholder="Click to insert text (Max 400char)" maxlength="400" rows="6" cols="4" v-model="description"></textarea>
				</div>
				<div class="form-group">
					<h3 class="form-group__label">Starting date</h3>
					<div class="form__subgroup form_subgroup_left form_subgroup_select left">
						<div id="month_select" class="select js-select" data-eui-dropdown>
							<div class="select__inner dd-eui-dropdown" data-eui-dropdown-depth="1">
								<div class="select__value js-select-value">Month</div>
								<div class="select__items dd-eui-drop">
									<?php
									foreach ( CT_Helpers::monthList() as $key => $value){
										?>
										<input id="month-<?= $key ?>" class="none js-select-option" type="radio" value="<?= $key ?>" data-text="<?= $value ?>" name="start_date_month" v-model="start_date_month" />
										<label class="select__option" for="month-<?= $key ?>"><?= $value ?></label>
										<?php
									}
									?>
								</div>
							</div>
						</div>
					</div>
					<div class="form__subgroup form_subgroup_right form_subgroup_select right">
						<div id="year_select" class="select js-select" data-eui-dropdown>
							<div class="select__inner dd-eui-dropdown" data-eui-dropdown-depth="1">
								<div class="select__value js-select-value">Year</div>
								<div class="select__items dd-eui-drop">
									<?php
									foreach ( CT_Helpers::yearsList() as $key => $value){
										?>
										<input id="year-<?= $key ?>" <?= CT_Helpers::checked($value, '') ?>  class="none js-select-option" required type="radio" name="start_date_year" value="<?= $value ?>" data-text="<?= $value ?>" v-model="start_date_year"  />
										<label class="select__option" for="year-<?= $key ?>"><?= $value ?></label>
										<?php
									}
									?>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="form-group">
					<div class="form__subgroup">
						<label class="form-group__label">Incorporation</label>
						<div>
							<input id="incorp-1" class="none" type="radio" name="incorporation" value="1" v-model="incorporation" />
							<label class="register__radio radio incorp" for="incorp-1">Yes</label>
							<input id="incorp-2" class="none" type="radio" name="incorporation" value="0" v-model="incorporation" />
							<label class="register__radio radio incorp" for="incorp-2">No</label>
						</div>
					</div>
				</div>
			</div>
			<div class="insert_half register__col left">
				<div class="form-group">
					<label class="form-group__label" for="">Basecamp city/country</label>
					<div id="city_select" class="select js-select" data-eui-dropdown>
						<div class="select__inner select_open dd-eui-dropdown" data-eui-dropdown-depth="1">
							<input class="input" v-model="google_query" v-on:keyup="googleQueryChange" placeholder="Click to insert text">
							<div class="select__value js-select-value" style="display: none"></div>
							<div class="select__items dd-eui-drop">
								<select-google-item
									v-for="item in google_query_list"
									v-bind:params="item"
									v-bind:key="item.id"
									v-on:chose_el="googleListClick"
								></select-google-item>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<h3 class="form-group__label top_label">
                    <span class="relative">Main Markets (location)
                      <button class="form-group__info" type="button">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon--top" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M0 0h24v24H0z" fill="none"/>
                          <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
                        </svg>
                      </button>
                      <span class="tip info_tip">
                        <span class="tip__item">Select the locations your Opportunity is focused on: choose multiple countries or cities according to the distribution of your potential users</span>
                      </span>
                    </span>
					</h3>
				</div>
				<div class="form-group">
					<div class="form__subgroup_location">
						<div id="main_markets_select" class="select js-select" data-eui-dropdown>
							<div class="select__inner dd-eui-dropdown" data-eui-dropdown-depth="1">
								<div class="select__value"> {{ textMainMarket() }}</div>
								<div class="select__items dd-eui-drop">
									<?php
									foreach ( CT_Helpers::countriesList() as $key => $value){
										?>
										<input id="main_markets-<?= $key ?>" <?= CT_Helpers::checked($key, '') ?>  class="none js-select-option country_filter" type="checkbox" name="main_markets" value="<?= $value ?>" data-text="<?= $value ?>" v-model="main_markets" v-on:change="clickMainMarket" />
										<label class="select__option" for="main_markets-<?= $key ?>"><?= $value ?></label>
										<?php
									}
									?>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="form-group block_none">
					<label class="form-group__label" for="site-url">Link to your website</label>
					<input id="site-url" class="input" v-model="site_url"  placeholder="Click to insert text" />
				</div>
				<div class="form-group form-group--last register-socials">
					<label class="form-group__label top_label_link link_none">Links</label>
					<label class="form-group__label link_block">Social network <span class="form-group__addition">(optional)</span></label>
					<div class="register-socials__row register-socials_mobile">
						<input class="register-socials__input input input--with-icon" v-model="site_url" placeholder="Insert URL of your website" />
					</div>
					<div class="register-socials__row">
						<input class="register-socials__input input input--with-icon" v-model="social_in" placeholder="Insert URL" />
						<div class="register-socials__cell register-socials__cell--in">
							<svg xmlns="http://www.w3.org/2000/svg" class="register-socials__icon register-socials__icon--in" width="16" height="16" viewBox="0 0 14 14" fill="currentColor">
								<path d="M3,14H0V4h3V14z M14,14h-3V8.7c0-1.4-0.5-2.1-1.5-2.1C8.7,6.6,8.2,7,8,7.7C8,9,8,14,8,14H5c0,0,0-9,0-10h2.4l0.2,2h0.1
                            c0.6-1,1.6-1.7,2.9-1.7c1,0,1.9,0.3,2.5,1c0.6,0.7,1,1.7,1,3V14z"/>
								<ellipse cx="1.5" cy="1.5" rx="1.6" ry="1.5"/>
							</svg>
						</div>
						<div class="register-socials__cell">
							<button class="register-socials__button" type="button">Connect</button>
						</div>
					</div>
					<div class="register-socials__row">
						<input class="register-socials__input input input--with-icon" v-model="social_fb" placeholder="Insert URL" />
						<div class="register-socials__cell register-socials__cell--fb">
							<svg xmlns="http://www.w3.org/2000/svg" class="register-socials__icon register-socials__icon--fb" width="13" height="20" viewBox="0 0 41 71" fill="currentColor">
								<path d="M40.9,0v14.8H28.2c-1.5,0-2.8,1.3-2.8,3v8.9h14.1v14.8H25.4V71H11.4V41.4H0.1V26.6h11.2v-8.9
                              c0-9.3,6.7-17,15.5-17.8L40.9,0z"/>
							</svg>
						</div>
						<div class="register-socials__cell">
							<button class="register-socials__button" type="button">Connect</button>
						</div>
					</div>
					<div class="register-socials__row">
						<input class="register-socials__input input input--with-icon" v-model="social_gp" placeholder="Insert URL" />
						<div class="register-socials__cell register-socials__cell--gp">
							<svg xmlns="http://www.w3.org/2000/svg" class="register-socials__icon register-socials__icon--gp" width="22" height="15" viewBox="0 0 78 48" fill="currentColor">
								<path d="M27.4,29h12.2c-2.1,5.8-7.9,10-14.7,10c-8.2-0.1-15-6.4-15.3-14.4C9.2,16.1,16.2,9,25,9
                            c4,0,7.6,1.5,10.4,3.9c0.6,0.6,1.6,0.6,2.3,0l4.5-4.1c0.7-0.6,0.7-1.7,0-2.3c-4.4-4-10.2-6.5-16.6-6.6C11.7-0.4,0.1,10.5,0,23.8
                            C-0.1,37.2,11.1,48.1,25,48.1c13.3,0,24.2-10.1,24.9-22.7c0-0.2,0-5.5,0-5.5H27.4c-0.9,0-1.7,0.7-1.7,1.6v5.9
                            C25.7,28.2,26.5,29,27.4,29z"/>
								<path d="M70.5,20.4v-5.8c0-0.8-0.7-1.4-1.5-1.4h-5c-0.8,0-1.5,0.6-1.5,1.4v5.8h-6c-0.8,0-1.5,0.6-1.5,1.4v4.9
                            c0,0.8,0.7,1.4,1.5,1.4h6v5.8c0,0.8,0.7,1.4,1.5,1.4h5c0.8,0,1.5-0.6,1.5-1.4v-5.8h6c0.8,0,1.5-0.6,1.5-1.4v-4.9
                            c0-0.8-0.7-1.4-1.5-1.4H70.5z"/>
							</svg>
						</div>
						<div class="register-socials__cell">
							<button class="register-socials__button" type="button">Connect</button>
						</div>
					</div>
				</div>
                <div class="form-group">
                    <div class="default-text">
                        <br>
                        <br>
                        <p>
                            By clicking SUBMIT ,you consent to the storage, use and sharing of your data in line with our <a href="<?= Url::to(['site/privacy']) ?>">Privacy</a>. You may amend you data management settings by clicking on the menu item “DAta Management Settings”.
                        </p>
                    </div>
                </div>
				<div class="form_group button_wrapper">
                    <?php
                        $submitText = isset($errors)?'submit changes':'submit';
                    ?>
					<button v-on:click="submitButton" id="submit-insert-opport-a" class="button button--default button--default_bigger button--yellow button_opport_page">
						<span class="button__text"><?= $submitText ?></span>
					</button>
					<a href="#insert-opportunity-modal" id="popub-btn" class="none js-modal"></a>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div class="clear"></div>
</div>

<!--Modal window-->
<div class="none">
	<div id="insert-opportunity-modal" class="modal modal_insert_opport">
		<div class="modal__content modal__content--standalone text-center">
			<h3 class="modal_insert_title">Verification process</h3>
			<p>Thank you for submitting your opportunity. Since we respect the highest ethical standards, we screen all opportunities. We are now verifying your request.</p>
			<p class="strong">You will receive an e-mail <br> from us soon </p>
			<a href="<?= \yii\helpers\Url::to(['profile/index']); ?>" class="button button--default button--default_bigger button--yellow button_opport_page" type="button" name="button"> <span class="button__text">ok</span> </a>
		</div>
	</div>
</div>