@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Add Feature') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Add Feature') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div style="float: left;width: 10%;">
                <button class="btn btn-rounded btn-dark save-feature"
                    style="padding: 10px 50px 10px 50px;">{{ translate('Save') }}</button>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        {!! Form::open(['method' => 'post', 'action' => 'Admin\FeatureController@store', 'files' => true, 'id' => 'create-feature-form']) !!}

        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="box">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="title_ar">{{ translate('Arabic title') }}
                                    </label>
                                    <div>
                                        {!! Form::text('title_ar', null, ['class' => 'form-control', 'placeholder' => translate('Arabic title')]) !!}
                                    </div>
                                    @error('title_ar')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>
                            <div class="col-md">

                                <div class="form-group">
                                    <label for="title_en">{{ translate('English title') }}
                                    </label>
                                    <div>
                                        {!! Form::text('title_en', null, ['class' => 'form-control', 'placeholder' => translate('English title')]) !!}
                                    </div>
                                    @error('title_en')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="arrangement">{{ translate('Arrangement') }}
                                    </label>
                                    <div>
                                        {!! Form::text('arrangement', null, ['class' => 'form-control', 'placeholder' => translate('Arrangement')]) !!}
                                    </div>
                                    @error('arrangement')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="description_ar">{{ translate('Arabic description') }}
                                    </label>
                                    <div>
                                        {!! Form::textarea('description_ar', null, ['class' => 'form-control', 'placeholder' => translate('Arabic description')]) !!}
                                    </div>
                                    @error('description_ar')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>
                            <div class="col-md">

                                <div class="form-group">
                                    <label for="description_en">{{ translate('English description') }}
                                    </label>
                                    <div>
                                        {!! Form::textarea('description_en', null, ['class' => 'form-control', 'placeholder' => translate('English description')]) !!}
                                    </div>
                                    @error('description_en')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="brand_id">{{ translate('Subscribtions') }}
                                    </label>
                                    <div>
                                        {!! Form::select('subscribtions[]', $subscribtions, null, ['required' => 'required', 'id' => 'subscribtions', 'multiple' => 'multiple', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="selected-subscribtion-container">

                </div>
            </div>
        </div>
        {!! Form::Close() !!}


    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            function removeA(arr) {
                var what, a = arguments,
                    L = a.length,
                    ax;
                while (L > 1 && arr.length) {
                    what = a[--L];
                    while ((ax = arr.indexOf(what)) !== -1) {
                        arr.splice(ax, 1);
                    }
                }
                return arr;
            }
            var selectedSubscribtions = [];
            $('#subscribtions').on('change', function() {
                $.each($("#subscribtions option"), function() {
                    if ($(this).is(':selected') == false) {
                        removeA(selectedSubscribtions, parseInt($(this).val()));
                    }
                });
                $.each($("#subscribtions option:selected"), function() {
                    if (selectedSubscribtions.includes(parseInt($(this).val()))) {} else {
                        selectedSubscribtions.push(parseInt($(this).val()))
                    }

                });
                updateSubscribtionValues(selectedSubscribtions);
            });

            function updateSubscribtionValues(selectedSubscribtions) {
                $.ajax({
                    type: "POST",
                    url: `{{ route('Feature.getSubscribtionFeatureView') }}`,
                    data: {
                        _token: '{{ csrf_token() }}',
                        selectedSubscribtions: selectedSubscribtions,
                        formData: $('#create-feature-form').serializeArray(),
                        feature_id: 0
                    },
                    success: function(data) {
                        $('.selected-subscribtion-container').html(data);
                        $('.select2').select2();
                    }
                });
            }
            $('.save-feature').click(function() {
                $('#create-feature-form').submit();
            });
        })
    </script>
@endsection