@extends('Layouts.adminLayout')
@section('title')
    {{__('Insert Category Attribute')}}
@endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('Admin/assets/css/spectrum.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('Admin/assets/css/bootstrap-tagsinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('Admin/app-assets/vendors/css/extensions/sweetalert2.min.css') }}">
<style>
body.dark-layout .table tbody tr td {
    background-color: #10163a !important;
    color: #C2C6DC;
}
</style>
@endsection
@section('breadcrumb')
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">{{__('Panel')}}</a></li>
                                    <li class="breadcrumb-item"><a href="#">{{__('Product')}}</a> </li>
                                    <li class="breadcrumb-item active"><a href="#">{{__('Insert Category Attribute')}}</a></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
@endsection
@section('content')
<section class="input-validation">
                    <div class="row">
                        <div class=" col-md-12 col-12">
                            <div class="card">
                                

                                <div class="card-header">
                                    <h4 class="card-title">{{__('Insert Category Attribute')}}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <form class="needs-validation" method="POST"
                                              action="{{route('Admin.attributes.attributesWithCategory')}}"
                                              enctype="multipart/form-data" novalidate>
                                            @CSRF
                                            <div class="row">
                                            <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>{{__('Language')}}</label>
                                                        <div class="controls">
                                                            <div class="form-group">
                                                                <select class="select2 form-control {{ $errors->has('lang') ? ' is-invalid' : '' }} " id="lang" data-live-search="true" name="lang" required onchange="changeLanguage(this.value)" >
                                                                 <option value="">{{__('Select')}}</option>
                                                                 @foreach($data['Languages'] as $value)
                                                                  <option value="{{$value->slug}}" @if(old('lang') == $value->slug) selected @endif >{{$value->title}}</option>
                                                                  @endforeach
                                                                </select>
																	 @if ($errors->has('lang'))
                                                                    <div class="invalid-feedback"> {{ $errors->first('lang') }}</div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>{{__('Title')}}</label>
                                                        <div class="controls">
                                                            <input type="text" name="title" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}"  placeholder="{{__('Title')}}"  id="title" value="{{ old('title') }}" required tabindex="2" >
													    @if ($errors->has('title'))
                                                            <div class="invalid-feedback">{{ $errors->first('title') }}</div>
                                                        @endif
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>{{__('Category')}}</label>
                                                        <div class="controls">
                                                            <div class="form-group">
                                                                <select class="select2 form-control {{ $errors->has('category') ? ' is-invalid' : '' }}" data-live-search="true" id="selectmultiple"   required  name="category[]" multiple >
                                                                 <option value="">{{__('Select')}}</option>
                                                                 <option value="All" >{{__('All')}}</option>
                                                                </select>
														   @if ($errors->has('category'))
                                                            <div class="invalid-feedback">{{ $errors->first('category') }}</div>
                                                        @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
												  <div class="form-group col-12 col-md-6" style="margin-top: 20px;">
                                                        <fieldset class="checkbox">
                                                            <div class="vs-checkbox-con vs-checkbox-primary">
                                                                <input type="checkbox" name="filter" value='1'>
                                                                <span class="vs-checkbox">
                                                                    <span class="vs-checkbox--check">
                                                                        <i class="vs-icon feather icon-check"></i>
                                                                    </span>
                                                                </span>
                                                                <span class="">{{__('Filter')}}</span>
                                                            </div>
                                                        </fieldset>
                                                    </div>
													
                                            </div>

                                        <a id="addRow" class="btn btn-primary mb-2" onclick="insertTr()"><i
                                                class="feather icon-plus"></i>&nbsp; {{__('Insert')}}  
                                        </a>
                                       @CSRF
									           <div class="table-responsive">
                                                <table class="table add-rows" id="addTRs">
                                                    <thead>

                                                    <tr>
                                                        <th>{{__('Attribute Title')}}</th>
                                                        <th>{{__('Attribute Type')}}</th>
                                                        <th>{{__('Attribute Value')}}</th>
                                                        <th>{{__('Possibilities')}}</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>


                                                    </tbody>

                                                </table>
                                            </div>
										          <div  class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
                                                    <button type="submit"  tabindex="18" class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1">{{__('Save')}}</button>
                                                </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>

   </section>
