@extends('layouts.masterBackend')

@section('title')
     {{ ucfirst('Add new category') }} 
@endsection

@section('content')

  <div class="container-fluid">
		<div class="row">

  		<div class="col-xs-12">
				<section id="message-banner" class="panel panel-primary">

				<div class="panel-body">
          <form action="{{ $route or route('manage.category.store') }}" method="POST" enctype="multipart/form-data" class="form-horizontal image-form">
            <input type="hidden" name="image">
          
            {{ csrf_field() }}
            {{ $method or method_field('POST') }}

            <div class="row">
              <div class="col-xs-12">
                @include('backend.errors')
              </div>
            </div>
            
            <div class="row">

              {{-- image wrapper --}}
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                
                {{-- main icon --}}
                <div class="" style="width: 320px; margin: 0 auto 20px auto;">
                  <div class="image-cropper category-1" 
                    data-height="320" 
                    data-width="320" 
                    data-exportZoom="2" 
                    @if (isset($category))
                      data-src="{{ asset($storage_url.'img/products/category/'.$category->category_image1) }}"
                    @endif
                    >

                    <div class="cropit-preview">
                      <div class="caption">
                        <p>Minimum resolution 640x640 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>

                    <input type="file" class="cropit-image-input" />
                  </div>
                </div>
                {{-- /. main icon --}}

                {{-- long image --}}
                <div class="" style="width: 400px; margin: 0 auto 20px auto;">
                  <div class="image-cropper category-2" 
                    data-height="80" 
                    data-width="400" 
                    data-exportZoom="4" 
                    @if (isset($category))
                      data-src="{{ asset($storage_url.'img/products/category/'.$category->category_image2) }}"
                    @endif
                    >

                    <div class="cropit-preview">
                      <div class="caption">
                        <p>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>

                    <input type="file" class="cropit-image-input" />
                  </div>
                </div>
                {{-- /. long image --}}

              </div>
              {{-- /. image wrapper --}}

              {{-- input wrapper --}}
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 panel panel default">
                <div class="panel-body">
                  
                {{-- Language tab --}}
                <ul class="nav nav-tabs m-t-20">
                  @foreach(config('translatable.locales') as $lang => $language)
                    <li class="@if($loop->first) active @endif">
                      <a href="#{{ $lang }}" data-toggle="tab">{{ $language }}</a>
                    </li>
                  @endforeach
                </ul>
                {{-- Language tab --}}

                {{-- Tab content --}}
                <section class="tab-content">

                  @foreach(config('translatable.locales') as $lang => $language)

                  <div class="tab-pane @if($loop->first) active @endif" id="{{ $lang }}">
                  <br>

                    <div class="row">
                      
                      {{-- title --}}
                      <div class="form-group">
                        <label for="title" class="col-lg-2 col-md-2 control-label">Name</label>
                        <div class="col-lg-8 col-md-8 col-xs-12 no-gutter">
                          <input type="text" class="form-control" name="name[{{ $lang }}]"
                            placeholder="Name" value="{{ isset($category) ? $category->hasTranslation($lang) ? $category->translate($lang)->category_name : old('name.'.$lang) : old('name.'.$lang) }}">
                        </div>
                      </div>
                      {{-- /. title --}}

                    </div>

                  </div>

                  @endforeach

                </section>    
                {{-- /. Tab content --}}
                </div>
              </div>
              {{-- /. input wrapper --}}
            </div>
            
            <div class="form-group">
              <div class="col-md-12">
                <button type="submit" class="btn btn-primary btn-sm btn-image-submit">Save</button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
              </div>
            </div>

          </form>
        </div>
				</section>

			</div>
		</div>

	</div>					
@endsection
