@extends('layouts.masterBackend')

@section('title')
  {{ucwords($page)}}
@endsection

@section('content')
    <!-- MAIN CONTENT -->
    <div class="col-xs-12" style="margin-bottom: 10px">
      <a href="{{route('beViewProducts',['id'=>$product->product_category])}}" class="btn btn-primary">@lang('backend.back')</a>
    </div>
    <div class="container-fluid">
    	<div class="row">
        <div class="col-xs-12">
			    <div class="panel panel-primary">
			    	<div class="panel-heading">
              <h2>
                @lang('backend.product-images')
                @if(count($product_detail)<3)
  			    		  <button class="btn btn-success" data-toggle="modal" data-target="#addImage">@lang('backend.new-images')</button>
                @endif
              </h2>
			    	</div>
			    	<div class="panel-body">
				    	@if(Session::has('message-image'))
  							<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-image') }}</p>
  							</div>
						  @endif
				    	<div class="table-responsive">
				    		<table id="productDetailTable" class="table table-hover">
							    <thead>
								    <tr>
								    	<th class="text-center">#</th>
								      <th class="text-center">@lang('backend.product-images')</th>
								      <th class="text-center">@lang('backend.options')</th>
								    </tr>
							    </thead>
							    <tbody>
                    @foreach ($product_detail as $key => $val)
                      <tr class="{{($product->product_image == $val->detail_image)?'warning':''}}">
                        <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->detail_code.'/'.$val->detail_image) }}" style="max-height: 200px; height: 100%;margin: 0 auto; width: auto;">
                        </td>
                        <td class="text-center">
                          @if($product->product_image != $val->detail_image)
                            <button title="Make Primary" class="btn btn-warning" data-toggle="modal" data-target="#makeprimary{{ $val->id }}"><i class="fa fa-star" aria-hidden="true"></i></button>
                            <div id="makeprimary{{ $val->id }}" class="modal fade" role="dialog">
                              <div class="modal-dialog modal-sm">

                              {!! Form::open(['url' => route('beSetPrimaryImage',['id'=>$val->detail_code]),'method'=>'put']) !!}
                                {!! Form::hidden('id',$val->id) !!}
                                {!! Form::hidden('code',$val->detail_code) !!}
                                <div class="modal-content text-center">
                                  <div class="modal-body">
                                    <h3>@lang('backend.ask-set-as-primary')</h3>
                                    <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/products/'.$val->detail_code.'/'.$val->detail_image) }}">
                                    <br>
                                    <button type="submit" class="btn btn-primary">@lang('backend.ok')</button>
                                    <button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
                                  </div>
                                </div>
                              {!! Form::close() !!}

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

                              {!! Form::open(['url' => route('beDeleteDetailImage',['id'=>$val->id]),'method'=>'delete']) !!}
                                {!! Form::hidden('id',$val->id) !!}
                                {!! Form::hidden('code',$val->detail_code) !!}
                                <div class="modal-content text-center">
                                  <div class="modal-body">
                                    <h3>@lang('backend.ask-delete-image')</h3>
                                    <img class="img img-responsive" alt="image" src="{{ asset($storage_url.'img/products/'.$val->detail_code.'/'.$val->detail_image) }}">
                                    <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>
                          @else
                            <button title="Make Primary" class="btn disabled" data-toggle="modal"><i class="fa fa-star" aria-hidden="true" style="color:#f0ad4e"></i></button>
                            <button title="Update" class="btn btn-warning" data-target="#updateImage{{$val->id}}" data-toggle="modal"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                          @endif
                        </td>
                      </tr>
                    @endforeach

							    </tbody>
							  </table>
				    	</div>

              @if(count($product_detail)<3)
                {{-- ADD NEW DETAIL IMAGE --}}
                <div id="addImage" class="modal fade" role="dialog">
      						<div class="modal-dialog">
      							<div class="modal-content">
      								<div class="modal-header">
      									<h2>@lang('backend.add-image')</h2>
      								</div>
      								{!! Form::open(['url' => route('beSaveDetailImage'),'method' => 'post','files'=>true, 'class' => 'image-form']) !!}
                      {!! Form::hidden('code',$product->product_code) !!}
                      {!! Form::hidden('image') !!}
      								<div class="modal-body container-fluid">
      									@if(Session::has('message-addimage'))
      										<div id="message-addimage" 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-addimage') }}</p>
      										</div>
      									@endif

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

                          {{-- Image upload --}}
                          <div class="" style="width: 500px; margin: 0 auto 20px auto;">
                            <div class="image-cropper" data-height="450" data-width="300" data-exportZoom="2">
                              <div class="cropit-preview">
                                <div class="caption">
                                  <p>@lang('backend.minimum-reslution') 600x900 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>
      								<div class="modal-footer">
      									<button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.save')</button>
      									<button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
      								</div>
      								{!! Form::close() !!}
      							</div>
      						</div>
      					</div>
              @endif

              @foreach ($product_detail as $key => $detail)
                <div id="updateImage{{ $detail->id }}" class="modal fade" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h2>@lang('backend.upload-image')</h2>
                    </div>
                    {!! Form::open(['url' => route('updateDetailImage',['id'=>$detail->id]),'method' => 'put','files'=>true, 'class' => 'image-form']) !!}
                    {!! Form::hidden('code',$detail->detail_code) !!}
                    {!! Form::hidden('image') !!}
                    @php
                      if($product->product_image == $detail->detail_image){
                        $is_primary = 'yes';
                      }else{
                        $is_primary = 'no';
                      }
                    @endphp
                    {!! Form::hidden('is_primary',$is_primary) !!}
                    <div class="modal-body container-fluid">
                      @if(Session::has('message-addimage'))
                        <div id="message-addimage" 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-addimage') }}</p>
                        </div>
                      @endif

                      <div class="col-xs-12">
                        {{-- Image upload --}}
                        <div class="" style="width: 500px; margin: 0 auto 20px auto;">
                          <div class="image-cropper" data-height="450" data-width="300" data-exportZoom="2" data-src="{{asset($storage_url.'img/products/'.$detail->detail_code.'/'.$detail->detail_image) }}">
                            <div class="cropit-preview">
                              <div class="caption">
                                <p>@lang('backend.minimum-resolution') 600x900 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>
                    <div class="modal-footer">
                      <button type="submit" class="btn btn-primary btn-image-submit">@lang('backend.save')</button>
                      <button class="btn btn-default" data-dismiss="modal">@lang('backend.cancel')</button>
                    </div>
                    {!! Form::close() !!}


                  </div>
                </div>
              </div>
              @endforeach
			    	</div>
			    </div>
		    </div>

        <div class="col-xs-12">
			    <div class="panel panel-primary">
			    	<div class="panel-heading">
              <h2>
                @lang('backend.product-detail')
              </h2>
			    	</div>

            {!! Form::open(['url'=>route('beUpdateProduct',['id'=>$product->id]),'method'=>'put']) !!}
			    	<div class="panel-body">
				    	@if(Session::has('message-detail'))
  							<div id="message-detail" 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-detail') }}</p>
  							</div>
						  @endif
              <div class="row">
                <div class="col-xs-12">
                  <div class="row">

                    <div class="form-group col-xs-12 col-sm-3">
                      <label for="category" class="control-label">@lang('backend.category')</label>
                      <input type="text" class="form-control" readonly value="{{ $product->category->category_name or '' }}">
                    </div>

                    <div class="form-group col-xs-12 col-sm-3">
                      <label for="price" class="control-label">@lang('backend.product-price')</label>
                      <div class="input-group">
                        <span class="input-group-addon">{{ $masterCurrency or '' }}</span>
                        <input type="number" class="form-control" name="product_price" value="{{ $product->product_price or 0 }}">
                      </div>
                      <div class="{{ $errors->has('product_price') ? ' has-error' : '' }}">
                        @if ($errors->has('product_price'))
                            <span class="help-block">
                                <strong>{{ $errors->first('product_price') }}</strong>
                            </span>
                        @endif
                      </div>
                    </div>

                    <div class="form-group col-xs-12 col-sm-3">
                      <label for="weight" class="control-label">@lang('backend.product-weight')</label>
                      <div class="input-group">
                        <input type="number" class="form-control" name="product_weight" value="{{ $product->product_weight or 0 }}">
                        <span class="input-group-addon">kg</span>
                      </div>
                      <div class="{{ $errors->has('product_weight') ? ' has-error' : '' }}">
                        @if ($errors->has('product_weight'))
                            <span class="help-block">
                                <strong>{{ $errors->first('product_weight') }}</strong>
                            </span>
                        @endif
                      </div>
                    </div>

                    <div class="form-group col-xs-12 col-sm-3">
                      <label for="price" class="control-label">@lang('backend.average-production-time')</label>
                      <div class="input-group">
                        <input type="number" class="form-control" name="production_time" value="{{ $product->production_time or 0 }}">
                        <span class="input-group-addon">day(s)</span>
                      </div>
                      <div class="{{ $errors->has('production_time') ? ' has-error' : '' }}">
                        @if ($errors->has('production_time'))
                            <span class="help-block">
                                <strong>{{ $errors->first('production_time') }}</strong>
                            </span>
                        @endif
                      </div>
                    </div>

                    <div class="form-group col-xs-12 col-sm-3">
                      <label for="price" class="control-label">@lang('backend.product-stock')</label>
                      <div class="input-group">
                        <input type="number" class="form-control" name="product_stock" value="{{ $product->product_stock or 0 }}">
                        <span class="input-group-addon">pcs</span>
                      </div>
                      <div class="{{ $errors->has('product_stock') ? ' has-error' : '' }}">
                        @if ($errors->has('product_stock'))
                            <span class="help-block">
                                <strong>{{ $errors->first('product_stock') }}</strong>
                            </span>
                        @endif
                      </div>
                    </div>

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

                    $get = $product->locales()->where('locale',$lang)->first();
                    if(empty($get)){
                      $name = $product->product_name;
                      $alt = $product->product_alt;
                      $desc = $product->product_content;
                    }else{
                      $name = $get->product_name;
                      $alt = $get->product_alt;
                      $desc = $get->product_content;
                    }
                  @endphp
                  <div class="col-xs-12 col-sm-6">
                    <div class="panel panel-info">
                      <header class="panel-heading">
                        <h3>{{$lang_ext}}</h3>
                      </header>
                      <div class="panel-body">
                        <div class="form-group">
                          {!! Form::label('product_name',__('backend.product_name'),['class'=>'control-label']) !!}
                          <div class="{{ $errors->has('product_name') ? ' has-error' : '' }}">
                            {!! Form::text('product_name['.$lang.']',$name,['class'=>'form-control']) !!}
                            @if ($errors->has('product_name'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('product_name') }}</strong>
                                </span>
                            @endif
                          </div>
                        </div>
                        <div class="form-group">
                          {!! Form::label('product_alt',__('backend.seo'),['class'=>'control-label']) !!}
                          <div class="{{ $errors->has('product_alt') ? ' has-error' : '' }}">
                            {!! Form::text('product_alt['.$lang.']',$alt,['class'=>'form-control']) !!}
                            @if ($errors->has('product_alt'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('product_alt') }}</strong>
                                </span>
                            @endif
                          </div>
                        </div>
                        <div class="form-group">
                          {!! Form::label('product_content',__('backend.product_description'),['class'=>'control-label']) !!}
                          <div class="{{ $errors->has('product_content') ? ' has-error' : '' }}">
                            {!! Form::textarea('product_content['.$lang.']',$desc,['class'=>'form-control']) !!}
                            @if ($errors->has('product_content'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('product_content') }}</strong>
                                </span>
                            @endif
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
			    	</div>
            <footer class="panel-footer text-center">
  						<button type="submit" class="btn btn-primary">@lang('backend.update')</button>
  					</footer>
            {!! Form::close() !!}
			    </div>
		    </div>
    	</div>
    </div>
@endsection

@section('script')
<script type="text/javascript">
  $("#productDetailTable").DataTable();
  @if ($errors->all())
      $("#addImage").modal('show');
  @endif
</script>
@endsection
