@extends('front.layouts.master')
@section('title', 'Daily Reports')

@section('content')
@include('recaptcha::script')
<div class="banner-alt home-banner">
        <img src="{{asset('root-assets/images/daily-report-banner.jpg')}}" alt="Home Banner">
        <div class="banner-about-txt">
         	<div class="flex flex-wrap col-grid flex-middle">
	            <div class="col s6 banner-conent">
					<h1 class="text-white wow fadeInLeft animated main-heading" data-wow-delay="0.4s"> Simplifying Construction Daily Reports</h1>
	                <p class="text-white f-normal wow fadeInLeft animated" data-wow-delay="0.2s" class="mb-30">Generate Professional, Custom, Branded Construction Daily Reports in Minutes.</p>
					<a class="btn btn-green fs-13 wow fadeInLeft animated" data-wow-delay="0.5s" href="https://www.constructiondailyreports.com/user/login" target="_blank">15 Day Free Trial</a>
					<p class="text-white f-normal wow fadeInLeft animated mt-20 cursor-pointer" data-popup-open="youtube-video" data-wow-delay="0.2s"><img src="{{asset('root-assets/images/you-t.png')}}" style="width: 50px" class="mr-10">Watch : CDR Daily Reports</p>
	            </div>	            
		    </div>
        </div>
    </div>
	<section class="home-features">
		<div class="container">
			<div class="flex flex-wrap col-grid flex-middle">
				<div class="col s7 home-features-content">					
					<div class="flex flex-wrap col-grid">
						<div class="col s2">
							<img class="right w-100" src="{{asset('root-assets/images/easy.png')}}">
						</div>
						<div class="section-heading wow col s10 fadeInLeft animated" data-wow-delay="0.2s">
            Mobile App and Website Software make Daily Reporting as Easy as 1 2 3 Sign!
						</div>
					</div>
					<div class="daily-report-points">
						<ul>
							<li>
								<h3>1. Enter your Hours</h3>
								<p>Include names, quantities, and text descriptions. Names rollover each day automatically.</p>
							</li>
							<li>
								<h3>2. Enter your Notes</h3>
								<p>Include names, quantities, and text desciptions, Names rollover each day automatically.</p>
							</li>
							<li>
								<h3>3. Answer a set of Questions</h3>
								<p>Customizable Yes/No questions with space to enter text details if needed.</p>
							</li>
							<li class="flex mb-10">
								<img class="mr-10" src="{{asset('root-assets/images/speak.png')}}">
								<div class="">
									<h3>Voice to text</h3>									
									<p>Use voice to text to make entries even faster.</p>									
								</div>
							</li>
						</ul>
						<p class="f-normal wow fadeInLeft animated mt-5 mb-5 cursor-pointer" data-popup-open="mobile-application-overview" data-wow-delay="0.2s"><img src="{{asset('root-assets/images/you-t.png')}}" style="width: 30px" class="mr-10">Watch : Mobile App Overview</p>
					</div>
				</div>
				<div class="col s5 home-features-img">
					<img class="right" src="{{asset('root-assets/images/daily-report-graphic.png')}}">
				</div>
			</div>
		</div>
	</section>

	<section class="home-reporting">
		<div class="container">
			<div class="flex flex-wrap col-grid">
				<div class="col w-100">
					<div class="section-heading wow fadeInLeft animated"data-wow-delay="0.2s">Fast and Customized</div>					
				</div>
			</div>
			<div class="flex flex-wrap col-grid">
				<div class="col s6 mt-15">
					<div class="card-c h-100">
						<div class="card-c-body">
							<div class="card-c-img text-center">
								<span class="img-border"><img src="{{asset('root-assets/images/customized-report.png')}}" alt="Automated"></span>
							</div>
							<div class="card-c-heading text-center">Customized and Branded Daily Reports</div>
							<div class="card-c-content">
              We understand that all job sites have different needs. That is why CDR allows its users to generate custom report templates which they can assign to any of their projects. This removes the need to customize each time you create a new project while also allowing for customizability per project.
