@extends('layouts.backoffice')

@section('content')

    <form action="{{url($modelNav['store'])}}" method="post">
        {{ csrf_field() }}
        <!-- name input text -->
        <div class="form-group @if(count($errors) && $errors->has('name')) has-error @endif">
            <div class="col-md-12">
                <label class="col-md-4 control-label" for="inputName">Name</label>
            </div>
            <div class="col-md-12">
                <input name="name" id="inputName" type="text" placeholder="name of the model" class="form-control input-sm">
            </div>
            @if($errors->has('name'))
                <div class="col-md-12">
                    <span class="glyphicon-alert"></span> {{$errors->first('name')}}
                </div>
            @endif
        </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">
                    Both
                </label>
                <label>
                    <input type="radio" name="gender" id="gender" value="m">
                    Male
                </label>
                <label>
                    <input type="radio" name="gender" id="gender" value="f">
                    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="http://placehold.it/150x150" />
                <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/>
        <!-- Button -->
        <div class="form-group text-center">
            <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="create" value="1">
    </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