@extends('layouts.app')
@include('layouts.header')
@include('layouts.media_edit')
@section('content')
<main class="media_manager  template_2col">
	<div class="side_menu">
		<header>
			<h1><i class="fas fa-images"></i> Gestion des médias</h1>
			<select id="sujet_selector" >
				@foreach ($sujets as $sujet)
					<option value="{{$sujet->codeSujet}}" >{{$sujet->libelle}}</option>
				@endforeach
			</select>
			<input type="hidden" id="sujetParameter" value="{{ $currentSujet }}">
			<input type="hidden" id="folderParameter" value="{{ $currentFolder }}">
			<input type="hidden" id="filterParameter" value='{!! $currentFilters !!}'>
			<div class="close_side_menu"><i class="fas fa-chevron-left"></i></div>
		</header>
		<div class="folder_container">
			<div style="display:none;" class="loader">
				<i  class="fal fa-circle-notch fa-spin"></i>
			</div>
			<div class="folder_menu" data-id="">
				<ul class="menu-options">
					<li class="menu-option propertyItem">Propriétés</li>
					@if (Auth::user()->hasRole([config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]))
					<li class="menu-option renameItem">Renommer</li>
					<li class="menu-option removeItem">Supprimer</li>
					<li class="menu-option addItem">Ajouter un dossier</li>
					@endif
				</ul>
			</div>
			<a href="#"  ondragstart="return false;" class="root_folder"  data-id="0">/racine <span class="count"></span></a>
			<div class="dd">
				<ol class="dd-list dd3-list root">
				</ol>
			</div>
		</div>
	</div>
	<div class="main_content">
			<header>
				<div class="search_wrapper">
					<div class="search_filters group">
						<input class="search_value" type="text"  value="" placeholder="rechercher un média...">
						<a href="#" class="btn  btn-square btn-black search_btn">Rechercher</a>
						<div class="filter_selector filter" data-lib-type="Type de média : " data-type="typemedia_id">
							<div class="filter_btn">Type de média <i class="fas fa-caret-down"></i></div>
							<div class="list" style="display:none;">
								<ul>
									@foreach ($typemedias as $typemedia)
										<li><input id="typeM_{{$typemedia->codeTypemedia}}" type="checkbox"  value="{{$typemedia->codeTypemedia}}" name=""><label for="typeM_{{$typemedia->codeTypemedia}}">{{$typemedia->libelle}}</label></li>
									@endforeach
								</ul>
							</div>
						</div>
						<div class="filter_selector filter" data-lib-type="Type de vue : " data-type="typevue_id">
							<div class="filter_btn">Type de vue <i class="fas fa-caret-down"></i></div>
							<div class="list list_typevue" style="display:none;">
								<ul></ul>
							</div>
						</div>
						<div class="filter_selector filter" data-lib-type="Etiquette : " data-type="etiquette_id">
							<div class="filter_btn">Etiquette <i class="fas fa-caret-down"></i></div>
							<div class="list list_etiquette" style="display:none;">
								<ul>
									@foreach ($etiquettes as $etiquette)
										<li><input id="etiq_{{$etiquette->etiquette_id}}" type="checkbox"  value="{{$etiquette->etiquette_id}}" name=""><label for="etiq_{{$etiquette->etiquette_id}}" style="background-color:{{$etiquette->color}}; border-color:{{$etiquette->color}}" >{{$etiquette->libelle}}</label></li>
									@endforeach
								</ul>
							</div>
						</div>
						<div class="filter" data-lib-type="" data-type="arcadia_id">
							<input type="checkbox" id="arcadia" name="arcadia" value="1">
  							<label for="arcadia">Lié au référentiel</label>
						</div>
					</div>
					<div class="filter_wrapper">
						<span>Filtres :</span>
						<div class="search_filters_list">
						</div>
						<a class="reinit_search_btn" href="#">Réinitialiser</a>
					</div>
				</div>
				<div class="action_wrapper group">
					@if (Auth::user()->hasRole([config('roles.const.CONTRIBUTEUR'), config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]))
					<a href="#" class="action_add_media"><i class="fas fa-file-upload"></i> Ajouter un média</a>
					@endif
					@if (Auth::user()->hasRole([config('roles.const.CONTRIBUTEUR'), config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]))
					<a href="#" class="action_download_media"><i class="fas fa-file-download"></i> Télécharger</a>
					@endif
					<a href="#" class="action_add_basket"><i class="fas fa-shopping-basket"></i> Ajouter au panier</a>
					@if (Auth::user()->hasRole([config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]))
					<a href="#" class="action_delete_media"><i class="fas fa-trash-alt"></i> Supprimer</a>
					@endif
					@if (Auth::user()->hasRole([config('roles.const.CONTRIBUTEUR'), config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]))
					<a href="#" class="action_tag_media"><i class="fas fa-tags"></i> Etiquette</a>
					@endif

					<div class="display">
						<i class="fas fa-th selected"></i>
						<i class="fal fa-list"></i>
					</div>
					<div class="order">
						<span>Trier par : </span>
						<select id="order_select" >
								<option value="created_at" data-order="asc" >Date de création &#9650;</option>
								<option value="created_at" data-order="desc" >Date de création &#9660;</option>
								<option value="updated_at" data-order="asc" >Date de modification &#9650;</option>
								<option value="updated_at" data-order="desc" >Date de modification &#9660;</option>
								<option value="libelle" data-order="asc" >Libellé &#9650;</option>
								<option value="libelle" data-order="desc" >Libellé &#9660;</option>
								<option value="version" data-order="asc" >Version &#9650;</option>
								<option value="version" data-order="desc" >Version &#9660;</option>
						</select>
					</div>
				</div>
			</header>
			<div style="display:none;" class="scrollLoader"><div class="animated slideInUp"><i  class="fal fa-circle-notch fa-spin"></i> Chargements des médias</div></div>
			<div class="media_container">
				<div style="display:none;" class="loader"><i  class="fal fa-circle-notch fa-spin"></i></div>
				<div class="wrapper"></div>
			</div>
		</div>
		<div class="side_menu panier_side_menu collapse">
			<header>
				<div class="close_side_menu"><i class="fas fa-shopping-cart"></i></div>
				<select id="panier_selector" >
					@foreach ($paniers as $panier)
						<option value="{{$panier->id}}" >{{$panier->libelle}}</option>
					@endforeach
				</select>
				<a id="menu_panier" href="#" class="btn btn-square"><i class="far fa-bars"></i></a>
				<div class="panier_menu">
					<ul class="menu-options">
						<!--
						<li class="menu-option goto_panier" data-url="{{ route('paniers') }}">Aller au panier</li>
						-->
						<li class="menu-option add_panier" >Nouveau panier</li>
						<li class="menu-option info_panier" >Propiétés du panier</li>
						<li class="menu-option remove_panier" >Supprimer ce panier</li>

					</ul>
				</div>
			</header>
			<div class="panier_content">

			</div>
		</div>
