@extends('layouts.masterBackend')

@section('title')
	@if($page == "section1")
  	{{ ucwords($page_section1) }}
  @else
  	{{ ucwords($page_section2) }}
  @endif
@endsection

@section('content')

  <!-- MAIN CONTENT -->
  <div class="container-fluid">

		{{-- BANNER --}}
		<div class="row">
    		<div class="col-xs-12">
				<section id="message-banner" class="panel panel-primary">
					<header class="panel-heading">
						<h2>
							@lang('backend.banner-header')
						</h2>
					</header>
					{!! Form::open(['url'=>route('sectionSaveBanner'),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
					{!! Form::hidden('section_name',$page) !!}
					{!! Form::hidden('id',isset($banner->id)?$banner->id:"") !!}
					{!! Form::hidden('image') !!}

					<div class="panel-body">
						@if(Session::has('message-banner'))
							<div class="alert {{ Session::get('alert-class') }} alert-dismissible" role="alert">
								<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							 	<p>{{ Session::get('message-banner') }}</p>
							</div>
						@endif

						{{-- Image upload --}}
            <div class="" style="width: 800px; margin: 0 auto 20px auto;">
              <div class="image-cropper" data-height="160" data-width="800" data-exportZoom="2"
              	data-src="{{ asset($storage_url.'img/sections/'.$banner->media_url) }}">
                <div class="cropit-preview">
                  <div class="caption">
                    <p>@lang('backend.minimum-resolution') 1600x320 px</p>
                  </div>
                </div>

                <div class="controls-wrapper">
                  <div class="rotation-btns">
                    <a class="rotate-ccw-btn"><i class="fa fa-undo"></i></a>
                    <a class="rotate-cw-btn"><i class="fa fa-repeat"></i></a>
                  </div>
                  <div class="slider-wrapper">
                    <i class="fa fa-picture-o" aria-hidden="true"></i>
                    <input type="range" class="cropit-image-zoom-input">
                    <i class="fa fa-picture-o fa-2x" aria-hidden="true"></i>
                  </div>
                </div>

                <label for="cropit-image-input" class="btn btn-primary btn-outlined">@lang('backend.upload')</label>
                <input type="file" class="cropit-image-input" style="display:none"/>

                <button title="@lang('backend.search-on-pixabay')" type="button" class="btn btn-primary btn-outlined js-pixabay-trigger">@lang('backend.search-on-pixabay')</button>
              </div>
            </div>
            {{-- /. Image upload --}}

						<div class="form-group image-with-preview col-xs-12">
							<div class="row">
								@foreach (config('translatable.locales') as $lang => $language)
									@php
										if( count(config('translatable.locales')) > 1 ){
											$lang_ext = $language;
											$col = "col-sm-6";
										}else{
											$lang_ext = "";
											$col = "";
										}
										if(isset($banner)){
											$get = $banner->locales()->where('locale',$lang)->first();
										}else{
											$get ="";
										}

										if(empty($get)){
											$banner_caption = isset($banner)?$banner->media_title:"";
											$alt = isset($banner)?$banner->media_desc:"";
										}else{
											$banner_caption = $get->media_title;
											$alt = $get->media_desc;
										}
									@endphp
									<div class="col-xs-12 {{$col}}">
										<div class="panel panel-info">
										<div class="panel-heading">
											<h3>{{$lang_ext}}</h3>
										</div>
										<div class="panel-body">
											<div class="form-group">
												{!! Form::label('banner_caption',__('backend.caption'),['class'=>'control-label']) !!}
												<div class="{{ $errors->has('banner_caption') ? ' has-error' : '' }}">
													{!! Form::text('banner_caption['.$lang.']', $banner_caption,['class'=>'form-control']) !!}
													@if ($errors->has('banner_section'))
					                    <span class="help-block">
					                        <strong>{{ $errors->first('banner_caption') }}</strong>
					                    </span>
					                @endif
												</div>
											</div>
											<div class="form-group">
                        {!! Form::label('imagealt',__('backend.seo'),['class'=>'control-label']) !!}
                        <div class="{{ $errors->has('imagealt') ? ' has-error' : '' }}">
                          {!! Form::text('imagealt['.$lang.']',$alt,['class'=>'form-control']) !!}
                          @if ($errors->has('imagealt'))
                              <span class="help-block">
                                  <strong>{{ $errors->first('imagealt') }}</strong>
                              </span>
                          @endif
                        </div>
                      </div>
										</div>
									</div>
									</div>
								@endforeach
							</div>
						</div>

					</div>
					<footer class="panel-footer text-center">
						<button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.update')</button>
					</footer>
					{!! Form::close() !!}
				</section>
    		</div>
    	</div>
	    {{-- CONTENT --}}
    	<div class="row">
    		<div class="col-xs-12">
				<section id="message-content" class="panel panel-primary">
					<header class="panel-heading">
						<h2>
							@lang('backend.content')
							<button class="btn btn-success" data-toggle="modal" data-target="#addContent">@lang('backend.add-content')</button>
							<button class="btn btn-warning" data-toggle="modal" data-target="#reorder">@lang('backend.arrange-order')</button>
						</h2>
					</header>
					<div class="panel-body">
						@if(Session::has('message-content'))
							<div class="alert {{ Session::get('alert-class') }} alert-dismissible" role="alert">
								<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							 	<p>{{ Session::get('message-content') }}</p>
							</div>
						@endif
						@if($errors->any())
							<div id="message-content" class="alert alert-danger alert-dismissible" role="alert">
								<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<ul>
								 	@foreach ($errors->all() as $error)
								        <li>{{ $error }}</li>
								    @endforeach
							    </ul>
							</div>
						@endif
						<div class="table-responsive">
				    		<table id="contentsTable" class="table table-hover">
							    <thead>
								    <tr>
								    	<th class="text-center">#</th>
								        <th class="text-center">@lang('backend.image')</th>
												@foreach (config('translatable.locales') as $lang => $language)
													@if(count(config('translatable.locales'))>1)
														<th class="text-center">@lang('backend.title') [{{$language}}]</th>
													@else
														<th class="text-center">@lang('backend.title')</th>
													@endif
												@endforeach

												@foreach (config('translatable.locales') as $lang => $language)
													@if(count(config('translatable.locales'))>1)
														<th class="text-center" width="20%">@lang('backend.content') [{{$language}}]</th>
													@else
														<th class="text-center" width="20%">@lang('backend.content')</th>
													@endif
												@endforeach
								        <th class="text-center">@lang('backend.options')</th>
								    </tr>
							    </thead>
							    <tbody>
								    @foreach($contents as $key => $val)
									    <tr>
									    	<td class="text-center">{{$key+1}}</td>
									        <td class="text-center">

														@if($val->media_type=="image")
										        	<img class="img-responsive" alt="image" src="{{ asset($storage_url.'img/sections/'.$val->media_url) }}" style="width:200px; height:auto;">
														@elseif($val->media_type=="video")
															<div class="mediaWrapper">
																<iframe src="{{ $val->media_url }}" frameborder="0" allowfullscreen>
																</iframe>
   														</div>
 														@else
 															@if(isset($val->album) && $val->album->count())
 																@php
 																	$album = $val->album;
 																	$gallery = $album->galleries()->first();
 																@endphp
 																<img class="img-responsive" src="{{ asset($storage_url.'img/gallery/'.$album->slug.'/'.str_replace('.', '_tn.', $gallery->path)) }}" alt="" style="width:200px; height:auto;">
 															@endif
														@endif

									        </td>
													@foreach (config('translatable.locales') as $lang => $language)
														@php
															$get = $val->locales()->where('locale',$lang)->first();
														@endphp
										        <td>
										        	{{ $get->media_title or $val->media_title }}
										        </td>
													@endforeach
													@foreach (config('translatable.locales') as $lang => $language)
														@php
															$get = $val->locales()->where('locale',$lang)->first();
														@endphp
										        <td>
										        	{!! str_limit(strip_tags(isset($get)?$get->media_content:$val->media_content), (200 / count(config('translatable.locales')))) !!}
										        </td>
													@endforeach
									        <td class="text-center">
												{{-- Update data --}}
												<button title="Update content" class="btn btn-warning" data-toggle="modal" data-target="#update{{ $val->id }}"><i class="fa fa-pencil" aria-hidden="true"></i></button>

									        	{{-- Delete data --}}
												<button title="Delete content" class="btn btn-danger" data-toggle="modal" data-target="#delete{{ $val->id }}"><i class="fa fa-trash" aria-hidden="true"></i></button>
												<div id="delete{{ $val->id }}" class="modal fade" role="dialog">
													<div class="modal-dialog modal-sm">

													{!! Form::open(['url' => route('sectionDeleteContent',['id'=>$val->id]),'method'=>'delete']) !!}
														{!! Form::hidden('id',$val->id) !!}
														<div class="modal-content text-center">
															<div class="modal-body">
																<h3>@lang('backend.ask-delete-content')</h3>
																<button type="submit" class="btn btn-primary">@lang('backend.delete')</button>
																<button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
															</div>
														</div>
													{!! Form::close() !!}

													</div>
												</div>
									        </td>
									    </tr>
									@endforeach
							    </tbody>
							</table>
				    	</div>
					</div>

					@foreach ($contents as $key => $val)
						<div id="update{{ $val->id }}" class="modal fade" role="dialog">
							<div class="modal-dialog modal-lg">

							{!! Form::open(['url' => route('sectionUpdateContent',['id'=>$val->id]),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
							{!! Form::hidden('id',$val->id) !!}
							{!! Form::hidden('section',$page) !!}
							{!! Form::hidden('image') !!}
							<div class="modal-content text-center">
								<div class="modal-body container-fluid">
									<div class="col-xs-12">
										<label for="">@lang('backend.media-type') : </label>
									</div>

									<div class="col-xs-12">
										<div class="form-group">
											<label class="radio-inline">
			                	<input type="radio" name="media_type" value="image" {{ $val->media_type=="image" ? 'checked' : '' }}>@lang('backend.image')
			                </label>
											<label class="radio-inline">
			                	<input type="radio" name="media_type" value="video" {{ $val->media_type=="video" ? 'checked' : '' }}>@lang('backend.video')
			                </label>
			                <label class="radio-inline">
			                	<input type="radio" name="media_type" value="gallery" {{ $val->media_type=="gallery" ? 'checked' : '' }}>@lang('backend.gallery')
			                </label>
				            </div>
					        </div>

									<div class="col-xs-12">

										{{-- image upload --}}
										<div class="image-upload-wrapper" style="display: {{ $val->media_type!='image' ? 'none' : '' }}">
											<div class="" style="width: 800px; margin: 0 auto 20px auto;">
					              <div class="image-cropper" data-height="600" data-width="800" data-exportZoom="1"
					              	data-src="{{ $val->media_type=='image' ? asset($storage_url.'img/sections/'.$val->media_url) : ''}}">
					                <div class="cropit-preview">
					                  <div class="caption">
					                    <p>@lang('backend.minimum-resolution') 800x600 px</p>
					                  </div>
					                </div>

					                <div class="controls-wrapper">
					                  <div class="rotation-btns">
					                    <a class="rotate-ccw-btn"><i class="fa fa-undo"></i></a>
					                    <a class="rotate-cw-btn"><i class="fa fa-repeat"></i></a>
					                  </div>
					                  <div class="slider-wrapper">
					                    <i class="fa fa-picture-o" aria-hidden="true"></i>
					                    <input type="range" class="cropit-image-zoom-input">
					                    <i class="fa fa-picture-o fa-2x" aria-hidden="true"></i>
					                  </div>
					                </div>

					                <label for="cropit-image-input" class="btn btn-primary btn-outlined">@lang('backend.upload')</label>
				                  <input type="file" class="cropit-image-input" style="display:none"/>

				                  <button title="@lang('backend.search-on-pixabay')" type="button" class="btn btn-primary btn-outlined js-pixabay-trigger">@lang('backend.search-on-pixabay')</button>
					              </div>
					            </div>
				            </div>
										{{-- /. image upload --}}

										{{-- video upload --}}
										<div class="video-upload-wrapper" style="display: {{ $val->media_type!='video' ? 'none' : '' }}">
											<div class="form-group">
												<label for="media_link" class="control-label">@lang('backend.youtube-video-url')</label>
												<input type="url" name="media_link" class="form-control m-b-5"
													placeholder="https://www.youtube.com/watch/example">
												<label for="media_url" class="control-label">@lang('backend.generated-embed-link')</label>
												<input type="url" name="media_url" class="form-control"
													placeholder="https://www.youtube.com/embed/example"
													value="{{ $val->media_type=='video' ? $val->media_url : ''}}" readonly>
											</div>
										</div>
										{{-- /. video upload --}}

										{{-- gallery upload --}}
										<div class="gallery-upload-wrapper" style="display: {{ $val->media_type!='gallery' ? 'none' : '' }}">
											<div class="form-group">
												<label for="album" class="control-label">@lang('backend.select-album')</label>
												<select name="album" class="selectpicker">
													@foreach ($albums as $album)
														<option value="{{ $album->id }}" @if($album->id==$val->media_url) selected @endif>{{ $album->name }}</option>
													@endforeach
												</select>
											</div>
										</div>
										{{-- /. gallery upload --}}

									</div>
									@foreach (config('translatable.locales') as $lang => $language)
										@php
											if(count(config('translatable.locales'))>1){
												$lang_ext = $language;
											}else{
												$lang_ext = "";
											}

											$get = $val->locales()->where('locale',$lang)->first();
											if(empty($get)){
												$title = $val->media_title;
												$text = $val->media_content;
												$alt = $val->media_desc;
											}else{
												$title = $get->media_title;
												$text = $get->media_content;
												$alt = $get->media_desc;
											}
										@endphp
										<div class="col-xs-12">
											<div class="panel panel-info">
												<div class="panel-heading">
													<h3>{{$lang_ext}}</h3>
												</div>
												<div class="panel-body">
													<div class="form-group">
		                        {!! Form::label('imagealt',__('backend.seo'),['class'=>'control-label']) !!}
		                        <div class="{{ $errors->has('imagealt') ? ' has-error' : '' }}">
		                          {!! Form::text('imagealt['.$lang.']',$alt,['class'=>'form-control']) !!}
		                        </div>
		                      </div>
													<div class="form-group">
														{!! Form::label('title_content',__('backend.title'),['class'=>'control-label']) !!}
														<div class="">
															{!! Form::text('title_content['.$lang.']',$title,['class'=>'form-control']) !!}
														</div>
													</div>
													<div class="form-group">
														{!! Form::label('text_content',__('backend.text-content'),['class'=>'control-label']) !!}
														<div class="">
															{!! Form::textarea('text_content['.$lang.']',$text,['class'=>'form-control']) !!}
														</div>
													</div>
												</div>
											</div>
										</div>
									@endforeach

								</div>
								<div class="modal-footer">
									<button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.save')</button>
									<button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
								</div>
							</div>
							{!! Form::close() !!}

							</div>
						</div>
					@endforeach

					<div id="addContent" class="modal fade" role="dialog">
						<div class="modal-dialog modal-lg">
							<div class="modal-content">
								<div class="modal-header">
									<h2>@lang('backend.add-content')</h2>
								</div>

								{!! Form::open(['url' => route('sectionSaveContent'),'method' => 'post','files'=>true, 'class' => 'image-form']) !!}
								{!! Form::hidden('section',$page) !!}
								{!! Form::hidden('image') !!}
								<div class="modal-body container-fluid text-center">

									@if(Session::has('message-addcontent'))
										<div id="message-addcontent" class="alert {{ Session::get('alert-class') }} alert-dismissible" role="alert">
											<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										 	<p>{{ Session::get('message-addcontent') }}</p>
										</div>
									@endif

									<div class="col-xs-12">
										<label for="">@lang('backend.media-type') : </label>
									</div>

									<div class="col-xs-12">
										<div class="form-group">
											<label class="radio-inline">
			                	<input type="radio" name="media_type" value="image" checked>@lang('backend.image')
			                </label>
											<label class="radio-inline">
			                	<input type="radio" name="media_type" value="video">@lang('backend.video')
			                </label>
											<label class="radio-inline">
			                	<input type="radio" name="media_type" value="gallery">@lang('backend.gallery')
			                </label>
				            </div>
					        </div>

									<div class="col-xs-12">

										{{-- image upload --}}
										<div class="image-upload-wrapper">
					            <div class="" style="width: 800px; margin: 0 auto 20px auto;">
					              <div class="image-cropper" data-height="600" data-width="800" data-exportZoom="1">
					                <div class="cropit-preview">
					                  <div class="caption">
					                    <p>@lang('backend.minimum-resolution') 800x600 px</p>
					                  </div>
					                </div>

					                <div class="controls-wrapper">
					                  <div class="rotation-btns">
					                    <a class="rotate-ccw-btn"><i class="fa fa-undo"></i></a>
					                    <a class="rotate-cw-btn"><i class="fa fa-repeat"></i></a>
					                  </div>
					                  <div class="slider-wrapper">
					                    <i class="fa fa-picture-o" aria-hidden="true"></i>
					                    <input type="range" class="cropit-image-zoom-input">
					                    <i class="fa fa-picture-o fa-2x" aria-hidden="true"></i>
					                  </div>
					                </div>

					                <label for="cropit-image-input" class="btn btn-primary btn-outlined">@lang('backend.upload')</label>
				                  <input type="file" class="cropit-image-input" style="display:none"/>

				                  <button title="@lang('backend.search-on-pixabay')" type="button" class="btn btn-primary btn-outlined js-pixabay-trigger">@lang('backend.search-on-pixabay')</button>
					              </div>
					            </div>
										</div>
										{{-- image upload --}}

										{{-- video upload --}}
										<div class="video-upload-wrapper" style="display: none">
											<div class="form-group">
												<label for="media_link" class="control-label">@lang('backend.youtube-video-url')</label>
												<input type="url" name="media_link" class="form-control m-b-5"
													placeholder="https://www.youtube.com/watch/example">
												<label for="media_url" class="control-label">@lang('backend.generated-embed-link')</label>
												<input type="url" name="media_url" class="form-control"
													placeholder="https://www.youtube.com/embed/example"
													value="" readonly>
											</div>
										</div>
										{{-- video upload --}}

										{{-- gallery upload --}}
										<div class="gallery-upload-wrapper" style="display: none">
											<div class="form-group">
												<label for="album" class="control-label">@lang('backend.select-album')</label>
												<select name="album" class="selectpicker">
													@foreach ($albums as $album)
														<option value="{{ $album->id }}">{{ $album->name }}</option>
													@endforeach
												</select>
											</div>
										</div>
										{{-- gallery upload --}}

									</div>
									@foreach (config('translatable.locales') as $lang => $language)
										@php
											if(count(config('translatable.locales'))>1){
												$lang_ext = $language;
											}else{
												$lang_ext = "";
											}
										@endphp
										<div class="col-xs-12">
											<div class="panel panel-info">
												<div class="panel-heading">
													<h3>{{$lang_ext}}</h3>
												</div>
												<div class="panel-body">
													<div class="form-group">
		                        {!! Form::label('imagealt',__('backend.seo'),['class'=>'control-label']) !!}
		                        <div class="">
		                          {!! Form::text('imagealt['.$lang.']','',['class'=>'form-control']) !!}
		                        </div>
		                      </div>
													<div class="form-group">
														{!! Form::label('title_content',__('backend.title'),['class'=>'control-label']) !!}
														<div class="">
															{!! Form::text('title_content['.$lang.']','',['class'=>'form-control']) !!}
														</div>
													</div>
													<div class="form-group">
														{!! Form::label('text_content',__('backend.text-content'),['class'=>'control-label']) !!}
														<div class="">
															{!! Form::textarea('text_content['.$lang.']','',['class'=>'form-control']) !!}
														</div>
													</div>
												</div>
											</div>
										</div>
									@endforeach
								</div>
								<div class="modal-footer">
									<button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.save')</button>
									<button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
								</div>
								{!! Form::close() !!}
							</div>
						</div>
					</div>
				</section>

				{{-- reorder --}}
        <div id="reorder" class="modal fade" role="dialog">
	        <div class="modal-dialog">

	        {!! Form::open(['url' => route('beSectionOrder'),'method'=>'post']) !!}
	          <div class="modal-content">
	            <div class="modal-header">
	              <h2>@lang('backend.rearrange-order')</h2>
	            </div>
	            <div class="modal-body">
								<ul class="sortable media-list">
									@foreach ($contents as $x => $vals)
											@php
												$get = $vals->locales()->where('locale',config('app.locale'))->first();
											@endphp
										<li class="media">
											{!! Form::hidden('reorder[]',$vals->id) !!}
											<div class="media-left">
												<a href="#">
													@if($vals->media_type=="image")
														<img class="media-object" src="{{ asset($storage_url.'img/sections/'.$vals->media_url) }}" alt="" height="64px">
													@else
														<iframe src="{{ $vals->media_url }}" frameborder="0" allowfullscreen height="64px" width="100px">
														</iframe>
													@endif
												</a>
											</div>
											<div class="media-body">
												<h4 class="media-heading">{{ $get->media_title or $vals->media_title }}</h4>
												{!! $get->media_content or $vals->media_content !!}
											</div>
										</li>
									@endforeach
								</ul>
	            </div>
	            <footer class="modal-footer">
	              <button type="submit" class="btn btn-primary">@lang('backend.save')</button>
	              <button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
	            </footer>
	          </div>
	        {!! Form::close() !!}

	        </div>
        </div>
			</div>
    	</div>
    </div>
@endsection

@section('script')
<script type="text/javascript">
	$("#contentsTable").DataTable();
	$(".image-select").chosen();
	$(".sortable").sortable();

	$(document).ready(function(){
    $("#publishBtn").click(function(){
				var $page = $(this).attr('data-page');
				var $stat = $(this).attr('data-publish');
				if($stat == "publish"){
					var $newstat = "hidden";
				}else{
					var $newstat = "publish";
				}

        $.post("{{url('/backend/settings/page_publish')}}",
        {
					_token: "{{csrf_token()}}",
          page: $page,
          stat: $newstat,
        },
        function(data,status){
            if(status == "success"){
							var obj = $.parseJSON(data);
							if(obj.stat == "publish"){
								$("#publishBtn").find("i").removeClass('fa-eye-slash').addClass('fa-eye');
								$("#publishBtn").attr("data-publish","publish");
								$("#publishBtn").attr("title","This page is published");
								$("#"+obj.page+"stat").find("i").removeClass('fa-eye-slash').addClass('fa-eye');
								$("#"+obj.page+"stat").attr("title","This page is published");
							}else{
								$("#publishBtn").find("i").removeClass('fa-eye').addClass('fa-eye-slash');
								$("#publishBtn").attr("data-publish","hidden");
								$("#publishBtn").attr("title","This page is not published");
								$("#"+obj.page+"stat").find("i").removeClass('fa-eye').addClass('fa-eye-slash');
								$("#"+obj.page+"stat").attr("title","This page is not published");
							}
						}
        });
    });
});
</script>
@endsection
