@extends('admin.layout.master')
{{-- extra css files --}}
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('admin/app-assets/css-rtl/plugins/forms/validation/form-validation.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('admin/app-assets/vendors/css/extensions/sweetalert2.min.css')}}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
{{-- extra css files --}}

@section('content')
<section id="multiple-column-form">
    <div class="row match-height">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{awtTrans('اضافه سمات للمنتج  ') . ' ' . $product->name}}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        <div class="row align-items-center">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="first-name-column">{{awtTrans('اختر سمة جديدة لاضافتها للمنتج')}}</label>
                                    <select class="form-control select_feature" name="feature_id" required data-validation-required-message="{{awtTrans('هذا الحقل مطلوب')}}">
                                        <option value>{{awtTrans('اختر سمة')}}</option>
                                        @foreach($features as $feature)
                                            <option data-feature="{{$feature}}" data-properities="{{$feature->properities}}" value="{{$feature->id}}">{{$feature->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <form action="{{route('admin.stores.products.features.update' , ['id' => $product->id])}}" class="form-horizontal store w-100 novalidate" >
                            <div class="form-body">
                                <div class="row append_features w-100">
                                    @if($product->productfeatures()->count()>0)
                                        @foreach($product->productfeatures as $feature)
                                            <div class="col-md-12 col-12 feature_parent">
                                                <div class="form-group">
                                                    <input type="hidden" name="feature_id[]" value="{{$feature->feature->id}}" >
                                                    <label class="text-danger d-flex justify-content-between">
                                                        <span>{{awtTrans('اختر خصائص لسمة ')}} ({{$feature->feature->name}})</span>
                                                        <i  data-id="{{$feature->id}}" class="delete-feature feather icon-trash" data-val="{{ $feature->feature->id }}"></i>
                                                    </label>
                        
                                                    <div class="controls">
                                                        <select class="select2 form-control feature_{{$feature->feature->id}}" name="proparties[{{$feature->feature->id}}][]" multiple="multiple"  required data-validation-required-message="{{awtTrans('هذا الحقل مطلوب')}}" >
                                                            <option value>{{awtTrans('اختر السمات')}}</option>
                                                            @foreach ( $feature->feature->properities as $properity)
                                                                <option {{ in_array( $properity->id , $feature->productfeatureproperities()->pluck('properity_id')->toArray() ) ? 'selected' : ''}} value="{{$properity->id}}">{{$properity->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <div class="row">
                                    <div class="col-12 d-flex justify-content-center mt-3">
                                        <button type="submit" class="btn btn-primary mr-1 mb-1 submit_button"  id="submit">{{awtTrans('تحديث السمات')}}</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@section('js')

    <script src="{{asset('admin/app-assets/vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
    <script src="{{asset('admin/app-assets/js/scripts/forms/validation/form-validation.js')}}"></script>
    <script src="{{asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
    <script src="{{asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>

        $(document).on('change', '#submit', function (){
            event.preventDefault();
            if($('.select_feature').val() === ''){
                toastr.error('{{awtTrans('عذرأ يجب اختيار سمة واحدة على الأقل')}}');
            }
        });


        $('.select2').select2();
        $(document).on('change' , '.select_feature', function (e) {
            var value = $(this).val();
            e.preventDefault();
            if($(this).val() === ''){
                toastr.error('{{awtTrans('عذرأ يجب اختيار سمة واحدة على الأقل')}}');
            }else {
                var feature = $('.select_feature option:selected').data('feature')
                var properities = $('.select_feature option:selected').data('properities')

                if ($('.feature_'+feature.id).length > 0) {
                    toastr.error('{{awtTrans('تم اضافة السمة سابقا')}}')
                }else{
                    var options = '' ;
                    $.each(properities , function( index, value ) {

                        options += `<option value="${value.id}" ${ index === 0 ? 'selected' : '' }>${value.name.ar}</option>`
                    });

                    $('.append_features').append(`
                    <div class="col-md-12 col-12 feature_parent">
                        <div class="form-group">
                            <input type="hidden" name="feature_id[]" value="${feature.id}" >
                            <label class="text-danger d-flex justify-content-between"  >
                                <span>{{awtTrans('اختر خصائص لسمة ')}} (${feature.name.ar})</span>
                                <i  class="delete-feature feather icon-trash" data-val="${ value }"></i>
                            </label>

                            <div class="controls">
                                <select class="select2 form-control feature_${feature.id}" name="proparties[${feature.id}][]"  multiple="multiple" required >
                                    <option value>{{awtTrans('اختر السمات')}}</option>
                                    ${options}
                                </select>
                            </div>
                        </div>
                    </div>
                `)
                    $('.select2').select2()
                }
            }


            
        });

        $(document).on('click' , '.delete-feature', function (e) {
            e.preventDefault()
            if ($(this).data('id')) {
                $.ajax({
                    type: "post",
                    url: "{{url('admin/stores/products/delete')}}",
                    data: {id: $(this).data('id')},
                    dataType: "json",
                    success:  (response) =>  {

                        var select_feature = $('.select_feature');


                        if(select_feature.val() == $(this).data('val')){
                            select_feature.val('')
                        }

                        $(this).parents('.feature_parent').remove()
                    },
                    error:function(xhr){
                        Swal.fire({
                            position: 'top-center',
                            type: 'error',
                            title: '{{ awtTrans('عذراًً يوجد خطأ ما !!!') }}',
                            showConfirmButton: true,
                            timer: 10000,
                            confirmButtonClass: 'btn btn-primary',
                            buttonsStyling: false,
                        })
                    }
                });
            }else{
                var select_feature = $('.select_feature');

                if(select_feature.val() == $(this).data('val')){
                    select_feature.val('')
                }

                $(this).parents('.feature_parent').remove()
            }
        });
    </script>
    <script>
        $(document).ready(function() {
          $(document).on('submit', '.store', function(e) {
            e.preventDefault();
              if($('.select_feature').val() === ''){
                  toastr.error('{{awtTrans('عذرأ يجب اختيار سمة واحدة على الأقل')}}');
              }else {
                  var url = $(this).attr('action')
                  $.ajax({
                      url: url,
                      method: 'post',
                      data: new FormData($(this)[0]),
                      dataType: 'json',
                      processData: false,
                      contentType: false,
                      success: function(response) {
                          toastr.success('{{awtTrans("تم التحديث بنجاح . الرجاء اضافة المجموعات")}}')
                          setTimeout(function(){
                              window.location.replace(response.url)
                          }, 1000);
                      }
                  });
              }


          });
        });
        
      </script>
      
    
@endsection