<div class="row">
    <div class="col-lg-8">
        <div class="row mb-3">
            <div class="col-3">
                @include('components.form.select', [
                    'name' => 'product_type',
                    'id_name' => 'product_type',
                    'list' => $models_options,
                    'value' => $article['product_type'] ?? null,
                    'class' => 'select2',
                    'with_empty' => '',
                    'label' => 'Familles de produit',
                    'required' => true,
                ])
            </div>
            <div class="col-6">
                @include('components.form.select', [
                    'name' => 'product_id',
                    'id_name' => 'product_id',
                    'list' => $products ?? [],
                    'value' => $article['product_id'] ?? null,
                    'class' => 'select2',
                    'with_empty' => '',
                    'label' => 'Produit',
                    'required' => true,
                ])
            </div>
            <div class="col-3">
                @include('components.form.select', [
                    'name' => 'article_nature_id',
                    'id_name' => 'article_nature_id',
                    'list' => $natures_options,
                    'value' => $article['article_nature_id'] ?? null,
                    'class' => 'select2',
                    'with_empty' => '',
                    'label' => __('shop.article_natures.name'),
                    'required' => true,
                ])
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-8">
                @include('components.form.input', [
                    'name' => 'name',
                    'value' => $article['name'] ?? null,
                    'label' => 'Nom',
                    'required' => true,
                ])
            </div>
            <div class="col-4">
                @include('components.form.input', [
                    'name' => 'ref',
                    'value' => $article['ref'] ?? null,
                    'label' => 'Référence',
                    'required' => true,
                ])
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-8">
                @include('components.form.select', [
                    'name' => 'categories[]',
                    'list' => $categories_options,
                    'values' => $article['categories'] ?? null,
                    'class' => 'select2',
                    'multiple' => true,
                    'label' => __('shop.shelves.title'),
                ])
            </div>
            <div class="col-2">
                @include('components.form.toggle', [
                    'name' => 'visible',
                    'value' => $article['visible'] ?? null,
                    'on' => __('oui'),
                    'off' => __('non'),
                    'meta' => 'data-id=' . ($article['id'] ?? null),
                    'size' => 'sm',
                    'label' => 'Visible',
                ])
            </div>
            <div class="col-2">
                @include('components.form.toggle', [
                    'name' => 'homepage',
                    'value' => $article['homepage'] ?? null,
                    'on' => __('oui'),
                    'off' => __('non'),
                    'meta' => 'data-id=' . ($article['id'] ?? null),
                    'size' => 'sm',
                    'label' => 'Accueil',
                ])
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-12">
                @include('components.form.selects.select-tree', [
                    'name' => 'tags[]',
                    'list' => $tags_list,
                    'values' => $article['tags'] ?? null,
                    'class' => 'select2',
                    'multiple' => true,
                    'label' => 'Tags',
                ])
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-12" id="product_description">
                @include('Admin.Shop.Articles.partials.product.description')
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-12">
                @include('components.form.textarea', [
                    'name' => 'description',
                    'value' => $article['description'] ?? null,
                    'class' => 'editor',
                    'required' => false,
                    'label' => 'Description',
                ])
            </div>
        </div>

    </div>
    <div class="col-lg-4">
        <div id="product_images_inherited">
            @include('Admin.Shop.Articles.partials.product.images')
        </div>

        @include('components.uploader.widget', [
            'load_url' => route('Admin.Shop.Articles.getImages', ['id' => $article['id'] ?? false]),
            'delete_url' => route('Admin.Shop.Articles.deleteImage'),
            'title' => 'Photos',
            'name' => 'images',
        ])

        @include('Admin.Core.Comments.partials.comments', [
            'model' => 'Shop.Article',
            'model_id' => $article['id'] ?? false,
            'comments' => $article['comments'] ?? false,
        ])
    </div>
</div>

@push('js')
    <script>
        $("#product_id").change(function(e) {
            var product = $('#product_id').select2('data');
            var name = product[0]['text'];
            $('input[name="name"]').val(name);

            var product_type = $('#product_type').select2('data');
            var name = product_type[0]['id'];
            var url = "{{ route('Admin.Shop.Articles.getProductDescription') }}/" + product[0]['id'] + '/' + btoa(
                name);
            $('#product_description').load(url);

            var url = "{{ route('Admin.Shop.Articles.getProductImages') }}/" + product[0]['id'] + '/' + btoa(name);
            $('#product_images_inherited').load(url);
        });

        $('#product_type').change(function() {
            var product_type = $(this).val();
            switch (product_type) {
                case 'App\\Models\\Botanic\\Specie':
                    var url = "{{ route('Admin.Botanic.Species.getSelect') }}";
                    break;
                case 'App\\Models\\Botanic\\Variety':
                    var url = "{{ route('Admin.Botanic.Varieties.getSelect') }}";
                    break;
                case 'App\\Models\\Shop\\Merchandise':
                    var url = "{{ route('Admin.Shop.Merchandises.getSelect') }}";
                    break;
            }
            loadProducts(url);
            loadArticleNatures("{{ route('Admin.Shop.ArticleNatures.getOptions') }}");
        });

        function loadArticleNatures(url) {
            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    product_type: $('#product_type').val()
                },
                success: function(data) {
                    setOptions('#article_nature_id', data);
                    // $("#product_id").select2({data: data});
                    // $("#product_id").trigger('change');
                }
            });
        }

        function loadProducts(url) {
            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    article_nature_id: $('#article_nature_id').val()
                },
                success: function(data) {
                    setOptions('#product_id', data);
                    // $("#product_id").select2({data: data});
                    // $("#product_id").trigger('change');
                }
            });
        }
    </script>
@endpush
