@extends("app")
@section('head_title', $jobs->seo_title)
@section('head_url', Request::url())
@section('head_description', $jobs->seo_description)
@section('head_keywords', $jobs->seo_keywork)
@section('canonical_url', config('app.url').'jobs/'.$jobs->link)

@section("content")
{!! NoCaptcha::renderJs() !!}
<style>
.text-left{text-align: left; padding: 20px 0px; font-family: 'Playfair Display'; font-weight: 700;}
.btn-black{background: black; padding: 10px 20px; border-radius: 100px; color: white; text-decoration: none; border: black;}
.ptl-93{padding: 40px 0px 0px 13%;}
.bg-gray{background: #F7F7F7; border: 1px solid #CBCBCB; border-radius: 4px; padding: 35px 10px 20px 30px;}
.mb-40{margin-bottom: 40px;}
.btn-black:hover {color: white !important;}
.ml-47{margin-left: 45%;}
.mt-n15{margin-top:0px;padding-top:0px !important;}
.mt-n10{margin-bottom: -10px;}
.mt-n20{margin-top: -20px !important;}
.p-30{padding: 14px 16px;}
.input-w-155{width:155% !important;}
.p-38{padding: 14px 24px !important;}
.p-22{padding: 10px 12px !important;}
.p-20{padding: 20px 20px 0px 20px;}
.pl-10{padding-left: 10px;}
.pb-6{padding-bottom: 5px;}
.mt-n10{margin-top: -10px;}
.mt-n5{margin-left: -5px;}
.pb-60{padding-bottom: 60px !important;}
.p-35{padding: 10px 25px !important;}
.text-right{text-align: right;}
.pt-41{padding-top: 40px;}
.ml-51{margin-left: 51%;}
.pt-100{padding-top: 100px;}
.m-25{margin: 25px;}
.h-hide-only{display: none;}
.sticky{position: sticky;top:120px;}
#valid-msg {color: #00c900;font-size: 12px;}
#error-msg {font-size: 12px;color: #950505;}
@media only screen and (max-width: 767.5px) {
.m-flex{display:flex; flex-flow: column-reverse;}
.m-show{display: block;}
.m-ml-0{margin-left: 0px !important;}
.m-mr-59{margin-right: 59%;}
.m-pt-30{padding-top: 30px !important;}
.m-mt-n40{margin-top: -40px}
.m-ml-n12{margin-left: -12px !important;}
.m-p-10{padding: 10px 0px !important;}
.m-input-w{width: 107% !important;}
.m-ml-12{margin-left: 12%;}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.t-flex{display:flex; flex-flow: column-reverse;}
.t-ml-42{margin-left: 42%;}
.t-ml-25{margin-left: 25px !important;}
.t-mtl-115{margin: -35px 0px 0px 80%;}
.t-p-33{padding: 20px 0px 20px 13%;}
.t-pt-30{padding-top: 30px !important;}
.t-mt-n35{margin-top: -35px;}
.t-show{display: block !important;}
}
</style>
<div class="white-bg pt-100 pb-40 m-mt-n40 t-mt-n35">
	<div class="container p-0 text-black">
		<h1 class="t-heading">{{(!empty($jobs->title))? $jobs->title : ''}}</h1>
						<div class="row m-flex t-flex">
			<div class="col-12 col-sm-12 col-md-12 col-xl-8 col-xxl-8 pl-0">
				<h2 class="text-left fs-36 mpt-0">
								</h2>
								@if(Session::has('flash_message_job'))
				<button style="display:none" id="on_success_btn" data-bs-toggle="modal" data-bs-target="#on_success">On Success</button>
				<div class="modal fade" id="on_success" tabindex="-1" aria-labelledby="on_success" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
								<div class="modal-title">Job Applyed</div>
							</div>
							<div class="modal-body">
								<div class="row p-0">
									<div class="col-12 pl-0 pr-0 text-left pt-15 pb-15">
										<img alt="Email" src="{{url('/public/assets/email-btn.webp')}}" />
										<h4>Thanks for contacting us</h4>
										<p>Our team will contact you in less than 24 hours</p>
										<div class="text-left">
											<button type="button" class="btn bg-black text-white btn-continue" data-bs-dismiss="modal" aria-label="Close">Continue Browsing</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
            @endif
				@if ($errors->any())
					<div id="error_msg" class="alert alert-danger">
						<ul>
							@foreach ($errors->all() as $error)
								<li>{{ $error }}</li>
							@endforeach
						</ul>
					</div>
				@endif
				<div class="bg-gray mt-40 mb-40">
				<p><b>We look forward to hearing from you</b>
				<button type="button" class="btn-black ml-47 m-hide t-show t-mtl-115" data-bs-toggle="modal" data-bs-target="#myModal">Apply Now</button></p>
				<button type="button" role="button" href="#" class="btn-black h-hide-only m-show" data-bs-toggle="modal" data-bs-target="#myModal">Apply Now</button>
				<div class="modal" id="myModal">
					  <div class="modal-dialog mm-0 t-p-33">
						<div class="modal-content">

						  <!-- Modal Header -->
						  <div class="p-20 text-right">
							<a type="button" class="btn-btn-1 m-hide t-show" data-bs-dismiss="modal"><svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M17.7534 9.96875L14.5 13.2222L11.2466 9.96875L9.96875 11.2466L13.2222 14.5L9.96875 17.7534L11.2466 19.0312L14.5 15.7778L17.7534 19.0312L19.0312 17.7534L15.7778 14.5L19.0312 11.2466L17.7534 9.96875Z" fill="#1F1F1F"/>
								<rect x="0.5" y="0.5" width="28" height="28" rx="14" stroke="#E2E2E2"/>
								</svg>
							</a>
							<a type="button" class="mtext-start h-hide-only m-show" data-bs-dismiss="modal"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M8.58579 15.0711L1.51471 8.00007L8.58579 0.929009M1.51471 8.00007H18.4853H1.51471Z" stroke="#8F8F8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</a>
						  </div>

						  <!-- Modal body -->
						  <div class="modal-body pb-60 mt-n15">
								<div class="p-35 m-p-10">
								<h5>Presonal Information</h5>
								<p class="proj-note" style="color: #545454;">Tell us something about yourself</p>
								</div>
								
								{!! Form::open(array('url'=>'job_apply','method'=>'POST', 'id'=>'job_apply')) !!}
								<div class="border-0 pt-20 p-22 m-p-10 m-ml-n12">
									<div class="row">
									<div class="col-6">
										<label class="pb-6">First name <span style="color: red;">*</span></label>
										<input type="text" class="form-control p-30 m-input-w" placeholder="Your First Name" name="first_name" value="{{old('first_name')}}" id="first_name" style="border-radius: 4px !important;" required>
									</div>
									<div class="col-6">
										<label class="pb-6">Last Name <span style="color: red;">*</span></label>
										<input type="text" class="form-control p-30 m-input-w" placeholder="Your Last Name" name="last_name" value="{{old('last_name')}}" id="last_name" style="border-radius: 4px !important;" required>
									</div>
									</div>
								</div>
								
								<div class="form-control border-0 p-35 m-p-10">
									<label class="pb-6">Email address <span style="color: red;">*</span></label>
									<input type="email" class="form-control p-30" placeholder="Your Email address" name="email" value="{{old('email')}}" style="border-radius: 4px !important;" required> 
								</div>
								<div class="form-control border-0 p-35 m-p-10">
									<label class="pb-6">Phone Number <span style="color: red;">*</span></label>
									<input type="text" class="form-control p-30" id="phone_contact" name="phone" value="{{old('phone')}}" style="border-radius: 4px !important;" required>
									<span id="valid-msg" class="hide"></span>
									<span id="error-msg" class="hide"></span>
								</div>
								<div class="form-control border-0 p-35 m-p-10">
									<label class="pb-6">About <span style="color: red;">*</span></label>
									<textarea class="form-control" id="message" name="message" placeholder="Write your about yourself" style="height: auto;padding: 8px 13px;margin-bottom: 0px;min-height:60px; border-radius: 4px !important;" required>