@extends('layouts.backoffice')

@section('content')

    <form action="{{url($modelNav['update'])}}" method="post" enctype="multipart/form-data">
        {{ csrf_field() }}
                <!-- TAB NAVIGATION -->
        <ul class="nav nav-tabs" role="tablist">
            @foreach($availableLocales as $locale)
                <li @if($locale==app()->getLocale()) class="active"@endif><a href="#{{$locale}}" role="tab" data-toggle="tab">{{$locale}}</a></li>
            @endforeach
        </ul>
        <div class="tab-content">
            @foreach($availableLocales as $locale)
                <div class="@if($locale==app()->getLocale()) active @endif tab-pane fade in" id="{{$locale}}">
                    <!-- Text input-->
                    <div class="form-group @if($errors->has('name.'.$locale)) has-error @endif">
                        <div class="col-md-12">
                            <label class="col-md-4 control-label" for="textinput">Name</label>
                        </div>
                        <div class="col-md-12">
                            <input name="name[{{$locale}}]" type="text" placeholder="{{trans('site.input_placeholder_name_of_the_model')}}" class="form-control input-sm" value="{{$item->translate($locale)->name}}">
                        </div>
                        <div class="col-md-12">
                            <label class="col-md-4 control-label" for="textinput">Tipo de Pele</label>
                        </div>
                        <div class="col-md-12">
                            <input name="leathername[{{$locale}}]" type="text" placeholder="{{trans('site.input_placeholder_name_of_the_model')}}" class="form-control input-sm" value="{{$item->translate($locale)->leathername}}">
                        </div>
                        @if($errors->has('name.'.$locale))
                            <div class="col-md-12">
                                <span class="glyphicon-alert"></span> {{$errors->first('name.'.$locale)}}
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
        <div class="clearfix"></div>
        <br/>

        <div class="form-group @if(count($errors) && $errors->has('file')) has-error @endif">
            <div class="col-md-12">
                <img src="{{url(env('IMG_TEXTURE_THUMB_FOLDER')).'/'.$item->img}}" />
                <br />
                <!-- The file input field used as target for the file upload widget -->
                <input class="fileupload" type="file" name="file">
                <!-- The container for the uploaded files -->
                <input type="hidden" class="file_input" name="file" value="" />
            </div>
            <div class="col-md-12" @if(!$errors->has('file'))style="display: none"@endif>
                <span class="glyphicon-alert"></span><span class="file_error"></span>
            </div>
        </div>
        <div class="clearfix"></div>
        <br/>

        <div class="form-group @if(count($errors) && $errors->has('checkAll')) has-error @endif">
            <div class="col-md-12">
                <h3>{{trans('site.available_on_part')}}</h3>
                <p><input type="checkbox" class="checkAll" name="checkAll" data-target=".texturePartSelect"> Check/Uncheck All</p>
                @foreach($parts as $p)
                    <label class="checkbox-inline"><input type="checkbox" class="texturePartSelect" name="texturepart[]" value="{{$p->id}}" @if(in_array($p->id,$item_parts)) checked @endif>{{$p->name}}</label>
                @endforeach
            </div>
        </div>
        <div class="clearfix"></div>
        <br/>

        <div class="form-group @if(count($errors) && $errors->has('checkAll')) has-error @endif">
            <div class="col-md-12">
                <h3>{{trans('site.default_stich')}}</h3>
                    @foreach($colors as $c)
                    <div class="col-sm-3">
                        <div style="float:left;width:20px;height:20px;background-color: #{{$c->hex}};"></div> &nbsp;
                        <input type="radio" name="default_stich_color_id" value="{{$c->id}}" @if($c->id==$item->default_stich_color_id) checked @endif> {{$c->name}}
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <br/>

        <!-- Button -->
        <div class="form-group">
            <div class="col-md-12">
                @if(isset($modelNav['base']) && $modelNav['base'])
                    <a href="{{url($modelNav['base'])}}" class="btn btn-primary" role="button">&nbsp;Back</a>
                @endif
                <button name="save" class="btn btn-primary btn-success">Save</button>
            </div>
        </div>
        <input type="hidden" name="update" value="1">
        <input type="hidden" name="id" value="{{$item->id}}">
    </form>

@endsection
@section('styles')
    <link rel="stylesheet" href="{{URL::to('/')}}/css/backoffice/fileupload/jquery.fileupload.css">
@endsection
@section('scripts')
    <script src="{{ URL::to('/')}}/js/backoffice/fileupload/vendor/jquery.ui.widget.js"></script>
    <script src="{{ URL::to('/')}}/js/backoffice/fileupload/jquery.iframe-transport.js"></script>
    <script src="{{ URL::to('/')}}/js/backoffice/fileupload/jquery.fileupload.js"></script>
    <script>
        var controller = '{!!$controller!!}';
        $(function () {
            'use strict';
            //$('#progress').hide();
            // Change this to the location of your server-side upload handler:
            var url = "{{ URL::to('/backoffice/fileupload')}}";
            $('.fileupload').each(function(){
                $(this).fileupload({
                    url: url,
                    dataType: 'json',
                    limitMultiFileUploads:1,
                    formData: {'controller': controller,'fieldname':$(this).attr('name')},
                    progress:function(){
                        $('#progress').show();
                    },
                    done: function (e, data) {
                        $('#progress').hide();
                        var v = data.result;
                        if(v.error) {
                            $('input[name="'+v.fieldname+'"]').closest('.form-group').addClass('has-error');
                            $('.'+v.fieldname+'_error').closest('div').show();
                            $('.'+v.fieldname+'_error').text(v.error);
                        } else {
                            $('input[name="'+v.fieldname+'"]').closest('.form-group').removeClass('has-error');
                            $('input[name="'+v.fieldname+'"]').closest('.form-group').find('img').first().attr('src',v.file_thumb_url);
                            $('.'+v.fieldname+'_input').val(v.name);
                            $('.'+v.fieldname+'_error').closest('div').hide();
                        }
                    }
                });
            });
        });
    </script>
@endsection