@extends('layouts.app')

@section('title', $window_title)

@section('content')
<section class="section" style="min-height:80vh;">
	<div class="container" id="committee_page">
		<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>
			@if($can_edit_committee)
			<div class="level-right" id="edit_committee_button_container">
				<div class="level-item">
					<a href="{{ route('committees.edit', ['committee_id' => $committee->id]) }}" class="button is-primary">
						<span class="icon">
							<i class="fas fa-pen"></i>
						</span>
						<span>
							{{ __('actions.crud.edit_committee') }}
						</span>
					</a>
				</div>
			</div>
			@endif
		</nav>
		<article class="message is-info">
			<div class="message-body">
				{{ "Certains membres de vos comités n'apparaissent pas dans la liste proposée ? Vous pouvez leur envoyer une invitation à s'inscrire sur la plateforme." }}
			</div>
		</article>
		<h1 class="title is-3 mt-6">
			{{ __('titles.sections.add_committee_members') }}
		</h1>
		<div class="columns">
			<div class="column">
				<div class="block">
					<form action="{{ route('committees.user.store', ['committee_id' => $committee->id]) }}" id="add_committee_member_form" method="POST" novalidate>
						@csrf
						<div class="columns">
							<div class="column is-one-third">
								<div class="field">
									<label for="fullname" class="label is-required">
										{{ __('labels.fullname') }}
										@contexterror(['field' => 'fullname'])
									</label>
									<div class="control">
										<input type="text" class="input" id="fullname" name="fullname" data-url="{{ route('committees.user.search', ['committee_id' => $committee->id]) }}">
									</div>
								</div>
								<div class="field">
									<div class="control">
										<input type="hidden" class="input" id="user_id" name="user_id" value="">
									</div>
								</div>
							</div>
							<div class="column">
								<div class="field">
									<label class="label">&nbsp;</label>
									<div class="control">
										<button id="submit_add_member_button" class="button is-primary is-outlined" type="submit">
											{{__('actions.shared.save')}}
										</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<h1 class="title is-3 mt-6">
			{{ __('titles.tables.committee_members', ['committee_title' => $committee->name]) }}
		</h1>
		<div class="box" id="committees_members_table_container">
			@include('publishing.committees.includes.committee_members_table')
		</div>
	</div>
	<div id="modal_container"></div>
	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css">
	<script src="{{ url('/js/autocompletes/userAutocomplete.js') }}"></script>
</section>
@endsection