@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 rel="stylesheet" type="text/css" href="{{asset('admin/app-assets/vendors/css/forms/select/select2.min.css')}}">
@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">{{'إضافة سمات للمنتج رقم ' . $product->id}}</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">{{'اختر سمة جديدة لاضافتها للمنتج'}}</label>
                                    <select class="form-control select_feature" name="feature_id">
                                        <option value>{{'اختر سمة'}}</option>
                                        @foreach($features as $feature)
                                        <option data-feature="{{$feature}}" data-properities="{{$feature->options}}"
                                            value="{{$feature->id}}">{{$feature->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <form action="{{route('admin.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->featuresHasMany()->count() > 0)
                                    @foreach($product->featuresHasMany as $feature)
                                    <div class="col-md-12 col-12 feature_parent">
                                        <input type="hidden" name="feature_id[]" value="{{$feature->feature->id}}">
                                        <div class="form-group">
                                            <label class="text-danger">
                                                <span>{{'اختر خصائص السمة '}} ({{$feature->feature->name}})</span>
                                            </label>

                                            <div class="controls d-flex justify-content-between flex-row-reverse">
                                                <i data-id="{{$feature->id}}"
                                                    class="delete-feature feather icon-trash text-danger m-1 "></i>
                                                <select
                                                    class="w-100 select2 form-control feature_{{$feature->feature->id}} selected_options"
                                                    name="proparties[{{$feature->feature->id}}][]" multiple="multiple"
                                                    required>
                                                    <option value>{{'اختر السمات'}}</option>
                                                    @foreach ( $feature->feature->options as $properity)
                                                    <option {{ in_array( $properity->id ,
                                                        $feature->productFeatureOptions()->pluck('option_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">
                                            {{'تحديث السمات'}}
                                        </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="{{asset('admin/app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{asset('admin/app-assets/js/scripts/forms/select/form-select2.js')}}"></script>

<script>
    $('.select2').select2();

$(document).ready(function () {
    if($('.selected_options option:selected').length >= 1) {
        $('button[type="submit"]').prop('disabled', false);
    } else {
        $('button[type="submit"]').prop('disabled', true);
    }
});

$(document).on('change', '.selected_options', function (e) {
    if($('.selected_options option:selected').length >= 1) {
        $('button[type="submit"]').prop('disabled', false);
    } else {
        $('button[type="submit"]').prop('disabled', true);
    }
});

$(document).on('change', '.select_feature', function (e) {
    e.preventDefault();

    if(e.target.value == '') {
        $('button[type="submit"]').prop('disabled', true);
        return;
    }

    var feature = $('.select_feature option:selected').data('feature')
    var properities = $('.select_feature option:selected').data('properities')

    if(feature == null || properities == null) {
        $('button[type="submit"]').prop('disabled', true);
    } else {
        $('button[type="submit"]').prop('disabled', false);
    }

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

        $.each(properities, function (index, value) {
            options += `<option value="${value.id}">${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">
                                <span>{{'اختر خصائص لسمة '}} (${feature.name.ar})</span>
                            </label>
                                
                            <div class="controls d-flex justify-content-between flex-row-reverse">
                                <i  class="delete-feature feather icon-trash text-danger m-1"></i>
                                <select class="select2 form-control feature_${feature.id} selected_options" name="proparties[${feature.id}][]"  multiple="multiple" required>
                                    <option value>{{'اختر السمات'}}</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/products/delete-feature')}}",
            data: { id: $(this).data('id') },
            dataType: "json",
            success: (response) => {
                $(this).parents('.feature_parent').remove()
            }
        });
    } else {
        $(this).parents('.feature_parent').remove()
    }
});

$(document).on('submit', '.store', function (e) {
    e.preventDefault();
    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('{{"تم التحديث بنجاح . الرجاء اضافة المجموعات"}}')
            setTimeout(function () {
                window.location.replace(response.url)
            }, 1000);
        }
    });
});
</script>
@endsection