@extends('layouts.masterBackend')

@section('title', __('product-and-category'))

@section('content')
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-8">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h2>@lang('backend.all-category-icon')</h2>
          </div>
          {!! Form::open(['url' => route('saveCategoryIcon'),'method' => 'post','files'=>true, 'class' => 'image-form']) !!}
          {!! Form::hidden('image') !!}
          <div class="panel-body">
            @if(Session::has('message-icon'))
							<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-icon') }}</p>
							</div>
					  @endif

            {{-- Image upload --}}
            <div class="" style="width: 250px; margin: 0 auto 20px auto;">
              <div class="image-cropper" data-height="200" data-width="200" data-exportZoom="1" data-src="{{ isset($icon)?asset($storage_url.'img/products/category/'.$icon->setting_value):asset($storage_url.'img/img1x1.jpg') }}">
                <div class="cropit-preview">
                  <div class="caption">
                    <p>@lang('backend.minimum-resolution') 200x200 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>
            {{-- /. Image upload --}}

          </div>
          <div class="panel-footer text-center">
            <button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.update')</button>
          </div>
          {!! Form::close() !!}
        </div>
      </div>
      <div class="col-xs-12 col-sm-4">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h2>@lang('backend.currency')</h2>
          </div>
          {!! Form::open(['url' => route('saveCurrency'),'method' => 'post','files'=>true]) !!}
          <div class="panel-body">
            @if(Session::has('message-currency'))
							<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-currency') }}</p>
							</div>
					  @endif
            @php
              foreach ($currencies as $key => $value) {
                $c[$value->currency_code] = $value->currency_name." (".$value->currency_code.")";
              }
            @endphp
            <div class="form-group">
              <div class="text-center well">
                <h3 class="h1">{{$masterCurrency}}.</h3>
                @php
                  $get = App\Currency::where('currency_code',$masterCurrency)->first();
                @endphp
                <span class="label label-default">{{ $get->currency_name or "" }}</span>
              </div>
              {!! Form::select('select_currency',$c,$masterCurrency,['class'=>'form-control']) !!}
            </div>
          </div>
          <div class="panel-footer text-center">
            <button type="submit" class="btn btn-primary">@lang('backend.update')</button>
          </div>
          {!! Form::close() !!}
        </div>
      </div>
    </div>
  </div>
  <!-- MAIN CONTENT -->
  <div class="container-fluid">
  	<div class="row">

      <div class="col-xs-12">
		    <div class="panel panel-primary">
		    	<div class="panel-heading">
            <h2>
              @lang('backend.category')
			    		<button class="btn btn-success" data-toggle="modal" data-target="#addCategory">@lang('backend.new-category')</button>
              <button class="btn btn-warning" data-toggle="modal" data-target="#reorder">@lang('backend.arrange-order')</button>
            </h2>
		    	</div>
		    	<div class="panel-body">
			    	@if(Session::has('message-category'))
							<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-category') }}</p>
							</div>
					  @endif
			    	<div class="table-responsive">
			    		<table id="categoryTable" class="table table-hover">
						    <thead>
							    <tr>
							    	<th class="text-center">#</th>
                    <th>@lang('backend.name')</th>
                    <th>@lang('backend.products')</th>
							      <th class="text-center">@lang('backend.image') 1</th>
							      <th class="text-center">@lang('backend.image') 2</th>
							      <th class="text-center">@lang('backend.options')</th>
							    </tr>
						    </thead>
						    <tbody>
                  @foreach ($categories as $key => $val)
                    @php
                      $total = count(App\Product::where(['product_category'=>$val->id])->get());
                    @endphp
                    <tr>
                      <td class="text-center">{{$key+1}}</td>
                      <td>{{ $val->category_name }}</td>
                      <td>{{$total}} @lang('backend.products')</td>
                      <td>
                        <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/products/category/'.$val->category_image1) }}" style="max-height: 200px; height: 100%;margin: 0 auto; width: auto;">
                      </td>
                      <td>
                        <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/products/category/'.$val->category_image2) }}" style="max-height: 200px; height: 100%;margin: 0 auto; width: auto;">
                      </td>
                      <td class="text-center">
                        {{-- VIEW PRODUCTS --}}
                        <a class="btn btn-primary" href="{{ route('beViewProducts',['id'=>$val->id]) }}">
                            <i class="fa fa-external-link fa-fw"></i></span>
                        </a>
                        {{-- UPDATE --}}
                        <button title="Update Category" class="btn btn-warning" data-toggle="modal" data-target="#updCategory{{ $val->id }}"><i class="fa fa-pencil" aria-hidden="true"></i></button>

                        {{-- DELETE --}}
                        @if($total == 0)
                          <button title="Delete Category" class="btn btn-danger" data-toggle="modal" data-target="#deletecategory{{ $val->id }}"><i class="fa fa-trash" aria-hidden="true"></i></button>
                          <div id="deletecategory{{ $val->id }}" class="modal fade" role="dialog">
                            <div class="modal-dialog modal-sm">

                            {!! Form::open(['url' => route('beDeleteCategory',['id'=>$val->id]),'method'=>'delete']) !!}
                              {!! Form::hidden('id',$val->id) !!}
                              <div class="modal-content text-center">
                                <div class="modal-body">
                                  <h3>@lang('backend.delete-category') ?</h3>
                                  <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/products/category/'.$val->category_image2) }}">
                                  <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>
                        @endif
                      </td>
                    </tr>
                  @endforeach
						    </tbody>
						  </table>
			    	</div>

            {{-- ADD NEW CATEGORY --}}
            <div id="addCategory" class="modal fade" role="dialog">
  						<div class="modal-dialog modal-lg">
  							<div class="modal-content">
  								<div class="modal-header">
  									<h2>@lang('backend.add-category')</h2>
  								</div>
  								{!! Form::open(['url' => route('beSaveCategory'),'method' => 'post','files'=>true, 'class' => 'image-form']) !!}
                  {!! Form::hidden('image1') !!}
                  {!! Form::hidden('image2') !!}

  								<div class="modal-body container-fluid">
  									@if(Session::has('message-addcategory'))
  										<div id="message-addcategory" 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-addcategory') }}</p>
  										</div>
  									@endif

  									<div class="col-xs-12 col-sm-6">
                      {{-- Image upload --}}
                      <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">
                          <div class="cropit-preview">
                            <div class="caption">
                              <p>@lang('backend.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>
                      {{-- /. Image upload --}}
  									</div>

  									<div class="col-xs-12 col-sm-6">
                      {{-- Image upload --}}
                      <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">
                          <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>

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

                    <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 = "";
                          }
                        @endphp
                        <div class="col-xs-12 col-sm-6">
                          <div class="panel panel-info">
                            <div class="panel-heading">
                              <h3>{{ $lang_ext }}</h3>
                            </div>
                            <div class="panel-body">
                              <div class="form-group">
          											{!! Form::label('category_alt',__('backend.image-alt'),['class'=>'control-label']) !!}
          											<div class="{{ $errors->has('category_alt') ? ' has-error' : '' }}">
          												{!! Form::text('category_alt['.$lang.']','',['class'=>'form-control']) !!}
                                  @if ($errors->has('category_alt'))
                                      <span class="help-block">
                                          <strong>{{ $errors->first('category_alt') }}</strong>
                                      </span>
                                  @endif
          											</div>
          										</div>
                              <div class="form-group">
          											{!! Form::label('category_name',__('backend.name'),['class'=>'control-label']) !!}
          											<div class="{{ $errors->has('category_name') ? ' has-error' : '' }}">
          												{!! Form::text('category_name['.$lang.']','',['class'=>'form-control']) !!}
                                  @if ($errors->has('category_name'))
                                      <span class="help-block">
                                          <strong>{{ $errors->first('category_name') }}</strong>
                                      </span>
                                  @endif
          											</div>
          										</div>
                            </div>
                          </div>
                        </div>
                      @endforeach
                    </div>
  								</div>
  								<div class="modal-footer">
  									<button type="submit" class="btn btn-primary btn-image-submit-extra">@lang('backend.save')</button>
  									<button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
  								</div>
  								{!! Form::close() !!}
  							</div>
  						</div>
  					</div>

            {{-- UPDATE CATEGORIES --}}
            @foreach ($categories as $key => $val)
              <div id="updCategory{{$val->id}}" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h2>@lang('backend.update-category')</h2>
                    </div>
                    {!! Form::open(['url' => route('beUpdateCategory',['id'=>$val->id]),'method' => 'put','files'=>true, 'class' => 'image-form']) !!}
                    {!! Form::hidden('image1') !!}
                    {!! Form::hidden('image2') !!}
                  <div class="modal-body container-fluid">
                      @if(Session::has('message-addcategory'))
                        <div id="message-addcategory" 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-addcategory') }}</p>
                        </div>
                      @endif

                      <div class="col-xs-12 col-sm-6">
                        {{-- Image upload --}}
                        <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="{{asset($storage_url.'img/products/category/'.$val->category_image1)}}">
                            <div class="cropit-preview">
                              <div class="caption">
                                <p>@lang('backend.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>
                        {{-- /. Image upload --}}
                      </div>

                      <div class="col-xs-12 col-sm-6">
                        {{-- Image upload --}}
                        <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" data-src="{{asset($storage_url.'img/products/category/'.$val->category_image2)}}">
                            <div class="cropit-preview">
                              <div class="caption">
                                <p>@lang('backend.miminum-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>
                        {{-- /. Image upload --}}
                      </div>

                      <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 = $val->locales()->where('locale',$lang)->first();
                            if(empty($get)){
                              $alt = $val->category_alt;
                              $name = $val->category_name;
                            }else{
                              $alt = $get->category_alt;
                              $name = $get->category_name;
                            }
                          @endphp
                          <div class="col-xs-12 col-sm-6">
                            <div class="panel panel-info">
                              <div class="panel-heading">
                                <h3>{{ $lang_ext }}</h3>
                              </div>
                              <div class="panel-body">
                                <div class="form-group">
                                  {!! Form::label('category_alt',__('backend.image-alt'),['class'=>'control-label']) !!}
                                  <div class="{{ $errors->has('category_alt') ? ' has-error' : '' }}">
                                    {!! Form::text('category_alt['.$lang.']',$alt,['class'=>'form-control']) !!}
                                    @if ($errors->has('category_alt'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('category_alt') }}</strong>
                                        </span>
                                    @endif
                                  </div>
                                </div>
                                <div class="form-group">
                                  {!! Form::label('category_name',__('backend.name'),['class'=>'control-label']) !!}
                                  <div class="{{ $errors->has('category_name') ? ' has-error' : '' }}">
                                    {!! Form::text('category_name['.$lang.']',$name,['class'=>'form-control']) !!}
                                    @if ($errors->has('category_name'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('category_name') }}</strong>
                                        </span>
                                    @endif
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        @endforeach
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="submit" class="btn btn-primary btn-image-submit-extra">@lang('backend.save')</button>
                      <button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
                    </div>
                    {!! Form::close() !!}
                  </div>
                </div>
              </div>
            @endforeach
		    	</div>
		    </div>
	    </div>

  	</div>
  </div>

  @include('backend._components.order-modal')
@endsection

@section('script')
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<script type="text/javascript">
  $(".sortable").sortable();
  $("#categoryTable").DataTable();
  @if ($errors->has('category_image1'))
      $("#addCategory").modal('show');
  @elseif ($errors->has('category_image2'))
      $("#addCategory").modal('show');
  @endif

  $('select[name="select_currency"]').select2();
</script>
@endsection
