@extends("admin.layouts.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2-bootstrap.min.css"
          rel="stylesheet"
          type="text/css"/>
@endsection
@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <i class="icon-plus font-green"></i>
                        <span class="caption-subject bold uppercase">New Specs</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    {{Form::open(['route'=>"admin.specs.store",'role'=>"form"])}}
                    <div class="form-body">
                        <div class="form-group">
                            {{Form::label("spec_category","Spec Category")}}

                            {{Form::select("spec_category",$spec_categories,NULL,['class'=>"select2 form-control","id"=>"categories"])}}
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("title",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("title","Listing Title")}}
                        </div>
                         <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("short_title",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("short_title","Short Title")}}
                        </div>
                         <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("nickname",null,['class'=>'form-control m-input'])}}
                            {{Form::label("nickname","Nickname")}}
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::textarea("description",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("description","Description")}}
                        </div>
                        <div class="form-group">
                            {{Form::label("items","Items")}}
                            {{Form::select("items[]",[],null,["class"=>"select2-multiple",'id'=>"items","multiple"=>"multiple",'style'=>"width:100%"])}}
                        </div>

                        <div class="form-actions noborder">
                            <button type="submit" class="btn blue">@lang("constants.create")</button>
                            <button type="reset" class="btn default">@lang("constants.clear")</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/js/select2.full.min.js"
            type="text/javascript"></script>
    <script>

        function formatRepo(repo) {
            console.log(repo);
            if (repo.loading) return repo.text;
            var markup = '<div class="clearfix">' +
                '<div clas="col-sm-12">' +
                '<div class="col-sm-12"><h4>' + repo.price + " - " + repo.nickname + '</h4></div>' +
                '</div></div>';

            return markup;
        }

        function formatRepo2 (repo) {
            console.log(repo);
            if (repo.loading) return repo.text;
            var markup = '<div class="clearfix">' +
            '<div clas="col-sm-12">' +
            '<div class="col-sm-12"><h4>' +repo.price+" - "+repo.nickname+'</h4></div>' +
            '</div></div>';

            return markup;
        }

        function formatRepoSelection (repo) {
            return repo.text || repo.name || repo.title;
        }
        $.fn.select2.defaults.set("theme", "bootstrap");
        $(".select2, .select2-multiple").select2({
            placeholder: "Select category or more",
            width: null
        });
           $("#items").select2({
            closeOnSelect: false,
            multiple:true,
            with:"100%",
           // placeholder: "Search for an Item",
            ajax: {
                url: "{{route('admin.items.search')}}",
                dataType: 'json',
                delay: 250,
                data: function (data) {
                  return {
            q: data.term, // search term
            page: data.page
        };
    },
    processResults: function (data, page) {
      return {
        results: data
    };
},
cache: true
},
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
  });

    </script>
@endsection