@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 Upgrade</span>
                    </div>
                </div>
                @isset($errors)
                    @foreach($errors as $key => $error)
                        <div dir="rtl" class="alert alert-danger alert-dismissible" role="alert">
                            <strong>{{'خطأ !'}}</strong> {{$error[0]}}
                            <button dir="ltr" type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                        </div>
                    @endforeach
                @endisset
                <div class="portlet-body form">
                    {{Form::open(['route'=>"admin.upgrades.store",'role'=>"form"])}}
                    <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-body">

                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("code",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("code","Code")}}
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("name",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("name",trans("constants.name"))}}
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::textarea("description",NULL,['class'=>'form-control m-input','dir'=>'rtl'])}}
                            {{Form::label("description",trans("constants.description"))}}
                        </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("part_number",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("part_number","Part Number")}}
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("price",NULL,['class'=>'form-control m-input'])}}
                            {{Form::label("price","Price")}}
                        </div>

                        <div class="form-group">
                            {{Form::label("is_base","Is Base")}}
                            {{Form::checkbox("is_base",1,0,['class'=>'form-control m-input'])}}
                        </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