@extends('adminlte::page')

@section('content')
{!! Form::open(array(
'url' => "/admin/product-store",
'method' => 'post',
'class' => 'form-horizontal',
'id' =>'product-form',
'enctype' => 'multipart/form-data',
'role'=>'form',
'files' => true
)) !!}
<div class="box box-primary">
    @if ($errors->any())
        <div class="row">
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
    <!-- form start -->
    <div class="row">
        @foreach($mainAttributes as $field)
        @php $type = $field->attribute->type; @endphp
        <div class="box-body col-md-3">
            <div class="form-group">
                {!! Form::label($field->attribute->code, $field->attribute->name) !!}
                {!!Form::$type($field->attribute->code,'',['class'=>'form-control'])!!}
            </div>
        </div>
        @endforeach
        <div class="box-body col-md-3">
            <div class="form-group">
                {!! Form::label('main_category_id', 'Glavna Kategorija') !!}
                {!!Form::select('main_category_id',$categories,'',['class'=>'form-control', 'role' =>
                'textbox','id'=>'main-category','placeholder'=> 'Odaberite..'])!!}
            </div>
        </div>
        <div class="box-body col-md-3">
            <div class="form-group">
                {!! Form::label('category_id', 'Kategorija') !!}
                {!!Form::select('category_id',[],'',['class'=>'form-control', 'role' => 'textbox','id' =>
                'category'])!!}
            </div>
        </div>
        <div class="box-body col-md-3">
            <div class="form-group">
                {!! Form::label('attributeGroup', 'Grupa atributa') !!}
                {!!Form::select('attributeGroup',$attributeGroups,'',['class'=>'form-control', 'role' => 'textbox','id' =>
                'attribute_group'])!!}
            </div>
        </div>
    </div>
</div>
<hr style="width:50%;text-align:left;margin-left:0">
<div class="form repeater-default d-none">
    <div class="form-group float-right">
        <div class="col p-0">
            <button class="btn btn-primary" data-repeater-create type="button"><i class="bx bx-plus"></i>
                Dodaj
            </button>
        </div>
    </div>
    <div data-repeater-list="items">
        <div data-repeater-item>
            <div class="box box-primary">
                <!-- form start -->
                <div class="row repeater-form">
                    <div class="box-body col-md-3">
                        <div class="form-group">
                            {!!Form::label('quantity','Količina')!!}
                            {!! Form::text('quantity', '', ['class'=>'form-control']) !!}
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-2">
                    <button class="btn btn-danger" data-repeater-delete type="button"> <i class="bx bx-x"></i>
                        Izbriši
                    </button>
                </div>
            </div>
            <hr>

        </div>

    </div>
    <div class="form-group odd">
        {!! Form::label('f_image', Lang::get('Slika'), array('class'=>'col-sm-2 control-label')) !!}
        <div class="col-xs-12 col-sm-7 col-md-5">
            <img id="preview" src="#" />
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="fileupload-preview thumbnail"></div>
                <div class="upload-image-admin">
                    <span class="btn btn-primary btn-file">
                        <label for="inputImg" class="fileupload-new mb-0">{!! Lang::get('Izaberi sliku') !!}</label>
                        <input type="file" id="inputImg" name="f_image[]" multiple>
                    </span>
                </div>
            </div>
        </div>
    </div>


    {!! Form::submit(Lang::get('Snimi'), array('class' => 'btn btn-success')) !!}
    {!! Form::close() !!}

    @endsection
    @section('js')
    <script src='/js/jquery.repeater.min.js'></script>
    <script>
        let html = '';
        let itemCounter = 0;
        $(document).ready(function(){

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $('#preview').hide();
        $("#inputImg").change(function() {
            $('.oldImg').hide();
            $('#preview').show();
            readURL(this);
        });
    });
    $('.repeater-default').repeater({
        show: function () {
            itemCounterOld = itemCounter;
            itemCounter = itemCounter+1;
            html = replaceAll(html,itemCounterOld,itemCounter);

            $(this).slideDown();
            $(this).find('.repeater-form').append(html);

        },
        hide: function (deleteElement) {
        if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
        }
        }
    });
    $(document).on("change", '#main-category', function(e) {
            let mainCategory = $(this).val();
            $.ajax({
                type: "GET",
                url: '/admin/get-categories/'+mainCategory,
                dataType: 'json',
                success: function(json) {
                    var $el = $("#category");
                    $el.empty(); // remove old options
                    $el.append($("<option></option>")
                            .attr("value", '').text('Odaberite..'));
                    $.each(json, function(value, key) {
                        $el.append($("<option></option>")
                                .attr("value", value).text(key));
                    });

                }
            });

        });

        $(document).on("change", '#attribute_group', function(e) {
            let group = $(this).val();
            $.ajax({
            type: "GET",
            url: '/admin/get-attributes/'+group,
            dataType: 'json',
            success: function(json) {
            let form = $(".repeater-form");
            $('.repeater-default').removeClass('d-none');
            //form.empty(); // remove old options
            let colors = <?= getColors();?>;
            $.each(json, function(key, value) {
                if(value.code == 'color'){
                    html += "<div class='box-body col-md-3'><div class='form-group'>";
                    html += "<label for="+value.code+">"+value.name+"</label>";
                    html += "<select name='items[itemCounterPlaceHolder]["+value.code+"]' class='form-control'>";
                        for(let i=0; i<colors.length; i++){
                            html += "<option value="+colors[i]+">"+colors[i]+"</option>";
                        }
                    html += "</select>"
                    html += "</div></div>";
                }else{
                    html += "<div class='box-body col-md-3'><div class='form-group'>";
                    html += "<label for="+value.code+">"+value.name+"</label>";
                    html += "<input type='text' name='items[itemCounterPlaceHolder]["+value.code+"]'  class='form-control' "+isRequired(value.is_required)+" >";
                    html += "</div></div>";
                }
            });
            html = html.replace(/itemCounterPlaceHolder/gi,itemCounter);

            form.append(html);

            }
        });
        });

        function replaceAll(string, search, replace) {
            return string.split(search).join(replace);
        }

        function isRequired(param){
            if(param == 1){
                return 'required';
            }
        }

    </script>
    @endsection
