@extends('layout.master')
@section('title', __('metatags.quote.title'))
@section('meta-title', __('metatags.quote.title'))
@section('description', __('metatags.quote.description'))
@section('image', asset('/images/thumbnail-'.App::getLocale().'.jpg') )
@section('canonical', route(App::getLocale().'.quote') )

@section('content')
	@include('layout.nav_black')

	<header class="quotecalculator" data-id="inicio">
	  <div class="container">
		<div class="row text-left pt-5 mt-5">
			<div class="col-md-6 mb-5 align-self-center">
				<img src="{{ asset('/images/cotizador-mono.svg') }}" class="img-fluid w-100">
			</div>
			<div class="col-12 col-sm-12 offset-sm-0 col-lg-5 px-md-0 ml-auto align-self-center">
				<div class="text-center text-md-left">
					<h1 class="mb-0 d-none">@lang('metatags.quote.title')</strong></h1>
					<h2 class="text-yellow mb-3">@lang('quote.title')</h2>
					<p>@lang('quote.description')</p>
				</div>
				<div data-role="response">
					<form method="POST" action="/quote/calculate">
					  <div class="form-group row">
						<label for="inputEmail3" class="col-sm-4 col-form-label">@lang('quote.form.activity')<span class="text-yellow">*</span></label>
						<div class="col-sm-8 align-self-center">
						  <select class="w-100 form-control" name="position">
							<option value="">@lang('quote.form.activity-value.choose')</option>
							<option value="A">@lang('quote.form.activity-value.assistant')</option>
							<option value="A">@lang('quote.form.activity-value.admin-assistant')</option>
							<option value="A">@lang('quote.form.activity-value.marketing-assistant')</option>
							<option value="B">@lang('quote.form.activity-value.law-assistant')</option>
							<option value="B">@lang('quote.form.activity-value.sys-tech')</option>
							<option value="B">@lang('quote.form.activity-value.audit')</option>
							<option value="B">@lang('quote.form.activity-value.accountant')</option>
							<option value="B">@lang('quote.form.activity-value.architect')</option>
							<option value="B">@lang('quote.form.activity-value.systems-engineer')</option>
							<option value="B">@lang('quote.form.activity-value.market-research')</option>
							<option value="B">@lang('quote.form.activity-value.advertising-agent')</option>
							<option value="A">@lang('quote.form.activity-value.communication')</option>
							<option value="B">@lang('quote.form.activity-value.designer')</option>
							<option value="C">@lang('quote.form.activity-value.programmer')</option>
							<option value="A">@lang('quote.form.activity-value.call-center-agents')</option>
							<option value="B">@lang('quote.form.activity-value.call-center-merchants')</option>
							<option value="C">@lang('quote.form.activity-value.project-manager')</option>
							<option value="C">@lang('quote.form.activity-value.mid-management')</option>
						  </select>
						</div>
					  </div>
					  <div class="form-group row">
						<label for="inputEmail3" class="col-sm-4 col-form-label">@lang('quote.form.experience')<span class="text-yellow">*</span></label>
						<div class="col-sm-8 align-self-center">
						  <select class="w-100 form-control" name="experience">
							<option value="0">@lang('quote.form.experiene_value.no-required')</option>
							<option value="1-2">@lang('quote.form.experiene_value.level-1')</option>
							<option value="3-5">@lang('quote.form.experiene_value.level-2')</option>
							<option value="6-10">@lang('quote.form.experiene_value.level-3')</option>
							<option value="+10">@lang('quote.form.experiene_value.level-4')</option>
						  </select>
						</div>
					  </div>
					  <div class="form-group row mb-5">
						<label for="inputEmail3" class="col-sm-4 col-form-label">@lang('quote.form.bilingual')<span class="text-yellow">*</span></label>


						<div class="col-sm-8 align-self-center">
							<label class="switch">
							  <input type="checkbox" checked name="bilingual">
							  <span class="slider round"></span>
							  <span class="absolute-no">NO</span>
							</label>
						</div>
					  </div>
					  <div class="form-group row mb-5">
						<label for="inputEmail3" class="col-sm-4 col-form-label">@lang('quote.form.yearly-cost')<span class="text-yellow">*</span></label>
						<div class="col-sm-8 align-self-center">
						  <input type="text" placeholder="$"  class="form-control" name="yearly-salary">
							<span class="label-info" data-html="true" data-toggle="tooltip" data-placement="top" title="@lang('quote.form.yearly-cost-help')"></span>
						</div>
					  </div>
					  <p class="text-yellow display-3 font-weight-bold mb-0">Extra</p>
					  <div class="form-group row">
						<label for="inputEmail3" class="col-sm-4 col-form-label">@lang('quote.form.vacations')</label>
						<div class="col-sm-8 align-self-center">
						  <input type="number" class="form-control" id="inputEmail3" name="vacations" min="6" value="6">
						  <span class="label-info" data-html="true" data-toggle="tooltip" data-placement="top" title="@lang('quote.form.vacations-info')"></span>
						</div>
					  </div>
					  
					  <div class="form-group row">
						<label for="inputEmail3" class="col-sm-4 col-form-label">@lang('quote.form.xmas-bonus')</label>
						<div class="col-sm-8 align-self-center">
						  <input type="number" class="form-control" id="inputEmail3" name="xmas-bonus" min="15" value="15">
						  <span class="label-info" data-html="true" data-toggle="tooltip" data-placement="top" title="@lang('quote.form.xmas-bonus-info')"></span>
						</div>
					  </div>
					  <div class="form-group">
						<p class="mb-0 alert w-100" data-role="alert"></p>
					  </div>
					  <div class="form-group row align-self-center">
						<div class="col-6 align-self-center"><p class="mb-0 display-5">@lang('quote.required-fields')</p></div>
						<div class="col text-right">
							<a href="#" data-role="submit" class="btn btn-yellow btn-medium">@lang('quote.quote-now')</a>
						</div>
					  </div>
					</form>
				</div>
			</div>
		</div> 
	</header>
