@extends('root.layouts.master')
@section('content')

<div class="col-lg-12">
	<nav class="breadcrumb_widgets" aria-label="breadcrumb mb30">
		<h4 class="title float-left">Nouveau cours de la formation <strong>{{$formation->LibelleFormation}}</h4>
		<ol class="breadcrumb float-right">
	    	<li class="breadcrumb-item"><a href="{{url('home')}}">Tableau de bord</a></li>
	    	<li class="breadcrumb-item active" aria-current="page">Nouveau cours</li>
		</ol>
	</nav>
</div>
<div class="col-lg-12">
	<div class="my_course_content_container">
		<div class="my_setting_content mb30">
			<div class="my_setting_content_header">
				<div class="my_sch_title">
					<h4 class="m0">Formulaire d'enrégistrement</h4>
				</div>
			</div>
			<form method="POST" enctype="multipart/form-data" action="{{url('trait_new_cours')}}">
				@csrf
				<div class="row my_setting_content_details pb0">
					<div class="col-xl-12">
						<div class="row">
							<input type="hidden" name="idformateur" value="{{utilisateur()->id}}">
							<input type="hidden" name="idformation" value="{{$formation->id}}">
							<div class="col-xl-6">
								<div class="my_profile_setting_input form-group">
							    	<label for="libelle">Intitulé Cours</label>
							    	<input type="text" class="form-control" id="libelle" name="libelle" placeholder="Intitulé Formation" required>
								</div>
								<div class="my_profile_setting_input form-group">
								    <label>Sise 307 x 160 pixel</label>
								            <label for="photo" style="cursor: pointer; margin-top: 20px">
								                <img class="" src="{{ URL::to('imageformation.jpg') }}" id="coverPreview" style="display: block; width: 307px; height: 150px;">
								                <p class="center-align" style="display: block; text-transform: uppercase; font-size: 0.6em; margin-top: 5px; margin-left: 15px">Cliquez ici</p>
								            </label>

								            <input type="file" accept="image/*" name="photo" id="photo" style="z-index: -9999; position: absolute; display: none;visibility: hidden; opacity: 0; " required>
								</div>
								
							</div>
							<div class="col-xl-6">
								<div class="my_profile_setting_input form-group">
							    	<label for="duree">Durée Cours</label>
							    	<input type="text" class="form-control" id="duree" name="duree" placeholder="Duree Formation" required>
								</div>
								
							</div>
							<div class="col-xl-12">
								<label>Description</label>
								<textarea name="description" id="description"></textarea>

								<script type="text/javascript">
									CKEDITOR.replace('description', {
									    filebrowserUploadUrl: '../editor/ckeditor/ck_upload.php',
									    filebrowserUploadMethod: 'form'
									});

									

								</script>
							</div>
							<div class="col-xl-6">
								<div class="my_profile_setting_input form-group">
									<label for="objectif">URL Video Cours</label>
									<input type="text" class="form-control" id="video" name="video" placeholder="Url Video Cours" required>
								</div>
							</div>
							
						</div>
					</div>
				</div>
				
				<div class="row my_setting_content_details">
					
				    <div class="col-lg-12">
						<button type="submit" class="my_setting_savechange_btn btn btn-thm">Enregistrer <span class="flaticon-right-arrow-1 ml15"></span></button>
				    </div>
				</div>
			</form>
			
		</div>
	</div>
</div>

<script type="text/javascript">
	$("#photo").on('change', function(){
	    readPictureURL(this);
	});

	function readPictureURL(input) {
	    if (input.files && input.files[0]) {
	        if(input.files.length==1){
	            var reader = new FileReader();
	            reader.onload = function (e) {
	                $('#coverPreview').attr('src', e.target.result).fadeIn('slow');
	            }
	            reader.readAsDataURL(input.files[0]);
	        }
	        else{
	            $('#coverPreview').attr('src', '{{ URL::to('imageformation.jpg') }}').fadeIn('slow');
	        }
	    }
	    else{
	        $('#coverPreview').attr('src', '{{ URL::to('imageformation.jpg') }}').fadeIn('slow');
	    }
	}
</script>
		

@endsection