@extends('front.template.master') 
@section('title', $title)
@section('content')

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $('[data-toggle="popover"]').popover({
          placement : 'left',
          trigger: 'hover'
      });
  });
</script>

<!-- Content Area Starts Here -->
<main id="content"> <!-- Landing Section Content Starts Here -->
	<div class="landingSection">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="bd-example mb-3">
						<div id="carouselExampleCaptions" class="carousel slide"
							data-ride="carousel">
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleCaptions" data-slide-to="0"
									class="active"></li>
								<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
								<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
							</ol>
							<div class="carousel-inner">

								@foreach($banner as $r)
								<div class="carousel-item active">
									@if(!empty($r->image))        
										<img src="storage/app/public/banner/{{ $r->image }}" alt="" class="img-fluid w-100 mb-3" style="height: 470px;">    
									@else
									    <img src="public/assets/img/trend-1.jpg" alt="" class="img-fluid w-100 mb-3" style="height: 470px;">
									@endif
								</div>
								@endforeach

								@foreach($banner1 as $r)
								<div class="carousel-item">
									@if(!empty($r->image))        
										<img src="storage/app/public/banner/{{ $r->image }}" alt="" class="img-fluid w-100 mb-3" style="height: 470px;">    
									@else
									    <img src="public/assets/img/trend-1.jpg" alt="" class="img-fluid w-100 mb-3" style="height: 470px;">
									@endif
								</div>
								@endforeach

							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="row">
						<div class="col-sm-12">
							@foreach($banner2 as $r)
							<div class="position-relative mb-3 h-100">
								@if(!empty($r->image))        
									<img src="storage/app/public/banner/{{ $r->image }}" alt="" class="img-fluid w-100 mb-3" style="height: 234px;">    
								@else
								    <img src="public/assets/img/landing-section-1.jpg" alt="" class="img-fluid w-100" style="height: 234px;">
								@endif
							</div>
							@endforeach
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6">
							@foreach($banner3 as $r)
							<div class="position-relative mb-3 h-100">
								@if(!empty($r->image))        
									<img src="storage/app/public/banner/{{ $r->image }}" alt="" class="img-fluid w-100 mb-3" style="height: 212px;">    
								@else
								    <img src="public/assets/img/landing-section-1.jpg" alt="" class="img-fluid w-100" style="height: 212px;">
								@endif
							</div>
							@endforeach
						</div>
						<div class="col-sm-6">
							@foreach($banner4 as $r)
							<div class="position-relative mb-3 h-100">
								@if(!empty($r->image))        
									<img src="storage/app/public/banner/{{ $r->image }}" alt="" class="img-fluid w-100 mb-3" style="height: 212px;">    
								@else
								    <img src="public/assets/img/landing-section-1.jpg" alt="" class="img-fluid w-100" style="height: 212px;">
								@endif
							</div>
							@endforeach
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Landing Section Content Ends Here --> <!-- About CSR Section Starts Here -->
	<div class="aboutInro mb-5">
		<div class="container mb-5">
			<div class="row">
				<div class="col-md-6 mb-3">
					<h3 class="text-dark mb-5">What do you really know about CSR?</h3>
					<p class="mb-5">
						Lorem Ipsum is simply dummy text of the printing and typesetting
						industry. Lorem Ipsum has been the industry's standard dummy text
						ever since the 1500s, when an unknown printer took a galley of type
						and scrambled it to make a type specimen book. It has survived not
						only five centuries, but also the leap into electronic typesetting,
						remaining essentially unchanged. It was popularised in the 1960s
						with the release of Letraset sheets containing Lorem Ipsum
						passages... <a href="#" class="text-primary">Know more</a>
					</p>
					<a href="{{ route('auth.register') }}" class="btn btn-primary">Join Us</a>
				</div>
				<div class="col-md-6 mb-3">
					@foreach($content as $c)
					    <h3 class="text-dark">{{ $c->video_title }}</h3>
					    <video width="100%" height="385px" controls>
						    <source src="storage/app/public/video/{{ $c->video }}" type="video/mp4">
						</video>
					@endforeach 
				</div>
			</div>
		</div>
	</div>
	<!-- About CSR Section Ends Here --> <!-- Sidebar And Featured Content Starts Here -->
	<div class="container">
		<div class="row">
			<div class="col-lg-8">
				<div class="row">
					<div class="col-sm-12">
						<div class="d-flex mb-3">
							<h4 class="text-dark">In Trend</h4>
							<a href="#" class="btn btn-outline-primary ml-auto">View All</a>
						</div>
					</div>
					@foreach($trend as $r)
					<div class="col-sm-6 mb-2">
						@if(!empty($r->image))        
							<img src="storage/app/public/trend/{{ $r->image }}" alt="" class="img-fluid w-100 mb-3" style="height: 204px;">    
						@else
						    <img src="public/assets/img/trend-1.jpg" alt="" class="img-fluid w-100 mb-3" style="height: 204px;">
						@endif
						<h5 class="text-primary mb-3">{{ $r->title }}</h5>
						<p>
							{{ str_limit($r->description, $limit = 50, $end = '...') }} 
						</p>
					</div>
					@endforeach
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="d-flex mb-3">
							<h4 class="text-dark">Events at CSR</h4>
							<a href="#" class="btn btn-outline-primary ml-auto">View All</a>
						</div>
					</div>
					<div class="col-sm-12">
						<div class="csrEvents mb-5">
							<div class="row">
								<div class="col-md-6 d-flex align-items-end">
									<h4 class="text-white m-3">How do businesses take concrete
										action?</h4>
								</div>
								<div class="col-md-6">
									<div class="bg-white p-3 m-3">
										<ul class="list-unstyled news">
											@foreach($event as $r)
											<li>
												<h6 class="text-primary mb-3">{{ $r->title }}</h6>
												<p>
													{{ str_limit($r->description, $limit = 50, $end = '...') }}
													 <a href="#" class="text-primary">Know more</a>
												</p>
											</li>
											@endforeach
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="d-flex mb-3">
							<h4 class="text-dark">RFP</h4>
							<a href="{{ route('rfps') }}" class="btn btn-outline-primary ml-auto">View
								All</a>
						</div>
					</div>
					<div class="col-sm-12">
						<div class="csrEvents mb-5">
							<div class="bd-example-2 mb-3">
								<div id="carouselExampleControls" class="carousel slide"
									data-ride="carousel">
									<div class="carousel-inner">
										@foreach($latrfp1 as $r)								
										<div class="carousel-item active">
											<div class="row">
												<div class="col-md-5 d-flex">
													<div class="bg-white m-3 flex-grow-1">
														@if(!empty($r->company_image))        
															<img src="storage/app/public/profile/{{ $r->company_image }}" alt="" class="img-fluid w-100 mb-3" style="height: 161px;">    
														@else
														    <img src="public/assets/img/ommunity-slide-1.jpg" alt="" class="img-fluid w-100 mb-3" style="height: 161px;">
														@endif
														
														<div class="p-3">
															<h6 class="text-primary mb-3">{{ $r->rfp_title }}</h6>
															<a href="#" class="btn btn-outline-primary mb-4">View Details</a>
														</div>
													</div>
												</div>
												<div class="col-md-7 pl-md-0 d-flex align-items-center">
													<div class="text-white px-3 pt-3 pb-5 mb-5 mb-md-0 p-md-0" style="word-break: break-word;">
														{{ str_limit(strip_tags(html_entity_decode($r->rfp_description)), $limit = 50, $end = '...') }}
													</div>
												</div>
											</div>
										</div>
										@endforeach	

										@foreach($latrfp2 as $r)								
										<div class="carousel-item">
											<div class="row">
												<div class="col-md-5 d-flex">
													<div class="bg-white m-3 flex-grow-1">
														@if(!empty($r->company_image))        
															<img src="storage/app/public/profile/{{ $r->company_image }}" alt="" class="img-fluid w-100 mb-3" style="height: 161px;">    
														@else
														    <img src="public/assets/img/jobs-1.jpg" alt="" class="img-fluid w-100 mb-3" style="height: 161px;">
														@endif
														
														<div class="p-3">
															<h6 class="text-primary mb-3">
																{{ $r->rfp_title }}
															</h6>
															<a href="#" class="btn btn-outline-primary mb-4">View Details</a>
														</div>
													</div>
												</div>
												<div class="col-md-7 pl-md-0 d-flex align-items-center">
													<div class="text-white px-3 pt-3 pb-5 mb-5 mb-md-0 p-md-0" style="word-break: break-word;">
														{{ str_limit(strip_tags(html_entity_decode($r->rfp_description)), $limit = 50, $end = '...') }}
													</div>
												</div>
											</div>
										</div>
										@endforeach
										<a class="carousel-control-prev"
											href="#carouselExampleControls" role="button"
											data-slide="prev"> <span aria-hidden="true"><i
												class="fas fa-chevron-left"></i></span> <span class="sr-only">Previous</span>
										</a> <a class="carousel-control-next"
											href="#carouselExampleControls" role="button"
											data-slide="next"> <span aria-hidden="true"><i
												class="fas fa-chevron-right"></i></span> <span
											class="sr-only">Next</span>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="row">
					<div class="col-sm-6 col-lg-12 mb-5">
						<div class="highlighted-jobs">
	              <h4 class="text-dark font-weight-bold mb-3" href="#" role="button" data-toggle="popover" title="Please write to us for placing a prime job opportunity here" style="cursor: pointer;"><span data-toggle="modal" data-target="#prime-job"><strong> Prime Jobs </strong></span></h4>
	              @foreach($latjobs as $j)
	              <div class="mb-3 py-3 prime-jobs">
	                <header class="d-flex flex-column flex-sm-row">
	                  <a href="{{ $j->website }}" target="_blank" onclick="return confirm('This link will take you to an external website');" data-toggle="tooltip" data-placement="top" title="Website">
	                    @foreach($users as $k=>$us)
	                      @if($j->organisation == $us->id)
	                        @if($us->user_image)
	                          <img src="storage/app/public/profile/{{ $us->user_image }}" alt="" class="mr-3" style="width: 78px; height: 69px;">
	                        @else
	                          <img src="public/assets/img/jobs-1.jpg" alt="" class="img-fluid mr-3"> 
	                        @endif
	                      @endif
	                    @endforeach
	                  </a>
	                  <div class="d-flex flex-column">
	                    <a href="{{url('/jobdetails/'.$j->id)}}">
	                      <h6>{{ $j->job_title }}</h6>
	                    </a>
	                    <h6 class="font-weight-bold mb-3">
	                    	@foreach($users as $k=>$us)
		                        @if($j->organisation == $us->id)
		                          <td>{{ $us->name }}</td>
		                        @endif
		                    @endforeach 
	                    </h6>
	                    <div class="d-flex">
	                      @if(!empty($j->experience))  
	                        <span class="location mb-3 mr-3">{{ $j->experience }} year's</span>
	                      @else
	                        <span class="location mb-3 mr-3">1 year</span>
	                      @endif
	                    </div>
	                    <div class="d-flex">
	                      <span class="location mb-3 mr-3">
	                         @foreach($jobscity as $c)
	                          @if($c->city_id == $j->id) 
	                            {{ $c->city }}, 
	                          @endif
	                        @endforeach

	                        @foreach($jobsstate as $s)
	                          @if($s->state_id == $j->id) 
	                            {{ $s->name }},
	                          @endif
	                        @endforeach

	                        @foreach($jobscountry as $k)
	                          @if($k->job_id == $j->id) 
	                            {{ $k->name }}
	                          @endif
	                        @endforeach 
	                      </span>
	                    </div>
	                    <span class="text-dark pb-3">
	                      <span class="d-block">
	                        Last date to apply : 
	                        <strong>
	                          {{ Carbon\Carbon::parse($j->closing_date)->format('d-M-Y') }}
	                        </strong>
	                      </span>                                    
	                    </span>
	                    <span class="prime-social">
	                      <a href="{{ $j->facebook_id }}" target="_blank" onclick="return confirm('This link will take you to an external website');" data-toggle="tooltip" data-placement="top" title="Facebook">
	                        <i class="fab fa-facebook-square"></i>
	                      </a>
	                      <a href="{{ $j->twitter_id }}" target="_blank" onclick="return confirm('This link will take you to an external website');" data-toggle="tooltip" data-placement="top" title="Twitter">
	                        <i class="fab fa-twitter-square"></i>
	                      </a>
	                      <a href="{{ $j->linkedin_id }}" target="_blank" onclick="return confirm('This link will take you to an external website');" data-toggle="tooltip" data-placement="top" title="Linkedin">
	                        <i class="fab fa-linkedin"></i>
	                      </a>
	                    </span>

	                    @if (Auth::check())

	                      @php
	                        $userId = Auth::user()->id;
	                      @endphp

	                      @foreach($savedjob as $s) 
	                        @if($s->job_id == $j->id && $s->user_id == $userId) 
	                          <span class="text-success"><i class="fa fa-check"></i> Applied</span>
	                        @endif
	                      @endforeach 
	                    @endif

	                  </div>                              
	                </header>
	              </div>
	              @endforeach
	            </div>
					</div>
					<div class="col-sm-6 col-lg-12 mb-5">
					    <center><a data-toggle="modal" data-target="#myAdvertise"><button class="btn btn-primary mb-5" style="cursor: pointer;">Advertise with Us. Click here!</button></a></center>
						@foreach($advertisement as $a)
							<div class="position-relative mb-5">
								@if(!empty($a->image))        
									<img src="storage/app/public/advertisement/{{ $a->image }}" alt="" class="img-fluid w-100" style="height: 260px; display: block !important;">    
								@else
								    <img src="public/assets/img/jobPost.jpg" alt="" class="img-fluid w-100" style="height: 260px;"> 
								@endif
								
								<div class="position-absolute d-flex align-items-start justify-content-center flex-column h-100 jobPost p-3">
									<h5 class="text-dark font-weight-bold mb-4">{{ $a->title }}</h5>
									<!--<a href="#" class="btn btn-outline-primary mb-4">Post job</a>-->
								</div>
							</div>
						@endforeach	
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Sidebar And Featured Content Ends Here --> <!-- Impact Of CSR Starts Here -->
	<div class="container pb-5">
		<div class="row">
			<div class="col-xl-8 offset-xl-2 text-center ">
				<h3 class="text-dark mb-5">Impact Of CSR</h3>
				<div class="row mb-5">
					<div
						class="col-sm-6 col-md-3 d-flex flex-column align-items-center mb-3">
						<img src="public/assets/img/csr-impact-1.png" alt=""
							class="img-fluid mb-3">
						<h3 class="text-dark text-center">1500+</h3>
						<h6>CSR Members</h6>
					</div>
					<div
						class="col-sm-6 col-md-3 d-flex flex-column align-items-center mb-3">
						<img src="public/assets/img/csr-impact-2.png" alt=""
							class="img-fluid mb-3">
						<h3 class="text-dark text-center">350+</h3>
						<h6>CSR Events</h6>
					</div>
					<div
						class="col-sm-6 col-md-3 d-flex flex-column align-items-center mb-3">
						<img src="public/assets/img/csr-impact-3.png" alt=""
							class="img-fluid mb-3">
						<h3 class="text-dark text-center">3500+</h3>
						<h6>Jobs Available</h6>
					</div>
					<div
						class="col-sm-6 col-md-3 d-flex flex-column align-items-center mb-3">
						<img src="public/assets/img/csr-impact-4.png" alt=""
							class="img-fluid mb-3">
						<h3 class="text-dark text-center">300+</h3>
						<h6>Awards Won</h6>
					</div>
				</div>
				<a href="#" class="btn btn-primary">Join Us</a>
			</div>
		</div>
	</div>
	<!-- Impact Of CSR Ends Here --> 
