@extends('layouts.manage')
@section('title', 'Add new category')

@section('header')
  <a href="{{ route('manage.product.index') }}" class="{{ Nav::isRoute('manage.product.index') }}">
    <span class="menu-icon">
      <img src="{{ asset($storage_url.'img/manage-icons/products.jpg') }}" alt="">
    </span><span class="menu-text">
      @lang('manage.back-to-product-manager')
    </span>
  </a>
@endsection

@section('content')

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

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

        <form action="{{ $route or route('manage.category.store') }}" method="POST" enctype="multipart/form-data" class="form-horizontal image-form">

          <input type="hidden" name="image1">
          <input type="hidden" name="image2">
          
          {{ csrf_field() }}
          {{ $method or method_field('POST') }}

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

            @if (config('corepackage.lowcost.activate'))

              {{-- image wrapper --}}
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                
                <label for="icon">@lang('manage.category-icon')</label>
                
                {{-- 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" 
                    data-src="{{ isset($category) && $category->category_image1 ? asset($storage_url.'img/products/category/'.$category->category_image1) : '' }}"
                  >

                    <div class="cropit-preview">
                      <div class="caption">
                        <p>@lang('manage.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 --}}

              </div>


              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                
                {{-- long image --}}
                <label for="banner">@lang('manage.banner')</label>
                
                <div class="" style="width: 800px; margin: 0 auto 20px auto;">
                  <div class="image-cropper category-2" 
                    data-height="160" 
                    data-width="800" 
                    data-exportZoom="2" 
                    data-src="{{ isset($category) && $category->category_image2 ? asset($storage_url.'img/products/category/'.$category->category_image2) : '' }}"
                  >

                    <div class="cropit-preview">
                      <div class="caption">
                        <p>@lang('manage.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 --}}

            @endif


            {{-- input wrapper --}}
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="is-borderred">
              
              {{-- Language tab --}}
              @if (config('corepackage.locales.activate'))
                <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>
              @endif  
              {{-- 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">
                    
                    {{-- name --}}
                    <div class="form-group">
                      <label for="name" class="col-lg-2 col-md-2 control-label">@lang('manage.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="@lang('manage.new-category-name')" value="{{ isset($category) ? $category->hasTranslation($lang) ? $category->translate($lang)->category_name : old('name.'.$lang) : old('name.'.$lang) }}">
                      </div>
                    </div>
                    {{-- /. name --}}

                    {{-- alt --}}
                    @if (config('corepackage.lowcost.activate')=='yes')
                    <div class="form-group">
                      <label for="alt" class="col-lg-2 col-md-2 control-label">@lang('manage.alt')</label>
                      <div class="col-lg-8 col-md-8 col-xs-12 no-gutter">
                        <input type="text" class="form-control" name="alt[{{ $lang }}]"
                          placeholder="@lang('manage.alt')" value="{{ isset($category) ? $category->hasTranslation($lang) ? $category->translate($lang)->category_alt : old('alt.'.$lang) : old('alt.'.$lang) }}">
                      </div>
                    </div>
                    {{-- /. alt --}}
                    @endif

                  </div>
                </div>

                @endforeach

              </section>    
              {{-- /. Tab content --}}

                <div class="text-center">
                  <button type="submit" class="btn btn-primary btn-sm btn-image-submit"
                    style="display: block; width: 100%;">Save</button>
                </div>
              </div>

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

              {{-- table --}}
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-t-50">
                <div class="table-responsive">

                  <table class="table table-hover dt-initiate" data-url="{{ route('manage.api.categories') }}">
                    <thead>
                      <tr>
                        <th data-column="DT_Row_Index" data-search="false">#</th>
                        <th data-column="category_name">@lang('manage.name')</th>
                        <th data-column="category_reference">@lang('manage.no-reference')</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr></tr>
                    </tbody>
                  </table>         
                </div>                
              </div>
              {{-- /. table --}}

            </div>
          </form>

			</div>

		</div>
	</div>					
@endsection
