@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">Update Spec</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    {{Form::open(['route'=>["admin.specs.update",$spec->id],'role'=>"form",'method'=>"put"])}}
                    <div class="form-body">
                         @if($spec->spec_category->is_tab)
                            <p>Tab</p>
                        @endif
                          <div class="form-group">
                            {{Form::label("spec_category","Spec Category")}}

                            {{Form::select("spec_category",$spec_categories,$spec->spec_category_id,['class'=>"select2 form-control","id"=>"categories"])}}
                        </div>

                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("title",$spec->title,['class'=>'form-control m-input'])}}
                            {{Form::label("title","Listing Title")}}
                        @if($spec->spec_category->is_on_listing)
                            <p class="text-danger">Required</p>
                            @endif
                        </div>


                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("short_title",$spec->short_title,['class'=>'form-control m-input'])}}
                            {{Form::label("short_title","Short Title")}}
                            @if($spec->spec_category->is_on_title)
                            <p class="text-danger">Required</p>
                            @endif
                        </div>

                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("nickname",$spec->nickname,['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",$spec->description,['class'=>'form-control m-input'])}}
                            {{Form::label("spec","Description")}}
                        </div>

                        <div class="form-group">
                            {{Form::label("items","Items")}}
                            {{Form::select("items[]",$spec->items->pluck("nickname",'id'),$spec->items->pluck('id')->toArray(),["class"=>"select2-multiple",'id'=>"items","multiple"=>"multiple",'style'=>"width:100%"])}}
                        </div>


                        <div class="form-actions noborder">
                            <button type="submit" class="btn blue">@lang("constants.save")</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.name || repo.text;
        }
        $.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