@extends ('layouts.app')
@section ('content')

    <div class="panel padding-10">
        @include('partials.messages')

        <div class="row">
            <div class="col-md-4 m-t-30">
                {!! Form::model($product, array('route' => ['product.update', $product->id], 'method' => 'PUT', 'files' => true ) ) !!}

                    {!! csrf_field() !!}

                    @include('products.partials.new_form_fields')
                    <input type="hidden" id="product_id" value="{{ $product->id}}"/>
                    <input type="hidden" id="orientation" value="{{ (empty($rotate)) ? 'normal' : '_flipped' }}"/>

                    @if(empty($rotate))
                        <input type="hidden" id="json_top" value="{{ $product->top}}"/>
                        <input type="hidden" id="json_bottom" value="{{ $product->bottom}}"/>
                    @else
                        <input type="hidden" id="json_top" value="{{ $product->top_flipped}}"/>
                        <input type="hidden" id="json_bottom" value="{{ $product->bottom_flipped}}"/>
                    @endif


                    <input type="hidden" id="json_img" value="{{ str_replace("https://stocklevla.s3.eu-west-1.amazonaws.com/" , "" , $product->image_url) }}"/>

                    <button type="submit" class="btn btn-massive m-t-20">Update</button>

                {!! Form::close() !!}

                <a href="{{ route('product.create') }}" class="btn btn-massive m-t-30 m-b-30">+ Add New Stock Item</a>
                <div class="col-xs-6 padding-5">



                  @if($prev)
                    <a href="{{ route('product.edit', $prev) }}" class="btn btn-massive m-t-30 m-b-30">
                      <i class="fa fa-chevron-left m-r-5" aria-hidden="true"></i>
                      Previous Item
                    </a>
                  @endif
                </div>
                <div class="col-xs-6 padding-5">
                  @if($next)
                    <a href="{{ route('product.edit', $next) }}" class="btn btn-massive m-t-30 m-b-30">
                      Next Item
                      <i class="fa fa-chevron-right m-l-5" aria-hidden="true"></i>
                    </a>
                  @endif
                </div>
                <div style="clear:both"></div>
            </div>

            <div class="col-md-6">

                <div id="splitter-controls" style="display:{{ ($product->unit_type_id == 3) ? 'none' : 'block' }} !important;">
                    <button class="measure-bottom btn btn-tabletpos pull-right m-r-5"><i class="fa fa-arrow-down m-r-10"></i> Set Bottom</button>
                    <button class="measure-top btn btn-tabletpos pull-right m-r-5"><i class="fa fa-arrow-up m-r-10"></i> Set Top</button>
                    <button id="generatepreview" class="generate btn btn-tabletpos pull-right m-r-5"><i class="m-r-10"></i> Generate & Preview</button>
                    <a href="{{ route('product.edit',$product->id) }}{{ (empty($rotate))? '/rotate' : '' }}" class="btn btn-tabletpos pull-left m-r-5"><i class="fa fa-repeat m-r-10"></i> Rotate</a>
                </div>
                <div id="splitter-functions">
                    <button class="set-top btn btn-tabletpos pull-right m-r-5"><i class="fa fa-check m-r-10"></i> Set</button>
                    <button class="set-bottom btn btn-tabletpos pull-right m-r-5"><i class="fa fa-check m-r-10"></i> Set</button>
                </div>

                <br><br>

                <div id="pane">
                    <div id="one"></div>
                    <div id="two"></div>

                    <div class="padding-10">

                        @if(empty($rotate))
                            <strong>From Top:</strong> <span id="top-measure">{{ !empty($product->top) ? $product->top.'px' : ''}}</span>
                            <br>
                            <strong>From Bottom:</strong> <span id="bottom-measure">{{ !empty($product->bottom) ? $product->bottom.'px' : ''}}</span>
                        @else
                            <strong>From Top:</strong> <span id="top-measure">{{ !empty($product->top_flipped) ? $product->top_flipped.'px' : ''}}</span>
                            <br>
                            <strong>From Bottom:</strong> <span id="bottom-measure">{{ !empty($product->bottom_flipped) ? $product->bottom_flipped.'px' : ''}}</span>
                        @endif

                    </div>

                    <div id="pane_image" class="{{ !empty($rotate) ? 'rotate' : '' }}" style="background: url('{{ $product->image_url }}?cache=1742052898');"></div>
                    
                    @if($product->unit_type_id != 3)
                        @if(empty($rotate))
                            @if(!empty($product->top))
                                <span class="bottle-stripe stripe-top" style="top:{{ $product->top }}px"></span>
                            @endif
                            @if(!empty($product->bottom))
                                <span class="bottle-stripe stripe-bottom" style="bottom:{{ $product->bottom }}px"></span>
                            @endif
                        @else
                            @if(!empty($product->top_flipped))
                                <span class="bottle-stripe stripe-top" style="top:{{ $product->top_flipped }}px"></span>
                            @endif
                            @if(!empty($product->bottom_flipped))
                                <span class="bottle-stripe stripe-bottom" style="bottom:{{ $product->bottom_flipped }}px"></span>
                            @endif
                        @endif
                    @endif
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 m-t-10">
                <div class="googleresults" id="googleresults" style="display:block;">

                </div>
            </div>
        </div>

    </div>

@stop