@extends('admin.layout')
@section('content')

 <div class="page-wrapper">
    <div class="container-fluid">



    		<div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h4 class="text-themecolor upercase-text">ARTICLES</h4>
                    </div>
                    <div class="col-md-7 align-self-center text-right">
                        <div class="d-flex justify-content-end align-items-center">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0)">Accueil</a></li>
                            </ol>
                            <button type="button" data-toggle="modal" data-toggle="modal" data-target="#typeBienModal" class="btn btn-info d-none d-lg-block m-l-15"><i class="fa fa-plus-circle"></i>Ajout de nouveau article</button>
                        </div>
                    </div>
                </div>


	<div class="row">
		<div class="col-12">
			 <div class="card">
			 		 <div class="card-body">
		                <div class="card-text">
                	     <form class="form-horizontal" action="{{ route('articles.save') }}" method="POST" enctype="multipart/form-data">
     					@csrf
	                	 <div class="form-group">
	                        <label for="articles_title">Titre de l'article</label>
	                        <input type="text"
	                        name="articles_title"
	                        id="articles_title"
	                        class="form-control {{ $errors->has('articles_title') ? 'is-invalid' : ''}} "
	                        placeholder="Saisir le titre de l'annonce"
	                        value="{{ old('articles_title') }}"
	                        autofocus
	                        >
	                        @if($errors->has('titre'))
	                            <span class="invalid-feedback">{!! $errors->first('articles_title') !!}</span>
	                        @endif
                    	</div>
                    	<input type="hidden" name="articles_statut" value='1' class="form-control form-control-lg">

		                     <div class="form-group">
		                        <label for="articles_description">Description</label>
		                        <textarea
		                        name="articles_description"
		                        id="articles_description"
		                        class="form-control"
		                        rows="20"
		                        placeholder="Décrire en quelques mots le but de la galerie photos"
		                        ></textarea>
		                        @if($errors->has('articles_description'))
		                            <span class="invalid-feedback">{{ $errors->first('articles_description') }}</span>
		                        @endif
		                    </div>

		                    <div class="form-group">
            					<input type="file" name="articles_image" class="form-control-file form-control-lg border">
		                    </div>
		                    <div class="form-group">
		                    	 <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        		 <button type="submit" class="btn btn-primary">Valider</button>
		                    </div>
		                </form>
		                </div>
	            	</div>
	   			 </div>
	   		</div>
	   	</div>
	</div>
</div>

@push('styles')
<meta name="_token" content="{{csrf_token()}}" />
<style type="text/css">
    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
    border-color: var(--ck-color-base-border);
    height: 200px;
    }
</style>
@endpush

@push('scripts')
    <script src="{{asset('admin/plugins/select2/select2.full.min.js')}}"></script>
    <script src="{{asset('admin/plugins/ckeditor/ckeditor.js')}}"></script>
    <script>

        // Select2 elements initialization
        $('.select2').select2({
            tags: true
        });

        //CKeditor initialization
        ClassicEditor
        .create(document.querySelector('#articles_description'), {
            language: 'fr',
            resize: {
                minHeight: 315,
                maxHeight: 800
            }
        })
        .then(editor => {
            //console.log(editor)
        })
        .catch(error => {
            //console.log(error);
        });
    </script>
@endpush

@endsection