@include('contact')
@endsection

<style>
	.col-form-label{
		font-size: 1.8rem!important;
		font-weight: 600;
		vertical-align: middle;
		padding: 0;
		line-height: 2rem;
	}

	.label-info{
		height: 2rem;
		width: 2rem;
		background-image: url(/images/icons/info.svg);
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 0.7rem;
		right: 2.5rem;
		cursor: pointer;
	}

	.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 30px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  z-index: 2;
  content: "";
height: 24px;
width: 25px;
left: 3px;
bottom: 3px;
  background-color: #fff;
	  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  -webkit-transition: .4s;
  transition: all 0.4s ease-in-out;
}
.slider:after {
  position: absolute;
  left: 0;
  z-index: 1;
  content: "@lang('contractor.yes')";
  text-transform: uppercase;
	font-size: 1.6rem;
	text-align: left !important;
	line-height: 3rem;
	padding-left: 12px!important;
	width: 80px;
	color: #fff;
	height: 30px;
	border-radius: 100px;
	background-color: #282584;
	-webkit-transform: translateX(-48px);
	-ms-transform: translateX(-48px);
	transform: translateX(-48px);
	transition: all 0.4s ease-in-out;
}

input:checked + .slider:after {
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  /*width: 235px;*/
  padding-left: 25px;
}

input:checked + .slider:before {
  background-color: #fff;
}

input:checked + .slider:before {
  -webkit-transform: translateX(48px);
  -ms-transform: translateX(48px);
  transform: translateX(48px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 100px;
}

.slider.round:before {
  border-radius: 50%;
}
.absolute-no {
	position: absolute;
	left: 0;
	color: #9b9b9b;
	text-align: right !important;
	font-size: 1.6rem;
	width: 80px;
	height: 30px;
	padding-right: 1rem;
	line-height: 3rem;
	cursor: pointer;
}
</style>