@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 Upgrade</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    {{Form::open(['route'=>["admin.upgrades.update",$upgrade->id],'role'=>"form",'method'=>"put"])}}
                    <div class="form-group">
                        {{Form::label("spec_category","Spec Category")}}

                        {{Form::select("spec_category",$spec_categories,$upgrade->spec_category_id,['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",$upgrade->code,['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",$upgrade->name,['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",$upgrade->description,['class'=>'form-control m-input'])}}
                            {{Form::label("description",trans("constants.description"))}}
                        </div>

                        <div class="form-group form-md-line-input form-md-floating-label">
                            {{Form::text("short_title",$upgrade->short_title,['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",$upgrade->part_number,['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",$upgrade->price,['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,$upgrade->is_base,['class'=>'form-control m-input'])}}
                        </div>
                        <div class="form-group">
                            {{Form::label("items","Items")}}
                            {{Form::select("items[]",$upgrade->items->pluck("nickname",'id'),$upgrade->items->pluck('id')->toArray(),["class"=>"select2-multiple",'id'=>"items","multiple"=>"multiple",'style'=>"width:100%"])}}
                        </div>


                        <div class="form-group mt-20px">
                            <div class="panel-group" id="accordion">
                                @foreach($specCategoriesUpgrades as $category => $specCategoryUpgrades)
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion"
                                                   href="#{{$loop->index}}">{{ $category }}</a>
                                            </h4>
                                        </div>
                                        <div id="{{$loop->index}}" class="panel-collapse collapse {{$upgrade->upgrade_relations->whereIn('id', collect($specCategoryUpgrades)->keys()->toArray())->count() ? 'show' : ''}}">
                                            <div class="panel-body">
                                                <ul class="list-group">
                                                    <li class="list-group-item">
                                                        <div class="form-group form-check">
                                                            <ul class="list-group">
                                                                @foreach($specCategoryUpgrades as $upg)
                                                                    @if($upg->id == $upgrade->id)
                                                                        @continue
                                                                    @endif
                                                                    <li class="list-group-item">
                                                                        <input type="checkbox"
                                                                               class="form-check-input"
                                                                               name="upgrades[{{$upg->id}}][selected]" {{ ($us = $upgrade->upgrade_relations->where('id', $upg->id)->first()) ? 'checked' : '' }}>
                                                                        <input
                                                                            name="upgrades[{{$upg->id}}][additional_price]"
                                                                            type="number"
                                                                            placeholder="additional price"
                                                                            class="form-control d-inline-block w-auto mx-10px"
                                                                            value="{{ $us ? $us->pivot->additional_price : '' }}"
                                                                        />
                                                                        <label
                                                                            class="form-check-label">
                                                                            {{ $upg->name }}
                                                                            | {{ $upg->code??'-' }}
                                                                            | {{ $upg->short_title??'-' }}
                                                                            | {{ $upg->price??'-' }}
                                                                            | {{ $upg->is_base ? 'Base' : 'Not Base' }}
                                                                        </label>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </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