</main>

<div class="modal" id="prime-job">
      <div class="modal-dialog">
          <div class="modal-content">
        
            <div class="modal-header">
                <h4 class="modal-title">Reach out to us</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <div class="contact-enquiry">
                <div class="contact-image">
                    <!--<img src="https://unilinkindia.co.in/csrability.co/public/assets/img/rocket_contact.png" alt="rocket_contact"/>-->
                    <img src="https://csrability.com/public/assets/img/logo-big.png" style="width: 101px; height: 73px;border-radius: 0;margin-top: -6%;transform: inherit;background-color: #fff;" alt="" class="img-fluid">
                </div>
                <form action="{{ route('contactseeker') }}" method="post" enctype="multipart/form-data">
                @csrf()
                    <h3>For Prime Jobs Placement</h3>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" name="name" class="form-control" placeholder="Your Name" value="" />
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" class="form-control" placeholder="Your Email *" value="" required="" />
                            </div>
                            <div class="form-group">
                              <select name="organisation" class="form-control" id="getFname" onchange="admSelectCheck(this);">
                                <option>--Select Organisation--</option>
                                <option id="admOption" value="0">Others</option>
                                @foreach($organisations as $j)
                                  <option value="{{ $j }}">{{ $j }}</option>
                                @endforeach
                              </select>
                            </div>
                            <div class="form-group" id="admDivCheck"></div>
                            <div class="form-group">
                                <input type="text" name="subject" class="form-control" value="Prime jobs placement" required="" />
                            </div>
                            <input type="hidden" name="mail_for" class="form-control" value="1"/>
                            <div class="form-group">
                                <textarea name="message" class="form-control" placeholder="Your Message" style="width: 100%; height: 150px;"></textarea>
                            </div>
                            <div class="form-group" style="margin-top: 15px;">
                                <div class="g-recaptcha" data-sitekey="{{env('CAPTCHA_KEY')}}"></div>
                                @if($errors->has('g-recaptcha-response'))
                                <span class="invalid-feedback" style="display: block;">
                                	<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group text-center">
                                <input type="submit" name="btnSubmit" class="btnContact" value="Send Message" />
                            </div>
                        </div>
                    </div>
                </form>
              </div>
          
          </div>
      </div>
  </div>
<!-- Content Area Ends Here -->

<script>
    function admSelectCheck(nameSelect){
        if(nameSelect){
            admOptionValue = document.getElementById("admOption").value;
            if(nameSelect.value == admOptionValue){
              document.getElementById("admDivCheck").textContent= "";
                document.getElementById("admDivCheck").insertAdjacentHTML("afterbegin","<input type='text' name='organisation' class='form-control' placeholder='Organisation Name' />")
            }
            else{
                document.getElementById("admDivCheck").textContent= "";
            }
        }
        else{
            document.getElementById("admDivCheck").textContent= "";
        }
    }
</script>

@endsection