@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>
                        @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/>
        <!-- type input radio -->
        <div class="form-group @if(count($errors) && $errors->has('gender')) has-error @endif">
            <div class="col-md-12">
                <label class="col-md-4 control-label" for="radioType">Type</label>
            </div>
            <div class="col-md-12 radio">
                <label>
                    <input type="radio" name="gender" id="gender" value="b" @if($item->gender=='b') checked @endif>
                    Both
                </label>
                <label>
                    <input type="radio" name="gender" id="gender" value="m" @if($item->gender=='m') checked @endif>
                    Male
                </label>
                <label>
                    <input type="radio" name="gender" id="gender" value="f" @if($item->gender=='f') checked @endif>
                    Female
                </label>
            </div>
            @if($errors->has('type'))
                <div class="col-md-12">
                    <span class="glyphicon-alert"></span> {{$errors->first('gender')}}
                </div>
            @endif
        </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_MODELS_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="@if(count($errors) && $errors->has('file')) {{$item->img}} @endif" />
            </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/>
        <!-- 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