@extends('layouts.app')
@section('content')

	<div class="row">
        <div class="col-sm-12 mb-4 mb-xl-0">
          	<h3>Job Applications!</h3>
          	<h6 class="font-weight-normal mb-0 text-muted">Please check your inbox and do what need to do.</h6>
        </div>
    </div>

    <div class="page-header-tab mt-xl-4">
	    <div class="col-12 pl-0 pr-0">
	      	<div class="row ">
	        	<div class="col-12 col-sm-12 mb-xs-4  pt-2 pb-2 mb-xl-0  d-flex justify-content-center align-items-center">
	          		<ul class="nav nav-tabs tab-transparent" role="tablist">
	            		<li class="nav-item">
	              			<a class="nav-link active" id="overview-tab" data-toggle="tab" href="#" role="tab" aria-controls="overview" aria-selected="false">Inbox</a>
	            		</li>
	            		<li class="nav-item">
	              			<a class="nav-link" id="users-tab" data-toggle="tab" href="#" role="tab" aria-controls="users" aria-selected="false">Applicants</a>
	            		</li>
	            		<li class="nav-item">
	              			<a class="nav-link" id="returns-tab" data-toggle="tab" href="#" role="tab" aria-controls="returns" aria-selected="false">Recuriting</a>
	            		</li>
	          		</ul>
	        	</div>
	        </div>
	    </div>
	</div>

	<div class="email-wrapper wrapper">
        <div class="row align-items-stretch">
          	<div class="mail-list-container col-md-3 pt-4 pb-4 border-right bg-white">
				@foreach ($applications as $application)
	            	<div class="mail-list">
	                  	<!--<div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> <i class="input-helper"></i></label></div>-->
	                  	<div class="content">
							<a href="javascript:;" class="btn-application text-dark" data-id="{{$application->id}}">
		                    	<p class="sender-name">{{$application->name}}</p>
		                    	<p class="message_text">{{$application->title}}</p>
							</a>
	                  	</div>
	                  	<!--<div class="details">
	                    	<i class="mdi mdi-star-outline"></i>
	                  	</div>-->
	                </div>
	 			@endforeach
          	</div>

			<div class="mail-view hidden d-md-block col-md-9 col-lg-9 bg-white">
				<div class="message-body"></div>
				<div class="dot-opacity-loader hide">
					<span></span>
					<span></span>
					<span></span>
				</div>
        	</div>
    	</div>
    </div>


@stop

@section('footer-script')
	<!--Data will be inserted in its according place, replacing the brackets.-->
	<script id="message-template" type="text/x-handlebars-template">
		<form name="application-form" id="form" action="applications/@{{{id}}}" method="POST" >
			<div class="sender-details">
				<img src="{{asset('images/user-thumbnail.png')}}" alt="profile" class="img-sm rounded-circle mr-3"/>
				<div class="details">
					<p class="msg-subject">
						@{{{title}}} (@{{{applied_at}}})
					</p>
					<p class="sender-email">
						@{{{name}}}
						<a href="#">@{{{email}}}</a>
						&nbsp;<i class="mdi mdi-account-multiple-plus"></i>
					</p>
				</div>
			</div>
			<div class="message-content">
				@{{{description}}}
			</div>
			@{{#if assets}}
				<div class="attachments-sections">
					<ul>
						@{{#each assets}}
							<li>
								<div class="thumb"><i class="mdi mdi-file-image"></i></div>
								<div class="details">
									<p class="file-name">@{{{name}}}</p>
									<div class="buttons">
										<p class="file-size">@{{{size}}}</p>
										<a href="#" class="view">View</a>
										<a href="#" class="download">Download</a>
									</div>
								</div>
							</li>
						@{{/each}}
					</ul>
				</div>
			@{{/if}}

			<div class="mt-4 mb-4 border-top">
				<button type="submit" class="btn btn-info btn-icon-text mt-4 btn-save" data-value="1"><i class="mdi mdi-plus btn-icon-prepend"></i>Accept</button>
				<button type="submit" class="btn btn-danger btn-icon-text mt-4 btn-save" data-value="0"><i class="mdi mdi-minus btn-icon-prepend"></i> Decline</button>

			</div>
		</form>
	</script>

    <script type="text/javascript">
		@php $application = $applications->first();@endphp
		var message = {!! ((isset($application) && !empty($application)) ? $application->toJson() : collect()) !!};

		//Get the Template from above
		var source = document.getElementById("message-template").textContent;

		//Compile the actual Template file
		var template = Handlebars.compile(source);

		//Generate some HTML code from the compiled Template
		@if(isset($application))
			var html = template(message);
			$(".message-body").html(html);
		@endif

		$(".btn-save").on("click", function(event) {
			event.preventDefault();

			let form = $(this).parents('form');

			PDRequest({
				type    : "PUT",
				url     : form.prop("action"),
				data    : {accept : $(this).data('value')},
				event   : event
			}).then(function(success) {
				//rest of work will be here
			});
		});

		$(".btn-application").on("click", function(){

			let id = $(this).data('id');
			$(".dot-opacity-loader").show();
			PDRequest({
	            type    : "GET",
	            url     : "/applications/"+id,
	            isFlash : false
	        }).then(function(data){
				html = template(data);
				$(".message-body").html(html);
				$(".dot-opacity-loader").hide();
	        });


		});
    </script>
@stop