@extends('layouts.home')

@section('content')
	<link rel="stylesheet" href="css/theme6.css" type="text/css" media="screen" />
	<script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js"></script>
    <!-- Navigation -->
     <nav class="navbar navbar-expand-lg  fixed-top text-uppercase" id="mainNav">
      <div class="container">
         <a class="navbar-brand js-scroll-trigger" href="/learnspanish/">Learn Spanish</a>
        <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="https://www.acaexplorers.com/donate.html">Donate<span class="sr-only">(current)</span></a>
      </li>
      
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Charity Art Store
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-store/original-paintings/">Original Paintings </a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-store/canvas-prints/">Canvas/Framed Prints/Posters</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-products/">Art Laptop Sleeves/Bags/Mugs</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-products/">Collectible Mugs/Bags</a>
            
            
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com">Shop All - Front Page</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.acaexplorers.com/events/">Fundraising Events</a>
      </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Connect With Us!
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#contact">Contact Us!</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.instagram.com/acaexplorers/">Instagram</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.facebook.com/acaexplorers/">Facebook</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.youtube.com/channel/UCSdDG_FXqYnTF93M5SVq1ew">YouTube</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.acaexplorers.com/blog/">Blog</a>
            
        </div>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="https://www.acaexplorers.com/explorers/">Student Log-In</a>
      </li>
        
    </ul>
        </div>
      </div>
    </nav>
    <!-- Header -->
    <header class="text-white" style="padding-top: 100px; background-color: #106BA2;">
    	<div class="d-flex justify-content-center" style=" align-items: flex-start !important;">
    		<img class="img-fluid" src="{{url('event-images/'.$Event->image)}}" style="max-width: 100%" alt="">
    	</div>
    </header>

    <div class="container text-center" style="padding-top: 50px; padding-bottom: 50px;">
			<div class="row">
				<div class="col-md-8">
					<h2 style="color: black;">
							{{$Event->title}}
						</h2>
						<br>
						<p style="color: darkgray; text-align: left; color: black !important; font-size: 18px;">
										{{$Event->detail}}
							<br>
		
							<div class="event_speakers"> 
						<!-- Event Speaker -->
						<div class="event_speaker d-flex flex-row align-items-center justify-content-start">
							<div>
								<div class="event_speaker_image" style="background-color: #113B84; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
									<i class="fa fa-microphone" aria-hidden="true" style="line-height: 36px; font-size: 25px; color: white;"></i>
								</div>
							</div>
							<div class="event_speaker_content" style="padding-right: 10px;">
								<div class="event_speaker_name" style="color: black !important; font-size: 18px">Host</div>
									<div class="event_speaker_title" style="color: black !important; font-size: 18px"><b>{{$Event->host}}</b>
									</div>
								</div>
								<div>
									<div class="event_speaker_image" style="background-color: #113B84; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
										<i class="fa fa-trophy" aria-hidden="true" style="line-height: 36px; font-size: 25px; color: white;"></i>
									</div>
								</div>
								<div class="event_speaker_content" style="padding-right: 10px;">
									<div class="event_speaker_name" style="color: black !important; font-size: 18px">Goal</div>
								<div class="event_speaker_title" style="color: black !important; font-size: 18px"><b>{{$Event->goal}}</b></div>
							</div>
						
							<div class="dsk-donate">
								<div class="event_speaker_image" style="background-color: #113B84; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
									<i class="fa fa-money" aria-hidden="true" style="line-height: 36px; font-size: 25px; color: white;"></i>
								</div>
							</div>
							<div class="event_speaker_content dsk-donate" style="padding-right: 10px;">
								<div class="event_speaker_name" style="color: black !important; font-size: 18px">Fundraising Event Goal</div>
									<div class="event_speaker_title" style="color: black !important; font-size: 18px"><b>${{$Event->donation}}</b>
									</div>
							</div>
							
							<!--<div class="button_3 event_button event_button_2 dsk-donate" style="height: auto !important;">
									<a class="donate" href="javascript:void(0)">Donate Now</a>
								</div>	-->
								
								
							</div>	    
									
						</div>
						<div id="mb-donate" class="d-none event_speaker mt-3 mb-0 flex-row align-items-center justify-content-start">
							<div>
									<div class="event_speaker_image" style="background-color: #113B84; text-align: center; "><img src="images/event_speaker_1.jpg" alt="">
										<i class="fa fa-money" aria-hidden="true" style="line-height: 36px; font-size: 25px; color: white;"></i>
									</div>
								</div>
								<div class="event_speaker_content" style="padding-right: 10px;">
									<div class="event_speaker_name" style="color: black !important; font-size: 18px">Fundraising Event Goal</div>
										<div class="event_speaker_title" style="color: black !important; font-size: 18px"><b>${{$Event->donation}}</b>
										</div>
								</div>
								
								<!--<div class="button_3 event_button event_button_2" style="height: auto !important;">
										<a class="donate" href="javascript:void(0)">Donate Now</a>
									</div>-->	
						</div>
						<br><br>
						<div id="story" class="d-none mb-3">
							@foreach ($stories as $story)
								<div class="card mb-2">
									<div class="row no-gutters">
											<div class="col-auto">
													<img src="{{url('event-images/'.$story->image)}}" style="max-width: 200px;" alt="">
											</div>
											<!--<div class="col">
													<div class="card-block px-2 text-left ml-2 text-dark p-2">
															<h2 class="card-title mb-0" style="color: #113B84;">${{$story->price}}</h2>
															<p class="card-text" style="color: black !important; font-size: 18px;">{{$story->description}}</p>
															<div class="button_3 event_button event_button_2 ml-0 mb-2 mt-2" style="height: auto !important;">
																<a id="donate" href="{{url('event/'.$Event->id . '/story/' . $story->id . '/static')}}" >Donate</a>
															</div>	
													</div>
											</div>-->
                                        <div class="col-auto">
													<img src="{{url('event-images/abc.png')}}" style="max-width: 200px;" alt="">
											</div>
											<div class="col">
													<div class="card-block px-2 text-left ml-2 text-dark p-2">
															<h2 class="card-title mb-0" style="color: #113B84;">Custom Donation</h2>
															<p class="card-text" style="color: black !important; font-size: 18px;">
                                                                {{$Event->detail}} Your Gift Can Change the World!</p>
															<button type="button" class="button_3 event_button event_button_2 dsk-donate">

																<a href="https://www.acaexplorers.com/donate.html">Custom Donation! - Donación Personalizada!</a>
                                                        </button>	
													</div>
											</div>
                                        
									</div>
								</div>
							@endforeach 
								<!--<div class="card mb-2">
									<div class="row no-gutters">
											<div class="col-auto">
													<img src="{{url('event-images/abc.png')}}" style="max-width: 200px;" alt="">
											</div>
											<div class="col">
													<div class="card-block px-2 text-left ml-2 text-dark p-2">
															<h2 class="card-title mb-0" style="color: #113B84;">Custom Donation</h2>
															<p class="card-text" style="color: black !important; font-size: 18px;">{{$Event->detail}}</p>
															<div class="button_3 event_button event_button_2 ml-0 mb-2 mt-2">
																<a id="donate" href="{{url('event/'.$Event->id . '/story/1/static')}}">Donate</a>
															</div>	
													</div>
											</div>
									</div>
								</div>-->
						</div>
                    
                    
                    
                    
						<div class="event_speaker d-flex flex-row align-items-center justify-content-start mb-3">
								<div style="padding-right: 10px;">
									<div class="event_speaker_image_s" style="background-color: #2F5591; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
										<a href="https://facebook.com/sharer/sharer.php?u={{url('/'.$Event->id)}}" target="_blank" ><i class="fa fa-facebook-square" aria-hidden="true" style="line-height: 27px; font-size: 18px; color: white;"></i></a>
									</div>
								</div>
								<div style="padding-right: 10px;">
									<div class="event_speaker_image_s" style="background-color: #1CA1C8; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
										<a href="https://twitter.com/intent/tweet/?text={{$Event->title}}&amp;url={{url('/'.$Event->id)}}" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true" style="line-height: 27px; font-size: 18px; color: white;"></i></a>
									</div>
								</div>
								<div style="padding-right: 10px;">
									<div class="event_speaker_image_s" style="background-color: #FB0B0C; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
										<a href="https://reddit.com/submit/?url={{url('/'.$Event->id)}}&amp;resubmit=true&amp;title={{$Event->title}}" target="_blank"><i class="fa fa-reddit-square" aria-hidden="true" style="line-height: 27px; font-size: 18px; color: white;"></i></a>
									</div>
								</div>
								<div style="padding-right: 10px;">
									<div class="event_speaker_image_s" style="background-color: #3AA760; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
										<a href="https://web.whatsapp.com/send?text={{url('/'.$Event->id)}}" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true" style="line-height: 27px; font-size: 18px; color: white;"></i></a>
									</div>
								</div>
								<div style="padding-right: 10px;">
									<div class="event_speaker_image_s" style="background-color: #186EAB; text-align: center; "><!--<img src="images/event_speaker_1.jpg" alt="">-->
										<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{url('/'.$Event->id)}}&amp;title={{$Event->title}}&amp;summary={{$Event->summary}}&amp;source={{url('/'.$Event->id)}}" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true" style="line-height: 27px; font-size: 18px; color: white;"></i></a>
									</div>
								</div>
								<div>
									<div class="event_speaker_image_s" style="background-color: #8FC37C; text-align: center; ">
										<a  href="mailto:?subject=Link to join ACA Fundraising Event&amp;body={{url('/'.$Event->id)}}" target="_blank"><i class="fa fa-envelope" aria-hidden="true" style="line-height: 27px; font-size: 18px; color: white;"></i></a>
									</div>
								</div>

							</div>
				<div class="card mb-2">
									<div class="row no-gutters">
											<div class="col-auto">
                                                <a href="https://www.acaexplorers.com/donate.html"><img src="event-images/abc.png" style="max-width: 200px;" alt="Donate"></a>
											</div>
											<div class="col">
													<div class="card-block px-2 text-left ml-2 text-dark p-2">
															<h2 class="card-title mb-0" style="color: #113B84;">Custom Donation! - Donación Personalizada!</h2>
															<p class="card-text" style="color: black !important; font-size: 18px;">
                                                                Your Gift Can Change the World!<br> Tu Regalo Puede Cambiar el Mundo!</p>
															<!--<button type="button" class="button_3 event_button event_button_2 dsk-donate">

																<a href="https://www.acaexplorers.com/donate.html">Donate Now</a>
                                                        </button>-->
                                                        <div class="button_3 event_button event_button_2 ml-0 mb-2 mt-2">
																<a href="https://www.acaexplorers.com/donate.html">Donate - Donar</a>
															</div>	*Secure payments through Stripe
													</div>
											</div>
									</div>
								</div>
                    <br><h4 class="mb-0 text-dark">Prefer to donate by mail?</h4><p class="mb-0 text-dark">Please use our <a href="https://www.acaexplorers.com/DonationForm.pdf" style="color: #0645AD;" target="_blank">printable donation form</a>.<br>To donate by phone, call 630-568-6097.</p><hr>
                    <h4 class="mb-0 text-dark">Questions?</h4><p class="mb-0 text-dark">Contact us at <a title="E-mail support@acaexplorers.com" href="mailto:support@acaexplorers.com" style="color: #0645AD;">support@acaexplorers.com</a> or 630-568-6097.<br></p>