</main>

<div id="form_folder_property" style="display: none;">
	<h3>Propriétés du dossier</h3>
	<hr/>
	<p><input required type="text" class="form_folder_libelle" value=""  maxlength="100" minlength="4"   placeholder="Libellé du dossier" /></p>
	<p><textarea class="form_folder_description" placeholder="Description du dossier"></textarea></p>
	<p>Créé le : <span class="form_folder_datecreate"></span></p>
	<hr/>
	<p class="button_bar">
		<a href="#" class="btn form_folder_save btn-square"><i class="fal fa-spinner-third fa-spin"></i><i class="fas fa-share"></i> Enregistrer</a><a href="#" class="btn close_popup btn-black btn-square">Fermer</a>
	</p>
</div>

<div id="form_basket_property" style="display: none;" data-id="" >
	<h3>Propriétés du panier</h3>
	<hr/>
	<p><input required type="text" class="form_basket_libelle" value=""  maxlength="100" minlength="4"   placeholder="Libellé du panier" /></p>
	<p><textarea class="form_basket_description" placeholder="Description du panier"></textarea></p>
	<p>Lien direct vers le panier : </p>
	<p><input required type="text" class="form_basket_link" value=""  readonly /></p>
	<p>Ce lien est public. Toute personne disposant de ce lien pourra accéder au panier.</p>
	<p>Statut :</p>
	<p><select class="form_basket_statut" name="">
			<option value="0">Désactivé</option>
			<option value="1">Activé</option>
		</select>
	</p>
	<p>Créé le : <span class="form_basket_datecreate"></span></p>
	<hr/>
	<p class="button_bar">
		<a href="#" class="btn form_basket_save btn-square"><i class="fal fa-spinner-third fa-spin"></i><i class="fas fa-share"></i> Enregistrer</a><a href="#" class="btn close_popup btn-black btn-square">Fermer</a>
	</p>