<br>
Your company’s logo can be added to your account which will show in the top left corner of all daily reports to give them a professional look.
							</div>
						</div>
					</div>
				</div>
				<div class="col s6 mt-15">
					<div class="card-c h-100">
						<div class="card-c-body">
							<div class="card-c-img text-center">
								<span class="img-border"><img src="{{asset('root-assets/images/fast-easy.png')}}" alt="Custom PDF Reports"></span>
							</div>
							<div class="card-c-heading text-center">Fastest and Easiest Construction Daily Reports</div>
							<div class="card-c-content">
              Our simple mobile app and website software is built to simplify and automate the reporting process. Automatic weather capture, emails, cloud storage, hours entry rollover, and other features are designed to remove unnecessary manual entry which helps save valuable time.
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>	

	<section class="home-request">
		<div class="container">
			<div class="flex flex-wrap col-grid">
				<div class="col w-100">
					<div class=" request-demo">
						<div class="section-heading text-white">Request a Demo</div>
						<div class="section-subheading text-white">One of our US based representatives will reach out to you as soon as possible!
						</div>
						{{Form::open(['route'=>['contact'],'data-parsley-validate'])}}
						<div class="flex flex-wrap col-grid">
							<div class="col s6">
								<label>Name</label>
								{!! Form::text('name',Null,['class'=>'form-input','id'=>'name']) !!}
                                    {{ $errors->first('name', ':message') }}
								<!-- <input class="form-input" type="text" name="name"> -->
							</div>
							<div class="col s6">
								<label>Email Address</label>
								{!! Form::email('email',Null,['class'=>'form-input', 'id'=>'email']) !!}
                                    {{ $errors->first('email', ':message') }}
								<!-- <input class="form-input" type="email" name="email-address"> -->
							</div>
							<div class="col s6">
								<label>Phone Number</label>
								{!! Form::number('phone',Null,['class'=>'form-input', 'id'=>'phone']) !!}
                                    {{ $errors->first('phone', ':message') }}
								<!-- <input class="form-input" type="text" name="p-number"> -->
							</div>
							{{ Form::hidden('invisible', Request::url()) }}
							<div class="col s6">
								<label>Company Name</label>
								{!! Form::text('company',Null,['class'=>'form-input', 'id'=>'company']) !!}
                                    {{ $errors->first('company', ':message') }}
								<!-- <input class="form-input" type="email" name="c-name"> -->
							</div>
							<div class="col s6 mt-15">
							@include('recaptcha::widget')
                                    {{ $errors->first('g-recaptcha-response', ':message') }}
							</div>
							<div class="col w-100 text-center">
								<button class="btn bg-white fs-13 box-shadow text-orange mt-20">Submit</button>
							</div>
						</div>
						{{Form::close()}}
					</div>
				</div>
			</div>
		</div>
	</section>

@endsection
@section('js')
<script>
    $(document).ready(function(){
        $(".triel").on('click',function(){
            $('#myanchor').get(0).click();
        })
    	new WOW().init();             
    })
</script>
<!-- mobile-application-overview Popup -->
<div class="popup popup-type-one" data-popup="mobile-application-overview">
	<div class="popup-inner">
		<div class="popup-header"><h2 class="mt-0 mb-0 text-green f-black text-center mb-20">Mobile application overview</h2></div>
		<div class="popup-max-hgt scrollbar-dynamic">
			<div class="popup-hgt-padding">
				<iframe width="100%" height="315" src="https://www.youtube.com/embed/OIN36K_D-KI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			</div>
		</div>
		<a class="popup-close" data-popup-close="mobile-application-overview" href="#"><img src="{{asset('root-assets/images/cancel.png')}}" alt="" width="12"/><i class="icon-cross"></i></a>
	</div>
	<div class="overlay black overlay-click" data-popup-close="mobile-application-overview"></div>
</div>
<!-- youtube-video Popup -->
<div class="popup popup-type-one" data-popup="youtube-video">
	<div class="popup-inner">
		<div class="popup-header"><h2 class="mt-0 mb-0 text-green f-black text-center mb-20">Daily Reports Explainer</h2></div>
		<div class="popup-max-hgt scrollbar-dynamic">
			<div class="popup-hgt-padding">
				<iframe width="100%" height="315" src="https://www.youtube.com/embed/iL56Gaz610U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			</div>
		</div>
		<a class="popup-close" data-popup-close="youtube-video" href="#"><img src="{{asset('root-assets/images/cancel.png')}}" alt="" width="12"/><i class="icon-cross"></i></a>
	</div>
	<div class="overlay black overlay-click" data-popup-close="youtube-video"></div>
</div>
@endsection