@extends('layouts.app')

@section('title', $windowTitle)

@section('content')

<section class="section" style="min-height:80vh">
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<nav class="level block">
				<div class="level-left" style="max-width:80%;">
					<div class="level-item">
						<figure class="image mx-auto">
							@if(file_exists(url('storage' . $journal->logo_img)))
							<img src="{{ asset('storage' . $journal->logo_img) }}" alt="Logo de la revue" style="height:64px;">
							@else
							<img src="https://numerev.com/images/logo_menu.png" alt="Logo numerev" style="height:64px;">
							@endif
						</figure>
					</div>
					<div class="level-item" style="display:inline-flex;flex-direction:column;align-items:flex-start;max-width:80%;">
						<h1 class="title is-3" id="journal_title">
							{{ $journal->title }}
						</h1>
					</div>
				</div>
			</nav>			
		</div>
	</div>

	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<h1 class="title is-3 mt-4">{{ $pageTitle }}</h1>
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<article class="message is-info">
			  <div class="message-body">
			  	{!! __('copy.invitation_form_message', ['role_manage_url'=>$role_manage_url, 'role_definition_modal'=>$role_definition_modal]) !!}
			  </div>
			</article>
			<div class="block">
				<form action="{{ $url }}" id="invitation_create_form" method="POST" novalidate>
					@csrf
					<div class="columns">
						<div class="column">
							<div class="field">
								<label for="firstname" class="label is-required">
									{{ __('labels.firstname') }}
									@error('firstname')
									@include('includes.shared.context_error', ['message' => $errors->first('firstname')])
									@enderror									
								</label>
								<div class="control">
									<input type="text" class="input" name="firstname" id="firstname" required>
								</div>								
							</div>
						</div>
						<div class="column">
							<div class="field">
								<label for="lastname" class="label is-required">
									{{__('labels.lastname')}}
									@error('lastname')
									@include('includes.shared.context_error', ['message' => $errors->first('lastname')])
									@enderror									
								</label>
								<div class="control">
									<input type="text" class="input" name="lastname" id="lastname" required>
								</div>									
							</div>
						</div>
						<div class="column is-two-fifths">
							<div class="field">
								<label for="email" class="label is-required">
									{{__('labels.email')}}
									@error('email')
									@include('includes.shared.context_error', ['message' => $errors->first('email')])
									@enderror									
								</label>
								<div class="control">
									<input type="email" class="input" name="email" id="email" placeholder="prenom.nom@institution.org" required>
								</div>									
							</div>
						</div>						
					</div>
					<div class="columns">
						<div class="column is-one-third">
							<div class="field">
								<label for="role_id" class="label is-required">
									{{__('labels.headers.role')}}
									@error('role')
									@include('includes.shared.context_error', ['message' => $errors->first('role')])
									@enderror									
								</label>
								<div class="control">
									<div class="select is-fullwidth">
										<select name="role_id" id="role_id">
											@if($roles && count($roles) > 0)
												@foreach($roles as $role)
													<option value="{{ $role->id }}">{{ Str::ucfirst(__('labels.roles.'.$role->name)) }}</option>
												@endforeach
											@endif
										</select>
									</div>
								</div>								
							</div>
						</div>
						<div class="column">
							<div class="field">
								<label for="issue_id" class="label is-required">
									{{__('labels.issue')}}
									@error('issue')
									@include('includes.shared.context_error', ['message' => $errors->first('issue')])
									@enderror									
								</label>
								<div class="control">
									<div class="select is-fullwidth">
										<select name="issue_id" id="issue_id">
											@if($issues && count($issues) > 0)
												<option value="0">{{ __('labels.all_issues') }}</option>
												@foreach($issues as $issue)
													<option title="{{$issue->pattern_title}}" value="{{ $issue->id }}">{{ Str::limit($issue->pattern_title,75, '...') }}</option>
												@endforeach
											@endif
										</select>
									</div>
								</div>								
							</div>								
						</div>												
					</div>
					<div class="columns">
						<div class="column">
							<div class="field">
								<label for="invitation_message" class="label">
									{{ __('labels.invitation_message') }}
									@error('invitation_message')
									@include('includes.shared.context_error', ['message' => $errors->first('invitation_message')])
									@enderror
								</label>
								<div class="control">
									<textarea name="invitation_message" id="invitation_message" cols="100" rows="5" class="textarea"></textarea>
								</div>
							</div>						
						</div>						
					</div>
					<div class="field">
						<div class="control">
							<button id="submit_invitation_button" class="button is-primary is-outlined" type="submit">
								<span class="icon"><i class="fas fa-folder-plus"></i></span>
								<span>{{__('actions.crud.create_invitation')}}</span>
							</button>
						</div>
					</div>					
				</form>
			</div>
		</div>
	</div>
	<div id="table-block" class="is-hidden">
		<div class="columns is-centered">
			<div class="column is-three-quarters-widescreen">
				<div class="block">
					<table class="table is-bordered" id="invitations_table">
						<thead>
						    <tr>
						      <th data-label="lastname">{{__('labels.lastname')}}</th>
						      <th data-label="email">{{__('labels.email')}}</th>
						      <th data-label="role">{{__('labels.headers.role')}}</th>
						      <th data-label="issue">{{__('labels.issue')}}</th>
						      <th data-label="invitation_message">{{__('labels.invitation_message')}}</th>
						    </tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>				
			</div>
		</div>
		<div class="columns is-centered">
			<div class="column is-three-quarters-widescreen">
				<div class="field is-grouped">
					<div class="control">
						<button id="submit_invitation_table" class="button is-primary">
							<span>{{__('actions.crud.send_invitations')}}</span>
						</button>
					</div>
					<div class="control">
						<a id="email_preview" class="button is-text has-text-primary" href="{{route('invitations.email_preview')}}" target="_blank">{{ __('emails.titles.invitation_email') }}</a>			
					</div>					
				</div>				
			</div>		
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<h1 class="title is-3 mt-4">{{ $pageTitle2 }}</h1>
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<article class="message is-info">
			  <div class="message-body">
			  	{!! __('copy.invitation_csv_form_message', ['role_manage_url'=>$role_manage_url, 'csv_role_definition_modal'=>$csv_role_definition_modal]) !!}
			  </div>
			</article>
		</div>
	</div>

	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<div class="block">
				<form action="{{ $csv_url }}" id="csv_invitation_create_form" method="POST" enctype="multipart/form-data" novalidate>
					@csrf
					<div class="columns">
						<div class="column is-half">
							<div class="field">
								<label for="file_title" class="label is-required">
									{{ __('labels.csv_file') }}
								</label>
								<div class="file has-name">
									<label for="csv_file" class="file-label">
										@error('csv_file')
											@include('includes.shared.context_error', ['message' => $errors->first('csv_file')])
										@enderror
										<input class="file-input" type="file" name="csv_file" id="csv_file" accept="text/csv" required>
									    <span class="file-cta">
									    	<span class="file-icon">
									    		<i class="fas fa-upload"></i>
									    	</span>
									    	<span class="file-label">
									    		{{__('labels.pick_file')}}
									    	</span>
									    </span>
									    <span class="file-name">{{ __('labels.no_file_picked') }}</span>
									</label>							
								</div>						
							</div>
						</div>						
					</div>
					<div class="columns">
						<div class="column">
							<div class="field">
								<label for="csv_invitation_message" class="label">
									{{ __('labels.csv_invitation_message') }}
									@error('csv_invitation_message')
										@include('includes.shared.context_error', ['message' => $errors->first('csv_invitation_message')])
									@enderror
								</label>
								<div class="control">
									<textarea name="csv_invitation_message" id="csv_invitation_message" cols="100" rows="5" class="textarea"></textarea>
									<span class="icon-text">
									  <span class="icon">
									    <i class="fas fa-info-circle"></i>
									  </span>
									  <span>{{__('messages.csv_invitation')}}</span>
									</span>									
								</div>
							</div>						
						</div>						
					</div>
					<div class="field is-grouped">
						<div class="control">
							<button id="submit_csv_invitation_button" class="button is-primary" type="submit">
								<span>{{__('actions.crud.send_invitations')}}</span>
							</button>
						</div>
						<div class="control">
							<a id="csv_email_preview" class="button is-text has-text-primary" href="{{route('invitations.email_preview')}}" target="_blank">{{ __('emails.titles.invitation_email') }}</a>			
						</div>						
					</div>					
				</form>
			</div>			
		</div>
	</div>

	<div id="modal_container"></div>
	<div class="modal" id="modal-show-invitation_message">
	    <div class="modal-closer modal-background"></div>
	    <div class="modal-content block">
	        <div class="box">
	            <button class="modal-closer delete block is-pulled-right" aria-label="close"></button>
	            <span id='invitation_message_span'></span>
	        </div>
	    </div>
	</div>

</section>

<script src="{{ url('/js/modules/invitationCreateForm.js') }}"></script>
@endsection