</div>

<div id="form_etiquette" style="display: none;" data-id="" >
	<h3>Appliquez une étiquette</h3>
	<hr/>
	<ul>
		@foreach ($etiquettes as $etiquette)
			<li><a class="etiquette" data-id="{{$etiquette->etiquette_id}}" href="#" style="background-color:{{$etiquette->color}}; border-color:{{$etiquette->color}}" >{{$etiquette->libelle}}</a></li>
		@endforeach
	</ul>
</div>

<div id="form_select_add_media" style="display: none;"  >
	<h3>Ajouter des médias</h3>
	<hr/>
	<div class="content">
		<a class="add_media_by_upload" href="#"><i class="fas fa-file-upload"></i> Téléversez des éléments</a>
		<a class="add_media_without_file" href="#"><i class="fas fa-file"></i> Ajouter un élément sans média</a>
	</div>
	<hr/>
	<p class="button_bar">
		<a href="#" class="btn close_popup btn-black btn-square">Fermer</a>
	</p>
</div>

<div id="form_download" style="display: none;" data-id="" >
	<h3>Téléchargez</h3>
	<hr/>
	<p>Sélectionnez l'un des formats ci-dessous pour télécharger votre sélection.</p>
	<form id="the_form_download" target="_blank" action="{{ route('downloadMedia') }}" method="post">
		{{csrf_field()}}
		<select class="download_format" name="format"></select>
		<input class="medias" type="hidden" name="medias" value="">
		<button type="submit"  class="btn btn_form_download  ml-10"><i class="fas fa-arrow-circle-down"></i> Télécharger</button>
	</form>
</div>

<div class="upload_container">
    <span class="fileinput-button">
        <i class="fas fa-plus-circle"></i><span>  Ajouter vos médias</span>
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
	<div class="content_wrapper">
		<!-- The container for the uploaded errors -->
		<div id="upload_errors"></div>
		<!-- The container for the uploaded files -->
		<div id="files" class="files"></div>
	</div>
	<div class="upload_bar">
		<a id="submit" class="btn" href="#">Transférer</a>
		<a id="close_upload_form" class="" href="#">Fermer</a>
		<!-- The global progress bar -->
		<div id="progress" class="progress">
			<div class="progress-bar progress-bar-success"></div>
		</div>
	</div>

    <br>
</div>
@endsection
@section('scripts')
	<script src="{{ asset('js/jquery.nestable.min.js') }}" defer></script>
	<script src="{{ asset('js/uploadfile/vendor/jquery.ui.widget.js') }}"></script>
	<script src="{{ asset('js/uploadfile/jquery.iframe-transport.js') }}"></script>
	<script src="{{ asset('js/uploadfile/jquery.fileupload.js') }}"></script>
	<script src="{{ asset('js/fabric.js') }}"></script>
	<script src="{{ asset('js/darkroom.js') }}"></script>
	<script src="{{ asset('js/openseadragon.min.js') }}"></script>
	<script src="{{ asset('js/jquery.caret.min.js') }}"></script>
	<script src="{{ asset('js/jquery.tag-editor.min.js') }}"></script>
@endsection