@extends('layouts.app')
@section('title')
    {{ __('messages.Product') }}
@endsection
@section('head')
    <link rel="stylesheet" href="{{ asset('/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css') }}">
@endsection
@section('css')
    <style>
        .images-preview-div {
            margin-top: 15px;
        }

        .images-preview-div .image-area {
            position: relative;
            width: 200px;
            background: #333;
            height: fit-content;
            margin: 10px;
        }

        .images-preview-div .image-area img {
            max-width: 200px;
            height: 150px;
            object-fit: contain;
        }

        .images-preview-div .remove-image {
            display: none;
            position: absolute;
            top: -10px;
            right: -10px;
            border-radius: 10em;
            padding: 2px 6px 3px;
            text-decoration: none;
            font: 700 21px/20px sans-serif;
            background: #555;
            border: 3px solid #fff;
            color: #FFF;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.3);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            -webkit-transition: background 0.5s;
            transition: background 0.5s;
        }

        .images-preview-div .remove-image:hover {
            background: #E54E4E;
            padding: 3px 7px 5px;
            top: -11px;
            right: -11px;
            text-decoration: none;
        }

        .images-preview-div .remove-image:active {
            background: #E54E4E;
            top: -10px;
            right: -11px;
        }
    </style>
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('messages.Product') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('messages.Dashboard') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('messages.Product') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline card-outline-tabs">
                        <div class="card-header p-0 border-bottom-0">
                            <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="custom-tabs-product-tab" data-toggle="pill"
                                        href="#custom-tabs-product" role="tab" aria-controls="custom-tabs-product"
                                        aria-selected="true">{{ __('messages.Product') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-properties-tab" data-toggle="pill"
                                        href="#custom-tabs-properties" role="tab" aria-controls="custom-tabs-properties"
                                        aria-selected="true">{{ __('messages.Properties') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-prices-tab" data-toggle="pill"
                                        href="#custom-tabs-prices" role="tab" aria-controls="custom-tabs-prices"
                                        aria-selected="true">{{ __('messages.Prices') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="locations-tab" data-toggle="pill"
                                        href="#locations" role="tab" aria-controls="locations"
                                        aria-selected="true">{{ __('messages.Locations') }}</a>
                                </li>
                            </ul>
                        </div>
                        <form class="form-horizontal" action="" method="post" enctype="multipart/form-data"
                            id="productForm">
                            @csrf
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-four-tabContent">
                                    <div class="tab-pane fade active show" id="custom-tabs-product" role="tabpanel"
                                        aria-labelledby="custom-tabs-product-tab">
                                        <div class="card card-primary card-outline card-outline-tabs">
                                            <div class="card-header p-0 border-bottom-0">
                                                <ul class="nav nav-tabs" id="custom-tabs-name-tab" role="tablist">
                                                    @foreach ($languages as $language)
                                                        <li class="nav-item">
                                                            <a class="nav-link @if ($loop->first) active @endif"
                                                                id="{{ $language }}-tab" data-toggle="pill"
                                                                href="#{{ $language }}" role="tab"
                                                                aria-controls="{{ $language }}"
                                                                aria-selected="true">{{ strtoupper($language) }}</a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <div class="card-body">
                                                <div class="tab-content" id="custom-tabs-name-tabContent">
                                                    @foreach ($languages as $language)
                                                        @php
                                                            $name = isset($product->name) ? $product->name[$language] : '';
                                                        @endphp
                                                        <div class="tab-pane fade @if ($loop->first) active show @endif"
                                                            id="{{ $language }}" role="tabpanel"
                                                            aria-labelledby="{{ $language }}-tab">
                                                            <div class="form-group row">
                                                                <label for="name_{{ $language }}"
                                                                    class="col-sm-3 col-form-label">{{ __('messages.Name') }}</label>
                                                                <div class="col-sm-9">
                                                                    <input type="text" name="name_{{ $language }}"
                                                                        class="form-control" id="name_{{ $language }}"
                                                                        placeholder="{{ __('messages.Name') }}"
                                                                        value="{{ old('name_' . $language) ?? $name }}"
                                                                        required>
                                                                    @error('name_' . $language)
                                                                        <span
                                                                            class="error invalid-feedback d-block">{{ $message }}</span>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="productgroup_id"
                                                class="col-sm-3 col-form-label">{{ __('messages.Productgroup') }}</label>
                                            <div class="col-sm-9">
                                                <select class="form-control" name="productgroup_id" id="productgroup_id">
                                                    <option value="">{{ __('messages.Select productgroup') }}
                                                    </option>
                                                    @foreach ($productgroups as $productgroup)
                                                        <option value="{{ $productgroup->id }}"
                                                            @if (old('productgroup_id') && old('productgroup_id') == $productgroup->id) Selected @elseif (isset($product) && $productgroup->id == $product->productgroup_id)Selected @endif
                                                            data-value='{{ $productgroup->properties }}' data-prices='{{ $productgroup->prices }}'>
                                                            {{ $productgroup->name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('productgroup_id')
                                                    <span class="error invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="categories"
                                                class="col-sm-3 col-form-label">{{ __('messages.Categories') }}</label>
                                            <div class="col-sm-9">
                                                <select name="categories[]" id="categories" class="select2"
                                                    multiple="multiple" data-placeholder="{{ __('messages.Categories') }}"
                                                    style="width: 100%;">
                                                    {!! $dropDown !!}
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="ean"
                                                class="col-sm-3 col-form-label">{{ __('messages.EAN') }}</label>
                                            <div class="col-sm-9">
                                                <input type="text" name="ean" class="form-control" id="ean"
                                                    placeholder="{{ __('messages.EAN') }}"
                                                    value="{{ old('ean') ? old('ean') : $product->ean ?? '' }}">
                                                @error('ean')
                                                    <span class="error invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="reference"
                                                class="col-sm-3 col-form-label">{{ __('messages.Internal Reference Number') }}</label>
                                            <div class="col-sm-9">
                                                <input type="text" name="reference"
                                                    class="form-control" id="reference"
                                                    placeholder="{{ __('messages.Internal Reference Number') }}"
                                                    value="{{ old('reference') ? old('reference') : $product->reference ?? '' }}">
                                                @error('reference')
                                                    <span class="error invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="stock"
                                                class="col-sm-3 col-form-label">{{ __('messages.Stock') }}</label>
                                            <div class="col-sm-9">
                                               <input type="text" name="stock" class="form-control" id="stock"
                                                    placeholder="{{ __('messages.Stock') }}"
                                                    value="{{ old('stock') ? old('stock') : $product->stock ?? '' }}">
                                                @error('stock')
                                                    <span class="error invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="images"
                                                class="col-sm-3 col-form-label">{{ __('messages.Images') }}</label>
                                            <div class="col-sm-9">
                                                <div class="input-group">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" id="images"
                                                            name="images[]" multiple>
                                                        <label class="custom-file-label"
                                                            for="images">{{ __('messages.Choose file') }}</label>
                                                    </div>
                                                </div>
                                                <div class="images-preview-div">
                                                    <div class="row image-div" style="width: 100%;">
                                                        @php $images = $product->images??[]; @endphp
                                                        @foreach ($images as $key => $image)
                                                            @php
                                                                $path = public_path('storage/products/images/'.$image);
                                                                $type = pathinfo($path, PATHINFO_EXTENSION);
                                                                $data = @file_get_contents($path);
                                                                $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
                                                            @endphp
                                                            @if($data)
                                                            <div class="image-area">
                                                                <img src="{{ $base64 }}" id="{{ $key }}">
                                                                <a class="remove-image" href="Javascript:void(0)" style="display: inline;" data-id="{{ $key }}">&#215;</a>
                                                            </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                    <div class="row input-div" style="width: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="package_shot"
                                                class="col-sm-3 col-form-label">{{ __('messages.Package shot') }}</label>
                                            <div class="col-sm-9">
                                                <div class="input-group">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" id="package_shot"
                                                            name="package_shot[]" multiple>
                                                        <label class="custom-file-label"
                                                            for="package_shot">{{ __('messages.Choose file') }}</label>
                                                    </div>
                                                </div>
                                                @foreach($product->package_shot??[] as $package_shot)
                                                <div class="remove-file-div">
                                                    <input type="hidden" name="old_package_shot[]" id="old_package_shot" value="{{ $package_shot }}">
                                                    <a href="{{ asset('storage/products/package_shot/'.$package_shot) }}" target="_blank">{{ $package_shot }}</a>
                                                    <a class='remove-file' href='Javascript:void(0)' style='display: inline; margin-left: 10px;'>&#215;</a>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="documents"
                                                class="col-sm-3 col-form-label">{{ __('messages.Documents') }}</label>
                                            <div class="col-sm-9">
                                                <div class="input-group">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" id="documents"
                                                            name="documents[]" multiple>
                                                        <label class="custom-file-label"
                                                            for="documents">{{ __('messages.Choose file') }}</label>
                                                    </div>
                                                </div>
                                                @foreach($product->documents??[] as $documents)
                                                <div class="remove-file-div">
                                                    <input type="hidden" name="old_documents[]" id="old_documents" value="{{ $documents }}">
                                                    <a href="{{ asset('storage/products/documents/'.$documents) }}" target="_blank">{{ $documents }}</a>
                                                    <a class='remove-file' href='Javascript:void(0)' style='display: inline; margin-left: 10px;'>&#215;</a>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="videos"
                                                class="col-sm-3 col-form-label">{{ __('messages.Videos') }}</label>
                                            <div class="col-sm-9">
                                                <div class="input-group">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" id="videos"
                                                            name="videos[]" multiple>
                                                        <label class="custom-file-label"
                                                            for="videos">{{ __('messages.Choose file') }}</label>
                                                    </div>
                                                </div>
                                                @foreach($product->videos??[] as $videos)
                                                <div class="remove-file-div">
                                                    <input type="hidden" name="old_videos[]" id="old_videos" value="{{ $videos }}">
                                                    <a href="{{ asset('storage/products/videos/'.$videos) }}" target="_blank">{{ $videos }}</a>
                                                    <a class='remove-file' href='Javascript:void(0)' style='display: inline; margin-left: 10px;'>&#215;</a>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="related_products"
                                                class="col-sm-3 col-form-label">{{ __('messages.Related products') }}</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="search_related_products"
                                                    placeholder="{{ __('messages.Search related products') }}">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <select class="duallistbox" name="related_products[]"
                                                                id="related_products" multiple="multiple">
                                                                @foreach($relatedproducts??[] as $relatedproduct)
                                                                    <option value="{{ $relatedproduct->_id }}" selected>{{ app('helper')->getTranslationVal($relatedproduct->name??[]) }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="similar_products"
                                                class="col-sm-3 col-form-label">{{ __('messages.Similar products') }}</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="search_similar_products"
                                                    placeholder="{{ __('messages.Search similar products') }}">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <select class="duallistbox" name="similar_products[]"
                                                                id="similar_products" multiple="multiple">
                                                                @foreach($similarproducts??[] as $similarproduct)
                                                                    <option value="{{ $similarproduct->_id }}" selected>{{ app('helper')->getTranslationVal($similarproduct->name??[]) }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="replacing_products"
                                                class="col-sm-3 col-form-label">{{ __('messages.Replacing products') }}</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="search_replacing_products"
                                                    placeholder="{{ __('messages.Search replacing products') }}">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <select class="duallistbox" name="replacing_products[]"
                                                                id="replacing_products" multiple="multiple">
                                                                @foreach($replacingproducts??[] as $replacingproduct)
                                                                    <option value="{{ $replacingproduct->_id }}" selected>{{ app('helper')->getTranslationVal($replacingproduct->name??[]) }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="tab-pane" id="custom-tabs-properties" role="tabpanel"
                                        aria-labelledby="custom-tabs-properties-tab">
                                        <div class="properties_form" id="properties_form"></div>
                                    </div>
                                    <div class="tab-pane" id="custom-tabs-prices" role="tabpanel"
                                        aria-labelledby="custom-tabs-prices-tab">
                                        <div class="prices_form" id="prices_form"></div>
                                    </div>
                                    <div class="tab-pane" id="locations" role="tabpanel" aria-labelledby="locations-tab">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <a href="Javascript:void(0)" class="btn btn-block btn-info btn-sm float-right w-auto" onclick="addLocation()">
                                                    {{ __('messages.Add location') }}
                                                </a>
                                            </div>
                                        </div>
                                        <div class="location_form">
                                            @if(isset($product->location))
                                                @foreach($product->location as $key => $value)
                                                <div class="form-group row">
                                                    <div class="col-sm-4">
                                                        <select class="form-control" name="location[{{$key}}][location_id]" required>
                                                            <option value="">{{ __('messages.Select location') }}</option>
                                                            @foreach($locations as $location)
                                                            <option value="{{ $location->id }}" @if(isset($value['location_id']) && $location->id == $value['location_id'])Selected @endif>{{ $location->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <input type="number" name="location[{{$key}}][stock]" required class="form-control" placeholder="{{ __('messages.Stock') }}" value="{{ $value['stock']??'' }}">
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <a class="delete-location-btn" href="Javascript:void(0)">
                                                            <i class="fas fa-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-info"
                                    id="submitBTN">{{ __('messages.Submit') }}</button>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script src="{{ asset('/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('/plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>
    <script src="{{ asset('/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js') }}"></script>
    <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
    <script src="https://formbuilder.online/assets/js/form-render.min.js"></script>
    <script>
        let properties = @json($product->properties??[]);
        let prices = @json($product->prices??[]);
        $(document).ready(function() {
            bsCustomFileInput.init();
            $('.select2').select2()
            createForm()
            var selected = "{{ app('request')->input('id') ?? 0 }}";
            if (selected != 0)
                $("#categories").val(selected).change();

            imageorder()
            var x = 0;
            let files = [];
            var previewImages = function(input, imgPreviewPlaceholder) {
                if (input.files) {
                    var filesAmount = input.files.length;
                    for (i = 0; i < filesAmount; i++) {
                        imageUpload(imgPreviewPlaceholder, files.length, input.files[i]);
                        files.push(input.files[i]);
                    }
                }
            };

            function imageUpload(imgPreviewPlaceholder, index, file) {
                var reader = new FileReader();
                let x = Math.floor((Math.random() * 100000) + 1);
                reader.onload = function(event) {
                    var html = "<div class='image-area'><img src=" + event.target.result + " id=" + x +
                        "><a class='remove-image' href='Javascript:void(0)' style='display: inline;' data-id=" +
                        x + ">&#215;</a></div>";
                    $(imgPreviewPlaceholder).append(html)
                }
                reader.readAsDataURL(file);
            }
            $('#images').on('change', function() {
                previewImages(this, 'div.images-preview-div .image-div');
                setTimeout(() => {
                    imageorder()
                }, 500);
            });
            $(".image-div").sortable();
        });

        function imageorder() {
            $('div.images-preview-div .input-div').empty();
            $('div.images-preview-div .image-div img').each(function(key, val) {
                var src = $(this).attr('src');
                $('div.images-preview-div .input-div').append('<input type="hidden" name="order[' + key +
                    ']"  value="' + src + '">');
            });
        }
        $(document).on('click', '.remove-image', function() {
            Swal.fire({
                title: "{{ __('messages.Are you sure?') }}",
                text: "{{ __('messages.You would not be able to revert this!') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $(this).parent().remove();
                    imageorder()
                }
            })
        })
        $('#productgroup_id').change(function() {
            createForm()
        });

        function createForm() {
            let productgroup_id = $('#productgroup_id').val()
            if (!productgroup_id) {
                $('a[href="#custom-tabs-product"]').trigger('click')
                $('a[href="#custom-tabs-properties"]').parent('li.nav-item').hide()
                $('a[href="#custom-tabs-prices"]').parent('li.nav-item').hide()
                return;
            }
            $('a[href="#custom-tabs-properties"]').parent('li.nav-item').show()
            $('a[href="#custom-tabs-prices"]').parent('li.nav-item').show()
            let selectedOption = $('#productgroup_id').find('option:selected');
            let propertiesFormData = selectedOption.data('value');
            let pricesFormData = selectedOption.data('prices');
            propertiesForm(propertiesFormData)
            pricesForm(pricesFormData)
        }

        function pricesForm(formData) {
            formData = JSON.stringify(formData)
            let $markup = $("#prices_form");
            $markup.formRender({formData});
            $.each(prices, function(key,value) {
                $(document).find("[name='"+ key +"']").val(value)
            });
        }

        function propertiesForm(formData) {
            formData = JSON.stringify(formData)
            let $markup = $("#properties_form");
            $markup.formRender({formData});
            console.log(properties);
            $.each(properties, function(key,value) {
                if (key != "stock")
                    $(document).find("[name='"+ key +"']").val(value)
            });
        }

        var selected = "{{ app('request')->input('id') ?? 0 }}";
        if (selected != 0)
            $("#categories").val(selected).change();

        const relatedProductsListbox = $('#related_products').bootstrapDualListbox({
            showFilterInputs: false
        })

        const searchSimilarProducts = $('#similar_products').bootstrapDualListbox({
            showFilterInputs: false
        })

        const searchReplacingProducts = $('#replacing_products').bootstrapDualListbox({
            showFilterInputs: false
        })

        $(function() {
            $.validator.setDefaults({
                submitHandler: function(form) {
                    imageorder()
                    $("#submitBTN").prop("disabled", true);
                    setTimeout(() => {
                        form.submit();
                    }, 500);
                }
            });
            $('#productForm').validate({
                rules: {
                    ean: {
                        required: function(element) {
                            return $("#reference").val() == '';
                        },
                        // required: false,
                        remote: {
                            url: '{{ route("products.check.ean") }}?product_id={{ $product->_id??'' }}',
                            type: 'get',
                            dataFilter: function(data) {
                                return (data === '1') ? true : false;
                            }
                        }
                    },
                    reference: {
                        required: function(element) {
                            return $("#ean").val() == '';
                        }
                    }
                },
                messages: {
                    ean: {
                        remote: 'This EAN number is already in use'
                    }
                },
                ignore: '',
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.col-sm-9').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });

        $("#search_related_products").keyup(function() {
            var categories = $("#categories").val();
            var search_related_products = $(this).val();
            var product_id = "{{ ($product->_id)??'' }}";
            if(search_related_products.length > 1) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('products.related') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        categories: categories,
                        search_related_products:search_related_products,
                        product_id:product_id,
                    },
                    success: function (data) {
                        $('#related_products option:not(:selected)').remove();
                        $.each(data, function(key,value) {
                            $('#related_products').append($("<option></option>").attr("value", value._id).text(value.name));
                        });
                        relatedProductsListbox.bootstrapDualListbox('refresh', true);
                    },
                    error:function(data) {}
                });
            }
        });

        $("#search_similar_products").keyup(function() {
            var categories = $("#categories").val();
            var search_related_products = $(this).val();
            var product_id = "{{ ($product->_id)??'' }}";
            if(search_related_products.length > 1) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('products.related') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        categories: categories,
                        search_related_products:search_related_products,
                        product_id:product_id,
                    },
                    success: function (data) {
                        $('#similar_products option:not(:selected)').remove();
                        $.each(data, function(key,value) {
                            $('#similar_products').append($("<option></option>").attr("value", value._id).text(value.name));
                        });
                        searchSimilarProducts.bootstrapDualListbox('refresh', true);
                    },
                    error:function(data) {}
                });
            }
        });

        $("#search_replacing_products").keyup(function() {
            var categories = $("#categories").val();
            var search_related_products = $(this).val();
            var product_id = "{{ ($product->_id)??'' }}";
            if(search_related_products.length > 1) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('products.related') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        categories: categories,
                        search_related_products:search_related_products,
                        product_id:product_id,
                    },
                    success: function (data) {
                        $('#replacing_products option:not(:selected)').remove();
                        $.each(data, function(key,value) {
                            $('#replacing_products').append($("<option></option>").attr("value", value._id).text(value.name));
                        });
                        searchReplacingProducts.bootstrapDualListbox('refresh', true);
                    },
                    error:function(data) {}
                });
            }
        });

        $(document).on('click', '.remove-file', function() {
            Swal.fire({
                title: "{{ __('messages.Are you sure?') }}",
                text: "{{ __('messages.You would not be able to revert this!') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $(this).parent(".remove-file-div").remove()
                }
            })
        });

        $(document).on('click', '.delete-location-btn', function() {
            $(this).closest(".form-group").remove();
        });
        
        function addLocation() {
            let index = $(".location_form .form-group").length + 1;
            let locationHtml = `<div class="form-group row">
                                    <div class="col-sm-4">
                                        <select class="form-control" name="location[${index}][location_id]" required>
                                            <option value="">{{ __('messages.Select location') }}</option>
                                            {!! $locationDropDown !!}
                                        </select>
                                    </div>
                                    <div class="col-sm-4">
                                        <input type="number" name="location[${index}][stock]" required class="form-control" placeholder="{{ __('messages.Stock') }}" value="">
                                    </div>
                                    <div class="col-sm-4">
                                        <a class="delete-location-btn" href="Javascript:void(0)">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </div>
                                </div>`;
            $(".location_form").append(locationHtml)
        }
        
    </script>
@endsection