@extends('layouts.masterBackend')

@section('title')
    {{ ucfirst('Home') }}
@endsection

@section('content')

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

      {{-- carousel --}}
  		<div class="col-xs-12">
  			<section id="message-carousel" class="panel panel-primary">
					<header class="panel-heading" style="display: flex;justify-content: space-between;align-content: center;">
            @if($homeBanner === 'carousel')
              <h2>
                @lang('backend.carousel')
                <button class="btn btn-success" data-toggle="modal" data-target="#addCarousel">@lang('backend.add-image')</button>
                <button class="btn btn-warning" data-toggle="modal" data-target="#reorder">@lang('backend.arange-order')</button>
              </h2>
            @endif
            @if($homeBanner === 'video')
              <h2>Video</h2>
            @endif
            <div>
              <form action="{{ route('beHomeUpdateBanner') }}" method="post" id="home-banner">
                
                {{ method_field('post') }}
                {{ csrf_field() }}

                <div class="form-group">
                  <select name="home_banner" class="form-control"
                    onchange="document.getElementById('home-banner').submit();"
                    >
                    <option value="carousel" {{ $homeBanner == 'carousel' ? 'selected' : '' }}>Carousel</option>
                    <option value="video" {{ $homeBanner == 'video' ? 'selected' : '' }}>Video</option>
                  </select>
                </div>

              </form>
            </div>
					</header>
					<div class="panel-body">
            @includeif("backend.home_components.{$homeBanner}")
					</div>
	    	</section>

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

            {!! Form::open(['url' => route('beHomeSaveCarousel'),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
              {!! Form::hidden('carousel_id',$val->id) !!}
              {!! Form::hidden('image') !!}
              <div class="modal-content">
                <div class="modal-header">
                  <h2>@lang('backend.update-image')</h2>
                </div>
                <div class="modal-body text-center">

                  {{-- Image upload --}}
                  <div class="" style="width: 800px; margin: 0 auto 20px auto;">
                    <div class="image-cropper" data-height="287.5" data-width="800" data-exportZoom="2"
                     data-src="{{asset($storage_url.'img/home/'.$val->media_url)}}">
                      <div class="cropit-preview"></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 --}}

                  @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 = $get->media_title;
                        $alt = $get->media_content;
                      }else{
                        $title = $val->media_title;
                        $alt = $val->media_content;
                      }
                    @endphp
                    <div class="panel panel-info">
                      <div class="panel-heading">
                        <h3>{{ count(config('translatable.locales')) > 1 ? $lang_ext : "" }}</h3>
                      </div>
                      <div class="panel-body">
                        <div class="form-group">
                          {!! Form::label('imagetitle',__('backend.title'),['class'=>'control-label']) !!}
                          <div class="{{ $errors->has('imagetitle') ? ' has-error' : '' }}">
                            {!! Form::text('imagetitle['.$lang.']',$title,['class'=>'form-control']) !!}
                            @if ($errors->has('imagetitle'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('imagetitle') }}</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>
                  @endforeach
                </div>
                <footer 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>
                </footer>
              </div>
            {!! Form::close() !!}

            </div>
          </div>
        @endforeach

	    	{{-- ADD CAROUSEL MODAL --}}
	    	<div id="addCarousel" class="modal fade" role="dialog">
					<div class="modal-dialog modal-lg">

  				  {!! Form::open(['url' => route('beHomeSaveCarousel'),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
  						{!! Form::hidden('id','1') !!}
              {!! Form::hidden('image') !!}
  						<div class="modal-content">
  							<div class="modal-header">
  								<h2>@lang('backend.add-image')</h2>
  							</div>
  							<div class="modal-body text-center">

                {{-- Image upload --}}
                <div class="" style="width: 800px; margin: 0 auto 20px auto;">
                  <div class="image-cropper" data-height="287.5" data-width="800" data-exportZoom="2">
                    <div class="cropit-preview">
                      <div class="caption">
                        <p>@lang('backend.minimum-resolution') 1600x575 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 --}}

                  @if ($errors->has('imagefile'))
                    <span class="help-block">
                      <strong>{{ $errors->first('imagefile') }}</strong>
                    </span>
                  @endif

                  @foreach (config('translatable.locales') as $lang => $language)
                    @php
                      if(count(config('translatable.locales')) > 1){
                        $lang_ext = $language;
                      }else{
                        $lang_ext = "";
                      }
                    @endphp
                    <div class="panel panel-info">
                      <div class="panel-heading">
                        <h3>{{ $lang_ext }}</h3>
                      </div>
                      <div class="panel-body">
                        <div class="form-group">
                          {!! Form::label('imagetitle',__('backend.title'),['class'=>'control-label']) !!}
                          <div class="{{ $errors->has('imagetitle') ? ' has-error' : '' }}">
                            {!! Form::text('imagetitle['.$lang.']','',['class'=>'form-control']) !!}
                            @if ($errors->has('imagetitle'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('imagetitle') }}</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.']','',['class'=>'form-control']) !!}
                            @if ($errors->has('imagealt'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('imagealt') }}</strong>
                                </span>
                            @endif
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
  							</div>
  							<footer 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>
  							</footer>
  						</div>
  					{!! Form::close() !!}

					</div>
				</div>

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

            {!! Form::open(['url' => route('beHomeOrderCarousel'),'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 ($carousel 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="#">
                            <img class="media-object" src="{{ asset($storage_url.'img/home/'.$vals->media_url) }}" alt="" height="64px">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">( {{$vals->temp_id}} ){{ $get->media_title or $vals->media_title }}</h4>
                          {{ $get->media_section or $vals->media_section }}
                        </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>
      {{-- /. carousel --}}

      {{-- featured product --}}
      @if (config('corepackage.catalog.featured_products'))
      <div class="col-xs-12">
        <section id="message-home-featured" class="panel panel-primary">
          <header class="panel-heading">
            <h2>
              @lang('backend.featured-product')
            </h2>
          </header>

          {!! Form::open(['url' => route('beHomeSaveFeaturedHeading'),'method'=>'post']) !!}
            {!! Form::hidden('id',isset($featured_product->id)?$featured_product->id:'') !!}
            <div class="panel-body">
              @if(Session::has('message-home-featured'))
                <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-home-featured') }}</p>
                </div>
              @endif

              @foreach (config('translatable.locales') as $lang => $language)
                @php
                  if(count(config('translatable.locales')) > 1){
                    $lang_ext = $language;
                  }else{
                    $lang_ext = "";
                  }
                  $data = $featured_product->locales()->where('locale',$lang)->first();
                  if(isset($data)){
                    $title = $data->general_title;
                  }else{
                    $title = $featured_product->general_title;
                  }
                @endphp
                <div class="col-xs-12 col-sm-6 {{ (count(config('translatable.locales')) == 1) ? 'col-sm-offset-3' : ''}}">
                  <div class="panel panel-info">
                  <div class="panel-heading text-center">
                    <h3>{{ $lang_ext }}</h3>
                  </div>
                  <div class="panel-body">
                    <div class="form-group">
                      {!! Form::label('title',__('backend.title'),['class'=>'control-label']) !!}
                      <div class="{{ $errors->has('title') ? ' has-error' : '' }}">
                        {!! Form::text('title['.$lang.']',$title,['class'=>'form-control']) !!}
                        @if ($errors->has('title'))
                            <span class="help-block">
                                <strong>{{ $errors->first('title') }}</strong>
                            </span>
                        @endif
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              @endforeach
            </div>
            <footer class="panel-footer text-center">
              <button type="submit" class="btn btn-primary">@lang('backend.update')</button>
            </footer>
          {!! Form::close() !!}

          <div class="panel-body">

            <div class="table-responsive">
			    		<table id="featuredTable" class="table table-hover">
						    <thead>
							    <tr>
							    	<th class="text-center">#</th>
							      <th class="text-center">@lang('backend.image')</th>
							      <th class="text-center">@lang('backend.name')</th>
							      <th class="text-center">@lang('backend.category')</th>
							      <th class="text-center">@lang('backend.actions')</th>
							    </tr>
						    </thead>
						    <tbody>
							    @foreach($featured as $key => $val)
								    <tr>
								    	<td class="text-center">{{$key+1}}</td>
                      <td class="text-center">
                        <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/products/'.$val->product_code.'/'.$val->product_image) }}" style="max-height: 200px;margin: 0 auto; width: auto;">
                      </td>
                      <td class="text-center">{{ $val->product_name }}</td>
                      <td class="text-center">{{ $val->category->category_name }}</td>
                      <td class="text-center"><a href="{!! route('backendProductFeatured', $val->id) !!}" class="btn btn-danger"><i class="fa fa-trash"></i></a></td>
								    </tr>
								  @endforeach
						    </tbody>
						  </table>
			    	</div>
					</div>

        </section>
      </div>
      @endif
      {{-- /. featured product --}}

      {{-- intro --}}
      <div class="col-xs-12">
        <section id="message-home-content" class="panel panel-primary">
          <header class="panel-heading">
            <h2>
              @lang('backend.introduction-content')
            </h2>
          </header>
          {!! Form::open(['url' => route('beHomeSaveContent'),'method'=>'post']) !!}
            {!! Form::hidden('id',isset($content->id)?$content->id:'') !!}
            <div class="panel-body">
              @if(Session::has('message-home-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-home-content') }}</p>
                </div>
              @endif

              @foreach (config('translatable.locales') as $lang => $language)
                @php
                  if(count(config('translatable.locales')) > 1){
                    $lang_ext = $language;
                  }else{
                    $lang_ext = "";
                  }
                  $data = $content->locales()->where('locale',$lang)->first();
                  if(isset($data)){
                    $title = $data->general_title;
                    $text = $data->general_content;
                  }else{
                    $title = $content->general_title;
                    $text = $content->general_content;
                  }
                @endphp
                <div class="col-xs-12 col-sm-6 {{ (count(config('translatable.locales')) == 1) ? 'col-sm-offset-3' : ''}}">
                  <div class="panel panel-info">
                  <div class="panel-heading text-center">
                    <h3>{{ $lang_ext }}</h3>
                  </div>
                  <div class="panel-body">
                    <div class="form-group">
                      {!! Form::label('title',__('backend.title'),['class'=>'control-label']) !!}
                      <div class="{{ $errors->has('title') ? ' has-error' : '' }}">
                        {!! Form::text('title['.$lang.']',$title,['class'=>'form-control']) !!}
                        @if ($errors->has('title'))
                            <span class="help-block">
                                <strong>{{ $errors->first('title') }}</strong>
                            </span>
                        @endif
                      </div>
                    </div>
                    <div class="form-group">
                      {!! Form::label('text',__('backend.text'),['class'=>'control-label']) !!}
                      <div class="{{ $errors->has('text') ? ' has-error' : '' }}">
                        {!! Form::textarea('text['.$lang.']',$text,['class'=>'form-control']) !!}
                        @if ($errors->has('text'))
                            <span class="help-block">
                                <strong>{{ $errors->first('text') }}</strong>
                            </span>
                        @endif
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              @endforeach
            </div>
            <footer class="panel-footer text-center">
              <button type="submit" class="btn btn-primary">@lang('backend.update')</button>
            </footer>
          {!! Form::close() !!}
        </section>
      </div>
      {{-- /. intro --}}

      {{-- cards --}}
      <div class="col-xs-12">
        <section id="message-card" class="panel panel-primary">
          <header class="panel-heading">
            <h2>
              @lang('backend.cards')
              @if(count($cards) < 3)
              <button class="btn btn-success" data-toggle="modal" data-target="#addCard">@lang('backend.add-card')</button>
              @endif
              <button class="btn btn-warning" data-toggle="modal" data-target="#reorderCard">@lang('backend.arrange-order')</button>
            </h2>
          </header>
          <div class="panel-body">
            @if(Session::has('message-card'))
              <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-card') }}</p>
              </div>
            @endif
            <div class="table-responsive">
              <table id="cardTable" 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.caption') [{{$language}}]</th>
                        @else
                          <th class="text-center">@lang('backend.caption')</th>
                        @endif
                      @endforeach
                      <th class="text-center">@lang('backend.options')</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($cards as $key => $val)
                    <tr>
                      <td class="text-center">{{$key+1}}</td>
                      <td class="text-center">
                        <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/home/'.$val->media_url) }}" style="max-height: 100px;margin: 0 auto">
                      </td>
                      @foreach (config('translatable.locales') as $lang => $language)
                        @php
                          $caption = $val->locales()->where('locale',$lang)->first();
                        @endphp
                        <td class="text-center">
                          {{ $caption->media_title or $val->media_title }}
                        </td>
                      @endforeach
                      <td class="text-center">
                        {{-- Update data --}}
                        <button title="Update Card" class="btn btn-warning" data-toggle="modal" data-target="#updatecard{{ $val->id }}"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                        {{-- Delete data --}}
                        <button title="Delete Card" class="btn btn-danger" data-toggle="modal" data-target="#deletecard{{ $val->id }}"><i class="fa fa-trash" aria-hidden="true"></i></button>
                        <div id="deletecard{{ $val->id }}" class="modal fade" role="dialog">
                          <div class="modal-dialog modal-sm">

                            {!! Form::open(['url' => route('beHomeDeleteCard',['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-card')</h3>
                                  <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/home/'.$val->media_url) }}">
                                  <br>
                                  <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>
        </section>

        {{-- ADD CARD MODAL --}}
        @if(count($cards) < 3)
          <div id="addCard" class="modal fade" role="dialog">
            <div class="modal-dialog">

              {!! Form::open(['url' => route('beHomeSaveCard'),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
              {!! Form::hidden('image') !!}

                <div class="modal-content">
                  <div class="modal-header">
                    <h2>@lang('backend.add-card')</h2>
                  </div>
                  <div class="modal-body text-center">

                    {{-- Image upload --}}
                    <div class="" style="width: 300px; margin: 0 auto 20px auto;">
                      <div class="image-cropper" data-height="500" data-width="500" data-exportZoom="1">
                        <div class="cropit-preview">
                          <div class="caption">
                            <p>@lang('backend.minimum-resolution') 500x500 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 --}}



                    @foreach (config('translatable.locales') as $lang => $language)
                      <div class="panel panel-info">
                        <div class="panel-heading">
                          <h3>{{ count(config('translatable.locales')) > 1 ? $language : ""}}</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.']','',['class'=>'form-control']) !!}
                              @if ($errors->has('imagealt'))
                                  <span class="help-block">
                                      <strong>{{ $errors->first('imagealt') }}</strong>
                                  </span>
                              @endif
                            </div>
                          </div>
                          <div class="form-group">
                            {!! Form::label('cardtitle',__('backend.card-title'),['class'=>'control-label']) !!}
                            <div class="{{ $errors->has('cardtitle') ? ' has-error' : '' }}">
                              {!! Form::text('cardtitle['.$lang.']','',['class'=>'form-control']) !!}
                              @if ($errors->has('cardtitle'))
                                  <span class="help-block">
                                      <strong>{{ $errors->first('cardtitle') }}</strong>
                                  </span>
                              @endif
                            </div>
                          </div>
                          <div class="form-group">
                            {!! Form::label('cardcontent',__('backend.card-content'),['class'=>'control-label']) !!}
                            <div class="{{ $errors->has('cardcontent') ? ' has-error' : '' }}">
                              {!! Form::textarea('cardcontent['.$lang.']','',['class'=>'form-control']) !!}
                              @if ($errors->has('cardcontent'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('cardcontent') }}</strong>
                                </span>
                              @endif
                            </div>
                          </div>
                        </div>
                      </div>
                    @endforeach
                  </div>
                  <footer 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>
                  </footer>
                </div>
              {!! Form::close() !!}

            </div>
          </div>
        @endif

        {{-- UPDATE CARDS --}}
        @foreach($cards as $key => $val)
          <div id="updatecard{{$val->id}}" class="modal fade" role="dialog">
            <div class="modal-dialog">

              {!! Form::open(['url' => route('beHomeSaveCard'),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
              {!! Form::hidden('card_id',$val->id) !!}
              {!! Form::hidden('image') !!}

              <div class="modal-content">
                <div class="modal-header">
                  <h2>@lang('backend.update-card')</h2>
                </div>
                <div class="modal-body text-center">

                    {{-- Image upload --}}
                    <div class="" style="width: 300px; margin: 0 auto 20px auto;">
                      <div class="image-cropper" data-height="500" data-width="500" data-exportZoom="1" data-src="{{asset($storage_url.'img/home/'.$val->media_url)}}">
                        <div class="cropit-preview">
                          <div class="caption">
                            <p>@lang('backend.minimum-resolution') 500x500 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 --}}

                  @foreach (config('translatable.locales') as $lang => $language)
                    @php
                      $data = $val->locales()->where('locale',$lang)->first();
                      if(!empty($data)){
                        $alt = $data->media_desc;
                        $title = $data->media_title;
                        $text = $data->media_content;
                      }else{
                        $alt = $val->media_desc;
                        $title = $val->media_title;
                        $text = $val->media_content;
                      }
                    @endphp
                    <div class="panel panel-info">
                      <div class="panel-heading">
                        <h3>{{ count(config('translatable.locales')) > 1 ? $language : ""}}</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.']',isset($alt)?$alt:"",['class'=>'form-control']) !!}
                            @if ($errors->has('imagealt'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('imagealt') }}</strong>
                                </span>
                            @endif
                          </div>
                        </div>
                        <div class="form-group">
                          {!! Form::label('cardtitle',__('backend.card-title'),['class'=>'control-label']) !!}
                          <div class="{{ $errors->has('cardtitle') ? ' has-error' : '' }}">
                            {!! Form::text('cardtitle['.$lang.']',isset($title)?$title:"",['class'=>'form-control']) !!}
                            @if ($errors->has('cardtitle'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('cardtitle') }}</strong>
                                </span>
                            @endif
                          </div>
                        </div>
                        <div class="form-group">
                          {!! Form::label('cardcontent',__('backend.card-content'),['class'=>'control-label']) !!}
                          <div class="{{ $errors->has('cardcontent') ? ' has-error' : '' }}">
                            {!! Form::textarea('cardcontent['.$lang.']',isset($text)?$text:"",['class'=>'form-control']) !!}
                            @if ($errors->has('cardcontent'))
                              <span class="help-block">
                                  <strong>{{ $errors->first('cardcontent') }}</strong>
                              </span>
                            @endif
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
                <footer 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>
                </footer>
              </div>
              {!! Form::close() !!}

            </div>
          </div>
        @endforeach

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

            {!! Form::open(['url' => route('beHomeOrderCard'),'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 ($cards 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="#">
                            <img class="media-object" src="{{ asset($storage_url.'img/home/'.$vals->media_url) }}" alt="" height="64px">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">( {{$vals->temp_id}} ){{ $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>
      {{-- /. cards --}}

      {{-- divider --}}
      <div class="col-xs-12">
  			<section id="message-divider" class="panel panel-primary">
					<header class="panel-heading">
						<h2>
							@lang('backend.divider')
						</h2>
					</header>
					{!! Form::open(['url' => route('beHomeSaveDivider'),'method'=>'post']) !!}
					<div class="panel-body">
						@if(Session::has('message-divider'))
							<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-divider') }}</p>
							</div>
						@endif

            {!! Form::hidden('id1',$divider1->id) !!}
            {!! Form::hidden('id2', $divider2->id) !!}

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

                <div class="panel-heading">
                  <h3>@lang('backend.divider') 1</h3>
                </div>

                <div class="panel-body">

                  @foreach (config('translatable.locales') as $lang => $language)
                    <div class="form-group col-xs-12 col-sm-6">
                      <label for="caption" class="control-label">@lang('backend.caption') [{{ $lang }}]</label>
                      <div class="{{ $errors->has('divider1') ? ' has-error' : '' }}">

                        <input type="text" name="divider1[{{ $lang }}]" class="form-control"
                          value="{{ $divider1->hasTranslation($lang) && $divider1->general_content ? $divider1->translate($lang)->general_content : '' }}">
                        @if ($errors->has('divider1'))
                          <span class="help-block">
                            <strong>{{ $errors->first('divider1') }}</strong>
                          </span>
                        @endif
                      </div>
                    </div>
                  @endforeach

                  <div class="form-group col-xs-12 col-sm-12">
                    <label for="target" class="control-label">@lang('backend.target')</label>
                    <select name="select_divider1" class="selectpicker form-control">
                      @foreach ($pages as $page)
                        <option value="{{ $page->key }}" {{ $page->key==$divider1->general_url ? 'selected' : '' }}>
                          {{ $page->page_name }}
                        </option>
                      @endforeach
                    </select>
                  </div>

                </div>

              </div>
            </div>

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

                <div class="panel-heading">
                  <h3>@lang('backend.divider') 2</h3>
                </div>

                <div class="panel-body">

                  @foreach (config('translatable.locales') as $lang => $language)
                    <div class="form-group col-xs-12 col-sm-6">
                      <label for="caption" class="control-label">@lang('backend.caption') [{{ $lang }}]</label>
                      <div class="{{ $errors->has('divider2') ? ' has-error' : '' }}">

                        <input type="text" name="divider2[{{ $lang }}]" class="form-control"
                          value="{{ $divider2->hasTranslation($lang) && $divider2->general_content ? $divider2->translate($lang)->general_content : '' }}">
                        @if ($errors->has('divider2'))
                          <span class="help-block">
                            <strong>{{ $errors->first('divider2') }}</strong>
                          </span>
                        @endif
                      </div>
                    </div>
                  @endforeach

                  <div class="form-group col-xs-12 col-sm-12">
                    <label for="target" class="control-label">@lang('backend.target')</label>
                    <select name="select_divider2" class="selectpicker form-control">
                      @foreach ($pages as $page)
                        <option value="{{ $page->key }}" {{ $page->key==$divider2->general_url ? 'selected' : '' }}>
                          {{ $page->page_name }}
                        </option>
                      @endforeach
                    </select>
                  </div>

                </div>

              </div>
            </div>

					</div>
					<footer class="panel-footer text-center">
						<button type="submit" class="btn btn-primary">@lang('backend.update')</button>
					</footer>
					{!! Form::close() !!}
	    	</section>
  		</div>
      {{-- /. divider --}}

      {{-- banner 1 & 2 --}}
  		<div class="col-xs-12">
  			<section class="panel panel-primary">
					<header class="panel-heading">
						<h2>
							@lang('backend.banner')
						</h2>
					</header>

					<div class="panel-body">
						{!! Form::open(['url' => route('beHomeSaveBanner'),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
							{!! Form::hidden('bannerid',$banner1->id) !!}
							{!! Form::hidden('bannertype','banner1') !!}
              {!! Form::hidden('image') !!}

							<div id="message-banner1" class="panel panel-primary">
								<div class="panel-heading">
									<h3>@lang('backend.banner') 1</h3>
								</div>
								<div class="panel-body">
									@if(Session::has('message-banner1'))
										<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-banner1') }}</p>
										</div>
									@endif

									{{-- Image upload --}}
                  <div class="" style="width: 800px; margin: 0 auto 20px auto;">
                    <div class="image-cropper" data-height="275" data-width="800" data-exportZoom="2" data-src="{{asset($storage_url.'img/home/'.$banner1->media_url)}}">
                      <div class="cropit-preview">
                        <div class="caption">
                          <p>@lang('backend.minimum-resolution') 1600x550 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="col-xs-12">
                    @foreach (config('translatable.locales') as $lang => $language)
                      @php
                        if(count(config('translatable.locales')) > 1){
                          $lang_ext = $language;
                        }else{
                          $lang_ext = "";
                        }

                        $get = $banner1->locales()->where('locale',$lang)->first();
                        if(!empty($get)){
                          $title = $get->media_title;
                          $text = $get->media_content;
                          $alt = $get->media_desc;
                        }else{
                          $title = $banner1->media_title;
                          $text = $banner1->media_content;
                          $alt = $banner1->media_desc;
                        }
                      @endphp
                      <div class="col-xs-12 col-sm-6 {{count(config('translatable.locales')) == 1 ? 'col-sm-offset-3' : ''}}">
                        <div class="panel panel-info">
                          <div class="panel-heading">
                            <h3>{{ $lang_ext }}</h3>
                          </div>
                          <div class="panel-body">
                            <div class="form-group">
                              {!! Form::label('imagealt1',__('backend.seo'),['class'=>'control-label']) !!}
                              <div class="{{ $errors->has('imagealt1') ? ' has-error' : '' }}">
                                {!! Form::text('imagealt1['.$lang.']',isset($alt)?$alt:"",['class'=>'form-control']) !!}
                                @if ($errors->has('imagealt1'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('imagealt1') }}</strong>
                                    </span>
                                @endif
                              </div>
                            </div>
                            <div class="form-group">
        											{!! Form::label('title_banner1',__('backend.title-banner').' 1',['class'=>'control-label']) !!}
        											<div class="{{ $errors->has('title_banner1') ? ' has-error' : '' }}">
        												{!! Form::text('title_banner1['.$lang.']',$title,['class'=>'form-control']) !!}
        												@if ($errors->has('title_banner1'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('title_banner1') }}</strong>
                                    </span>
                                @endif
        											</div>
        										</div>
        										<div class="form-group">
        											{!! Form::label('content_banner1',__('backend.content-banner').' 1',['class'=>'control-label']) !!}
        											<div class="{{ $errors->has('content_banner1') ? ' has-error' : '' }}">
        												{!! Form::textarea('content_banner1['.$lang.']',$text,['class'=>'form-control']) !!}
        												@if ($errors->has('content_banner1'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('content_banner1') }}</strong>
                                    </span>
                                @endif
        											</div>
        										</div>
                          </div>
                        </div>
                      </div>
                    @endforeach
									</div>
								</div>
								<footer class="panel-footer text-center">
									<button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.update')</button>
								</footer>
							</div>
						{!! Form::close() !!}

						{!! Form::open(['url' => route('beHomeSaveBanner'),'method'=>'post','files'=>true, 'class' => 'image-form']) !!}
							{!! Form::hidden('bannerid',$banner2->id) !!}
							{!! Form::hidden('bannertype','banner2') !!}
              {!! Form::hidden('image') !!}

              <div id="message-banner2" class="panel panel-primary">
								<div class="panel-heading">
									<h3>@lang('backend.banner') 2</h3>
								</div>
								<div class="panel-body">
									@if(Session::has('message-banner2'))
										<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-banner2') }}</p>
										</div>
									@endif

									{{-- Image upload --}}
                  <div class="" style="width: 800px; margin: 0 auto 20px auto;">
                    <div class="image-cropper" data-height="275" data-width="800" data-exportZoom="2" data-src="{{asset($storage_url.'img/home/'.$banner2->media_url)}}">
                      <div class="cropit-preview">
                        <div class="caption">
                          <p>@lang('backend.minimum-resolution') 1600x550 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="col-xs-12">
                    @foreach (config('translatable.locales') as $lang => $language)
                      @php
                        if(count(config('translatable.locales')) > 1){
                          $lang_ext = $language;
                        }else{
                          $lang_ext = "";
                        }

                        $get = $banner2->locales()->where('locale',$lang)->first();
                        if(!empty($get)){
                          $title = $get->media_title;
                          $text = $get->media_content;
                          $alt = $get->media_desc;
                        }else{
                          $title = $banner2->media_title;
                          $text = $banner2->media_content;
                          $alt = $banner2->media_desc;
                        }
                      @endphp
                      <div class="col-xs-12 col-sm-6 {{count(config('translatable.locales')) == 1 ? 'col-sm-offset-3' : ''}}">
                        <div class="panel panel-info">
                          <div class="panel-heading">
                            <h3>{{ $lang_ext }}</h3>
                          </div>
                          <div class="panel-body">
                            <div class="form-group">
                              {!! Form::label('imagealt2',__('backend.seo'),['class'=>'control-label']) !!}
                              <div class="{{ $errors->has('imagealt2') ? ' has-error' : '' }}">
                                {!! Form::text('imagealt2['.$lang.']',isset($alt)?$alt:"",['class'=>'form-control']) !!}
                                @if ($errors->has('imagealt2'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('imagealt2') }}</strong>
                                    </span>
                                @endif
                              </div>
                            </div>
                            <div class="form-group">
        											{!! Form::label('title_banner2',__('backend.title-banner').' 2',['class'=>'control-label']) !!}
        											<div class="{{ $errors->has('title_banner2') ? ' has-error' : '' }}">
        												{!! Form::text('title_banner2['.$lang.']',$title,['class'=>'form-control']) !!}
        												@if ($errors->has('title_banner2'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('title_banner2') }}</strong>
                                    </span>
                                @endif
        											</div>
        										</div>
        										<div class="form-group">
        											{!! Form::label('content_banner2',__('backend.content-banner').' 2',['class'=>'control-label']) !!}
        											<div class="{{ $errors->has('content_banner2') ? ' has-error' : '' }}">
        												{!! Form::textarea('content_banner2['.$lang.']',$text,['class'=>'form-control']) !!}
        												@if ($errors->has('content_banner2'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('content_banner2') }}</strong>
                                    </span>
                                @endif
        											</div>
        										</div>
                          </div>
                        </div>
                      </div>
                    @endforeach
									</div>
								</div>
								<footer class="panel-footer text-center">
									<button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.update')</button>
								</footer>
							</div>
						{!! Form::close() !!}
					</div>

	    	</section>
  		</div>
      {{-- /. banner 1 & 2 --}}

      <div class="col-xs-12">
        @include('backend.home_components.instagram')
      </div>
    </div>
  </div>
@endsection

@section('script')
<script type="text/javascript">
	$("#carouselTable").DataTable();
  $("#cardTable").DataTable();
  $("#featuredTable").DataTable();

  @if ($errors->has('imagefile'))
    $("#addCarousel").modal('show');
  @endif

  @if ($errors->has('imagefilecard'))
    $("#addCard").modal('show');
  @endif

  $(".image-select").chosen();
  $(".sortable").sortable();
</script>
@endsection