@endsection
@section('script')
<script src="{{ asset('Admin/assets/js/bootstrap-tagsinput.js')}}"></script>
<script src="{{ asset('Admin/assets/js/spectrum.js')}}"></script>
<script src="{{ asset('Admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
    <script>
                function changeLanguage (selectedLang) {
                    $.ajax({
                    url: "{{route('Admin.categoryAttributes.language')}}",
                    type: "POST",
                    data: {
                        _token : "{{csrf_token()}}",
                        lang : selectedLang
                    },
                    success:function (data) {
                        $('#selectmultiple').html('');
						$('#selectmultiple').append('<option value="All">{!! __('All') !!}</option>')
                        $.each(data,function(index,value){
                            $('#selectmultiple').append('<option value="'+value.id+'">'+value.title+'</option>')
                        });
                        $('#selectmultiple').trigger('change');
                        $( ".select2" ).change(function() {
                         if(this.value=='All' ){$("select > option").prop("selected","selected");}
                         else{$("select > option").removeAttr("selected");}
                        });
                    }
                });
    }

    </script>
	    <script>

        function addColor(id) {
            // alert('#color' + id);
            var val = $('#color' + id).val();
            var valtxt = $('#txtColor' + id).val();
            $('div').filter('[data-color="' + val + '"]').remove();
            // $('#'+val).remove();
            var tag = '<div title="' + valtxt + '" style="background-color:' + val + ' " data-color="' + val + '" class="showColorAdd"><i class="feather icon-x deleteColor " onclick="removeParentDiv(this)"></i><input type="hidden" value="' + val + '" name="color[' + id + '][proprty][]" required><input type="hidden" value="' + valtxt + '" name="color[' + id + '][value][]" required></div>\n'
            $('#inputtype' + id).append(tag);
        }


        function removeParentDiv(th) {
            $(th).parent('.showColorAdd').remove();
        }
        function insertTr() {

            var l = $(".newTr").length + 1
             var count = l;
            var htm = '<tr class="attributeTr newTr"><td><input class="form-control" type="text" name="attribute[' + count + '][attribute]" required ></td><td><select class=" form-control select2" onchange="loadTypeInput(this.value,' + count + ')" name="attribute[' + count + '][type]" > <option value="1">{{__('Single Value')}}</option> <option value="2">{{__('Multi Value')}}</option><option value="3">{{__('Color')}}</option> <option value="4">{{__('Short Text')}}</option><option value="5">{{__('More Description')}}</option></select></td> <td id="inputtype' + count + '"><input class="form-control tagsinput" type="text" data-role="tagsinput" name="attribute[' + count + '][tagValue]" required ></td> <td>  <a onclick="deleteRowsAdded(this)"  type="button" class="btn btn-icon rounded-circle btn-danger mr-1 mb-1 waves-effect waves-light"><i class="feather icon-delete"></i></a></td></tr>';
            $('#addTRs').append(htm);
            tagBootstrap();
 
        }
 
        function loadTypeInput(value, count) {
            $('#inputtype' + count).html('');
            if (value == 1 || value == 2) {
                var htm = '<input class="form-control tagsinput" type="text" name="attribute[' + count + '][tagValue]" data-role="tagsinput">';
                $('#inputtype' + count).append(htm);
            } else if (value == 3) {
                var tag = '<input class="form-control col-md-3 float-left mr-1 sm" type="text" placeholder="{{__('Name Color')}}" id="txtColor' + count + '" required >' +
                    ' <input class="showPalette" id="color' + count + '">\n' +
                    '                                                                      <button class="btn btn-primary btn-sm"\n' +
                    '                                                                         type="button"  onclick="addColor(' + count + ')">\n' +
                    '                                                                        {{__('Add')}}\n' +
                    '                                                                    </button>\n' +
                    '                                                                    <br>';

                $('#inputtype' + count).append(tag);
                setpallet();
            }
            tagBootstrap();

        }

        function editAttribute(id) {
            var attribute = $('#attribute' + id).val();
            var type = $('#type' + id).val();
            var attrProprty = '';
            if (type == 1 || type == 2)
                var value = $('#value' + id).val();
            else if (type == 3) {
                var value = $("input[name='color[" + id + "][value][]']")
                    .map(function () {
                        return $(this).val();
                    }).get();


                var attrProprty = $("input[name='color[" + id + "][proprty][]']")
                    .map(function () {
                        return $(this).val();
                    }).get();


            } else
                var value = '';
            var _token = $('input[name="_token"]').val();
            $.ajax({
                url: '/Admins/attributes/update/' + id,
                type: "post",
                data: {
                    'attribute': attribute,
                    'type': type,
                    'value': value,
                    'attrProprty': attrProprty,
                    '_token': _token,
                },
                dataType: "json",
                success: function (data) {
                    location.reload();
                }
            });
        }

        setpallet();

        function setpallet() {
            $(".showPalette").spectrum({
                preferredFormat: "hex",

                showPalette: true,
                palette: [
                    ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
                        "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                    ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
                        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
                    ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
                        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
                        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
                        "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
                        "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
                        "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
                        "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
                        "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
                        "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
                        "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
                ]
            });
        }

    function tagBootstrap() {
        $(".tagsinput").tagsinput({
            cancelConfirmKeysOnEmpty: true,
            confirmKeys: [13, 44]
        });
    }
        function  deleteRowsAdded(th) {
            // console.log(th);
            $(th).parents('.attributeTr').remove();
        }
    $('form').on('keyup keypress', function (e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) {
            e.preventDefault();
            return false;
        }
    });
    </script>
@endsection