<p>American Colombian Academy is a 501(c)(3) organization and gifts are tax deductible as allowed by law. EIN: 83-2113835</p>

                
                </div>
				<div class="col-md-4">
					@if (count($Event->tickets))
						<h2 class="mb-3 text-dark">Get Tickets</h2>*Secure payments through Stripe
					@endif
					
					@foreach ($Event->tickets as $ticket)
						<div class="card w-100 mb-3" style="border-radius: 10px;">
							<div class="card-body text-left text-light" style="background: linear-gradient(to right top, #9e17a7fa, #062bb4e6); border-radius: 10px;">
								<h3 class="card-title mb-0">{{$ticket->title}}</h3>
								<p class="card-text text-light"><b>{{$ticket->description}}</b></p>
								<div class="button_3 event_button event_button_2 ml-0 bg-white mt-2">
									<a href="{{url('payment/'. $ticket->id .'/stripe')}}"  style="color: #9e17a7fa">Pay Now (${{$ticket->price}})</a>
								</div>
							</div>
						</div>
					@endforeach
				</div>
			</div>
		</div>
            </div> 
        </p>
		 </div> 
@if(Session::has('success'))
	<!-- modal area start-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
							</button>
							<div class="modal_body">
									<div class="container">
											<div class="row">   
													<div class="col-lg-12 col-md-12 col-sm-12">
															<h3 class="text-center mb-3 text-dark pt-2" >Thanks for your purchase</h3>
															<h5 class="mb-3">{{Session::get('thanks')}}</h5>
															<div class="d-flex mb-3">
																	<h4 class="mb-0 text-dark">Event: </h4>
																	<p class="ml-1" style="margin-top: -2px; font-weight: 600;"> {{$Event->title}}</p>
															</div>
															<div class="d-flex mb-3">
																	<h4 class="mb-0 text-dark">Ticket: </h4>
																	<p class="ml-1" style="margin-top: -2px; font-weight: 600;">{{Session::get('success')}}</p>
															</div>
															<div class="d-flex mb-3" style="font-weight: 600;">
																<span class="ml-1 text-dark" style="margin-top: -2px;">Here is link to live event <a href="{{url('/'.$Event->id.'/live')}}" style="color: #9e17a7fa;">{{url('/'.$Event->id.'/live')}}</a><span>
															</div>
															@if (Session::has('link'))
																<div class="d-flex mb-3" style="font-weight: 600;">
																	<span class="ml-1 text-dark" style="margin-top: -2px;">Here is link to google meet <a href="{{Session::get('link')}}" style="color: #9e17a7fa;">{{Session::get('link')}}</a><span>
																</div>
															@endif
															<div class="d-flex mb-3 pb-2">
																<div title="Add to Calendar" class="addeventatc" data-styling="none">
																	Add to Calendar
																	<span class="arrow">&nbsp;</span>
																	<span class="start">{{$Event->date}}</span>
																	<span class="end">{{$Event->date}}</span>
																	<span class="title">{{$Event->title}}</span>
																	<span class="description">{{$Event->detail}} Live event link is {{url('/'.$Event->id.'/live')}} and google meet link is {{$Event->link}}</span>
																	<span class="organizer">ACA Explorers</span>
																	<span class="all_day_event">true</span>
																</div>
															</div>
													</div>    
											</div>     
									</div>
							</div>    
					</div>
			</div>
	</div> 
	<!-- modal area start-->         
 @endif  
 @if(Session::has('donate'))
	<!-- modal area start-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
							</button>
							<div class="modal_body">
									<div class="container">
											<div class="row">   
													<div class="col-lg-12 col-md-12 col-sm-12">
														<h3 class="text-center mb-3 text-dark pt-2" >Thanks for your donation</h3>
														<h5 class="mb-3 pb-2">{{Session::get('donate')}}</h5>
													</div>    
											</div>     
									</div>
							</div>    
					</div>
			</div>
	</div> 
	<!-- modal area start-->         
 @endif 
<script>
	$('.donate').click(function () {
		var story = $('#story');
		if(story.hasClass('d-none')){
			$('#story').removeClass('d-none');
		}
		else{
			$('#story').addClass('d-none');
		}
		
	});

	$(window).on('load',function(){
			$('#myModal').modal('show');
	});

	

	if ($(window).width() < 514) {
		$('.dsk-donate').addClass('d-none');
		$('#mb-donate').removeClass('d-none');
		$('#mb-donate').addClass('d-flex');
	}

</script>
@endsection